CopilotChatView

Overview

CopilotChatView is the layout-only chat view. It renders the message feed, the input container, the feather effect, the disclaimer, the suggestion pills, and a welcome screen when there are no messages. It does not wire an agent on its own. You pass it messages and read interaction handlers from the surrounding ChatState.

This is the Angular equivalent of React's <CopilotChatView>. Contrast it with CopilotChat: CopilotChat wires the agent (resolving messages, running state, suggestions, and submission) and renders CopilotChatView underneath, while CopilotChatView is presentational. Use it directly when you manage messages and handlers yourself, or when you need deep control over the layout and its slots.

Almost every visual piece is a slot. Each slot accepts either a component class (*Component) or an Angular template (*Template), plus an optional class string (*Class).

Usage

CopilotChatView is a standalone component with the selector copilot-chat-view. Import the class into your component's imports array and use the element in the template.

import { Component, signal } from "@angular/core";
import { CopilotChatView } from "@copilotkit/angular";
import type { Message } from "@ag-ui/client";

@Component({
  selector: "app-chat",
  standalone: true,
  imports: [CopilotChatView],
  template: `
    <copilot-chat-view [messages]="messages()" [autoScroll]="true" />
  `,
})
export class ChatComponent {
  messages = signal<Message[]>([]);
}

Inputs

Core inputs

Slot inputs

Each visual region exposes a component override, a template override, and a class. The template takes precedence over the component when both are set.

Outputs

CopilotChatView bubbles message-level interaction events from the message feed. Each payload is an object with the relevant message.

Content projection

Beyond the slot inputs, CopilotChatView reads named templates from content projection (via @ContentChild) for deep customization. Provide them as <ng-template> elements with the matching reference variable inside <copilot-chat-view>.

Custom layout example

import { Component, signal } from "@angular/core";
import { CopilotChatView } from "@copilotkit/angular";
import type { Message } from "@ag-ui/client";

@Component({
  selector: "app-chat",
  standalone: true,
  imports: [CopilotChatView],
  template: `
    <copilot-chat-view [messages]="messages()">
      <ng-template #customLayout let-ctx>
        <div class="my-layout">
          <ng-container [ngTemplateOutlet]="ctx.messageView" />
          <ng-container [ngTemplateOutlet]="ctx.input" />
        </div>
      </ng-template>
    </copilot-chat-view>
  `,
})
export class ChatComponent {
  messages = signal<Message[]>([]);
}

Related