Angular

    If you don't have one already, pin the CLI to the supported major:

    ```bash
    npx @angular/cli@22 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@^22`).
    </Callout>
</Step>
<WhenAngularBackend selected={false}>
  <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>
</WhenAngularBackend>
<WhenAngularBackend selected>
  <Step>
    ### 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.

    <FrameworkSetup concept="agent-setup" />

    <Callout type="info" title="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](backend/copilot-runtime) for its runtime
      adapter, credentials, and server command. Do not replace it with the
      `BuiltInAgent` server from the standalone Angular path.
    </Callout>
  </Step>
</WhenAngularBackend>
<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. The chat uses the agent that your runtime registers as `default`.

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

</Step>
<WhenAngularBackend selected={false}>
  <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@^22` on Angular 22.
            - **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>
</WhenAngularBackend>
<WhenAngularBackend selected>
  <Step>
    ### 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:

    ```bash
    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.
  </Step>
</WhenAngularBackend>
<Step>
    <OpenInspectorStepAngular components={props.components} />
</Step>