@threadplane/ag-ui

One adapter. Eight backends.

Build an Angular agent UI on any AG-UI-compatible runtime — LangGraph, CrewAI, Mastra, Microsoft Agent Framework, AG2, Pydantic AI, AWS Strands, CopilotKit. Same primitives, same chat surface, same testing story.

Get startedView source

Talking to LangGraph Platform directly? See Choosing an adapter.

MITAngular 20+AG-UI protocol

Already on LangGraph? See @threadplane/langgraph for native streaming, checkpoints, and the typed LangGraph SDK path.

Runtime choice

Pick a backend. Keep the UI.

The AG-UI protocol decouples your agent runtime from your front-end. @threadplane/ag-ui wraps any AG-UI AbstractAgent into the runtime-neutral Agent contract that @threadplane/chat consumes — so the same Angular components ship against eight different runtimes.

  • Stream from Python, .NET, or TypeScript backends — same chat primitives
  • Swap runtimes without rewriting the UI layer
  • Protocol-first: tool calls, state deltas, citations all standardized
  • Future runtimes that ship AG-UI work day-one
LangGraph
Python or TS via AG-UI.
Mastra
TypeScript-native.
CrewAI / AG2
Multi-agent crews.
Browse the AG-UI protocol →
LangGraph
Python / TS
CrewAI
Python
Mastra
TypeScript
MS Agent Framework
.NET / Python
AG2
Python
Pydantic AI
Python
AWS Strands
Python
CopilotKit runtime
TypeScript

Same primitives

Drop-in for everything @threadplane/chat ships.

provideAgent registers an AG-UI client and exposes the same Agent contract that @threadplane/langgraph provides. Every chat primitive — durable threads, interrupts, subagents, generative UI, citations — works against any AG-UI runtime.

  • provideAgent + injectAgent — same names across adapters
  • Identical Agent contract: messages() / status() / interrupt() / reload()
  • Same A2UI surface, themes, and citations rendering
  • MockAgentTransport works the same way for tests
provideAgent
AG-UI wiring.
injectAgent()
No-args helper.
@threadplane/chat
Same components.
API reference →
app.config.ts
import { provideAgent, injectAgent } from '@threadplane/ag-ui';
import { ChatComponent } from '@threadplane/chat';

// app.config.ts
export const appConfig: ApplicationConfig = {
  providers: [
    provideAgent({
      url: 'https://your.agent.endpoint',
    }),
  ],
};

// component
@Component({
  imports: [ChatComponent],
  template: `<chat [agent]="agent" />`,
})
export class App {
  protected readonly agent = injectAgent();
}

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