Create a chatbot: Part 4 - Adding memory

This posts start from the end of the part 3, you can see it here, https://github.com/bernatsampera/chatbot/tree/part3

For default the langgraph studio has already the logic to remember the current conversation and thread, but if we want to create our own application with fastapi we need to implement this logic ourselves.

Add the memory store to the graph

For this example we’ll just be using the MemorySaver, but for prod would be better to use another of the built in langgraph classes to connect it with a db, take a look at https://samperalabs.com/posts/basic-langgraph-chatbot-with-memory to see how it’s done.

# chatbot/chat.py 

memory = MemorySaver()
graph = graph_builder.compile(checkpointer=memory)

Handle the thread_id from the backend endpoint

class ChatRequest(BaseModel):
    message: str
    conversation_id: str | None = None

@app.post("/chat")
def chat(request: ChatRequest):
    """Chat endpoint to start the graph with a user message."""
    # Get or create conversation ID (thread_id in LangGraph)
    thread_id = request.conversation_id
    if not thread_id:
        thread_id = str(uuid.uuid4())

    # Create the config with thread_id for LangGraph's checkpointer
    config = {"configurable": {"thread_id": thread_id}}

    # Create input state with the new user message
    input_state = {"messages": [{"role": "user", "content": request.message}]}

    # Run the graph with the config - LangGraph will handle memory automatically
    result = graph.invoke(input_state, config)

    # Extract the assistant's response
    assistant_message = result["messages"][-1]

    return {"response": assistant_message.content, "conversation_id": thread_id}

Update the frontend so it remembers the current conversation id

Let’s create a reference with react to keep the conversation id through a session.

const createChatModelAdapter = (
  conversationIdRef: React.RefObject<string | null>
): ChatModelAdapter => ({
...
        body: JSON.stringify({
          message: userMessage,
          conversation_id: conversationIdRef.current
        }),
...

      const data = await response.json();
      const responseText = data.response || ERROR_MESSAGES.NO_RESPONSE;

      // Store the conversation ID for future requests
      if (data.conversation_id) {
        conversationIdRef.current = data.conversation_id;
      }

      return {
        content: [
          {
            type: "text",
            text: responseText
          }
        ]
      };

And on the react component

  const conversationIdRef = useRef<string | null>(null);
  const chatRuntime = useLocalRuntime(
    createChatModelAdapter(conversationIdRef)
  );