Introduction

Picking an adapter? This guide covers @threadplane/langgraph, the LangChain/LangGraph adapter. If your backend speaks the AG-UI protocol (CrewAI, Mastra, Microsoft Agent Framework, and so on), reach for @threadplane/ag-ui instead. Choosing an adapter puts them side by side.

@threadplane/langgraph is the Angular adapter layer for production agent UI surfaces: chat, durable threads, interrupts, subagents, planning, memory, and generative UI. You build the whole Angular 20–22 app with Signals, wire it to LangGraph agents, and keep the UI inside Angular templates, dependency injection, and your design system.

How it fits

What is injectAgent()?

injectAgent() is an Angular function that creates a reactive, streaming connection to a LangGraph agent. Configured globally via provideAgent({...}) at bootstrap, it returns an object whose properties are Angular Signals — meaning your templates update automatically as the agent streams responses, token by token.

// chat.component.ts
protected readonly chat = injectAgent();
 
// Every property is a Signal — reactive, synchronous, no subscriptions
chat.messages();         // Message[]
chat.status();           // 'idle' | 'running' | 'error'
chat.isLoading();        // boolean
chat.error();            // AgentError | undefined
chat.interrupt();        // AgentInterrupt | undefined
chat.history();          // AgentCheckpoint[]
chat.langGraphHistory(); // ThreadState[]

No RxJS. No manual subscriptions. No async pipes. Just Signals that work with Angular's OnPush change detection out of the box.

The Architecture

Watch a full conversation turn flow through the stack — from user input to rendered response:

Build Your Agent

LangGraph agents are Python programs defined as directed graphs. A minimal chat agent looks like this:

from langchain_core.messages import SystemMessage
from langchain_core.runnables import RunnableConfig
from langgraph.graph import END, START, MessagesState, StateGraph
from langchain_openai import ChatOpenAI
 
llm = ChatOpenAI(model="gpt-5-mini")
 
def call_model(state: MessagesState, config: RunnableConfig) -> dict:
    """Invoke the LLM with the current message history."""
    system_prompt = config.get("configurable", {}).get(
        "system_prompt", "You are a helpful assistant."
    )
    messages = [SystemMessage(content=system_prompt)] + state["messages"]
    response = llm.invoke(messages)
    return {"messages": [response]}
 
# Build the graph: START -> call_model -> END
builder = StateGraph(MessagesState)
builder.add_node("call_model", call_model)
builder.add_edge(START, "call_model")
builder.add_edge("call_model", END)
 
graph = builder.compile()

Run Your Agent Locally

pip install -U "langgraph-cli[inmem]"

OPENAI_API_KEY=sk-...
LANGSMITH_API_KEY=lsv2_...

cd examples/chat/python
langgraph dev

Connect with Angular

Now connect your Angular app to the running agent using injectAgent().

npm install @threadplane/langgraph @threadplane/chat @langchain/core @langchain/langgraph-sdk

// app.config.ts
import { ApplicationConfig, signal } from '@angular/core';
import { provideAgent } from '@threadplane/langgraph';
 
export const appConfig: ApplicationConfig = {
  providers: [
    provideAgent({
      apiUrl: 'http://localhost:2024',
      assistantId: 'chat',
      threadId: signal(localStorage.getItem('threadId')),
      onThreadId: (id) => localStorage.setItem('threadId', id),
    }),
  ],
};

// chat.component.ts
import { ChangeDetectionStrategy, Component, signal, computed } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { injectAgent } from '@threadplane/langgraph';
 
@Component({
  selector: 'app-chat',
  standalone: true,
  imports: [FormsModule],
  templateUrl: './chat.component.html',
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class ChatComponent {
  input = signal('');
 
  protected readonly chat = injectAgent();
 
  // Derived signals — compose with computed()
  isStreaming = computed(() => this.chat.isLoading());
  messageCount = computed(() => this.chat.messages().length);
 
  send() {
    const msg = this.input();
    if (!msg.trim()) return;
    this.chat.submit({ message: msg });
    this.input.set('');
  }
}

ng serve

Key Concepts

Everything injectAgent() gives you out of the box — click any to learn more:

That same agent also exposes injectAgent().lifecycle — eight read-only signals that capture key transitions (first chunk, first interrupt, tool start/complete, errors) for debugging and observability. See Lifecycle Signals.

Deploy to Production

When you are ready to go live, deploy your agent to LangGraph Cloud and point your Angular app to the deployment URL.

git init && git add . && git commit -m "initial agent"
gh repo create my-agent --public --source=. --push

// environment.ts
export const environment = {
  langgraphUrl: 'http://localhost:2024', // dev
};
 
// environment.prod.ts
export const environment = {
  langgraphUrl: 'https://my-agent-abc123.langsmith.dev', // prod
};
 
// app.config.ts
provideAgent({
  apiUrl: environment.langgraphUrl,
  assistantId: 'chat',
})

ng build --configuration production
# Deploy dist/ to your hosting platform

What's Next