ContextQMD
Back to Copilotkit

CopilotKit Angular Components

examples/v2/angular/storybook/stories/Welcome.mdx

1.57.03.0 KB
Original Source

import { Meta } from "@storybook/blocks";

<Meta title="Welcome" />

CopilotKit Angular Components

Welcome to the CopilotKit Angular Storybook! This is the dedicated documentation and showcase for all Angular components in the CopilotKit ecosystem.

What is CopilotKit?

CopilotKit is a comprehensive toolkit for building AI-powered copilot experiences in your applications. This Angular package provides native Angular components that integrate seamlessly with your Angular applications.

Available Components

Chat Components

  • CopilotChatInput - A feature-rich chat input component with voice recording, tools menu, and file attachments
  • CopilotChatTextarea - An auto-resizing textarea component for chat interfaces
  • CopilotChatView - Complete chat interface with message history
  • CopilotChatUserMessage - User message display component
  • CopilotAssistantMessage - Assistant message display component

Context Management

  • CopilotAgentContextProvider - Provides agent context to child components
  • CopilotChatConfigurationProvider - Configures chat components globally

Getting Started

Installation

bash
npm install @copilotkit/angular
# or
pnpm add @copilotkit/angular

Basic Usage

typescript
import { Component } from "@angular/core";
import { CopilotChatInput } from "@copilotkit/angular";
import { provideCopilotChatConfiguration } from "@copilotkit/angular";

@Component({
  selector: "app-chat",
  standalone: true,
  imports: [CopilotChatInput],
  providers: [
    provideCopilotChatConfiguration({
      labels: {
        chatInputPlaceholder: "Type a message...",
      },
    }),
  ],
  template: `
    <copilot-chat-input
      (submitMessage)="onSubmitMessage($event)"
    ></copilot-chat-input>
  `,
})
export class ChatComponent {
  onSubmitMessage(message: string): void {
    console.log("Message:", message);
  }
}

Features

Angular 19+ Support

Built with the latest Angular features including:

  • Standalone components
  • Signals for reactive state management
  • OnPush change detection
  • TypeScript strict mode

Full TypeScript Support

All components are fully typed with comprehensive TypeScript definitions.

Customizable

  • Custom CSS classes for styling
  • Configurable labels and placeholders
  • Event emitters for all interactions
  • Flexible slot system for content projection

Development

This Storybook runs alongside the React Storybook on port 6007.

Available Scripts

bash
# Run Angular Storybook in development mode
pnpm --filter storybook-angular dev

# Build Angular Storybook for production
pnpm --filter storybook-angular build

Support

For issues, feature requests, or questions:

Built with Angular 19 and Storybook 8