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 a local Copilot Runtime and BuiltInAgent.

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

Prerequisites#

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

Getting started#

Create your Angular app#

If you don't have one already. The package supports Angular up to 21, so pin the CLI to a supported major rather than @latest:

npx @angular/cli@21 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@^21).

Create the Copilot Runtime#

Add a small Node server that hosts Copilot Runtime at /api/copilotkit and registers a default built-in agent:

server.ts

import { createServer } from "node:http";
import { BuiltInAgent, CopilotRuntime } from "@copilotkit/runtime/v2";
import { createCopilotNodeListener } from "@copilotkit/runtime/v2/node";

const runtime = new CopilotRuntime({
  agents: {
    default: new BuiltInAgent({
      model: "openai:gpt-5-mini",
      prompt: "You are a helpful assistant for an Angular app.",
    }),
  },
});

const port = Number(process.env.PORT ?? 8200);

createServer(
  createCopilotNodeListener({
    runtime,
    basePath: "/api/copilotkit",
    cors: true,
  }),
).listen(port, () => {
  console.log(
    `Copilot Runtime listening at http://localhost:${port}/api/copilotkit`,
  );
});

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. Because the runtime registers an agent named default, the chat picks it up automatically.

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 {}

Older Angular projects

Angular 19 names the root component app.component.ts with class AppComponent. Add the same imports and template there.

Run the runtime and app#

Start Copilot Runtime in one terminal:

export OPENAI_API_KEY=sk-...
npx tsx server.ts

Start the Angular app in another terminal:

npm start

Open the dev server URL (the Angular CLI prints it, usually http://localhost:4200), send a message, and you'll see it stream back through Copilot Runtime.

Troubleshooting

Chat renders unstyled: Make sure you imported @copilotkit/angular/styles.css in src/styles.css.
No response from the agent: Confirm the runtime server is running and http://localhost:8200/api/copilotkit/info returns agent information.
CORS errors: Keep cors: true in createCopilotNodeListener for local development, or configure CORS to allow your Angular app's origin in production.
Model auth errors: Confirm OPENAI_API_KEY is set in the terminal running npx tsx server.ts.
Peer-dependency error on install: @angular/cdk must match your Angular major version. Install the matching major, for example @angular/cdk@^21 on Angular 21.
Production build exceeds the bundle budget: CopilotKit pulls in markdown and syntax-highlighting dependencies, so a fresh app can exceed Angular's default 1 MB budget. Raise budgets in angular.json if your production build fails on size.

Where to go next#

Copilot Runtime: runtime setup, auth, middleware, and routing.
Built-in Agent quickstart: configure the in-process agent used in this quickstart.
Integrations: connect LangGraph, CrewAI, Mastra, and other agents through the runtime.

For headless setups, custom UIs with injectAgentStore, and the full component list, see the @copilotkit/angular README.