@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
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.

provideAgUiAgent 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.

  • provideAgUiAgent + AG_UI_AGENT injection token
  • Identical Agent contract: messages() / status() / interrupt() / reload()
  • Same A2UI surface, themes, and citations rendering
  • MockAgentTransport works the same way for tests
provideAgUiAgent
AG-UI wiring.
AG_UI_AGENT
Injection token.
@threadplane/chat
Same components.
API reference →
app.config.ts
import { provideAgUiAgent, AG_UI_AGENT } from '@threadplane/ag-ui';
import { ChatComponent } from '@threadplane/chat';

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

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

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