provideCopilotKit

Overview

provideCopilotKit is the primary setup entry point for @copilotkit/angular. It returns an Angular Provider that you add to your application (or component) providers array. The provider stores your CopilotKitConfig behind the COPILOT_KIT_CONFIG injection token, where the CopilotKit service and every CopilotKit function reads it.

This is the Angular equivalent of React's <CopilotKit> provider. Because Angular configures CopilotKit through dependency injection rather than a wrapper component, you register it once in app.config.ts (or in a feature component's providers) and everything below it in the injector tree can connect to your runtime and agents.

You typically configure the connection one of two ways: point at a CopilotKit runtime with runtimeUrl, or connect directly to one or more AG-UI agents with selfManagedAgents.

Signature

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

function provideCopilotKit(config: CopilotKitConfig): Provider;

Parameters

Return Value

Returns an Angular Provider that binds your (header-augmented) config to the COPILOT_KIT_CONFIG injection token. Add it to a providers array.

Usage

Connect through a runtime

Point runtimeUrl at your CopilotKit runtime endpoint and register the provider in your application config.

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

export const appConfig: ApplicationConfig = {
  providers: [
    provideCopilotKit({
      runtimeUrl: "/api/copilotkit",
      headers: {
        Authorization: "Bearer <token>",
      },
      properties: {
        userId: "user_123",
      },
    }),
  ],
};

Connect directly to an AG-UI agent

To talk to an agent server without a CopilotKit runtime, pass selfManagedAgents with an @ag-ui/client agent such as HttpAgent.

import { ApplicationConfig } from "@angular/core";
import { provideCopilotKit } from "@copilotkit/angular";
import { HttpAgent } from "@ag-ui/client";

export const appConfig: ApplicationConfig = {
  providers: [
    provideCopilotKit({
      selfManagedAgents: {
        default: new HttpAgent({ url: "http://localhost:8000/" }),
      },
    }),
  ],
};

Register startup tools

Pass frontendTools to register client tools when the application starts. Their handlers run inside the root injection context, so they can use inject().

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

export const appConfig: ApplicationConfig = {
  providers: [
    provideCopilotKit({
      runtimeUrl: "/api/copilotkit",
      frontendTools: [
        {
          name: "sayHello",
          description: "Greet the user by name",
          parameters: z.object({ name: z.string() }),
          handler: async ({ name }) => `Hello, ${name}!`,
        },
      ],
    }),
  ],
};

Behavior

• The provided config is bound to the COPILOT_KIT_CONFIG injection token. Read it with injectCopilotKitConfig.
• If licenseKey (or an X-CopilotCloud-Public-Api-Key header) is missing or malformed, a one-time license watermark warning is logged to the console.
• agents and selfManagedAgents are merged together when the underlying core is created, so an id present in both resolves to the selfManagedAgents entry.

Related