CopilotKit

Angular feature examples

Browse examples, source, API docs, and support state for all 41 Angular features.

The catalog covers all 41 supported Angular features. Forty entries include a runnable example. Every entry links to its source and the closest API documentation.

Shared setup#

Install @copilotkit/angular and the matching @angular/cdk major. Register the provider in your application config:

src/app/app.config.ts
import { ApplicationConfig } from "@angular/core";
import { provideCopilotKit } from "@copilotkit/angular";

export const appConfig: ApplicationConfig = {
  providers: [provideCopilotKit({ runtimeUrl: "/api/copilotkit" })],
};

The source link opens the standalone Angular component used for that feature.

A2UI Error Recovery

a2ui-recovery
Supported

Visible A2UI validate-retry recovery loop: an invalid render heals to a valid one, an always-invalid render shows a graceful recovery-exhausted fallback

Agent Config Object

agent-config
Supported

Forwarded props / config objects

Attachments

multimodal
Supported

File upload and agent processing

Authentication

auth
Supported

Framework-native authentication

Background Agents

background-agents
Supported

A long-running deep-research tool dispatched as a background task, surfaced inline as a live "working" activity card

Beautiful Chat

beautiful-chat
Supported

Canonical polished starter chat (same as /examples/integrations/langgraph-python)

Browser Use

browser-use
Supported

The agent drives a real local headless browser to fetch pages and renders the results inline in chat

Chat Customization: CSS

chat-customization-css
Supported

Customizing chat components via CSS

Chat Customization: Slots

chat-slots
Supported

Customizing chat components via the slot system

Declarative UI: Dynamic A2UI

declarative-gen-ui
Supported

Canonical A2UI BYOC — custom catalog wired via a2ui.catalog

Declarative UI: Fixed A2UI

a2ui-fixed-schema
Supported

A2UI rendering against a known, fixed client-side schema

Frontend tools: async

frontend-tools-async
Supported

Register an async browser tool whose result returns to the agent.

Frontend Tools: In-app Actions

frontend-tools
Supported

Frontend tool execution triggered by the agent

Generative UI: agent state

gen-ui-agent
Supported

Read live agent state with injectAgentStore and render it in the chat transcript.

Generative UI: component rendering

gen-ui-tool-based
Supported

Render typed tool results with registerFrontendTool and a standalone Angular component.

Generative UI: Rendering multiple tools

tool-rendering-reasoning-chain
Supported

Sequential tool calls with reasoning tokens rendered side-by-side

Generative UI: Tool Rendering (Custom default)

tool-rendering-custom-catchall
Supported

Single branded wildcard renderer that paints every tool call — one card handles them all

Generative UI: Tool Rendering (Default)

tool-rendering-default-catchall
Supported

Out-of-the-box rendering: backend tools surfaced via CopilotKit's built-in default catch-all renderer; no frontend customization

Generative UI: Tool Rendering (Specific)

tool-rendering
Supported

Custom per-tool renderers for the tools you care about, plus a wildcard catch-all for the rest

Headless UI: Complete

headless-complete
Supported

Full headless UI with messages, tools, gen UI

Headless UI: Simple

headless-simple
Supported

Simple headless UI getting started

Human in the loop: headless interrupts

interrupt-headless
Supported

Resolve an agent interrupt with injectInterrupt from application UI outside the chat.

Human in the loop: in app

hitl-in-app
Supported

Render approval UI outside chat and resolve the pending tool with the user's decision.

Human in the loop: in chat

hitl-in-chat
Supported

Pause a tool call for user input with registerHumanInTheLoop and render the decision inside chat.

Human in the loop: interrupts

gen-ui-interrupt
Supported

Handle an agent interrupt with injectInterrupt and render the response controls inside chat.

MCP Apps

mcp-apps
Supported

MCP server integration with UI display

Observational Memory

observational-memory
Supported

Conversation context is compressed and activated out of band; the background work surfaces inline as activity cards

Open Generative UI: Custom

open-gen-ui-advanced
Supported

Agent-authored UI that can invoke frontend sandbox functions from inside the iframe

Open Generative UI: Default

open-gen-ui
Supported

Agent-generated UI from arbitrary component libraries

Prebuilt chat

agentic-chat
Supported

Add a full chat surface with the standalone CopilotChat component.

Prebuilt popup

prebuilt-popup
Supported

Add a floating, accessible chat dialog with CopilotPopup.

Prebuilt sidebar

prebuilt-sidebar
Supported

Add a responsive docked or overlay chat with CopilotSidebar.

Reasoning: custom

reasoning-custom
Supported

Replace the reasoning-message slot with a standalone Angular component.

Reasoning: Default

reasoning-default
Supported

Built-in CopilotChatReasoningMessage rendering with no slot override

Shared state: agent context

readonly-state-agent-context
Supported

Share read-only application state with the agent through connectAgentContext.

Shared State: Read + Write

shared-state-read-write
Supported

Bidirectional agent state — UI writes preferences, agent writes notes back

Shared State: Read-only

shared-state-read
Supported

Frontend recipe form publishes shared state via agent.setState; agent reads but does not mutate the recipe (neutral default agent, no backend tool)

Shared State: Streaming

shared-state-streaming
Supported

Per-token state delta streaming from agent to UI

Sub-Agents

subagents
Supported

Multiple agents with visible task delegation

Thread ID: frontend tool round trip

threadid-frontend-tool-roundtrip
Supported

Keep an explicit thread ID across an async frontend-tool call and resumed agent run.

Voice

voice
Supported

Real-time voice interaction