@threadplane/langgraph

LangGraph agent UI for Angular.

Ship LangGraph agents inside your Angular 20+ app with headless chat, durable threads, interrupts, branch/history, tool progress, and generative UI.

Get startedView source

Not sure if LangGraph is right for your backend? See Choosing an adapter.

MITAngular 20+LangGraph + AG-UI

Providers

Drop it into app.config.ts. Done.

provideAgent wires LangGraph into Angular's DI container. From any component, injectAgent() returns a signal-based handle for messages, status, errors, and interrupts.

  • provideAgent — wire it once in app.config.ts
  • injectAgent() returns a typed signal-based handle
  • OnPush tested
  • Test transports for deterministic specs
provideAgent
LangGraph wiring.
injectAgent()
No-args helper.
MockAgentTransport
Deterministic tests.
API reference →
app.config.ts
import { provideAgent } from '@threadplane/langgraph';

export const appConfig: ApplicationConfig = {
  providers: [
    provideAgent({
      apiUrl: '/agent',
      assistantId: 'my-agent',
    }),
  ],
};

// any component
export class ChatComponent {
  agent = injectAgent();
  messages = this.agent.messages;
  status = this.agent.status;
}

Signals

Reactive without RxJS gymnastics.

Every agent surface is exposed as a signal — message stream, tool progress, interrupts, errors, status. Compose with the rest of your Angular reactivity story. No subscriptions to leak.

  • messages() / status() / error() / reload()
  • interrupt() for human-in-the-loop gates
  • Branch / history / time-travel built in
  • Computed signals integrate cleanly
messages()
Streaming message list.
interrupt()
Approval-gate signal.
reload()
Recover from errors.
Read the streaming guide →

Developer Experience

Production streaming in a few lines

Minimal Setup
// app.config.ts
import { provideAgent } from '@threadplane/langgraph';

providers: [
  provideAgent({
    assistantId: 'my-agent',
    apiUrl: 'https://my-langgraph.cloud',
  }),
];

// component
import { injectAgent } from '@threadplane/langgraph';
const chat = injectAgent();

// Reactive signals — OnPush compatible
chat.messages();    // Signal<Message[]>
chat.isLoading();   // Signal<boolean>
chat.interrupt();   // Signal<AgentInterrupt | undefined>
Full Configuration
// app.config.ts
import { provideAgent, MockAgentTransport, FetchStreamTransport } from '@threadplane/langgraph';

providers: [
  provideAgent({
    apiUrl: environment.langgraphUrl,
    assistantId: 'my-agent',
    threadId: savedThreadId,
    onThreadId: (id) => localStorage.setItem('threadId', id),
    transport: isTest
      ? new MockAgentTransport(fixtures)
      : new FetchStreamTransport(),
  }),
];

// component
import { injectAgent } from '@threadplane/langgraph';
const chat = injectAgent();

Field report

The last-mile gap in Angular AI.

  • Six production-readiness dimensions for Angular AI
  • Concrete patterns — error boundaries, fallbacks, observability, deploy
  • No vendor pitch. Just what we learned shipping it.

Already on the list? Download the PDF directly.

angular-agent-readiness-guide.pdf
Field report · 18 pages
From Prototype to Production
Six production-readiness dimensions for Angular AI teams.
Threadplane

Stop stalling on agentic Angular.

Install the framework, read the docs, and have a streaming chat in your app this afternoon.

LangGraph demo →AG-UI demo →See each feature in action →

MIT · No signup required · App telemetry off by default