CopilotChat

Overview

CopilotChat is the all-in-one chat component. It wires an agent into CopilotChatView so you get a working chat interface with one selector. It resolves the agent through injectAgentStore, subscribes to that agent's messages and running state, manages suggestions, tracks the input value, handles audio transcription, wires file attachments, and clears the input after each message is sent.

This is the Angular equivalent of React's <CopilotChat>. Where React composes the agent wiring in the component, Angular CopilotChat extends the internal ChatState and provides itself as the ChatState for the view and input beneath it. You usually only need to point it at an agent.

For the layout without the agent wiring, use CopilotChatView directly.

Usage

CopilotChat is a standalone component with the selector copilot-chat. Import the class into your component's imports array and use the element in the template. The chat reads its configuration from provideCopilotKit, so the provider must be in scope.

import { Component } from "@angular/core";
import { CopilotChat } from "@copilotkit/angular";

@Component({
  selector: "app-root",
  standalone: true,
  imports: [CopilotChat],
  template: `<copilot-chat />`,
})
export class AppComponent {}

Remember to import the stylesheet once in your global styles:

@import "@copilotkit/angular/styles.css";

Inputs

Outputs

CopilotChat does not declare its own outputs. It handles message submission, suggestion selection, and transcription internally through the ChatState it provides to the input and view. To observe lower-level interactions, render a custom input via inputComponent (or use CopilotChatInput directly), which exposes outputs such as submitMessage and the transcription events.

Customization

CopilotChat keeps the layout simple and delegates slot customization to the view it renders. Swap the input area with the inputComponent input, or compose the layout yourself with CopilotChatView, which exposes the full set of slot inputs and content-projection templates (message view, scroll view, feather, disclaimer, input container, and the input toolbar buttons).

To customize the text strings (input placeholder, welcome message, toolbar labels, disclaimer), provide labels through provideCopilotChatLabels. The chat reads them through injectChatLabels internally.

Related