Agent→Render→Chat

@ngaf/langgraph

Ship LangGraph agents in Angular — without building the plumbing

Signal-native streaming, thread persistence, interrupts, and deterministic testing. The complete agent primitive layer for Angular 20+.

Download the Guide View Docs

Angular 20+LangGraphLangChainDeepAgent

With @langchain/langgraph-sdk alone

The JS SDK gives you a Client. You build everything else.

✗ Raw Client + for-await SSE loop — no Angular integration
✗ Manual BehaviorSubject → Signal wiring for each state slice
✗ Thread persistence, interrupt handling built from scratch
✗ No OnPush-compatible signal API — custom change detection workarounds
✗ Testing against live LangGraph API — slow, flaky, non-deterministic

With @ngaf/langgraph

agent() gives you production-ready streaming on day one.

✓ Signals-native API — no zone patching needed
✓ Automatic subscription lifecycle management
✓ OnPush compatible from day one
✓ Built-in thread persistence and restore
✓ interrupt() signal for human approval flows
✓ MockAgentTransport for offline, deterministic tests

Features

Every LangGraph capability, production-ready

agent() API

Signal-native streaming with automatic state management. One function to connect your Angular app to LangGraph.

Thread Persistence

Conversations survive page refreshes. Built-in threadId signal with localStorage restore and thread list UI.

Interrupt Handling

Human-in-the-loop approval flows. interrupt() signal maps directly to approve, edit, or cancel actions.

Tool Call Support

Structured tool execution state. Progressive disclosure — live steps, completion, collapsible history.

Time Travel

Navigate agent state history. Replay, inspect, and debug any point in a conversation timeline.

DeepAgent Support

Multi-agent orchestration with full streaming support. Subgraphs, delegation, parallel execution.

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({
  assistantId: 'my-agent',
  threadId: savedThreadId,
  onThreadId: (id) => localStorage.setItem('threadId', id),
});

Head to Head

@langchain/langgraph-sdk vs @ngaf/langgraph

Capability

@langchain/langgraph-sdk

@ngaf/langgraph

SSE streaming

Raw Client + for-await loop

✓Signal-native via agent()

State management

Manual BehaviorSubject → Signal

✓Built-in reactive state

Thread persistence

DIY localStorage + API calls

✓Built-in threadId signal + restore

Interrupt handling

Manual Command.RESUME wiring

✓interrupt() signal + approve/edit/cancel

Tool call rendering

Parse raw SSE events

✓Structured tool call state

Time travel

Build from scratch

✓Built-in state history

Testing

Against live API

✓MockAgentTransport, offline, <100ms

OnPush compatibility

Custom change detection workarounds

✓Native signal support

React parity

useStream() is React-only

✓agent() — full useStream() parity for Angular

Agent Guide

The Enterprise Guide to Agent Streaming in Angular

Six chapters covering the last-mile gap, the agent() API, thread persistence, interrupts, time-travel, and deterministic testing with MockAgentTransport.

Part of the Cacheplane Angular Agent Framework.

↓ Download PDF

Optional — Get notified of updates

The Cacheplane Stack

This library is part of a cohesive three-layer architecture.

Gen UI

@ngaf/render

Agents that render UI — on open standards

Explore Render →

Chat

@ngaf/chat

Production chat UI in days, not sprints

Explore Chat →