| title | Angular |
|---|---|
| description | Connect an Angular app to Copilot Runtime with CopilotKit. |
| icon | lucide/Triangle |
| hideTOC | true |
@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.
- 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+
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`:
```bash
npx @angular/cli@21 new my-copilot-app
cd my-copilot-app
```
</Step>
<Step>
### Install CopilotKit
Install the Angular frontend package, `@angular/cdk`, and `@copilotkit/runtime` for your local Copilot Runtime server:
<Tabs groupId="package-manager" items={['npm', 'pnpm', 'yarn']}>
<Tab value="npm">
```bash
npm install @copilotkit/angular @angular/cdk @copilotkit/runtime
npm install -D tsx typescript @types/node
```
</Tab>
<Tab value="pnpm">
```bash
pnpm add @copilotkit/angular @angular/cdk @copilotkit/runtime
pnpm add -D tsx typescript @types/node
```
</Tab>
<Tab value="yarn">
```bash
yarn add @copilotkit/angular @angular/cdk @copilotkit/runtime
yarn add -D tsx typescript @types/node
```
</Tab>
</Tabs>
<Callout type="info" title="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`).
</Callout>
</Step>
<Step>
### Create the Copilot Runtime
Add a small Node server that hosts Copilot Runtime at `/api/copilotkit` and registers a `default` built-in agent:
```ts title="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`,
);
});
```
</Step>
<Step>
### Import the styles
Add the package stylesheet to your global styles. It's self-contained, so the chat renders without any other CSS.
```css title="src/styles.css"
@import "@copilotkit/angular/styles.css"; /* [!code highlight] */
```
</Step>
<Step>
### Connect to Copilot Runtime
Point `provideCopilotKit` at the runtime endpoint. Because the runtime registers an agent named `default`, the chat picks it up automatically.
```ts title="src/app/app.config.ts"
import { ApplicationConfig } from "@angular/core";
import { provideCopilotKit } from "@copilotkit/angular"; // [!code highlight]
export const appConfig: ApplicationConfig = {
providers: [
// [!code highlight:3]
provideCopilotKit({
runtimeUrl: "http://localhost:8200/api/copilotkit",
}),
],
};
```
</Step>
<Step>
### Add the chat UI
Import the `CopilotChat` component into your root component and drop it into the template.
```ts title="src/app/app.ts"
import { Component } from "@angular/core";
import { CopilotChat } from "@copilotkit/angular"; // [!code highlight]
@Component({
selector: "app-root",
imports: [CopilotChat], // [!code highlight]
template: `
<!-- [!code highlight:3] -->
<div style="height: 100vh">
<copilot-chat />
</div>
`,
})
export class App {}
```
<Callout type="info" title="Older Angular projects">
Angular 19 names the root component `app.component.ts` with class `AppComponent`. Add the same imports and template there.
</Callout>
</Step>
<Step>
### Run the runtime and app
Start Copilot Runtime in one terminal:
```bash
export OPENAI_API_KEY=sk-...
npx tsx server.ts
```
Start the Angular app in another terminal:
```bash
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.
<Accordions className="mb-4">
<Accordion title="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.
</Accordion>
</Accordions>
</Step>
- 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.
- Angular + Google ADK in production: the non-obvious gotchas when you wire Angular to an ADK agent with threads and memory.
For headless setups, custom UIs with injectAgentStore, and the full component list, see the @copilotkit/angular README.