Bappy LangGraph Agentic Chatbot Build Framework

// When should you use the LangGraph Agentic Chatbot Build Framework?

Use this skill whenever you need to architect or implement a LangGraph-based agentic chatbot system — from a bare workflow skeleton all the way through adding persistence, streaming, RAG, tools, HITL, and observability. Trigger it any time someone asks how to wire LangGraph components together into a real application.

// What do you need before building a LangGraph agentic chatbot?

• LLM Provider & API Keyrequired
  The large language model to power the chatbot (e.g., OpenAI, Groq, Gemini, OpenRouter). An API key must be stored in a .env file.
• Application Goalrequired
  What the chatbot must do — simple Q&A, document chat (RAG), tool-using agent, etc.
• Storage Strategyrequired
  Whether conversation state is saved in RAM (MemorySaver) or a persistent database. Determines fault-tolerance and restart behaviour.
• UI Requirement
  Whether a user-facing interface is needed and which framework (Streamlit for rapid prototyping, FastAPI + HTML/CSS for production).
• Thread/User Isolation Needs
  Whether multiple users or sessions must be isolated from each other via separate Thread IDs.

// What are the core principles behind building a LangGraph chatbot?

// How do you build a LangGraph agentic chatbot step by step?

1. 1

   Define the State

   Create a TypedDict class (e.g., `ChatState`) with a `messages` field typed as `Annotated[list[BaseMessage], add_messages]`. Import `add_messages` from `langgraph.graph` and `BaseMessage` from `langchain_core.messages`. Never use a plain string field for chat history — always use the add_messages reducer so the conversation story accumulates.

2. 2

   Initialise the LLM

   Load API keys from a .env file using `load_dotenv()`. Instantiate the model (e.g., `ChatOpenAI()`). The LLM choice is swappable — check LangChain docs for Groq, Gemini, or OpenRouter equivalents. Keep the LLM initialisation separate from node logic for reusability.

3. 3

   Write the Chat Node function

   Define `def chat_node(state: ChatState)`. Extract `state['messages']` and pass to `llm.invoke(messages)`. Return only the updated field: `{'messages': [response]}` — not the entire state. This keeps node functions clean and composable.

4. 4

   Build and compile the StateGraph

   Instantiate `StateGraph(ChatState)`. Add nodes with `graph.add_node('chat_node', chat_node)`. Add edges: `START → chat_node → END`. For persistence, instantiate a checkpointer (`MemorySaver()` for RAM) BEFORE compilation, then compile with `graph.compile(checkpointer=checkpoint)`. Without the checkpointer argument, persistence is disabled.

5. 5

   Verify the simple workflow in Jupyter

   Invoke the compiled graph: `chatbot.invoke({'messages': [HumanMessage(content='...')']})`. Extract the AI reply with `response['messages'][-1].content`. Run a while loop to accept continuous user input and break on 'exit', 'quit', or 'bye'. At this stage, demonstrate the memory limitation: without persistence, asking 'what is my name?' after introducing yourself will fail — use this to motivate the next step.

6. 6

   Add Thread ID configuration for persistence

   Define a `thread_id` variable (e.g., `'thread_1'`). Build a config dict: `config = {'configurable': {'thread_id': thread_id}}`. Pass `config=config` to every `.invoke()` or `.stream()` call. Switch thread_id values to demonstrate user isolation: Thread 1 remembers 'my name is Bappy', Thread 2 has no knowledge of it. Inspect saved state with `chatbot.get_state(config)`.

7. 7

   Migrate logic to a backend Python module

   Create `agentic_chatbot_backend.py`. Move all imports, LLM init, State definition, node function, graph build, and compile into this file. Export the `chatbot` object. Keep this file backend-only — no UI code. Import `chatbot` into `app.py` for the interface layer.

8. 8

   Build the Streamlit UI

   In `app.py`, import `streamlit as st` and `from agentic_chatbot_backend import chatbot`. Set title with `st.title()`. Use `st.chat_input()` to capture user messages. Use `st.chat_message('user')` and `st.chat_message('assistant')` wrappers to render messages with appropriate icons. Launch with `streamlit run app.py` (not `python app.py`) — Streamlit runs on localhost:8501 by default.

9. 9

   Add Streamlit Session State for conversation history display

   Check `if 'message_history' not in st.session_state`, then initialise it as an empty list. On each turn, append `{'role': 'user', 'content': user_input}` before invoking the LLM, and append `{'role': 'assistant', 'content': ai_message}` after. At render time, loop over `st.session_state.message_history` and render each entry with `st.chat_message()`. Without this, Streamlit re-executes from scratch on each interaction and previous messages disappear.

10. 10

    Implement streaming responses

    Replace `.invoke()` with `.stream()` using `stream_mode='messages'`. Iterate: `for message_chunk, metadata in chatbot.stream(...)`. Extract `message_chunk.content` per chunk. Wrap the loop inside `st.write_stream()` so tokens render progressively. Ensure Streamlit is up to date (`pip install --upgrade streamlit`) — older versions lack `write_stream`. After the stream completes, append the full assembled AI message to session state history.

11. 11

    Extend with advanced capabilities one at a time

    Following the Series-Based Feature Addition principle, layer in: (a) RAG integration — connect a vector database so users can upload documents and chat over them; (b) Tool integration — add real-time tools so the agent fetches live information; (c) LangSmith observability — integrate for monitoring, tracing, and debugging agent execution; (d) HITL (Human-in-the-Loop) — add checkpoints where a human must approve before the agent continues; (e) Short-term and long-term memory concepts. Tackle each as a separate iteration.

12. 12

    Prepare for production deployment

    Follow a CI/CD pipeline. Dockerize the entire agentic application. Deploy to AWS (full CI/CD setup from scratch) or Render cloud (fast deployment path). Swap MemorySaver for a database-backed checkpointer before production — RAM storage is temporary and clears on kernel/server restart.

// What are real-world examples of the LangGraph chatbot framework in action?

// What mistakes should you avoid when building a LangGraph chatbot?

• Using a plain string field instead of `Annotated[list[BaseMessage], add_messages]` in State causes each new message to overwrite the previous one, destroying conversation history.
• Forgetting to pass `config=config` (with thread_id) to every `.invoke()` or `.stream()` call means the checkpointer cannot associate state with the correct thread — all users share one state bucket or persistence silently fails.
• Running the Streamlit app with `python app.py` instead of `streamlit run app.py` will not launch the server.
• Not using Streamlit Session State (`st.session_state`) for message display causes the UI to re-render from scratch on each interaction, erasing all visible previous messages even if backend persistence is working correctly.
• Using MemorySaver in production — it is a temporary RAM store. Restarting the server or kernel clears all conversation history. Swap for a database-backed checkpointer before production.
• Placing the `st.title()` call after the conversation-loading loop causes the title to appear mid-page — always assign static UI elements at the top of the Streamlit script.
• Skipping the Jupyter notebook prototyping phase and going directly to `.py` files makes it harder to inspect intermediate state outputs and debug node behaviour.
• Not upgrading Streamlit before using `st.write_stream()` — older versions raise an `AttributeError`. Always run `pip install --upgrade streamlit` before implementing streaming.

// What are the key LangGraph terms you need to know?

State

A TypedDict passed through every node in a LangGraph graph. It is the shared data container that nodes read from and write updates to. For chatbots, the key field is `messages`.

add_messages

A LangGraph built-in reducer function imported from `langgraph.graph`. When used as the annotation for the messages field in State, it appends new messages to the existing list instead of replacing it — preserving the full conversation story.

Reducer Concept

The mechanism by which state fields are updated by merging (adding) new values rather than replacing old ones. `add_messages` is the reducer for chat history; `operator.add` is used for other list fields.

Chat Node

The node function in a chatbot workflow that receives the current state (including full message history), calls the LLM with those messages, and returns the AI's response to be appended to state.

Persistence

A built-in LangGraph layer that automatically saves and restores the state of an agent or graph workflow over time using a checkpointer. Enables memory, fault tolerance, and conversation resumption.

Checkpointer

The component inside persistence that captures a snapshot of the graph's state after every Super Step and saves it to a storage service (RAM via MemorySaver, or a database). It is passed to `graph.compile(checkpointer=...)` .

MemorySaver

A LangGraph checkpointer that stores state snapshots in RAM. Temporary — data is lost on kernel or server restart. Import: `from langgraph.checkpoint.memory import MemorySaver`. Use for development and prototyping; swap for a database checkpointer in production.

Super Step

A single edge traversal between two nodes (or a parallel group of edge traversals). After each Super Step, the checkpointer captures an intermediate state snapshot.

Intermediate State

The state snapshot captured by the checkpointer after each Super Step — not just the final result. Enables fault tolerance by allowing resumption from the crash point rather than from the beginning.

Fault Tolerance

The ability of a LangGraph workflow to resume execution from the last saved checkpoint rather than restarting from scratch if the application crashes mid-execution.

Thread ID

A unique identifier passed in the config dict (`{'configurable': {'thread_id': '...'}}`). The checkpointer stores each user's or session's state under their Thread ID, enabling complete isolation between concurrent users — analogous to separate chats in ChatGPT.

Streaming Response

Rendering LLM output token-by-token as it is generated, rather than waiting for the full response. Implemented in LangGraph with `.stream(stream_mode='messages')` and in Streamlit with `st.write_stream()`.

Session State

Streamlit's `st.session_state` dictionary — a memory store that persists across Streamlit's script re-executions within a user session. Required to display accumulated chat history in the UI without it being wiped on each interaction.

RAG (Retrieval Augmented Generation)

A capability added to the chatbot that connects it to a vector database so users can upload documents and perform chat operations on top of custom knowledge bases.

HITL (Human-in-the-Loop)

A LangGraph integration pattern where a human approval step is inserted into the agent workflow before certain actions are taken — enabling oversight and control of autonomous behaviour.

LangSmith

An observability and monitoring tool that integrates with LangGraph to trace, log, and debug the full execution flow of an agent — including which components triggered, token usage, and timing.

StateGraph

The core LangGraph class used to define a graph workflow. Instantiated with a State class (`StateGraph(ChatState)`), nodes and edges are added to it before calling `.compile()` to produce an executable workflow object.

// FREQUENTLY ASKED QUESTIONS