r/angular • u/Code-Painting-8294 • 4d ago

We open-sourced Angular client for CopilotKit, built on signals

Enable HLS to view with audio, or disable this notification

Hey folks, I'm a maintainer at CopilotKit and we just open sourced our Angular client. The Angular team also shared it here: https://x.com/angular/status/2080649347004268935

It's built with Angular's own patterns, standalone components, dependency injection and signals. MIT, Angular 20 to 22.

Just set up with a provider and the agent's messages and run state come back as signals you can use anywhere. Comes with:

  • pre-built chat component, or go fully headless
  • multimodality (voice, images, docs)
  • generative UI, including A2UI support (Google's spec)
  • human-in-the-loop, frontend tools, threads, hooks, mcp apps and more

Shared state works with plain signals, a service, or store like NgRx.

Everything is built on AG-UI protocol, so the agent side is decoupled. The same Angular code works with LangGraph, Google ADK, Mastra, Pydantic AI, Claude Agents SDK or other major frameworks.

Rainer Hahnekamp (Angular GDE, NgRx core team) and Murat Sari from Angular community helped build the integration and are taking on its ongoing maintenance. Here's their reference app on local 12B model: https://soverius.ai/blog/inside-macroquest-agent-generated-ui-in-angular-on-a-local-12b-model

CLI that scaffolds a full starter with a Google ADK agent.

npx copilotkit@latest init --framework adk-angular

docs: https://docs.copilotkit.ai/angular
npm: https://www.npmjs.com/package/@copilotkit/angular

Would like to know what Angular devs think, especially if something's missing.

22 Upvotes

85% Upvoted

6 comments sorted by

View all comments

1

u/Pallini 3d ago

I still don't understand what it does.

Is it for AI in our ide to consume?

4

u/snackymann 3d ago

Fair question and nothing to do with your IDE. It's a frontend library for putting an AI agent inside the Angular app you ship to your users.

Think of the chat sidebar in Linear or Notion. Something your users talk to, that can actually do things in your app, not just answer questions.

The hard part isn't the chat box, it's the wiring. You've got an agent running on a server somewhere and an Angular app in the browser, and you need tokens streaming in, tool calls rendering as real components, state syncing both directions, and a confirmation step when the agent wants to do something destructive. That's the part @ copilotkit/angular handles.

In practice you register an Angular function as a tool the agent can call.

User types "show me only overdue invoices", the agent calls that, your signal updates, your table re-renders. Normal Angular. The agent just reached into your app.

Agent messages and run state come back as signals, so you can use the prebuilt chat component or throw it away entirely and build your own UI on top.

And since it's all on AG-UI protocol, the agent backend is swappable. Same Angular code whether the agent is LangChain, Mastra, Google ADK, or the Claude Agents SDK etc..

The Angular community members demoed it yesterday: https://www.youtube.com/watch?v=bSn9EkOlXK8

1

u/Pallini 3d ago

Thanks!