Introduction

Agent is the Signal-native streaming library for Angular 20+ — built natively for LangGraph, without React translation layers. Build streaming AI applications with Angular Signals, connect to LangGraph agents, and ship production-ready frontends for your AI products.

What is agent()?

agent() is an Angular function that creates a reactive, streaming connection to a LangGraph agent. It returns an object whose properties are Angular Signals — meaning your templates update automatically as the agent streams responses, token by token.

const chat = agent({
  assistantId: 'chat_agent',
});
 
// 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-agent/src/chat_agent/agent.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-agent
langgraph dev

Connect with Angular

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

npm install @ngaf/langgraph

// app.config.ts
import { ApplicationConfig } from '@angular/core';
import { provideAgent } from '@ngaf/langgraph';
 
export const appConfig: ApplicationConfig = {
  providers: [
    provideAgent({
      apiUrl: 'http://localhost:2024',
    }),
  ],
};

// chat.component.ts
import { ChangeDetectionStrategy, Component, signal, computed } from '@angular/core';
import { agent } from '@ngaf/langgraph';
 
@Component({
  selector: 'app-chat',
  templateUrl: './chat.component.html',
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class ChatComponent {
  input = signal('');
 
  chat = agent({
    assistantId: 'chat_agent',
    threadId: signal(localStorage.getItem('threadId')),
    onThreadId: (id) => localStorage.setItem('threadId', id),
  });
 
  // 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 agent() gives you out of the box — click any to learn more:

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,
})

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

What's Next