Persistence

Thread persistence keeps conversations alive across page refreshes, browser restarts, and server deployments. This guide covers configuring checkpointers on the Python side and wiring up thread management in your Angular components with injectAgent().

#Python: Checkpointer Setup

Every LangGraph agent needs a checkpointer to persist state between invocations. The checkpointer you choose depends on your environment.

from langgraph.checkpoint.memory import MemorySaver
from langgraph.graph import START, END, MessagesState, StateGraph
from langchain_openai import ChatOpenAI
 
llm = ChatOpenAI(model="gpt-5-mini")
 
def call_model(state: MessagesState) -> dict:
    return {"messages": [llm.invoke(state["messages"])]}
 
builder = StateGraph(MessagesState)
builder.add_node("model", call_model)
builder.add_edge(START, "model")
builder.add_edge("model", END)
 
# MemorySaver stores checkpoints in-process memory
# Fast for development — lost when the process restarts
graph = builder.compile(checkpointer=MemorySaver())

#Python: Thread IDs in Graph Invocation

The thread ID is how LangGraph associates a conversation with its checkpoint history. Pass it in the configurable dict every time you invoke the graph:

# First message creates the thread
result = graph.invoke(
    {"messages": [{"role": "user", "content": "What is LangGraph?"}]},
    config={"configurable": {"thread_id": "user_123"}}
)
 
# Second message continues the same conversation
result = graph.invoke(
    {"messages": [{"role": "user", "content": "How does it handle state?"}]},
    config={"configurable": {"thread_id": "user_123"}}
)
# The agent sees both messages — the full history is restored from the checkpoint

#Angular: Basic Thread Persistence

Save the thread ID to localStorage so conversations survive page refreshes. injectAgent() handles thread creation and restoration automatically; the configuration lives in your root provideAgent({...}) call.

import { signal } from '@angular/core';
import { provideAgent } from '@threadplane/langgraph';
 
export const appConfig: ApplicationConfig = {
  providers: [
    provideAgent({
      apiUrl: 'http://localhost:2024',
      assistantId: 'chat_agent',
      // Restore thread from localStorage on app start
      threadId: signal(localStorage.getItem('threadId')),
      // Persist thread ID whenever a new thread is created
      onThreadId: (id) => localStorage.setItem('threadId', id),
    }),
  ],
};

#Angular: Thread-List Component

A real chat application needs a sidebar showing all conversations. Here is a full thread-list component that manages multiple threads alongside your chat singleton. The active-thread signal is held in shared state and wired into provideAgent({...}) at bootstrap; the component reads back through injectAgent().

// thread-state.ts — shared signals injected by app.config.ts
import { signal } from '@angular/core';
 
export const activeThreadId = signal<string | null>(null);

#Reactive Thread Switching

When you pass a Signal as threadId to provideAgent({...}), injectAgent() reacts to every change. Set the signal and the conversation switches automatically — no imperative calls needed.

// In app.config.ts:
provideAgent({
  apiUrl: '...',
  assistantId: 'chat_agent',
  threadId: activeThreadId,           // Signal — switches reactively
  onThreadId: (id) => activeThreadId.set(id),
});
 
// Anywhere in the app — clicking a thread in the sidebar triggers a reactive switch
selectThread(id: string) {
  activeThreadId.set(id);
  // injectAgent() detects the signal change, fetches the thread's
  // checkpoint from the server, and updates all derived signals
}

#Manual Thread Switching

Use switchThread() for imperative thread changes. This is useful when you want to explicitly control when the switch happens — for example, after an animation completes or a modal closes.

// Start a fresh conversation (null = new thread on next submit)
newConversation() {
  this.chat.switchThread(null);
}
 
// Jump to a specific thread
loadConversation(threadId: string) {
  this.chat.switchThread(threadId);
}
 
// Fork a conversation — create a new thread from current state
forkConversation() {
  this.chat.switchThread(null);
  this.chat.submit({
    messages: this.chat.messages(),
  });
}

#Checkpoint Recovery

When a connection drops mid-stream, joinStream() reconnects to an in-progress run without restarting the agent. This prevents duplicate work and lost tokens.

// Rejoin a running stream after a network interruption
await chat.joinStream(runId, lastEventId);
// Picks up from the last event — no duplicate agent execution

#Thread Lifecycle

#What's Next