Skip to main content

​
Overview

provideCopilotKit() is the main configuration function for CopilotKit in Angular applications. It returns an Angular Provider that should be included in your application’s provider array.

​
Usage

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

export const appConfig: ApplicationConfig = {
  providers: [
    provideCopilotKit({
      runtimeUrl: '/api/copilotkit',
      licenseKey: 'ck_pub_...',
    }),
  ],
};

​
Configuration Interface

interface CopilotKitConfig {
  runtimeUrl?: string;
  headers?: Record<string, string>;
  licenseKey?: string;
  properties?: Record<string, unknown>;
  agents?: Record<string, AbstractAgent>;
  selfManagedAgents?: Record<string, AbstractAgent>;
  tools?: ClientTool[];
  renderToolCalls?: RenderToolCallConfig[];
  frontendTools?: FrontendToolConfig[];
  humanInTheLoop?: HumanInTheLoopConfig[];
}

​
Parameters

​
runtimeUrl
string
URL endpoint for your CopilotKit runtime server. This is where agent execution requests are sent.
runtimeUrl: '/api/copilotkit'
// or
runtimeUrl: 'https://api.example.com/copilotkit'
​
headers
Record<string, string>
Custom HTTP headers to include with all runtime requests.
headers: {
  'Authorization': 'Bearer token',
  'X-Custom-Header': 'value'
}
​
licenseKey
string
Your CopilotCloud license key. Required to remove the watermark in production.Format: ck_pub_[32 hexadecimal characters]
licenseKey: 'ck_pub_1234567890abcdef1234567890abcdef'
​
properties
Record<string, unknown>
Custom properties to pass to your runtime and agents. These are forwarded with every request.
properties: {
  userId: '123',
  organization: 'acme-corp'
}
​
agents
Record<string, AbstractAgent>
Map of client-side agents that run in the browser. The key is the agent ID.
agents: {
  'my-agent': new BuiltInAgent({
    model: 'openai/gpt-4o',
    apiKey: process.env.OPENAI_API_KEY
  })
}
​
selfManagedAgents
Record<string, AbstractAgent>
Map of self-managed agents. These agents handle their own lifecycle and execution.
selfManagedAgents: {
  'custom-agent': customAgentInstance
}
​
tools
ClientTool[]
Array of client-side tools available to agents. Tools execute in the browser.
tools: [{
  name: 'getCurrentUser',
  description: 'Get the current user information',
  parameters: { type: 'object', properties: {} },
  handler: async () => {
    return { id: '123', name: 'John Doe' };
  }
}]
​
renderToolCalls
RenderToolCallConfig[]
Configuration for custom rendering of tool calls in the chat UI.
renderToolCalls: [{
  name: 'searchProducts',
  args: z.object({ query: z.string() }),
  component: ProductSearchComponent
}]
​
frontendTools
FrontendToolConfig[]
Additional frontend tools with custom handlers.
frontendTools: [{
  name: 'showNotification',
  description: 'Display a notification',
  parameters: z.object({ message: z.string() }),
  handler: async ({ message }) => {
    alert(message);
  }
}]
​
humanInTheLoop
HumanInTheLoopConfig[]
Configuration for human-in-the-loop tool approvals.
humanInTheLoop: [{
  name: 'deleteUser',
  description: 'Delete a user account (requires approval)',
  parameters: z.object({ userId: z.string() })
}]

​
Return Value

Returns an Angular Provider object that should be included in your application’s providers array.

​
Injection Token

You can access the configuration at runtime using dependency injection: 
import { inject } from '@angular/core';
import { COPILOT_KIT_CONFIG, injectCopilotKitConfig } from '@copilotkit/angular';

// Using the helper function
const config = injectCopilotKitConfig();

// Or using inject() directly
const config = inject(COPILOT_KIT_CONFIG);

​
Examples

​
Basic Configuration

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

​
With License Key

export const appConfig: ApplicationConfig = {
  providers: [
    provideCopilotKit({
      runtimeUrl: '/api/copilotkit',
      licenseKey: 'ck_pub_1234567890abcdef1234567890abcdef',
    }),
  ],
};

​
With Custom Headers and Properties

export const appConfig: ApplicationConfig = {
  providers: [
    provideCopilotKit({
      runtimeUrl: '/api/copilotkit',
      headers: {
        'Authorization': `Bearer ${authToken}`,
      },
      properties: {
        userId: currentUser.id,
        role: currentUser.role,
      },
    }),
  ],
};

​
With Client-Side Tools

export const appConfig: ApplicationConfig = {
  providers: [
    provideCopilotKit({
      runtimeUrl: '/api/copilotkit',
      tools: [
        {
          name: 'getCurrentWeather',
          description: 'Get current weather for a location',
          parameters: {
            type: 'object',
            properties: {
              location: { type: 'string', description: 'City name' }
            },
            required: ['location']
          },
          handler: async ({ location }) => {
            const response = await fetch(`/api/weather?location=${location}`);
            return response.json();
          }
        }
      ],
    }),
  ],
};

​
License Validation

CopilotKit automatically validates your license key:
  • Valid key format: ck_pub_[32 hex characters]
  • Missing or invalid key: A watermark will be displayed in the UI with a console warning
  • Valid key: No watermark, full functionality
The validation happens once when the provider is initialized.

​
See Also