@ngaf/langgraph

Signal-native streaming for Angular.

Ship LangGraph agents inside your Angular 20+ app. Thread state, interrupts, branch/history, and tool progress — all surfaced as signals.

Get startedView source
MITAngular 20+LangGraph + AG-UI

Providers

Drop it into app.config.ts. Done.

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

  • provideAgent + provideAgUiAgent — pick your runtime
  • agent() returns a typed signal-based handle
  • OnPush tested
  • Test transports for deterministic specs
provideAgent
LangGraph wiring.
provideAgUiAgent
AG-UI wiring.
MockAgentTransport
Deterministic tests.
API reference →
app.config.ts
import { provideAgent } from '@ngaf/langgraph';

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

// any component
export class ChatComponent {
  agent = agent();
  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
import { agent } from '@ngaf/langgraph';

const chat = agent({
  assistantId: 'my-agent',
  apiUrl: 'https://my-langgraph.cloud',
});

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

provideAgent({
  apiUrl: environment.langgraphUrl,
  transport: isTest
    ? new MockAgentTransport(fixtures)
    : new FetchStreamTransport(),
});

const chat = agent({
  apiUrl: environment.langgraphUrl,
  assistantId: 'my-agent',
  threadId: savedThreadId,
  onThreadId: (id) => localStorage.setItem('threadId', id),
});

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.
Agent UI for Angular

Stop stalling on agentic Angular.

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

Try the demo →See each feature in action →

MIT · No signup required · App telemetry off by default