Angular quickstart

@copilotkit/angular provides Angular components, directives, and services for CopilotKit. This guide gets you to a working Angular app with a chat UI backed by Copilot Runtime. When you select an agent backend in the sidebar, the backend step below changes with it; without a selection, the guide uses CopilotKit's BuiltInAgent.

The runtime runs on your server, keeps model credentials out of the browser, and exposes the default agent that CopilotChat uses automatically.

Take your Angular copilot from local to production

Add durable threads, inspection, and managed or self-hosted Enterprise Intelligence without changing the Angular frontend APIs in this guide.

Get Enterprise Intelligence free

What is CopilotKit for Angular?#

CopilotKit for Angular is the first-party, signal-based Angular frontend for AG-UI agents and Copilot Runtime. It provides complete chat surfaces and headless APIs, and it supports zoneless applications.

Prerequisites#

An OpenAI API key (or another model provider supported by Model Selection)
Angular 20, 21, or 22
Node.js 22

Getting started#

Create your Angular app#

If you don't have one already, pin the CLI to one of the supported majors. This example uses Angular 22:

npx @angular/cli@22 new my-copilot-app
cd my-copilot-app

Install CopilotKit#

Install the Angular frontend package, @angular/cdk, and @copilotkit/runtime for your local Copilot Runtime server:

npm install @copilotkit/angular @angular/cdk @copilotkit/runtime
npm install -D tsx typescript @types/node

pnpm add @copilotkit/angular @angular/cdk @copilotkit/runtime
pnpm add -D tsx typescript @types/node

yarn add @copilotkit/angular @angular/cdk @copilotkit/runtime
yarn add -D tsx typescript @types/node

Match @angular/cdk to your Angular version

@angular/cdk must share your Angular major version. Most package managers resolve this for you, but if you hit a peer-dependency error, pin it explicitly (for example @angular/cdk@^22).

Connect the selected agent backend#

This URL keeps the agent backend selected. The Angular setup remains shared; the backend setup below comes from that integration's canonical showcase source.

First, add CopilotKitMiddleware to your create_agent call. The middleware is what makes every CopilotKit feature on the frontend — frontend tools, shared state, agent context, and generative UI components — visible to your LangGraph agent on every turn.

frontend_tools.py

from langchain.agents import create_agent
from langchain_openai import ChatOpenAI
from copilotkit import CopilotKitMiddleware

graph = create_agent(
    model=ChatOpenAI(model="gpt-5.4"),
    tools=[],
    middleware=[CopilotKitMiddleware()],
    system_prompt="You are a helpful, concise assistant.",
)

Install the SDK

If copilotkit isn't already in your project, add it so the import above resolves. Pick the package manager that matches your project:

uv add copilotkit

poetry add copilotkit

pip install copilotkit --extra-index-url https://copilotkit.gateway.scarf.sh/simple/

conda install copilotkit -c copilotkit-channel

Expose the selected backend through Copilot Runtime

Configure Copilot Runtime to register this backend as the default agent at /api/copilotkit. Continue with the selected backend's Copilot Runtime guide for its runtime adapter, credentials, and server command. Do not replace it with the BuiltInAgent server from the standalone Angular path.

Import the styles#

Add the package stylesheet to your global styles. It's self-contained, so the chat renders without any other CSS.

src/styles.css

@import "@copilotkit/angular/styles.css";

Connect to Copilot Runtime#

Point provideCopilotKit at the runtime endpoint. The chat uses the agent that your runtime registers as default.

src/app/app.config.ts

import { ApplicationConfig } from "@angular/core";
import { provideCopilotKit } from "@copilotkit/angular"; 

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

Add the chat UI#

Import the CopilotChat component into your root component and drop it into the template.

src/app/app.ts

import { Component } from "@angular/core";
import { CopilotChat } from "@copilotkit/angular"; 

@Component({
  selector: "app-root",
  imports: [CopilotChat], 
  template: `
    <div style="height: 100vh">
      <copilot-chat />
    </div>
  `,
})
export class App {}

Run the backend, runtime, and Angular app#

Start the selected agent backend and Copilot Runtime with the commands from its runtime guide. Confirm http://localhost:8200/api/copilotkit/info reports the default agent, then start Angular:

npm start

Open the Angular CLI URL (usually http://localhost:4200) and send a message. The request now follows the selected path end to end: Angular → Copilot Runtime → your selected agent backend.

Next steps#

Runtime and backend docs: configure the server, secure requests, and deploy without leaving the selected Angular surface.
Enterprise Intelligence: add durable threads, inspection, and cloud-hosted or self-hosted operations.
Angular task guides: build chat UI, tools, generative UI, interrupts, shared state, threads, memory, attachments, and headless UI.
Angular feature examples: find runnable examples and canonical shared Angular source for each supported feature.
Angular API reference: use components, signals, tools, context, and runtime services.
Production and lifecycle: handle cleanup, errors, server rendering, hydration, zoneless Angular, and browser-only features.