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+ app with Signals, wire it to LangGraph agents, and keep the UI inside Angular templates, dependency injection, and your design system.

#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();            // unknown
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. Here's a minimal chat agent using the example from this repository:

# examples/chat/python/src/graph.py
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

// 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 { injectAgent } from '@threadplane/langgraph';
 
@Component({
  selector: 'app-chat',
  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 telemetry. See Lifecycle Signals.

#Deploy to Production

When you're 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