Forem: James

Building a Human-in-the-Loop AI App with LangGraph and Ollama

James — Tue, 16 Sep 2025 12:48:00 +0000

Have you ever wanted to hit the pause button on an AI's reasoning process, take a closer look at what it's doing, and steer it in a better direction before it continues? That's the core idea behind a Human-in-the-Loop (HITL) system, and in this tutorial, we'll build one from scratch using LangGraph for workflow orchestration, Ollama for local AI model inference, and Python for the glue that holds it all together. This setup allows you to create interactive AI applications where humans can intervene at key points, making the system more reliable and adaptable for real-world use cases like content generation, decision-making tools, or even debugging assistants.

This guide serves as a detailed companion to my YouTube walkthrough, where I demonstrate the entire process live with code explanations and troubleshooting tips.

📺 Watch the step-by-step video here Click for Video

By following along, you'll gain hands-on experience with several key concepts: designing modular AI workflows using LangGraph's graph-based architecture, leveraging large language models (LLMs) to refine user inputs automatically, implementing pauses for human oversight to ensure quality and alignment, and generating high-quality outputs with Ollama's efficient local models. These skills are increasingly valuable as AI systems evolve to incorporate more human-AI collaboration.

🚀 What We’re Building

At its heart, we're constructing a command-line interface (CLI) Python application that transforms a basic user prompt into a polished, AI-generated response through a structured pipeline. The app starts by accepting a simple prompt from the user, then uses an LLM to enhance it for clarity and effectiveness—think of this as prompt engineering on autopilot. Next, it halts the process to allow human review, where you can approve the improved prompt or tweak it manually. Finally, it feeds the refined prompt back into the LLM to produce a comprehensive final answer.

What makes this special is LangGraph's role in modeling the workflow as a directed graph: each phase (like prompt improvement or human review) becomes a "node," and the connections between them define the flow. This graph-based approach ensures the app is flexible, easy to extend (e.g., adding more nodes for additional checks), and stateful, meaning it remembers progress across steps. We'll use Ollama to run everything locally, keeping things fast, private, and cost-free compared to cloud-based APIs. By the end, you'll have a reusable template for building HITL systems that balance AI autonomy with human control.

🛠️ Step 1 — Setup and Imports

To get started, we need to install the necessary dependencies. If you haven't already, run pip install langgraph langchain-ollama rich in your terminal. These libraries provide the building blocks: LangGraph for the graph workflow, LangChain's Ollama integration for model interactions, and Rich for enhanced console output.

Here's the foundational code with our imports:

import uuid
from typing import TypedDict, Optional

from langgraph.graph import StateGraph, START, END
from langgraph.types import interrupt, Command
from langgraph.checkpoint.memory import InMemorySaver
from langchain_core.messages import HumanMessage, SystemMessage
from langchain_ollama import ChatOllama
from rich import print

Let's break this down: uuid helps generate unique identifiers for each app session, ensuring that multiple runs don't interfere with each other—especially useful if you expand this to a multi-user setup. StateGraph is the core of LangGraph, allowing us to define nodes and edges programmatically. The interrupt and Command types enable the pausing mechanism for human input. InMemorySaver acts as a simple checkpoint system to persist state between steps, which is crucial for resuming after interruptions. LangChain's HumanMessage and SystemMessage classes structure our interactions with the LLM, while ChatOllama connects to your locally running Ollama model. Finally, rich.print jazzes up the console with colors, emojis, and formatting for a more engaging user experience.

With imports in place, initialize the LLM like so:

llm = ChatOllama(model='phi4-mini', temperature=0.7)

We're using the 'phi4-mini' model here for its balance of speed and capability on everyday hardware, but you could swap it for something like 'llama3' if you need more power. The temperature=0.7 setting introduces a bit of creativity without making outputs too unpredictable—adjust this based on your needs for determinism versus innovation.

🧩 Step 2 — Defining Application State

In LangGraph, the application's "memory" is a shared state dictionary that gets updated as it flows through the graph. This ensures every node has access to the latest data without redundant passing.

class PromptState(TypedDict):
    original_prompt: str
    improved_prompt: Optional[str]
    final_prompt: Optional[str]
    final_answer: Optional[str]
    step: str

This PromptState class tracks the evolution of the prompt and response: the original_prompt captures the user's raw input, improved_prompt holds the LLM's refined version, final_prompt is the post-human-review result, final_answer stores the ultimate output, and step is a simple tracker for debugging (e.g., knowing if we're at "prompt_improved" or "human_reviewed"). Using TypedDict with Optional fields adds type safety, helping catch errors early in development. This state design is extensible—if you wanted to add features like logging timestamps or confidence scores, you could easily expand this dictionary.

🧠 Step 3 — Improving the Prompt

The magic begins here: our first node uses the LLM to rewrite the user's prompt, making it more precise and effective. This step mimics advanced prompt engineering techniques, often leading to dramatically better results from the final AI generation.

def improve_prompt_node(state: PromptState) -> PromptState:
    print(f"🤖 Improving prompt with Ollama: {state['original_prompt']}")

    system_message = """You are a prompt engineering expert. Your goal is to take the user's original prompt and improve it for clarity, specificity, and effectiveness when used with an LLM. Make it more detailed, add context if needed, and ensure it's optimized for generating high-quality responses. Return only the improved prompt, no explanations."""

    improved_prompt = call_llm(state['original_prompt'], system_message)

    return {
        **state,
        "improved_prompt": improved_prompt,
        "step": "prompt_improved"
    }

In this function, we craft a system message that instructs the LLM on how to refine the prompt—emphasizing clarity and optimization without adding fluff. The call_llm function (which you'll need to define as a helper to invoke llm.invoke with the messages) handles the actual model call. For example, if the user inputs "Tell me about machine learning," the LLM might output something like "Provide a comprehensive overview of machine learning, including its history, key algorithms, real-world applications, and future trends." This automated improvement reduces user effort and boosts output quality.

✋ Step 4 — Human-in-the-Loop Review

This node introduces the "human" element, pausing the graph to solicit feedback. It's what makes the app truly interactive and prevents AI from running unchecked.

def human_review_node(state: PromptState) -> PromptState:
    print("👤 Requesting human review...")

    human_response = interrupt({
        "task": "Please review and edit the improved prompt if needed",
        "original_prompt": state["original_prompt"],
        "improved_prompt": state["improved_prompt"]
    })

    # Either accept or edit the improved prompt
    final_prompt = human_response.get("edited_prompt", state["improved_prompt"])

    return {
        **state,
        "final_prompt": final_prompt,
        "step": "human_reviewed"
    }

When executed, the app displays the improved prompt in the console and waits for input: pressing Enter accepts it as-is, or you can type modifications. LangGraph's interrupt mechanism halts execution here, saving the state so you can resume later. This is ideal for scenarios where AI might hallucinate or misinterpret, allowing human expertise to refine the direction—think content moderation or personalized advice systems.

📝 Step 5 — Final Answer Generation

With the prompt finalized, this node generates the comprehensive response using Ollama.

def answer_prompt_node(state: PromptState) -> PromptState:
    print(f"🤖 Generating final answer with Ollama for: {state['final_prompt']}")

    system_message = """You are a helpful AI assistant. Provide a comprehensive answer to the user's prompt, drawing on accurate knowledge and clear explanations. Structure your response logically with sections if appropriate."""

    final_answer = call_llm(state['final_prompt'], system_message)

    return {
        **state,
        "final_answer": final_answer,
        "step": "completed"
    }

The system message guides the LLM toward structured, informative outputs. For instance, it might turn a refined prompt into a detailed essay with headings, examples, and references, ensuring the final answer is polished and user-friendly.

🔗 Step 6 — Building the Graph

Now we assemble the pieces into a cohesive workflow graph.

def create_app():
    builder = StateGraph(PromptState)

    builder.add_node("improve_prompt", improve_prompt_node)
    builder.add_node("human_review", human_review_node)
    builder.add_node("answer_prompt", answer_prompt_node)

    builder.add_edge(START, "improve_prompt")
    builder.add_edge("improve_prompt", "human_review")
    builder.add_edge("human_review", "answer_prompt")
    builder.add_edge("answer_prompt", END)

    return builder.compile(checkpointer=InMemorySaver())

This creates a linear flow from start to end, but LangGraph supports branches, loops, or conditionals if you want to add complexity (e.g., rerouting based on human feedback). The in-memory checkpointer ensures state persistence, making interruptions seamless.

💻 Step 7 — Running It as a CLI

Tie it all together in a main function for easy execution.

def main():
    app = create_app()
    config = {"configurable": {"thread_id": str(uuid.uuid4())}}

    user_prompt = input("Enter your prompt: ").strip() or "Tell me about machine learning"

    initial_state = {"original_prompt": user_prompt, "step": "starting"}

    print(f"🚀 Processing with Ollama: {user_prompt}")
    result = app.invoke(initial_state, config=config)

    if "__interrupt__" in result:
        # Logic to display improved prompt and collect human input...
        # For example, print the details and use input() to get edits
        human_response = {"edited_prompt": input("Edit prompt (or Enter to approve): ")}  # Simplified example
        final_result = app.invoke(Command(resume=human_response), config=config)

        print(f"Final prompt: {final_result['final_prompt']}")
        print(f"🎯 Answer:\n{final_result['final_answer']}")

This loop handles the full cycle, including resuming after the human review interrupt. Run it with python your_script.py, input a prompt, and watch the HITL magic unfold.

🎯 Wrapping Up

You've now constructed a robust Human-in-the-Loop AI application that automates prompt refinement, incorporates human oversight for accuracy, and delivers refined answers via Ollama—all orchestrated by LangGraph's powerful workflow engine. This approach combines the efficiency of AI with the nuance of human judgment, making it perfect for applications where reliability matters, such as educational tools, creative writing aids, or enterprise decision support.

To see a live demo and dive deeper into customizations, check out the companion YouTube video:

👉 Watch here Link to Video

Interrupts and Commands in LangGraph: Building Human-in-the-Loop Workflows

James — Tue, 09 Sep 2025 15:00:00 +0000

Welcome to this tutorial on using interrupts and commands in LangGraph to create interactive, human-in-the-loop workflows. If you're new to LangGraph or want a visual walkthrough, check out the accompanying YouTube video first: Watch the Video.

In this post, we'll explore how to build a simple workflow that pauses for user approval and dynamically routes based on that decision. This is perfect for scenarios where you need human oversight, like approving deployments or reviewing AI-generated decisions. We'll break it down step by step, with code blocks you can copy and follow along in your own Jupyter notebook or Python environment. By the end, you'll understand how to implement interrupts for pausing execution and commands for dynamic routing.

LangGraph is a powerful library for building stateful, multi-actor applications with LLMs. Here, we'll focus on its interrupt and command features, which leverage checkpointing to save and restore state seamlessly.

Key Concepts

Before diving into the code, let's cover the essentials. Interrupts allow you to pause graph execution and wait for human input, while commands enable dynamic control over the graph's flow. Checkpointing is crucial because it persists the state during these pauses.

The interrupt feature simplifies human-in-the-loop agents by using LangGraph's persistence layer. It lets you approve or reject steps, such as LLM decisions or function calls, and direct the graph accordingly. You can also review and edit the graph state, like updating responses or documents, or approve tool calls for oversight.

Commands, on the other hand, provide expressive communication between nodes. They support dynamic routing without predefined edges, handoffs in multi-agent setups, and enhanced control flow by updating state and dictating paths.

Workflow Overview

Our example workflow presents a task for approval, pauses for a user decision, and then routes to either completion or cancellation. This demonstrates a practical human-in-the-loop process: start with a task like "Deploy new feature to production," interrupt for approval, and proceed based on whether the user says "approve" or "reject."

Now, let's build it. You'll need LangGraph installed—run pip install langgraph if you haven't already. We'll also use some typing utilities and IPython for display, but the core is pure Python.

State Definition

The foundation of any LangGraph workflow is the state. This is a shared dictionary that all nodes can access and modify. For our workflow, it tracks the task, the user's decision, and the final status.

from typing_extensions import TypedDict

class WorkflowState(TypedDict):
    task: str
    # The user's decision ('approve' or 'reject') will be stored here after the interrupt.
    user_decision: str
    # The final status of our workflow.
    status: str

This TypedDict ensures type safety as we pass state around.

Node Functions

Nodes are the building blocks—functions that perform actions and update the state. We have four: one for getting approval (with interrupt), one for routing (with command), and two terminals for completing or canceling.

The get_approval node pauses the graph, prints the task, and waits for input. The router decides the next step dynamically. The others just finalize the status.

from langgraph.types import interrupt, Command

def get_approval(state: WorkflowState):
    """
    This node uses 'interrupt' to pause the graph.
    It waits for a human to provide a decision before the graph can proceed.
    """
    print('--- ⏸️ PAUSING FOR APPROVAL ---')
    print(f"Task: '{state['task']}'")
    # The 'interrupt' function stops execution here. The string passed to it
    # is a message to the user about what input is expected.
    # When the graph is resumed, the value provided will be the return value of this function.
    decision = interrupt("Please enter 'approve' or 'reject' to continue.")
    print(f"--- ▶️ RESUMING WITH DECISION: '{decision}' ---")
    return {'user_decision': decision}

def router(state: WorkflowState) -> Command:
    """
    This node uses 'Command' to dynamically route the graph's execution.
    Based on the user's decision, it decides which node to run next.
    """
    print('--- 🔀 ROUTING ---')
    decision = state.get('user_decision', '').strip().lower()

    if decision == 'approve':
        print("Decision: ✅ Approved -> Routing to 'complete_task'")
        # Command(goto=...) tells LangGraph which node to execute next.
        return Command(goto='complete_task')
    else:
        print("Decision: ❌ Rejected -> Routing to 'cancel_task'")
        return Command(goto='cancel_task')

def complete_task(state: WorkflowState):
    """A final node for when the task is approved."""
    print('--- 🎉 TASK COMPLETED ---')
    return {'status': 'done'}

def cancel_task(state: WorkflowState):
    """A final node for when the task is rejected."""
    print('--- 🗑️ TASK CANCELED ---')
    return {'status': 'canceled'}

Copy these into your script. Notice how interrupt halts execution, and Command(goto=...) handles routing without fixed edges.

Graph Construction and Visualization

Now, construct the graph. We use a StateGraph builder, add nodes, and define edges. Importantly, we enable checkpointing with an in-memory saver for interrupts to work. The router doesn't need explicit edges—commands handle that at runtime.

For visualization, we'll generate a diagram, but remember, dynamic parts won't show statically.

from langgraph.graph import StateGraph, START, END
from langgraph.checkpoint.memory import InMemorySaver
from IPython.display import Image, display

# Initialize an in-memory checkpointer. This is required for 'interrupt' to work,
# as it needs to save the graph's state when it pauses.
memory = InMemorySaver()

# Create the graph builder.
builder = StateGraph(WorkflowState)

# Add the functions as nodes to the graph.
builder.add_node('get_approval', get_approval)
builder.add_node('router', router)
builder.add_node('complete_task', complete_task)
builder.add_node('cancel_task', cancel_task)

# Define the graph's structure (its edges).
builder.add_edge(START, 'get_approval')
builder.add_edge('get_approval', 'router')

# NOTE: We do NOT need to add conditional edges from the 'router' node.
# The 'Command' object returned by the router handles the routing dynamically.

builder.add_edge('complete_task', END)
builder.add_edge('cancel_task', END)

# Compile the graph, enabling the checkpointer.
graph = builder.compile(checkpointer=memory)

# You can visualize the graph structure.
# Notice the router doesn't have explicit paths leading out of it.
try:
    display(Image(graph.get_graph().draw_mermaid_png()))
except Exception as e:
    print(f'Could not display graph: {e}')

Run this to build your graph. If you're in Jupyter, you'll see the diagram; otherwise, it might just print an error if dependencies are missing.

Workflow Execution

Finally, let's run it. We'll simulate two scenarios: approval and rejection. Each uses a unique thread ID to track state independently. We stream events to see progress, pause at the interrupt, and resume with a decision.

First, the approval run:

# --- Run 1: Approve the task ---
print('\n' + '=' * 50 + '\n🚀 STARTING RUN 1: APPROVAL\n' + '=' * 50)

# A 'thread_id' is needed to track the state of a single run.
thread = {'configurable': {'thread_id': 'run-1'}}
initial_task = {'task': 'Deploy new feature to production'}

# Start the graph. It will run until it hits the 'interrupt' in the 'get_approval' node.
# We use 'stream' to see the events as they happen.
for event in graph.stream(initial_task, thread, stream_mode='values', debug=True):
    print(f'\n[STREAM EVENT]:\n{event}\n')

# At this point, the graph is paused. Let's resume it with the user's decision.
# We send a Command object with the 'resume' payload.
print("\n... Resuming Run 1 with 'approve' ...\n")

for event in graph.stream(Command(resume='approve'), thread, stream_mode='values', debug=True):
    print(f'\n[STREAM EVENT]:\n{event}\n')

This should pause, wait for "approve," then complete the task.

Now, the rejection run:

# --- Run 2: Reject the task ---
print('\n' + '=' * 50 + '\n🚀 STARTING RUN 2: REJECTION\n' + '=' * 50)

# Use a new thread_id for the second, independent run.
thread2 = {'configurable': {'thread_id': 'run-2'}}

# Start the second run.
for event in graph.stream(initial_task, thread2, stream_mode='values', debug=True):
    print(f'\n[STREAM EVENT]:\n{event}\n')

# Resume the second run, but this time with a 'reject' decision.
print("\n... Resuming Run 2 with 'reject' ...\n")
for event in graph.stream(Command(resume='reject'), thread2, stream_mode='values', debug=True):
    print(f'\n[STREAM EVENT]:\n{event}\n')

Here, it routes to cancellation.

Conclusion

You've now built a human-in-the-loop workflow with LangGraph! Interrupts handle pauses for input, commands enable dynamic routing, and checkpointing keeps everything stateful. Experiment by modifying the task or adding more nodes. For more advanced uses, check LangGraph's docs. If this helped, like the video and share your thoughts in the comments!

Building a News and Stock Assistant with LangGraph and Chainlit

James — Mon, 01 Sep 2025 11:55:00 +0000

In this blog post, I'll walk you through creating a helpful news and stock assistant powered by LangGraph, Chainlit, and some clever tools. This app acts like an upbeat assistant that can fetch headlines, search recent news, perform calculations, and even pull stock data via Yahoo Finance integration.

This post is a companion to my YouTube video where I demo and code the app. Check it out here: Watch the YouTube Video. The video shows the app running live, handling queries like stock prices and news summaries. Now, let's dive into the code step by step. I'll break it down with code blocks so you can follow along, copy-paste, and build it yourself.

Setting Up the Environment and Imports

First things first: we need to import all the necessary libraries and set up our environment. This includes tools for news fetching (via Google News and yfinance), LangChain components for the AI agent, and Chainlit for the chat UI. Don't forget to load your environment variables for API keys.

from typing import Literal, List, Dict
import chainlit as cl
from langchain_openai import ChatOpenAI
from langchain_ollama import ChatOllama
from langchain_core.tools import tool
from langchain_core.messages import BaseMessage, HumanMessage, SystemMessage
from langgraph.prebuilt import ToolNode
from langgraph.graph import StateGraph, START, END
from langgraph.graph.message import MessagesState
from dotenv import load_dotenv
import os
from pygooglenews import GoogleNews
import yfinance
import pandas as pd
import json

import asyncio
from mcp import ClientSession, StdioServerParameters
from mcp.client.stdio import stdio_client
from langchain_mcp_adapters.tools import load_mcp_tools

Load your .env file with keys like OpenRouter API key. This setup ensures everything runs smoothly.

Configuration Basics

Next, we configure the model and MCP for Yahoo Finance. I'm using Llama 3.2 here, but you can swap in other models like GPT variants. The MCP server runs locally as a subprocess for stock data tools.

load_dotenv()
OLLAMA_BASE_URL = 'http://localhost:11434'
openrouter_api_key = os.getenv('OPENROUTER_API_KEY')
MODEL_NAME = 'llama3.2'  # Or try 'openai/gpt-oss-120b'

# Configure the Yahoo Finance MCP server
server_params = StdioServerParameters(
    command='uvx',
    args=['yfmcp@latest'],
    env=None,
)

This block sets up the base URL for local models and prepares the MCP server. If you're following along, make sure you have uvx installed for running the MCP module.

Defining Local Tools

The magic happens with tools. These are functions the AI can call to fetch real data. We have ones for topic headlines, recent news searches, and a simple calculator. Each is decorated with @tool from LangChain.

@tool
def get_topic_headlines(topic: str) -> str:
    """Get news headlines for a specific topic.

    Accepted topics: WORLD, NATION, BUSINESS, TECHNOLOGY, ENTERTAINMENT, SCIENCE, SPORTS, HEALTH
    """
    valid_topics = ['WORLD', 'NATION', 'BUSINESS', 'TECHNOLOGY', 'ENTERTAINMENT', 'SCIENCE', 'SPORTS', 'HEALTH']
    topic_upper = topic.upper()

    if topic_upper not in valid_topics:
        return f'Invalid topic. Please use one of: {", ".join(valid_topics)}'

    gn = GoogleNews(lang='en', country='US')
    headlines = gn.topic_headlines(topic_upper)
    articles = []
    articles.extend(f'• {entry.title}\n  {entry.link}' for entry in headlines['entries'][:10])
    return f'Headlines for {topic}:\n\n' + '\n\n'.join(articles)

@tool
def search_recent_news(query: str, hours: int = 1) -> str:
    """Search for recent news articles within the last specified hours.

    Args:
        query: Search terms
        hours: Number of hours to look back (1-24)
    """
    if hours < 1 or hours > 24:
        return 'Hours must be between 1 and 24'

    gn = GoogleNews(lang='en', country='US')
    search_results = gn.search(query, when=f'{hours}h')

    if not search_results['entries']:
        return f'No recent news found for query: {query} in the last {hours} hours'

    articles = []
    for entry in search_results['entries'][:10]:
        published = getattr(entry, 'published', 'Unknown date')
        articles.append(f'• {entry.title}\n  Published: {published}\n  {entry.link}')

    return f"Recent news for '{query}' (last {hours} hours):\n\n" + '\n\n'.join(articles)

@tool
def calculator(expression: str) -> str:
    """Calculate a mathematical expression using a safe eval. (e.g., 10 * 5)"""
    try:
        allowed_chars = set('0123456789+-*/.(). ')
        if not expression or any(c not in allowed_chars for c in expression):
            return 'Invalid expression'
        result = eval(expression)
        return f'{expression} = {result}'
    except Exception as e:
        return f'Calculation error: {e}'

These tools are local and handle news via GoogleNews API. The calculator is safely restricted to prevent code injection. Test them out in your script to see headlines for "TECHNOLOGY" or calculate "10*5".

LLM and Prompt Setup

Now, we define the LLM and the system prompt. This gives the assistant its personality—upbeat and engaging, like "AI Jeff."

local_tools = [get_topic_headlines, search_recent_news, calculator]

SYSTEM_PROMPT = """You are a helpful news and stock assistant with the enthusiastic and warm personality of AI Jeff.
Respond to user queries about news and current events in Al Jeff's characteristic style - upbeat, friendly,
and engaging. Use tools when needed to fetch current news information, and stock market data then present the results in your distinctive voice."""

def create_llm(model_name: str, temperature: float = 0.1) -> ChatOpenAI:
    llm = ChatOpenAI(
        model=MODEL_NAME,
        base_url=os.getenv('OPENROUTER_BASE_URL', 'https://openrouter.ai/api/v1'),
        api_key=openrouter_api_key,
        temperature=0,
    )
    return llm

The prompt ensures responses are fun and tool-aware. We're using OpenRouter for the LLM, but you could switch to Ollama for local runs.

Building the LangGraph Agent

LangGraph handles the agent's state and flow. It decides when to call tools or end the conversation.

def should_continue(state: MessagesState) -> Literal['tools', '__end__']:
    last_message = state['messages'][-1]
    tool_call_count = sum(bool(hasattr(msg, 'tool_calls') and msg.tool_calls) for msg in state['messages'])
    return 'tools' if last_message.tool_calls and tool_call_count < 5 else '__end__'

def build_state_graph_with(llm, tools) -> StateGraph:
    builder = StateGraph(MessagesState)

    def call_llm_node(state: MessagesState) -> Dict[str, List[BaseMessage]]:
        messages = [SystemMessage(content=SYSTEM_PROMPT)] + state['messages']
        response = llm.bind_tools(tools).invoke(messages)
        return {'messages': [response]}

    tool_node = ToolNode(tools=tools)

    builder.add_node('agent', call_llm_node)
    builder.add_node('tools', tool_node)
    builder.add_edge(START, 'agent')
    builder.add_conditional_edges('agent', should_continue)
    builder.add_edge('tools', 'agent')

    return builder.compile(checkpointer=None)

This graph limits tool calls to avoid loops and integrates the LLM with tools seamlessly.

Chainlit UI and Message Handling

Finally, the Chainlit part sets up the chat interface with starters and handles messages asynchronously, integrating MCP tools for stocks.

@cl.set_starters
async def set_starters():
    return [
        cl.Starter(
            label='Get Tesla stock price?',
            message='What is the current stock price of TSLA?',
            icon='https://cdn.simpleicons.org/tesla',
        ),
        cl.Starter(
            label='Summarize and analysis recent Apple News?',
            message='Can you provide a summary and analysis of the latest news articles about Apple?',
            icon='https://cdn.simpleicons.org/apple',
        ),
        cl.Starter(
            label='Summarize Tech Headlines',
            message='Can you provide a summary of the latest headlines in technology?',
            icon='https://api.iconify.design/eos-icons/ai.svg',
            command='code',
        ),
        cl.Starter(
            label='Summarize Recent News?',
            message='Can you provide a summary of the latest news articles?',
            icon='https://attic.sh/si2powwhauur4mlts7mqn2e3syz3',
        ),
        cl.Starter(
            label='Available tools?',
            message='Can you provide a list of available tools and their descriptions?',
            icon='https://attic.sh/dhbw2bdxwayue0zgof33fxk8jkn1',
        ),
        cl.Starter(
            label='Calculate 10 shares of AAPL',
            message='get the current price of AAPL and then calculate how much 10 shares of AAPL would cost at the current price.',
            icon='https://cdn.simpleicons.org/apple',
        ),
        cl.Starter(
            label='What is 10 * 5?',
            message='Calculate 10 * 5',
            icon='https://attic.sh/8v2lqhwii3ape4z4l23vg8s3rez9',
        ),
    ]

@cl.on_message
async def on_message(msg: cl.Message):
    thread_id = cl.context.session.id
    history = [HumanMessage(content=msg.content)]
    reply = cl.Message(content='')

    try:
        async with stdio_client(server_params) as (read, write):
            async with ClientSession(read, write) as session:
                await session.initialize()
                mcp_tools = await load_mcp_tools(session)
                tools = local_tools + mcp_tools
                llm = create_llm(MODEL_NAME)
                agent_graph = build_state_graph_with(llm, tools)

                async for chunk in agent_graph.astream(
                    {'messages': history},
                    config={'configurable': {'thread_id': thread_id}, 'recursion_limit': 50},
                ):
                    # ... (streaming logic for agent messages, tool calls, and results)
                    # Full streaming code omitted; it handles real-time UI updates
    except Exception as e:
        await reply.stream_token(f'Error: {str(e)}')

    await reply.send()

This is where the app comes alive. Run it with chainlit run your_script.py and chat away! Starters provide quick queries like summarizing tech headlines.

Wrapping It Up

There you have it—a complete news and stock assistant built with modern AI tools. It's perfect for staying updated on markets and events without leaving your chat window. If you build this and tweak it, let me know in the YouTube comments! Again, don't forget to watch the demo video: https://youtu.be/IXCHj5TGv8U. Happy coding! 🚀

Harnessing MCP Servers with LangChain and LangGraph: A Comprehensive Guide

James — Mon, 25 Aug 2025 10:00:00 +0000

Welcome back Today, we're diving deep into the fascinating world of MCP servers and how they integrate seamlessly with LangChain and LangGraph. If you're excited about building advanced AI agents with LangGraph, this tutorial will walk you through the foundational concepts and a step-by-step implementation. We'll break down the provided code into digestible sections, explain each part, and show you how to run it yourself.

Before we get started, check out the accompanying YouTube video for a visual walkthrough. Click below to watch and follow along:

Now, let's jump in!

Introduction to MCP Servers

MCP servers provide a powerful way to build dynamic, interactive systems. By combining them with LangChain (a framework for building applications with large language models) and LangGraph (an extension for creating agentic workflows), you can develop complex AI applications that handle tasks like calculations, data fetching, and more. This setup is ideal for scenarios where you need efficient, modular workflows—think chatbots, automated assistants, or data processing pipelines.

In this tutorial, we'll build a "Simple Agent" that uses local tools (like a math calculator) and remote tools via MCP servers. The agent will process queries, decide on actions, and clean up resources neatly. We'll use Python, asyncio for asynchronous operations, and libraries like LangChain and LangGraph.

Setting Up the Initial State and Calculator Tool

We start by defining the agent's state and a basic tool. The state is a simple TypedDict that holds a list of messages, which accumulates as the conversation progresses. We use LangGraph's add_messages to append new messages safely.

Here's the code for the agent state:

from typing import TypedDict, Annotated, List
from langgraph.graph import add_messages
from langchain_core.messages import BaseMessage

class AgentState(TypedDict):
    """State for the agent workflow."""
    # The list of messages accumulates over time
    messages: Annotated[List[BaseMessage], add_messages]

Next, we create a local tool for calculations. This uses Python's eval but with safeguards: we whitelist allowed characters to prevent code injection, and we catch exceptions for invalid inputs.

from langchain_core.tools import tool

@tool
def calculate(expression: str) -> str:
    """Safely calculate a mathematical expression."""
    try:
        # Use a whitelist to prevent arbitrary code execution
        allowed_chars = set('0123456789+-*/.(). ')
        if all(c in allowed_chars for c in expression):
            result = eval(expression)
            return f'{expression} = {result}'
        else:
            return 'Invalid expression'
    except Exception as e:
        return f'Calculation error: {e}'

This tool ensures we can dynamically evaluate math expressions like "15% of 96" without risking security issues.

Creating the Simple Agent Class

The core of our setup is the SimpleAgent class. It manages tools, the LLM (using OpenAI's GPT-4o), the workflow graph, and MCP contexts. We initialize everything in the setup method, which loads local tools and attempts to connect to an MCP server for remote tools.

import asyncio
from langchain_openai import ChatOpenAI
from langchain_mcp_adapters.tools import load_mcp_tools
from mcp import ClientSession, StdioServerParameters
from mcp.client.stdio import stdio_client

class SimpleAgent:
    def __init__(self):
        self.tools = []
        self.llm = None
        self.workflow = None
        self.mcp_contexts = []  # Store contexts for later cleanup

    async def setup(self):
        """Setup tools and compile the agent workflow."""
        # Define local tools available to the agent
        local_tools = [calculate]

        # Attempt to add remote tools via MCP
        try:
            print('🔧 Loading MCP fetch tool...')
            # Configure the MCP server to run as a Python module subprocess
            server_params = StdioServerParameters(command='python', args=['-m', 'mcp_server_fetch'])

            # Establish a connection to the MCP server
            stdio_context = stdio_client(server_params)
            read, write = await stdio_context.__aenter__()
            self.mcp_contexts.append(stdio_context)

            # Create a client session for communication
            session_context = ClientSession(read, write)
            session = await session_context.__aenter__()
            self.mcp_contexts.append(session_context)

            # Initialize the session and load remote tools
            await session.initialize()
            mcp_tools = await load_mcp_tools(session)
            print(f'✅ MCP tools: {[t.name for t in mcp_tools]}')

            self.tools = local_tools + mcp_tools
        except Exception as e:
            # Fall back to using only local tools if MCP connection fails
            print(f'⚠️ MCP failed: {e}. Using local tools only.')
            self.tools = local_tools

        # Configure the LLM and grant it access to the available tools
        self.llm = ChatOpenAI(model='gpt-4o', temperature=0).bind_tools(self.tools)

If the MCP connection fails, we gracefully fall back to local tools. This class also tracks MCP contexts for cleanup later.

Building the Graph Structure

The graph is the heart of LangGraph—it's a state machine that defines nodes (like the agent and tools) and edges (conditional flows). We add nodes for the agent (which decides actions via the LLM) and tools (which execute them). Conditional edges check if more tools are needed or if we can end.

from langgraph.graph import StateGraph, END

# Inside SimpleAgent class...

        # Define the agent's graph structure
        workflow = StateGraph(AgentState)
        workflow.add_node('agent', self.agent_node)
        workflow.add_node('tools', self.tools_node)
        workflow.set_entry_point('agent')

        # Define the control flow logic
        workflow.add_conditional_edges('agent', self.should_continue, {'continue': 'tools', 'end': END})
        workflow.add_edge('tools', 'agent')

        # Compile the graph into a runnable workflow
        self.workflow = workflow.compile()

    async def agent_node(self, state: AgentState) -> AgentState:
        """Invoke the LLM to decide the next action."""
        response = await self.llm.ainvoke(state['messages'])
        return {'messages': [response]}

    async def tools_node(self, state: AgentState) -> AgentState:
        """Execute the tools requested by the agent."""
        last_message = state['messages'][-1]
        tool_messages = []

        # Iterate through all tool calls made by the LLM
        for tool_call in last_message.tool_calls:
            tool_name = tool_call['name']
            tool_args = tool_call['args']
            print(f'🔧 {tool_name}({tool_args})')

            # Find the corresponding tool implementation
            tool = next((t for t in self.tools if t.name == tool_name), None)
            if tool:
                try:
                    # Invoke the tool and capture its result
                    result = await tool.ainvoke(tool_args)
                    tool_messages.append(ToolMessage(content=str(result), tool_call_id=tool_call['id']))
                    print(f'✅ {str(result)[:100]}...' if len(str(result)) > 100 else f'✅ {result}')
                except Exception as e:
                    # Handle any errors during tool execution
                    error_msg = f'Error: {e}'
                    tool_messages.append(ToolMessage(content=error_msg, tool_call_id=tool_call['id']))
                    print(f'❌ {error_msg}')

        return {'messages': tool_messages}

    def should_continue(self, state: AgentState) -> str:
        """Determine whether to continue with another tool call or end."""
        last_message = state['messages'][-1]
        # Continue if the agent requested a tool, otherwise end
        return 'continue' if hasattr(last_message, 'tool_calls') and last_message.tool_calls else 'end'

This structure allows the agent to loop between thinking (agent node) and acting (tools node) until the query is resolved.

Implementing the Ask Method and Cleanup

The ask method lets users query the agent easily, invoking the graph asynchronously. We also add a cleanup method to close MCP contexts in reverse order, ensuring no resource leaks.

# Inside SimpleAgent class...

    async def ask(self, question: str):
        """Present a question to the agent and get a final answer."""
        print(f'\n🤖 Question: {question}')
        # Invoke the compiled workflow with the user's message
        initial_state = {'messages': [HumanMessage(content=question)]}
        result = await self.workflow.ainvoke(initial_state)

        # Extract the final response from the agent
        answer = result['messages'][-1].content

        print(f'✨ Answer: {answer}\n')
        return answer

    async def cleanup(self):
        """Clean up any active MCP resources."""
        # Close contexts in reverse order of creation
        for context in reversed(self.mcp_contexts):
            try:
                await context.__aexit__(None, None, None)
            except Exception:
                pass  # Ignore errors during cleanup

Running the Agent and Final Thoughts

To run the agent, we create an instance, set it up, ask questions, and clean up. The main function demonstrates this with example queries.

from langchain_core.messages import HumanMessage, ToolMessage

async def main():
    """Initialize and run the agent."""
    agent = SimpleAgent()

    # Use a try/finally block to ensure resources are always cleaned up
    try:
        await agent.setup()

        # Ask the agent a series of questions
        await agent.ask("What's 15% of 96?")

        await agent.ask('fetch the website https://langchain-ai.github.io/langgraph/ and summarize it')

    except Exception as e:
        print(f'❌ Error: {e}')
    finally:
        await agent.cleanup()
if __name__ == '__main__':
    asyncio.run(main())

When you run this in your terminal, you'll see the agent process queries: it calculates math using the local tool and fetches/summarizes websites via MCP if available. It's versatile for tasks from simple arithmetic to web data retrieval.

Conclusion and Best Practices

Integrating MCP servers with LangGraph and LangChain is about more than just tech—it's about creating adaptable, efficient systems. Stick to native methods for simplicity, but leverage MCP for remote capabilities. Always handle errors gracefully, clean up resources, and test asynchronously.

We hope this tutorial empowers your AI projects! Feel free to reach out with questions, and don't forget to explore more with Just Code It. Happy coding!

Mastering MCP Servers with LangChain and LangGraph: A Beginner's Guide

James — Tue, 19 Aug 2025 10:40:00 +0000

Mastering MCP Servers with LangChain and LangGraph: A Beginner's Guide

Welcome to this hands-on tutorial on integrating MCP servers with LangChain and LangGraph! If you're new to these technologies, don't worry – we'll break everything down step by step. MCP (which stands for something like "Modular Compute Protocol" in this context, though it's not explicitly defined) servers are powerful for building workflows that let language models interact with custom tools. We'll use LangChain to create agents that can call these tools and even touch on LangGraph for more advanced setups. By the end, you'll have a working example of a math-focused MCP server, plus tips on using pre-built ones.

For a visual walkthrough, check out the accompanying YouTube video: Mastering MCP Servers with LangChain and LangGraph. It complements this guide with live demos and explanations – click to watch and follow along!

This guide is based on real code you can copy and run. We'll cover setup, tool creation, running the server, and integrating it all with a LangChain agent. You'll need Python installed, along with packages like langchain, langgraph, langchain-openai (or alternatives like langchain-ollama), and mcp. Install them via pip, for example: pip install mcp langchain langgraph langchain-openai langchain-ollama langchain-community.

Introduction to MCP Servers

MCP servers act as backends that expose tools for language models to use, making it easier to build intelligent agents. They're especially useful in programming environments where you need to handle tasks like calculations, data fetching, or custom logic. In this tutorial, we'll work with two key files: a custom MCP server script (math_server.py) for basic math operations, and a main workflow script that connects to it, adds more tools, and runs a LangChain agent.

Think of MCP servers as modular plugins – you define tools with descriptions so the language model (LM) knows when to use them. We'll start with a simple custom server called "Math Server" and later explore pre-made options for efficiency.

Setting Up a Simple Math Server

Let's kick things off by creating our custom Math MCP Server. This server will handle basic arithmetic like addition, subtraction, multiplication, division, exponentiation, and square roots. We'll use the FastMCP class from the mcp package, which you can install with pip install mcp.

Create a file called math_server.py and add the following code. This script initializes the server and defines the tools as decorated functions.

"""
Math MCP Server - provides basic arithmetic operations
Run this as: python math_server.py
"""

from mcp.server.fastmcp import FastMCP

############################ Server Initialization ############################
# Create MCP server instance
mcp = FastMCP("Math Server")

############################## Tool Definitions ##############################
@mcp.tool()  # Register the function as a callable tool
def add(a: int, b: int) -> int:
    """Add two numbers together."""
    return a + b

@mcp.tool()
def subtract(a: int, b: int) -> int:
    """Subtract second number from first number."""
    return a - b

@mcp.tool()
def multiply(a: int, b: int) -> int:
    """Multiply two numbers together."""
    return a * b

@mcp.tool()
def divide(a: float, b: float) -> float:
    """Divide first number by second number."""
    # Prevent division by zero
    if b == 0:
        raise ValueError("Cannot divide by zero")
    return a / b

@mcp.tool()
def power(base: float, exponent: float) -> float:
    """Raise base to the power of exponent."""
    return base ** exponent

@mcp.tool()
def square_root(number: float) -> float:
    """Calculate square root of a number."""
    # Prevent taking the square root of a negative number
    if number < 0:
        raise ValueError("Cannot calculate square root of negative number")
    return number ** 0.5

############################## Server Execution ##############################
if __name__ == "__main__":
    print("🧮 Starting Math MCP Server...")
    mcp.run(transport='stdio')  # Use standard I/O for communication

To run this server, simply execute python math_server.py in your terminal. It starts a process that listens for connections via standard input/output (stdio). The tools are now ready – each has a description that helps the LM decide when to call them, like "Add two numbers together" for the add function.

In the code, notice how we handle edge cases, such as preventing division by zero or square roots of negative numbers. This makes the server robust for real-world use.

Creating and Adding Tools

With the Math Server set up, let's integrate it into a larger workflow. We'll create a main script that connects to the server, loads its tools, and adds some custom local tools. These custom tools will include getting the current time and calculating percentages, which aren't part of the math server but enhance our agent's capabilities.

We'll also combine these with LangChain-compatible tools. The key here is using langchain_mcp_adapters to bridge MCP tools into LangChain format.

Here's the main script (save it as something like main.py). It uses asyncio for asynchronous operations, starts the MCP server as a subprocess, and sets up a client session.

import asyncio
from mcp import ClientSession, StdioServerParameters
from mcp.client.stdio import stdio_client
from langchain_mcp_adapters.tools import load_mcp_tools
from langgraph.prebuilt import create_react_agent
from langchain_openai import ChatOpenAI  # Or use another LLM like ChatGoogleGenerativeAI
from langchain_ollama import ChatOllama
from langchain_core.tools import tool
from langchain_community.tools import DuckDuckGoSearchRun
import datetime
from langchain_mcp_adapters.client import MultiServerMCPClient

################################ Configure MCP Server ################################
# Define how to start the external MCP server process
server_params = StdioServerParameters(
    command='python',
    args=['math_server.py'],  # Path to the server script
    env=None,
)
# Example for installing the MCP server fetch tool: pip install mcp-server-fetch
# server_params = StdioServerParameters(
#     command='python',
#     args=['-m', 'mcp_server_fetch'],
#     env=None,
# )
################################ Define Custom Local Tools ################################
@tool
def get_current_time() -> str:
    """Get the current date and time."""
    return datetime.datetime.now().strftime('%Y-%m-%d %H:%M:%S')

@tool
def calculate_percentage(value: float, percentage: float) -> float:
    """Calculate what percentage of a value is.
    Args:
        value: The base value
        percentage: The percentage to calculate (e.g., 20 for 20%)
    """
    return (value * percentage) / 100

################################ Main Agent Logic ################################
async def main():
    # Start the MCP server as a subprocess
    async with stdio_client(server_params) as (read, write):
        # Establish a client session with the running server
        async with ClientSession(read, write) as session:
            await session.initialize()  # Finalize the connection and handshake
            # Load tools exposed by the remote MCP server
            mcp_tools = await load_mcp_tools(session)
            print('MCP tools:', [tool.name for tool in mcp_tools])
            # Define additional tools available in this local script
            custom_tools = [
                get_current_time,
                calculate_percentage,
            ]
            # Combine remote and local tools into a single list for the agent
            all_tools = mcp_tools + custom_tools
            print('All available tools:', [tool.name for tool in all_tools])
            # Configure the Large Language Model
            llm = ChatOpenAI(model='gpt-4o', temperature=0)
            # llm = ChatOllama(model='llama3.2', temperature=0)  # Or use a local Ollama model
            # Create a ReAct agent that can use the combined toolset
            agent = create_react_agent(llm, all_tools)
            # Send a complex, multi-tool query to the agent
            response = await agent.ainvoke({
                'messages': [
                    {
                        'role': 'user',
                        'content': "What's the current time? Also calculate (3 + 5) * 12 and then find 15% of that result.",
                    }
                ]
            })
            # Example query for the web fetch tool
            # response = await agent.ainvoke({
            #     'messages': [
            #         {
            #             'role': 'user',
            #             'content': 'fetch the website https://langchain-ai.github.io/langgraph/agents/mcp/ and summarize it',
            #         }
            #     ]
            # })
            # Print the agent's final response
            print('Agent response:', response['messages'][-1].content)
################################ Run the Application ################################
if __name__ == '__main__':
    asyncio.run(main())

In this script, the main function handles the handshake with the server using ClientSession. It loads the MCP tools asynchronously, adds custom ones like get_current_time (which uses Python's datetime module) and calculate_percentage (a simple math function decorated as a LangChain tool). Everything is combined into all_tools for the agent.

Run this with python main.py. You'll see the available tools printed, and the agent will process a sample query that chains multiple tools – for example, adding numbers, multiplying, and then calculating a percentage.

Running the MCP Server

Once everything is set up, running the server is seamless. The main script launches the math server as a subprocess, connects via stdio, and initializes the session. You can swap in different LLMs, like switching to Ollama for local runs by uncommenting the line.

Test it with the provided query: it gets the time, performs math using the MCP tools, and computes the percentage locally. The agent's response will show how it reasons step by step, calling tools as needed. If you see output like the list of tools and a final answer, you're good! This demonstrates the server's power in handling real queries.

Using Pre-Made MCP Servers

Custom servers are great for control, but pre-made ones save time. For instance, install the "Fetch" server with pip install mcp-server-fetch. In the main script, comment out the math server params and uncomment the fetch ones. Now your agent can fetch web content – try the example query to summarize a URL.

This expands your toolkit without writing extra code. Tools like DuckDuckGoSearchRun (imported in the code) can be added similarly for even more functionality.

Conclusion

You've now mastered the basics of MCP servers with LangChain, from building a custom Math Server to integrating tools and running agents. We focused on LangChain here, but in future tutorials, we'll dive into LangGraph for more complex workflows like multi-agent systems. Experiment with the code, tweak the tools, and try different LLMs. If you run into issues, check your package installations or the console output for errors. Happy coding – what's your first project idea with this setup?

Building a PDF Chatbot with LangChain, Ollama, and Chroma: A Step-by-Step Tutorial

James — Tue, 19 Aug 2025 02:38:26 +0000

If you've ever wanted to create an interactive chatbot that can dive into the contents of a PDF and answer your questions intelligently, you're in the right place. In this tutorial, we'll walk through building a Streamlit-based app that leverages LangChain for conversational AI, Ollama for local model embeddings, and Chroma as a vector database to handle document retrieval. This setup allows you to upload a PDF, process it, and chat with it like it's your personal knowledge base.

By the end of this post, you'll have a fully functional app that runs locally (or on a server) and can handle queries about any PDF you throw at it. We'll break down the provided code step by step, explain the key components, and show you how to get it running. Plus, I've embedded a YouTube video tutorial below for a visual walkthrough—check it out if you prefer following along with code demos.

Watch the Tutorial Video

For a hands-on demonstration of building and running this app, watch this YouTube video:

(Click the thumbnail to play the video on YouTube.)

Why Build This PDF Chatbot?

Imagine uploading a research paper, a user manual, or a lengthy report, and then asking natural-language questions like "What are the key findings?" or "Explain section 3 in simple terms." This app makes that possible without needing cloud services (though it supports options like GPT-3.5 if you want). It's powered by open-source tools, making it cost-effective and privacy-focused. LangChain handles the orchestration, Ollama provides embeddings and models, and Chroma stores vectorized chunks of your PDF for quick retrieval.

This project is great for beginners in AI app development, as it combines web interfaces (via Streamlit), document processing, and retrieval-augmented generation (RAG). If you're familiar with Python, you can have this up and running in under an hour.

Prerequisites

Before we dive in, make sure you have these set up: Python 3.8+, pip for installing packages, and a basic understanding of virtual environments. You'll need to install the following libraries—run this in your terminal:

pip install streamlit langchain langchain-ollama langchain-community chromadb python-dotenv pypdf

If you're using OpenAI models, add pip install langchain-openai and set up an API key in a .env file. For local models, ensure Ollama is installed and running (download it from ollama.com). We'll use models like Llama 3.2 or Qwen 2.5, which you can pull via ollama pull <model-name>.

Create a .env file in your project root with any necessary keys, like OPENAI_API_KEY=your-key-here.

Step-by-Step Code Breakdown

The code is structured as a single app.py file for simplicity. Let's dissect it function by function, explaining what each part does and why it's there. I'll include relevant code snippets to make it easier to follow along.

1. Imports and Environment Setup

We start by importing the necessary modules: Streamlit for the UI, LangChain components for AI and retrieval, and helpers like dotenv for loading environment variables. The load_dotenv() call pulls in secrets like API keys.

Temporary files are handled with tempfile and os for processing uploaded PDFs without cluttering your disk.

Here's the import section:

import streamlit as st
from dotenv import load_dotenv
from langchain.schema import HumanMessage, AIMessage, SystemMessage
from langchain_ollama import ChatOllama, OllamaEmbeddings
from langchain.vectorstores import Chroma
from langchain.text_splitter import RecursiveCharacterTextSplitter
from langchain.document_loaders import PyPDFLoader
from langchain.chains import RetrievalQA
import os
import tempfile

# Load environment variables from a .env file
load_dotenv()

2. Page Configuration

The configure_page() function sets up the Streamlit app's look and feel. It defines the title ("Chat with Your PDF using LangChain, Ollama, and Chroma"), adds an icon, and enables a wide layout for better usability. There's also an expander to peek at the session state—handy for debugging.

def configure_page():
    st.set_page_config(
        page_title="PDF Chat with LangChain, Ollama, and Chroma",
        page_icon="🤖",
        layout="wide",
        initial_sidebar_state="expanded",
    )
    st.title("📄🤖 Chat with Your PDF using LangChain, Ollama, and Chroma")
    with st.expander("Check State"):
        st.write(st.session_state)

3. Sidebar Handling

The sidebar is where users interact with settings. In handle_sidebar(), we let users select a model (e.g., "llama3.2" for local Ollama or "gpt-3.5-turbo" for OpenAI). It stores this in Streamlit's session state for persistence across reruns.

Next, there's a file uploader for PDFs. When a file is uploaded, the app processes it: loads the PDF, splits it into chunks, generates embeddings with Ollama, and creates a Chroma vector store. This is cached for efficiency. Buttons to clear the chat or cache ensure a fresh start when needed.

Key helper functions here include:

get_chat_model(model_name): Returns a chat model instance, cached to avoid recreating it unnecessarily.

@st.cache_resource
def get_chat_model(model_name):
    if model_name == "gpt-3.5-turbo":
        from langchain_openai import ChatOpenAI
        return ChatOpenAI(
            api_key=os.getenv("OPENAI_API_KEY"),
            model=model_name,
            streaming=True,
        )
    return ChatOllama(model=model_name, streaming=True)

get_embeddings(): Provides Ollama embeddings (using "mxbai-embed-large" for high-quality vector representations).

@st.cache_resource
def get_embeddings():
    return OllamaEmbeddings(
        model="mxbai-embed-large"
    )

load_pdf(uploaded_file): Saves the upload temporarily and loads it with PyPDFLoader.

def load_pdf(uploaded_file):
    with tempfile.NamedTemporaryFile(delete=False, suffix=".pdf") as tmp_file:
        tmp_file.write(uploaded_file.read())
        tmp_file_path = tmp_file.name
    loader = PyPDFLoader(tmp_file_path)
    documents = loader.load()
    os.unlink(tmp_file_path)  # Clean up the temporary file
    return documents

split_text(documents): Breaks the PDF into manageable chunks (1000 characters with overlap) using RecursiveCharacterTextSplitter.

def split_text(documents):
    text_splitter = RecursiveCharacterTextSplitter(
        chunk_size=1000,
        chunk_overlap=200,
        length_function=len
    )
    texts = text_splitter.split_documents(documents)
    return texts

create_vector_store(texts, embeddings): Builds and persists a Chroma database in a temp directory.

def create_vector_store(texts, embeddings):
    # Define the directory where Chroma will store its data
    chroma_persist_directory = os.path.join(tempfile.gettempdir(), "chroma_db")

    # Initialize Chroma vector store
    vector_store = Chroma.from_documents(
        documents=texts,
        embedding=embeddings,
        persist_directory=chroma_persist_directory
    )
    # Persist the vector store to disk
    vector_store.persist()
    return vector_store

4. Displaying Chat Messages

display_chat_messages() loops through the session state messages and renders them in chat bubbles—user messages on one side, AI responses on the other. It skips the initial system message ("You are a helpful AI assistant.") which sets the AI's behavior.

def display_chat_messages():
    for message in st.session_state.messages[1:]:
        if isinstance(message, HumanMessage):  # Display user messages
            with st.chat_message("user"):
                st.write(message.content)
        elif isinstance(message, AIMessage):  # Display AI responses
            with st.chat_message("assistant"):
                st.write(message.content)

5. Handling User Input

In handle_user_input(chat_model, retriever), we capture user prompts via a chat input box. It appends the message to the history, displays it, and then generates a response.

If a vector store exists (i.e., a PDF is uploaded), it uses RetrievalQA to fetch relevant chunks and augment the model's response. Otherwise, it falls back to a basic chat. Responses are streamed for a natural feel, with error handling to catch any issues.

def handle_user_input(chat_model, retriever):
    if prompt := st.chat_input("Ask something about your PDF"):
        st.session_state.messages.append(HumanMessage(content=prompt))
        with st.chat_message("user"):
            st.write(prompt)

        with st.chat_message("assistant"):
            message_placeholder = st.empty()
            full_response = ""
            try:
                # Use the RetrievalQA chain to get the response
                response = chat_model.run(prompt)
                full_response = response
                message_placeholder.markdown(full_response)
                st.session_state.messages.append(AIMessage(content=full_response))
            except Exception as e:
                message_placeholder.markdown("❌ An error occurred while generating the response.")
                st.error(f"Error: {e}")

6. The Main Function

main() ties it all together: configures the page, handles the sidebar, initializes the chat model and retriever, displays messages, and processes inputs. It ensures the session state is set up with a default system message if it's the first run.

The app checks for a vector store to enable RAG; if present, it creates a RetrievalQA chain with "stuff" type (which stuffs retrieved docs into the prompt).

def main():
    configure_page()
    selected_model = handle_sidebar()
    chat_model = get_chat_model(selected_model)

    # Initialize the chat history in the session state if not already present
    if "messages" not in st.session_state:
        st.session_state.messages = [
            SystemMessage(content="You are a helpful AI assistant.")
        ]

    # Initialize vector store if PDF is uploaded
    if "vector_store" in st.session_state:
        retriever = st.session_state.vector_store.as_retriever()
        qa_chain = RetrievalQA.from_chain_type(
            llm=chat_model,
            chain_type="stuff",
            retriever=retriever,
            return_source_documents=False,
        )
        chat_model_with_retrieval = qa_chain
    else:
        chat_model_with_retrieval = chat_model

    display_chat_messages()
    # Assign retriever separately
    if "vector_store" in st.session_state:
        retriever_instance = st.session_state.vector_store.as_retriever()
    else:
        retriever_instance = None

    handle_user_input(chat_model_with_retrieval, retriever=retriever_instance)

if __name__ == "__main__":
    main()

Running the App

Save the code as app.py. In your terminal, navigate to the directory and run:

streamlit run app.py

This launches a local web server (usually at http://localhost:8501). Open it in your browser, select a model in the sidebar, upload a PDF, and start chatting! For example, upload a PDF about machine learning and ask, "What is gradient descent?"

If you're using local models, ensure Ollama is running in the background. For production, deploy to Streamlit Cloud or a server.

Potential Improvements and Tips

Customization: Add more models or tweak chunk sizes for better retrieval accuracy.
Error Handling: The code already catches exceptions, but you could expand it to retry failed queries.
Performance: For large PDFs, consider asynchronous processing or a more robust database setup.
Security: Since this uses temp files, be mindful of sensitive data in production.

This app demonstrates the power of RAG in a simple package—perfect for personal projects or prototyping enterprise tools.

Building a Simple Chatbot with LangGraph and Chainlit: A Step-by-Step Tutorial

James — Tue, 12 Aug 2025 10:11:00 +0000

Building a Simple Chatbot with LangGraph and Chainlit: A Step-by-Step Tutorial

Hey there, fellow developers! If you've been diving into the world of AI and chatbots, you know how exciting it is to build something interactive that can respond to user queries in real-time. Today, I'm walking you through a straightforward tutorial on creating a simple chatbot using LangGraph for the graph-based workflow and Chainlit for the user interface. This setup leverages the power of large language models (LLMs) via OpenAI and OpenRouter, making it easy to prototype conversational AI apps.

I've also put together a YouTube video that demonstrates this code in action—check it out Step-by-Step Chainlit Memory Chatbot with LangGraph and OpenRouter! | Part 11 for a visual walkthrough. We'll break down the code step by step, explain what each part does, and get you up and running quickly. By the end, you'll have a functional chatbot that maintains conversation history and streams responses smoothly.

Why LangGraph and Chainlit?

Before we jump into the code, let's talk about the tools. LangGraph is a library from LangChain that lets you build stateful, graph-based applications for LLMs. It's perfect for managing conversation flows, where each "node" can represent a step like calling an AI model. Chainlit, on the other hand, is a lightweight framework for creating interactive UIs for LLM apps—think of it as a quick way to spin up a chat interface without heavy frontend work. Together, they make building and deploying chatbots a breeze, especially for prototypes or demos.

This tutorial assumes you're comfortable with Python and have some familiarity with APIs. If not, no worries—the code is simple, and I'll explain everything.

Prerequisites

To follow along, you'll need a few things set up. First, install the required libraries using pip: langgraph, langchain-openai, chainlit, and python-dotenv. You can run pip install langgraph langchain-openai chainlit python-dotenv in your terminal. You'll also need an OpenRouter API key (sign up at openrouter.ai if you don't have one) and a .env file to store it securely. Finally, make sure you have Python 3.8 or later installed.

Once that's done, create a new Python file (say, chatbot.py) and paste in the code we'll discuss. To run the app, use chainlit run chatbot.py from your command line, and it'll launch a local web interface for chatting.

Breaking Down the Code

Let's dissect the code section by section. I've organized it into setup, graph definition, compilation, and the Chainlit UI integration, just like in the original script.

Initial Setup

We start by importing the necessary modules and loading environment variables. This keeps your API keys safe and out of your codebase.

from langchain_core.messages import HumanMessage, AIMessageChunk
from langchain_core.runnables.config import RunnableConfig
from langchain_openai import ChatOpenAI

from langgraph.checkpoint.memory import MemorySaver
from langgraph.graph import START, MessagesState, StateGraph
import chainlit as cl
import os
from dotenv import load_dotenv

load_dotenv()  # Load environment variables from a .env file

openrouter_api_key = os.getenv('OPENROUTER_API_KEY')

Here, we're pulling in tools from LangChain for handling messages and configurations, LangGraph for building the graph, and Chainlit for the UI. The load_dotenv() call reads your .env file, where you should have something like OPENROUTER_API_KEY=your_key_here and optionally OPENROUTER_BASE_URL=https://openrouter.ai/api/v1. This setup ensures your app can securely access the OpenRouter API, which acts as a gateway to models like Google's Gemini.

Defining the Graph

Next, we define the core workflow using LangGraph. This is where the magic happens—we create a simple graph that calls an LLM and updates the conversation state.

workflow = StateGraph(state_schema=MessagesState)

model = ChatOpenAI(
    model='google/gemini-2.5-flash-lite',
    base_url=os.getenv('OPENROUTER_BASE_URL', 'https://openrouter.ai/api/v1'),
    api_key=openrouter_api_key,
    temperature=0,  # Set for deterministic, less creative responses
)

def call_model(state: MessagesState):
    """Invokes the model with the current state and returns the new message."""
    response = model.invoke(state['messages'])
    return {'messages': response}  # Update the state with the model's response

workflow.add_node('model', call_model)  # Add the model-calling function as a node
workflow.add_edge(START, 'model')  # Set the 'model' node as the entry point

We initialize a StateGraph with MessagesState, which is a built-in schema for storing conversation history as a list of messages. Then, we set up the ChatOpenAI model, pointing it to Gemini via OpenRouter with a temperature of 0 for predictable outputs (feel free to tweak this for more creativity).

The call_model function takes the current state (which includes all previous messages), invokes the model, and returns the response to update the state. We add this as a node in the graph and connect it directly from the starting point (START). This creates a basic loop: user input goes in, model responds, and the state persists.

Compiling the Graph

With the graph defined, we compile it into a runnable app, adding memory to remember past interactions.

memory = MemorySaver()  # Initialize in-memory storage for conversation history

# Compile the graph into a runnable, adding the memory checkpointer
app = workflow.compile(checkpointer=memory)

MemorySaver is LangGraph's way of checkpointing the state—it's in-memory here, but you could swap it for something persistent like a database for production. Compiling with checkpointer=memory ensures each conversation thread maintains its history, so the chatbot "remembers" what was said earlier.

Integrating with Chainlit UI

Finally, we hook everything up to Chainlit to create an interactive chat interface.

@cl.on_message
async def main(message: cl.Message):
    """Process incoming user messages and stream back the AI's response."""
    answer = cl.Message(content='')  # Create an empty message to stream the response into
    await answer.send()

    # Configure the runnable to associate the conversation with the user's session
    config: RunnableConfig = {'configurable': {'thread_id': cl.context.session.thread_id}}

    # Stream the graph's output
    for msg, _ in app.stream(
        {'messages': [HumanMessage(content=message.content)]},  # Pass the user's message
        config,
        stream_mode='messages',  # Stream individual message chunks
    ):
        # Check if the current streamed item is an AI message chunk
        if isinstance(msg, AIMessageChunk):
            answer.content += msg.content  # type: ignore # Append the content chunk
            await answer.update()  # Update the UI with the appended content

The @cl.on_message decorator tells Chainlit to run this function whenever a user sends a message. We create an empty response message and send it immediately to show a loading state. Then, we configure the graph with a unique thread_id based on the session, ensuring isolated conversations.

The app.stream call runs the graph with the user's input as a HumanMessage, streaming back chunks in 'messages' mode. We check for AIMessageChunk instances (partial AI responses) and append them to the UI message, updating it in real-time. This gives that smooth, typing-like effect you see in modern chatbots.

Running and Testing Your Chatbot

Save the code in chatbot.py, ensure your .env file is set up, and run chainlit run chatbot.py. Open the provided local URL in your browser, and you'll see a clean chat interface. Type something like "Tell me a joke," and watch the response stream in. Thanks to the memory, follow-up questions will build on the context.

If you run into issues, double-check your API key and model name—OpenRouter supports various models, so experiment with others if Gemini isn't your vibe. For more advanced features, you could add tools, multiple nodes, or even conditional edges in the graph.

Wrapping Up

There you have it—a complete, working chatbot built with LangGraph and Chainlit in under 50 lines of code! This is a great starting point for more complex AI apps, like adding retrieval-augmented generation (RAG) or integrating external APIs. If you followed along, try extending it: maybe add a node for tool calls or persist memory to a file.

Don't forget to watch the companion YouTube video Step-by-Step Chainlit Memory Chatbot with LangGraph and OpenRouter! | Part 11 for a live demo and tips. If you build something cool with this, drop a comment below or share your tweaks—I'd love to hear about it. Happy coding, and see you in the next tutorial! 🚀

Streamlit Part 10: Page Navigation Simplified

James — Thu, 09 Jan 2025 12:04:54 +0000

Navigating between pages in Streamlit is a powerful feature for building dynamic, multi-page applications. In this tutorial, we’ll explore page navigation in Streamlit, using the new st.navigation, st.page_link, and st.switch_page methods to create a seamless user experience.

Check out my YouTube video if you learn better that way: Streamlit Part 10: Mastering Page Navigation

Why Multi-Page Apps?

Streamlit wasn’t originally built as a multi-page application framework. However, as it evolved, the Streamlit team introduced features to support multi-page apps. These features simplify navigation and provide customizable options for dynamic web applications.

Setting Up the Project Structure

For this tutorial, our project structure follows this layout:

project/
│
├── app.py  # Main app file
├── app_pages/
│   ├── intro.py
│   ├── navigation_intro.py
│   ├── page_link_demo.py
│   ├── switch_page_demo.py

Each file in the app_pages directory represents a separate page in the application.

Implementing Navigation: `app.py`

Let’s start by defining our pages in app.py. This file sets up the navigation menu using st.navigation.

# app.py
import streamlit as st

# Page Navigation
pages = [
    st.Page("app_pages/intro.py", title="Introduction", icon="👋"),
    st.Page("app_pages/navigation_intro.py", title="st.navigation", icon="🧭"),
    st.Page("app_pages/page_link_demo.py", title="st.page_link", icon="🔗"),
    st.Page("app_pages/switch_page_demo.py", title="st.switch_page", icon="🔀"),
]

# Adding pages to the sidebar navigation
pg = st.navigation(pages, position="sidebar", expanded=True)

# Running the app
pg.run()

With this setup, the sidebar navigation is automatically generated, displaying the specified pages with their icons.

Page 1: Introduction

The intro.py file serves as the homepage.

# app_pages/intro.py
import streamlit as st

def intro():
    st.title("Streamlit Page Navigation Tutorial")
    st.write("Welcome to this tutorial on Streamlit page navigation!")
    st.write("Use the sidebar to navigate between different pages.")

if __name__ == "__page__":
    intro()

When users visit this page, they’ll see an introduction to the app and instructions on how to navigate.

Page 2: Understanding `st.navigation`

The navigation_intro.py file explains how to use st.navigation.

# app_pages/navigation_intro.py
import streamlit as st

def navigation_intro():
    st.title("Introduction to st.navigation")
    st.write("The `st.navigation` function configures multi-page Streamlit apps.")
    st.code("""
pages = [
    st.Page("app_pages/intro.py", title="Introduction", icon="👋"),
    st.Page("app_pages/page1.py", title="Page 1", icon="1️⃣"),
    st.Page("app_pages/page2.py", title="Page 2", icon="2️⃣"),
]

pg = st.navigation(pages)
pg.run()
    """, language="python")
    st.write("This creates a sidebar menu with pages specified in the `pages` list.")

if __name__ == "__page__":
    navigation_intro()

Page 3: Using `st.page_link`

The page_link_demo.py file demonstrates linking between internal and external pages.

# app_pages/page_link_demo.py
import streamlit as st

def page_link():
    st.title("Using st.page_link")
    st.page_link("app_pages/intro.py", label="Go to Intro", icon="🏠")
    st.page_link("app_pages/page_link_demo.py", label="Refresh This Page", icon="🔄")
    st.page_link("https://www.streamlit.io/", label="Visit Streamlit", icon="🚀")

if __name__ == "__page__":
    page_link()

This approach allows users to navigate within the app or to external resources.

Page 4: Programmatic Navigation with `st.switch_page`

The switch_page_demo.py file showcases programmatically switching pages.

# app_pages/switch_page_demo.py
import streamlit as st

def switch_page():
    st.title("Using st.switch_page")
    st.write("`st.switch_page` allows you to programmatically switch pages.")
    st.code("""
if st.button("Go to Intro"):
    st.switch_page("app_pages/intro.py")
    """, language="python")
    if st.button("Go to Intro"):
        st.switch_page("app_pages/intro.py")

if __name__ == "__page__":
    switch_page()

This method decouples navigation from the sidebar, offering more control over when and how users switch pages.

Conclusion

Streamlit’s navigation features make it easy to build user-friendly multi-page apps. With st.navigation, st.page_link, and st.switch_page, you can create intuitive and dynamic navigation experiences.

🔗 Get the Code: GitHub - jamesbmour/blog_tutorials
🔗 Related Streamlit Tutorials:JustCodeIt
🍻 Support my work: Buy Me a Coffee

Streamlit Part 8: Status Elements

James — Mon, 02 Dec 2024 11:20:00 +0000

Welcome back to Streamlit Part 8: Status Elements! In this installment, we'll dive into the various status elements Streamlit offers to enhance the user experience in your app by providing visual feedback during operations.

If you haven't already, you'll want to import Streamlit as st, configure your page, and lay out the framework to follow along. Run the app by typing streamlit run app.py in your terminal, and let's get started.

Implementing Progress Bars

The first status element we'll look at is the progress bar. This is a great way to visually indicate the progress of a long-running task, like data processing or a complex computation.

To create a progress bar in Streamlit:

Define some text to be displayed alongside the progress bar.
Use st.progress() to initialize it.
Create a for-loop to simulate progress, adding a sleep delay to visualize the updates.

progress_text = "Operation in progress. Please wait."
my_bar = st.progress(value=0, text=progress_text)

for percent_complete in range(100):
    time.sleep(0.01)
    my_bar.progress(percent_complete + 1, text=progress_text)

time.sleep(0.5)
my_bar.empty()  # Clears the progress bar

To make the app interactive, consider adding a Rerun button that reloads the app so users can re-run the progress bar.

st.button("Rerun")

Exploring Status and Success Elements

Next up is the success bar. This can be used to show a successful outcome or completion of an operation.

st.success("This is a status message!", icon="✅")

It’s a simple but effective way to show users when things go smoothly!

Using Spinners for Operations

A spinner is a great way to indicate that something is running in the background. This is especially useful when you want to keep users informed without blocking the interface.

with st.spinner("In progress..."):
    time.sleep(1.5)

st.success("Done!")

This code will display a spinner while the time.sleep() function runs, then show a success message when finished.

Handling Errors and Warnings

To handle error scenarios or warnings, you can use st.error() and st.warning() respectively. These functions make it very easy to communicate issues clearly.

st.error("This is an error message!")
st.warning("This is a warning message!")

They display red and yellow messages, making it easy for users to differentiate between errors and warnings.

Displaying Info and Exceptions

For general information, use st.info(). It's useful for providing informative messages during interactions.

st.info("This is an info message!")

Additionally, if you need to display exceptions (for debugging purposes), use st.exception(). This can be handy when you want users or developers to understand why something has gone wrong.

try:
    raise Exception("This is an exception!")
except Exception as e:
    st.exception(e)

This will show the full traceback, providing valuable context during development.

Fun with Balloons and Snow

Streamlit also offers some whimsical features to add fun effects to your app. You can use balloons and snow to add a bit of celebration or a seasonal touch!

Balloons:

bbtn = st.button("Click me to display balloons")
if bbtn:
    st.balloons()

Snow:

snow_btn = st.button("Click me to display snow")
if snow_btn:
    st.snow()

These effects are purely visual, but they can add a fun flair to your app for special occasions.

Conclusion and Next Steps

That’s it for Streamlit Part 8: Status Elements! These elements can help keep your users informed about what’s happening behind the scenes and make the overall experience more interactive.

I hope you enjoyed this tutorial! See you in the next installment!

🔗 Get the Code: GitHub - jamesbmour/blog_tutorials
🔗 Related Streamlit Tutorials:JustCodeIt
🍻 Support my work: Buy Me a Coffee

Streamlit Part 7: Build a Chat Interface

James — Wed, 13 Nov 2024 21:07:45 +0000

Let's Build a Chat Interface in Streamlit: The Easy Way

Ever wanted to build your own chat interface but thought it would be too complicated? Well, I've got good news - with Streamlit, it's surprisingly simple. Let's walk through creating a basic chat app that you can later expand into something more sophisticated.

What We're Building

We're creating a chat interface where users can type messages and get responses. Think of it as the foundation for your future chatbot or AI assistant. The best part? You'll need just a few lines of Python code to make it happen.

Getting Started

First, let's set up our Streamlit app. We'll need a nice wide layout to give our chat messages plenty of room:

import streamlit as st  
import time  

st.set_page_config(  
    page_title="Chat App",  
    layout="wide",  
    initial_sidebar_state="collapsed",  
)  

st.title("Let's Chat!")

Keeping Track of Messages

Chat apps need memory - they need to remember what was said earlier in the conversation. Streamlit has a neat feature called session state that's perfect for this:

if "messages" not in st.session_state:  
    st.session_state.messages = []

This creates a list to store our chat history. Think of it as a notebook where we write down everything that's said.

Showing the Conversation

Now let's display our chat messages. We'll loop through our message history and show each message in a chat bubble:

for msg in st.session_state.messages:  
    with st.chat_message(msg["role"]):  
        st.write(msg["content"])

Getting User Input

Here's where the magic happens. We'll add a text box where users can type their messages:

prompt = st.chat_input("Say something...")  

if prompt:  
    # Add user message to chat  
    st.session_state.messages.append({"role": "user", "content": prompt})  
    with st.chat_message("user"):  
        st.write(prompt)  

    # Add a simple bot response  
    time.sleep(1)  # A brief pause to make it feel more natural  
    bot_response = f"You said: {prompt}"  
    st.session_state.messages.append({"role": "bot", "content": bot_response})  
    with st.chat_message("bot"):  
        st.write(bot_response)

Making It Your Own

Right now, our bot just echoes back what you say. But this is where you can get creative! You could:

Connect it to an AI model for smarter responses
Add buttons for quick replies
Include images or emojis in responses
Save conversations to a database

The Complete Code

Here's everything together in one neat package:

import streamlit as st  
import time  

st.set_page_config(page_title="Chat App", layout="wide", initial_sidebar_state="collapsed")  
st.title("Let's Chat!")  

if "messages" not in st.session_state:  
    st.session_state.messages = []  

for msg in st.session_state.messages:  
    with st.chat_message(msg["role"]):  
        st.write(msg["content"])  

prompt = st.chat_input("Say something...")  

if prompt:  
    st.session_state.messages.append({"role": "user", "content": prompt})  
    with st.chat_message("user"):  
        st.write(prompt)  

    time.sleep(1)  
    bot_response = f"You said: {prompt}"  
    st.session_state.messages.append({"role": "bot", "content": bot_response})  
    with st.chat_message("bot"):  
        st.write(bot_response)

And there you have it! A working chat interface in under 30 lines of code. Pretty cool, right?

Next time, we'll look at adding some AI smarts to make our bot actually understand and respond to messages. Stay tuned!

Want to try this out? Just copy the code, install Streamlit (pip install streamlit), and run it with streamlit run your_file.py. Happy coding!

🔗 Get the Code: GitHub - jamesbmour/blog_tutorials
🔗 Related Streamlit Tutorials:JustCodeIt
🍻 Support my work: Buy Me a Coffee

Streamlit Part 6: Mastering Layouts

James — Tue, 05 Nov 2024 10:44:00 +0000

Mastering Layouts in Streamlit: A Step-by-Step Guide

Streamlit, a widely-used framework for building interactive Python applications, particularly for data visualization, dashboards, and machine learning demos, stands out not only for its user-friendly nature but also for its ability to create visually appealing and intuitive layouts. In this blog post, we’ll guide you through a Python example that demonstrates how to effectively utilize layout elements such as columns, containers, placeholders, and more in Streamlit.

Let’s break down the layout techniques you can use to make your apps cleaner and more interactive.

Setting the Stage: Page Configuration

Before jumping into the layout elements, we configure the page using st.set_page_config(). This method allows you to customize the page title, icon, layout, and sidebar behavior right when the app loads.

st.set_page_config(
    page_title="Streamlit Layouts Tutorial",
    page_icon=":art:",
    layout="wide",
    initial_sidebar_state="collapsed",
)

Here, we give the page a title, set the layout to "wide" (which makes use of the full browser width), and collapse the sidebar initially for a cleaner look.

1. Structuring with Columns

One of the most powerful layout tools in Streamlit is columns. They allow you to display content side-by-side, giving a more organized and visually appealing look to your app.

st.header("Columns")
st.write("Using `st.columns()` to create columns.")

# Create two columns
col1, col2 = st.columns(2)

col1.write("This is column 1")
if col1.button("Button in Column 1"):
    col1.write("Button 1 pressed")

col2.write("This is column 2")
if col2.button("Button in Column 2"):
    col2.write("Button 2 pressed")

In this snippet, we create two columns and place buttons in each. The columns are split evenly, and any interactions within one column don’t affect the other.

Why Columns?

Columns are great for displaying related information side by side, such as data summaries, charts, or interactive controls.

2. Grouping with Containers

Next up is the container element. Containers in Streamlit allow you to group multiple elements together, making it easier to manage complex layouts.

st.header("Container")
st.write("Using `st.container()` to group elements together.")

with st.container():
    st.write("This is inside a container")
    st.button("Button inside container")

    # Nested container
    with st.container():
        st.write("This is a nested container")
        st.button("Button inside nested container")

In this example, the st.container() method wraps multiple elements (text and a button) together. You can even nest containers inside one another to create hierarchical layouts.

Why Containers?

Containers help maintain a clean and grouped structure, especially when dealing with multiple sections of content that belong together logically.

3. Dynamically Updating with Placeholders

A powerful feature of Streamlit is its ability to update content dynamically. This is done using st.empty(), which serves as a placeholder that you can update later.

st.header("Empty")
st.write("Using `st.empty()` as a placeholder for updating content.")

placeholder = st.empty()

# Update the placeholder content dynamically
for i in range(5):
    placeholder.write(f"Updating... {i}")
    time.sleep(1)

placeholder.write("Done!")

In this example, we use a for loop to update the placeholder with a new value every second. Once the loop is done, we replace the placeholder content with "Done!"

Why Use Placeholders?

Placeholders are ideal for situations where you need to update parts of your app dynamically without rerunning the entire app, such as live data feeds or progress updates.

4. Hiding and Showing with Expanders

Expandable sections are perfect for hiding advanced settings or additional information that you don’t want to clutter the main layout.

st.header("Expander")
st.write("Using `st.expander()` to hide/show content.")

with st.expander("Click to expand"):
    st.write("This is inside the expander")
    st.button("Button inside expander")
    ecol1, ecol2 = st.columns(2)
    with ecol1:
        st.write("This is column 1")
    with ecol2:
        st.write("This is column 2")

Here, we wrap some content and a button inside an expander, which users can click to reveal or hide the content.

Why Expanders?

Expanders help keep your interface clean by hiding less important or advanced options while still making them easily accessible when needed.

5. Creating Forms

Streamlit forms allow you to group input widgets together and wait for the user to submit them all at once, rather than reacting to each input individually.

st.header("Form")
st.write("Using `st.form()` to group input widgets with a submit button.")

with st.form("my_form"):
    st.write("Inside the form")
    name = st.text_input("Enter your name")
    age = st.number_input("Enter your age", min_value=0, max_value=120, step=1)
    submitted = st.form_submit_button("Submit")
    if submitted:
        st.write(f"Hello {name}, you are {age} years old.")

In this example, we use a form to collect a user’s name and age, and only once they click the submit button does Streamlit process the input.

Why Forms?

Forms ensure that input actions are grouped and submitted as a batch, which is ideal for cases like user registration or data filtering.

6. Adding a Sidebar

Sidebars are useful for navigation, app settings, or extra options that don’t clutter the main interface.

st.header("Sidebar")
st.write("Using `st.sidebar` to add content to the sidebar.")

with st.sidebar:
    st.write("This is in the sidebar")
    st.button("Sidebar Button")

This code adds a button to the sidebar, which collapses by default but can be expanded by the user.

Why Use Sidebars?

Sidebars are perfect for secondary content like navigation links, filters, or app settings that are always accessible but don’t need to take up space in the main layout.

7. Navigating with Tabs

Tabs are a great way to organize content within a single section, allowing users to switch between different views without leaving the page.

st.header("Tabs")
st.write("Using `st.tabs()` to create tabbed sections.")

tab1, tab2, tab3 = st.tabs(["Cat", "Dog", "Owl"])

with tab1:
    st.write("This is the cat tab")
    st.image("<https://static.streamlit.io/examples/cat.jpg>", width=300)

with tab2:
    st.write("This is the dog tab")
    st.image("<https://static.streamlit.io/examples/dog.jpg>", width=300)

with tab3:
    st.write("This is the owl tab")
    st.image("<https://static.streamlit.io/examples/owl.jpg>", width=300)

In this example, we use three tabs to display different content related to animals. Each tab is independent and contains its own content.

Why Tabs?

Tabs are ideal for organizing related content into sections, like different data views or categories of information, without requiring separate pages.

Conclusion

Mastering Streamlit's layout elements empowers you to create clean, interactive, and user-friendly applications. By skillfully using columns, containers, placeholders, expanders, forms, sidebars, and tabs, you can effectively organize your content and enhance the overall user experience. These tools allow you to craft intuitive interfaces that guide users through your application seamlessly.

🔗 Get the Code: GitHub - jamesbmour/blog_tutorials
🔗 Related Streamlit Tutorials:JustCodeIt
🍻 Support my work: Buy Me a Coffee

Streamlit Part 5: Mastering Data Visualization and Chart Types

James — Tue, 29 Oct 2024 13:03:57 +0000

In today's fast-paced world of data science, effectively visualizing data is crucial. Whether you're an experienced data analyst or just starting your journey, mastering various visualization techniques can greatly enhance your ability to communicate insights and drive decision-making. This comprehensive guide explores Streamlit, a popular Python library for creating interactive web applications, and introduces 12 powerful chart types you can easily create to visualize your data. From simple bar charts to advanced geospatial visualizations, this tutorial covers it all.

Introduction to Streamlit and Its Visualization Capabilities

Streamlit has revolutionized the way data scientists and developers create interactive web applications for data visualization. With its intuitive API and seamless integration with popular Python libraries, Streamlit allows you to transform your data scripts into sharable web apps in minutes. In this guide, we'll focus on Streamlit's versatility in creating various chart types, each tailored to different data visualization needs.

1. Area Chart

Introduction to Area Charts

Area charts are excellent for displaying cumulative totals over time or across categories. They emphasize the magnitude of change and the relationship between different datasets, making them perfect for tracking trends and comparing multiple data series.

Creating the Area Chart

import numpy as np
import pandas as pd
import streamlit as st

st.write("### 1. Area Chart")

# Generate random data for the area chart
chart_data = pd.DataFrame(
    np.random.randn(20, 3),
    columns=["col1", "col2", "col3"],
)

# Create an area chart using the random data
st.area_chart(
    chart_data,
    x="col1",
    y=["col2", "col3"],
    color=["#FF0000", "#0000FF"],
)

Use Cases

Sales Growth: Visualize how sales increase over different quarters.
Website Traffic: Track the number of visitors over time.
Cumulative Metrics: Display cumulative metrics like total revenue or expenses.

Customization Tips

Adjust Colors: Modify the color parameter to match your brand or preferences.
Add Titles and Labels: Enhance clarity by adding titles and axis labels.
Modify Axes: Adjust the scale or range of the axes for better data representation.

2. Bar Chart

Introduction to Bar Charts

Bar charts are a fundamental way to compare different categories or groups. They are highly effective in displaying discrete data points, making it easy to compare quantities across various categories.

Creating the Bar Chart

import numpy as np
import pandas as pd
import streamlit as st

st.write("### 2. Bar Chart")

# Generate random data for the bar chart
chart_data = pd.DataFrame(
    np.random.randn(20, 3),
    columns=["col1", "col2", "col3"],
)

# Display a bar chart using the same data
st.bar_chart(chart_data)

Use Cases

Sales by Region: Compare sales figures across different regions.
Product Popularity: Display the popularity of various products.
Survey Results: Visualize responses to survey questions.

Customization Options

Bar Colors: Although the example uses default settings, you can customize bar colors using additional parameters or by preprocessing the data.
Orientation: Change the orientation of the bars (horizontal or vertical) for better readability.
Labels and Legends: Add labels and legends to provide more context to the data.

3. Line Chart

Introduction to Line Charts

Line charts are excellent for showing trends over continuous data, such as time series. They help in tracking changes, identifying patterns, and comparing multiple data series over the same interval.

Creating the Line Chart

import numpy as np
import pandas as pd
import streamlit as st

st.write("### 3. Line Chart")

# Generate random data for the line chart
chart_data = pd.DataFrame(
    np.random.randn(20, 3),
    columns=["col1", "col2", "col3"],
)

# Create a line chart with the random data
st.line_chart(
    chart_data,
    x="col1",
    y="col2",
    color="col3",
)

st.write("#### 3.1 Basic Line Chart")

Use Cases

Stock Prices: Track stock price movements over time.
Temperature Changes: Monitor temperature fluctuations across different days.
Website Visits: Analyze website traffic trends over weeks or months.

Customization Tips

Multiple Lines: Plot multiple lines by specifying additional columns in the y parameter.
Line Styles: Adjust line styles (solid, dashed) to differentiate between data series.
Interactivity: Enhance interactivity by adding tooltips or hover effects to display exact values.

4. Map

Introduction to Maps in Streamlit

Geographical data visualization is crucial for spatial analysis, allowing you to visualize data points on a map to identify patterns, hotspots, and distributions across different locations.

Creating the Map

import numpy as np
import pandas as pd
import streamlit as st

st.write("### 4. Map")

# Create a DataFrame with random latitude and longitude data
df = pd.DataFrame(
    {
        "col1": np.random.randn(1000) / 50 + 37.76,  # Latitude values around 37.76
        "col2": np.random.randn(1000) / 50 + -122.4,  # Longitude values around -122.4
        "col3": np.random.randn(1000) * 100,  # Random size values
        "col4": np.random.rand(1000, 4).tolist(),  # Random color values
    }
)

# Display the data on a map
st.map(
    df,
    latitude="col1",
    longitude="col2",
    size="col3",
    color="col4",
)

Use Cases

Store Locations: Display the locations of multiple stores or offices.
Event Hotspots: Visualize areas with high concentrations of events or activities.
Demographic Distributions: Show the distribution of different demographic groups across regions.

Customization Tips

Map Center and Zoom: Adjust the map's center and zoom level to focus on specific areas.
Marker Aesthetics: Customize marker shapes, sizes, and colors to represent different data dimensions.
Interactivity: Add tooltips or pop-ups to provide more information about each data point.

5. Scatter Chart

Introduction to Scatter Charts

Scatter charts are powerful tools for identifying relationships or correlations between two variables. They help in uncovering patterns, trends, and potential causations within your data.

Creating the Scatter Chart

import numpy as np
import pandas as pd
import streamlit as st

st.write("### 5. Scatter Chart")

# Generate random data for the scatter chart
scatter_data = pd.DataFrame(
    np.random.randn(20, 3),
    columns=["a", "b", "c"],
)

# Create a scatter chart with the random data
st.scatter_chart(scatter_data)

Use Cases

Advertising vs. Sales: Explore the relationship between advertising spend and sales figures.
Height vs. Weight: Analyze the correlation between individuals' heights and weights.
Performance Metrics: Compare different performance metrics of products or services.

Customization Tips

Trend Lines: Add trend lines to highlight correlations or trends within the data.
Point Sizes and Colors: Differentiate data points by adjusting their sizes and colors based on additional variables.
Interactivity: Enhance interactivity by enabling tooltips that display detailed information when hovering over points.

6. Altair Chart

Introduction to Altair

Altair is a declarative statistical visualization library for Python, offering advanced charting capabilities with a simple and intuitive syntax. It excels in creating interactive and complex visualizations with minimal code.

Creating the Altair Chart

import numpy as np
import pandas as pd
import streamlit as st
import altair as alt  # Import Altair for advanced charting

st.write("### 6. Altair Chart")

# Generate random data for the Altair chart
chart_data = pd.DataFrame(np.random.randn(20, 3), columns=["a", "b", "c"])

# Create an Altair chart with interactive tooltips
c = (
    alt.Chart(chart_data)
    .mark_circle()
    .encode(
        x="a",
        y="b",
        size="c",
        color="c",
        tooltip=["a", "b", "c"],
    )
)

# Display the Altair chart in the Streamlit app
st.altair_chart(c, use_container_width=True)

Use Cases

Exploratory Data Analysis: Investigate relationships between multiple variables.
Interactive Dashboards: Create dynamic visualizations that respond to user inputs.
Detailed Statistical Visualizations: Present complex data in an understandable format.

Customization Tips

Faceting: Create small multiples to compare different subsets of data.
Mark Types: Experiment with different mark types like lines, bars, or areas for varied visual effects.
Interactive Elements: Incorporate selections, filters, and zooming to enhance user interactivity.

8. Graphviz Chart

Introduction to Graphviz

Graphviz is a tool for creating graph and network diagrams, making it invaluable for visualizing relationships, workflows, and organizational structures. It allows you to represent complex connections in a clear and organized manner.

Creating the Graphviz Chart

import streamlit as st
import graphviz  # Import Graphviz for creating graph diagrams

st.write("### 8. Graphviz Chart")

# Create a Graphviz directed graph
graph = graphviz.Digraph()

graph.edge("Planning", "Development")
graph.edge("Development", "Testing")
graph.edge("Testing", "Deployment")
graph.edge("Requirements Gathering", "Planning")
graph.edge("Design", "Planning")
graph.edge("Coding", "Development")
graph.edge("Code Review", "Development")
graph.edge("Unit Testing", "Testing")
graph.edge("Integration Testing", "Testing")
graph.edge("Staging", "Deployment")
graph.edge("Production", "Deployment")

# Display the graph in the Streamlit app
st.graphviz_chart(graph)

Use Cases

Software Development Pipelines: Visualize the stages of software development from planning to deployment.
Organizational Structures: Represent the hierarchy and relationships within an organization.
Decision Trees: Illustrate the flow of decisions and possible outcomes.

Customization Tips

Node Shapes and Colors: Customize node shapes and colors to represent different types of entities or statuses.
Edge Styles: Modify edge styles (dashed, bold) to indicate different types of relationships or dependencies.
Graph Layouts: Explore different graph layouts (e.g., hierarchical, circular) for better clarity.

9. Plotly Chart

Introduction to Plotly

Plotly is a powerful library for creating interactive and publication-quality graphs. It offers a wide range of chart types and customization options, making it suitable for complex data visualizations and interactive dashboards.

Creating Distribution Plots

import numpy as np
import streamlit as st
import plotly.figure_factory as ff  # Import Plotly's figure factory
import plotly.express as px  # Import Plotly Express for easy plotting

st.write("### 9. Plotly Chart")

# Generate random data for histograms
x1 = np.random.randn(200) - 2  # Dataset 1
x2 = np.random.randn(200)  # Dataset 2
x3 = np.random.randn(200) + 2  # Dataset 3

# Group the data together
hist_data = [x1, x2, x3]
group_labels = ["Group 1", "Group 2", "Group 3"]  # Labels for each dataset

# Create a distribution plot with custom bin sizes
fig = ff.create_distplot(
    hist_data,
    group_labels,
    bin_size=[0.1, 0.25, 0.5],  # Custom bin sizes for each dataset
)

# Display the distribution plot in the Streamlit app
st.plotly_chart(fig, use_container_width=True)

Creating Scatter Plots with Plotly Express

# Load the Gapminder dataset
df = px.data.gapminder()

# Create a scatter plot for the year 2007
fig = px.scatter(
    df.query("year==2007"),
    x="gdpPercap",  # GDP per capita on the x-axis
    y="lifeExp",  # Life expectancy on the y-axis
    size="pop",  # Size of markers based on population
    color="continent",  # Color markers by continent
    hover_name="country",  # Show country name when hovering
    log_x=True,  # Use a logarithmic scale for the x-axis
    size_max=60,  # Maximum size of markers
)

# Create tabs to compare different themes
tab1, tab2 = st.tabs(["Streamlit theme (default)", "Plotly native theme"])
with tab1:
    # Display the chart using the Streamlit theme
    st.plotly_chart(fig, theme="streamlit", use_container_width=True)
with tab2:
    # Display the chart using Plotly's native theme
    st.plotly_chart(fig, theme=None, use_container_width=True)

# Additional Plotly Chart with Custom Colorscale
st.subheader("Define a custom colorscale")

# Load the Iris dataset
df = px.data.iris()

# Create a scatter plot with a custom colorscale
fig = px.scatter(
    df,
    x="sepal_width",
    y="sepal_length",
    color="sepal_length",
    color_continuous_scale="reds",  # Use the 'reds' colorscale
)

# Create tabs to compare different themes
tab1, tab2 = st.tabs(["Streamlit theme (default)", "Plotly native theme"])
with tab1:
    st.plotly_chart(fig, theme="streamlit", use_container_width=True)
with tab2:
    st.plotly_chart(fig, theme=None, use_container_width=True)

Use Cases

Distribution Analysis: Compare the distributions of different datasets side by side.
Interactive Dashboards: Create dynamic and interactive visualizations that respond to user inputs.
Comparative Analysis: Use multiple themes and styles to highlight different aspects of the data.

Customization Tips

Theme Adjustments: Explore different themes to match your application's design.
Layout Configurations: Adjust layout settings like margins, legends, and axis titles for better presentation.
Advanced Chart Types: Experiment with 3D plots, heatmaps, and other advanced chart types for more complex visualizations.

10. pydeck Chart

Introduction to pydeck

pydeck is a Python interface for deck.gl, enabling advanced, high-performance WebGL-powered visualizations. It is particularly useful for creating intricate and interactive geospatial visualizations.

Creating the pydeck Chart

import numpy as np
import pandas as pd
import streamlit as st
import pydeck as pdk  # Import pydeck for advanced mapping

st.write("### 10. pydeck Chart")

# Generate random latitude and longitude data around a central point
chart_data = pd.DataFrame(
    np.random.randn(1000, 2) / [50, 50] + [37.76, -122.4],
    columns=["lat", "lon"],
)

# Define the initial view state and layers for the map
st.pydeck_chart(
    pdk.Deck(
        map_style=None,  # Use default map style
        initial_view_state=pdk.ViewState(
            latitude=37.76,
            longitude=-122.4,
            zoom=11,
            pitch=50,
        ),
        layers=[
            # Add a hexagon layer to visualize density
            pdk.Layer(
                "HexagonLayer",
                data=chart_data,
                get_position="[lon, lat]",
                radius=200,
                elevation_scale=4,
                elevation_range=[0, 1000],
                pickable=True,
                extruded=True,
            ),
            # Add a scatterplot layer on top
            pdk.Layer(
                "ScatterplotLayer",
                data=chart_data,
                get_position="[lon, lat]",
                get_color="[200, 30, 0, 160]",
                get_radius=200,
            ),
        ],
    )
)

Use Cases

Geospatial Analysis: Visualize large geospatial datasets to identify patterns and hotspots.
Urban Planning: Analyze population density, traffic flow, or infrastructure distribution.
Environmental Studies: Map environmental data like pollution levels or wildlife sightings.

Customization Tips

Different Layer Types: Experiment with various layer types like ScatterplotLayer, ArcLayer, or PathLayer for diverse visual effects.
Map Styles: Change the map_style parameter to use different map themes (e.g., satellite, dark mode).
Interactivity: Enhance interactivity by enabling tooltips, filters, and dynamic data updates.

11. pyplot Chart

Introduction to Matplotlib's pyplot

Matplotlib is a foundational plotting library in Python, and pyplot provides a MATLAB-like interface for creating static, animated, and interactive visualizations. It is highly customizable and widely used for statistical data analysis and educational purposes.

Creating the Histogram

import numpy as np
import matplotlib.pyplot as plt
import streamlit as st

st.write("### 11. pyplot Chart")

# Generate random data from a normal distribution
arr = np.random.normal(1, 1, size=100)

# Create a histogram of the data
fig, ax = plt.subplots()
ax.hist(arr, bins=20)  # 20 bins in the histogram

# Display the histogram in the Streamlit app
st.pyplot(fig)

Use Cases

Statistical Analysis: Visualize the distribution of datasets to identify patterns and anomalies.
Educational Purposes: Teach concepts like probability distributions and data normalization.
Data Exploration: Assess the shape and spread of data before performing further analysis.

Customization Options

Titles and Labels: Add titles, axis labels, and legends to provide context.
Colors and Styles: Customize bar colors, edge styles, and overall plot aesthetics.
Multiple Histograms: Overlay multiple histograms to compare different datasets or groups.
Advanced Features: Incorporate density plots, cumulative distributions, or annotations for deeper insights.

12. Vega Chart

Introduction to Vega-Lite

Vega-Lite is a high-level grammar for creating interactive visualizations, integrated into Streamlit for flexibility. It allows you to build sophisticated and responsive charts with concise specifications, making it easier to create complex visualizations without extensive coding.

Creating the Vega Chart

import streamlit as st
from vega_datasets import data  # Import sample datasets for Vega

st.write("### 12. Vega Chart")

# Load the cars dataset
source = data.cars()

# Define the Vega-Lite chart specification
chart = {
    "mark": "point",  # Use point marks
    "encoding": {
        "x": {
            "field": "Horsepower",
            "type": "quantitative",
        },
        "y": {
            "field": "Miles_per_Gallon",
            "type": "quantitative",
        },
        "color": {"field": "Origin", "type": "nominal"},
        "shape": {"field": "Origin", "type": "nominal"},
    },
}

# Create tabs to compare different themes
tab1, tab2 = st.tabs(["Streamlit theme (default)", "Vega-Lite native theme"])

with tab1:
    # Display the chart using the Streamlit theme
    st.vega_lite_chart(source, chart, theme="streamlit", use_container_width=True)
with tab2:
    # Display the chart using Vega-Lite's native theme
    st.vega_lite_chart(source, chart, theme=None, use_container_width=True)

Use Cases

Sophisticated Interactive Visualizations: Create complex charts that respond to user interactions like hovering, clicking, or selecting.
Data Exploration: Enable users to explore datasets dynamically, uncovering insights through interactive elements.
Embedding Complex Charts: Integrate detailed and interactive charts within Streamlit apps for comprehensive data presentations.

Customization Tips

Adding Layers: Incorporate additional layers like lines, bars, or areas to enrich the visualization.
Custom Scales and Axes: Adjust scales, axis titles, and labels to improve readability and presentation.
Interactive Selections: Implement interactive selections and filters to allow users to focus on specific data subsets.
Styling and Themes: Enhance aesthetics by customizing colors, fonts, and overall theme settings.

Recap of Chart Types

In this tutorial, we've covered a diverse range of chart types available in Streamlit, each suited for different data visualization needs:

Area Chart: Ideal for showing cumulative totals and trends.
Bar Chart: Perfect for comparing discrete categories or groups.
Line Chart: Excellent for tracking changes over continuous data like time series.
Map: Essential for geographical data visualization and spatial analysis.
Scatter Chart: Useful for identifying relationships and correlations between variables.
Altair Chart: Advanced, interactive visualizations with declarative syntax.
Graphviz Chart: Visualizing relationships and workflows through graph diagrams.
Plotly Chart: Interactive and publication-quality graphs with extensive customization.
pydeck Chart: High-performance geospatial visualizations using WebGL.
pyplot Chart: Foundational plotting with Matplotlib's versatile capabilities.
Vega Chart: Sophisticated interactive visualizations with Vega-Lite grammar.

🔗 Get the Code: GitHub - jamesbmour/blog_tutorials
🔗 Related Streamlit Tutorials:JustCodeIt
🍻 Support my work: Buy Me a Coffee

Forem: James

Building a Human-in-the-Loop AI App with LangGraph and Ollama

🚀 What We’re Building

🛠️ Step 1 — Setup and Imports

🧩 Step 2 — Defining Application State

🧠 Step 3 — Improving the Prompt

✋ Step 4 — Human-in-the-Loop Review

📝 Step 5 — Final Answer Generation

🔗 Step 6 — Building the Graph

💻 Step 7 — Running It as a CLI

🎯 Wrapping Up

Interrupts and Commands in LangGraph: Building Human-in-the-Loop Workflows

Key Concepts

Workflow Overview

State Definition

Node Functions

Graph Construction and Visualization

Workflow Execution

Conclusion

Building a News and Stock Assistant with LangGraph and Chainlit

Setting Up the Environment and Imports

Configuration Basics

Defining Local Tools

LLM and Prompt Setup

Building the LangGraph Agent

Chainlit UI and Message Handling

Wrapping It Up

Harnessing MCP Servers with LangChain and LangGraph: A Comprehensive Guide

Introduction to MCP Servers

Setting Up the Initial State and Calculator Tool

Creating the Simple Agent Class

Building the Graph Structure

Implementing the Ask Method and Cleanup

Running the Agent and Final Thoughts

Conclusion and Best Practices

Mastering MCP Servers with LangChain and LangGraph: A Beginner's Guide

Mastering MCP Servers with LangChain and LangGraph: A Beginner's Guide

Introduction to MCP Servers

Setting Up a Simple Math Server

Creating and Adding Tools

Running the MCP Server

Using Pre-Made MCP Servers

Conclusion

Building a PDF Chatbot with LangChain, Ollama, and Chroma: A Step-by-Step Tutorial

Watch the Tutorial Video

Why Build This PDF Chatbot?

Prerequisites

Step-by-Step Code Breakdown

1. Imports and Environment Setup

2. Page Configuration

3. Sidebar Handling

4. Displaying Chat Messages

5. Handling User Input

6. The Main Function

Running the App

Potential Improvements and Tips

Building a Simple Chatbot with LangGraph and Chainlit: A Step-by-Step Tutorial

Building a Simple Chatbot with LangGraph and Chainlit: A Step-by-Step Tutorial

Why LangGraph and Chainlit?

Prerequisites

Breaking Down the Code

Initial Setup

Defining the Graph

Compiling the Graph

Integrating with Chainlit UI

Running and Testing Your Chatbot

Wrapping Up

Streamlit Part 10: Page Navigation Simplified

Why Multi-Page Apps?

Setting Up the Project Structure

Implementing Navigation: app.py

Page 1: Introduction

Page 2: Understanding st.navigation

Page 3: Using st.page_link

Page 4: Programmatic Navigation with st.switch_page

Conclusion

Streamlit Part 8: Status Elements

Implementing Progress Bars

Exploring Status and Success Elements

Using Spinners for Operations

Implementing Navigation: `app.py`

Page 2: Understanding `st.navigation`

Page 3: Using `st.page_link`

Page 4: Programmatic Navigation with `st.switch_page`