CtrlK
BlogDocsLog inGet started
Tessl Logo

tessl/npm-copilotkit--react-ui

Production-ready React UI components library for building deeply-integrated AI assistants and copilots

Overview
Eval results
Files

types.mddocs/

TypeScript Types

Comprehensive TypeScript interfaces and types for all CopilotKit React UI components, props, and configurations.

Capabilities

Chat Component Props

Main props interfaces for chat components.

interface CopilotChatProps {
  /** Custom instructions for the system message */
  instructions?: string;

  /** Suggestion behavior: "auto" (AI-generated), "manual" (programmatic), or static array */
  suggestions?: ChatSuggestions;

  /** Callback when generation state changes */
  onInProgress?: (inProgress: boolean) => void;

  /** Callback when user submits a message */
  onSubmitMessage?: (message: string) => void | Promise<void>;

  /** Custom stop generation handler */
  onStopGeneration?: OnStopGeneration;

  /** Custom reload/regenerate handler */
  onReloadMessages?: OnReloadMessages;

  /** Callback when message is regenerated */
  onRegenerate?: (messageId: string) => void;

  /** Callback when message is copied to clipboard */
  onCopy?: (message: string) => void;

  /** Callback for positive feedback */
  onThumbsUp?: (message: Message) => void;

  /** Callback for negative feedback */
  onThumbsDown?: (message: Message) => void;

  /** Custom markdown component renderers */
  markdownTagRenderers?: ComponentsMap;

  /** Custom icon overrides */
  icons?: CopilotChatIcons;

  /** Custom label/text overrides */
  labels?: CopilotChatLabels;

  /** Enable image upload functionality */
  imageUploadsEnabled?: boolean;

  /** File input accept attribute (default: "image/*") */
  inputFileAccept?: string;

  /** Override system message generation */
  makeSystemMessage?: SystemMessageFunction;

  /** Disable system message entirely */
  disableSystemMessage?: boolean;

  /** Custom assistant message component */
  AssistantMessage?: React.ComponentType<AssistantMessageProps>;

  /** Custom user message component */
  UserMessage?: React.ComponentType<UserMessageProps>;

  /** Custom error message component */
  ErrorMessage?: React.ComponentType<ErrorMessageProps>;

  /** Custom messages container component */
  Messages?: React.ComponentType<MessagesProps>;

  /** Custom message renderer */
  RenderMessage?: React.ComponentType<RenderMessageProps>;

  /** Custom suggestions list renderer */
  RenderSuggestionsList?: React.ComponentType<RenderSuggestionsListProps>;

  /** Custom input component */
  Input?: React.ComponentType<InputProps>;

  /** Custom image renderer */
  ImageRenderer?: React.ComponentType<ImageRendererProps>;

  /** Additional CSS class */
  className?: string;

  /** Child elements */
  children?: React.ReactNode;

  /** Hide the stop generation button */
  hideStopButton?: boolean;

  /** Event tracking hooks (requires publicApiKey in CopilotKit provider) */
  observabilityHooks?: CopilotObservabilityHooks;

  /** Custom error renderer */
  renderError?: (error: {
    message: string;
    operation?: string;
    timestamp: number;
    onDismiss: () => void;
    onRetry?: () => void;
  }) => React.ReactNode;

  /** Error handler for debugging */
  onError?: CopilotErrorHandler;
}

interface CopilotModalProps extends CopilotChatProps {
  /** Whether popup is open by default (default: false) */
  defaultOpen?: boolean;

  /** Close popup when clicking outside (default: true) */
  clickOutsideToClose?: boolean;

  /** Close popup when pressing Escape (default: true) */
  hitEscapeToClose?: boolean;

  /** Keyboard shortcut to toggle popup (default: "/") */
  shortcut?: string;

  /** Callback when open state changes */
  onSetOpen?: (open: boolean) => void;

  /** Custom window/modal component */
  Window?: React.ComponentType<WindowProps>;

  /** Custom toggle button component */
  Button?: React.ComponentType<ButtonProps>;

  /** Custom header component */
  Header?: React.ComponentType<HeaderProps>;
}

type CopilotErrorHandler = (error: Error) => void;

type SystemMessageFunction = (args: {
  instructions?: string;
}) => string;

Suggestion Types

Types for controlling and defining chat suggestions.

type ChatSuggestions = "auto" | "manual" | SuggestionItem[];

interface SuggestionItem {
  /** Suggestion title/text displayed to user */
  title: string;

  /** Message to send when suggestion is clicked */
  message: string;

  /** Whether suggestion is still being generated */
  partial?: boolean;

  /** Optional CSS class */
  className?: string;
}

interface CopilotChatSuggestion {
  /** Suggestion title/text displayed to user */
  title: string;

  /** Message to send when suggestion is clicked */
  message: string;

  /** Whether suggestion is still being generated */
  partial?: boolean;

  /** Optional CSS class */
  className?: string;
}

interface UseCopilotChatSuggestionsConfiguration {
  /** Instructions for GPT to generate relevant suggestions */
  instructions: string;

  /** Minimum number of suggestions to generate (default: 1) */
  minSuggestions?: number;

  /** Maximum number of suggestions to generate (default: 3) */
  maxSuggestions?: number;

  /** Whether suggestions are available (default: "enabled") */
  available?: "enabled" | "disabled";

  /** Optional CSS class for suggestions container */
  className?: string;
}

Message Types

Types for representing different message types in the chat.

type Message = AIMessage | UserMessage;

interface AIMessage {
  id: string;
  role: "assistant";
  content: string;
  generativeUI?: () => React.ReactNode;
  agentName?: string;
  state?: any;
  image?: ImageData;
}

interface UserMessage {
  id: string;
  role: "user";
  content: string;
  image?: ImageData;
}

interface ImageData {
  /** Image format (e.g., "png", "jpeg", "gif") */
  format: string;

  /** Base64-encoded image bytes */
  bytes: string;
}

/**
 * Note: ImageData is imported from @copilotkit/shared, not defined locally.
 * It's re-exported from @copilotkit/react-ui for convenience.
 */

interface ChatError {
  /** Error message text */
  message: string;

  /** Operation that caused the error */
  operation?: string;

  /** Error timestamp */
  timestamp: number;
}

Component Props Interfaces

Props interfaces for message and UI components.

interface AssistantMessageProps {
  /** The AI message content */
  message?: AIMessage;

  /** Whether this is the most recent message */
  isCurrentMessage?: boolean;

  /** Whether response is loading (thinking state) */
  isLoading: boolean;

  /** Whether response is actively streaming */
  isGenerating: boolean;

  /** Callback to regenerate this message */
  onRegenerate?: () => void;

  /** Callback when message is copied */
  onCopy?: (message: string) => void;

  /** Callback for positive feedback */
  onThumbsUp?: (message: Message) => void;

  /** Callback for negative feedback */
  onThumbsDown?: (message: Message) => void;

  /** Custom markdown component renderers */
  markdownTagRenderers?: ComponentsMap;

  /** Custom image renderer component */
  ImageRenderer?: React.ComponentType<ImageRendererProps>;

  /**
   * @deprecated Use message property instead
   * Note: Despite being deprecated, this property is currently REQUIRED
   */
  rawData: any;

  /** @deprecated Use message.generativeUI() instead */
  subComponent?: React.JSX.Element;
}

interface UserMessageProps {
  /** The user message content */
  message?: UserMessage;

  /** Image renderer component for displaying attachments */
  ImageRenderer: React.ComponentType<ImageRendererProps>;

  /**
   * @deprecated Use message property instead
   * Note: Despite being deprecated, this property is currently REQUIRED
   */
  rawData: any;
}

interface ErrorMessageProps {
  /** Error information */
  error: ChatError;

  /** Whether this is the most recent message */
  isCurrentMessage?: boolean;

  /** Callback to regenerate/retry */
  onRegenerate?: () => void;

  /** Callback when error is copied */
  onCopy?: (message: string) => void;
}

interface ImageRendererProps {
  /** Image data with format and encoded bytes */
  image: ImageData;

  /** Optional text content to display with image */
  content?: string;

  /** Additional CSS class */
  className?: string;
}

interface RenderMessageProps {
  /** The message to render */
  message: Message;

  /** Whether chat is currently in progress */
  inProgress: boolean;

  /** Message index in the array */
  index: number;

  /** Whether this is the most recent message */
  isCurrentMessage: boolean;

  /** Result from action execution if applicable */
  actionResult?: string;

  /** Assistant message component to use */
  AssistantMessage?: React.ComponentType<AssistantMessageProps>;

  /** User message component to use */
  UserMessage?: React.ComponentType<UserMessageProps>;

  /** Image renderer component to use */
  ImageRenderer?: React.ComponentType<ImageRendererProps>;

  /** Callback to regenerate message */
  onRegenerate?: (messageId: string) => void;

  /** Callback when message is copied */
  onCopy?: (message: string) => void;

  /** Callback for positive feedback */
  onThumbsUp?: (message: Message) => void;

  /** Callback for negative feedback */
  onThumbsDown?: (message: Message) => void;

  /** Custom markdown renderers */
  markdownTagRenderers?: ComponentsMap;
}

interface RenderSuggestionsListProps {
  /** Array of suggestion items */
  suggestions: CopilotChatSuggestion[];

  /** Click handler for suggestions */
  onSuggestionClick: (message: string) => void;
}

interface MessagesProps {
  /** Array of all messages */
  messages: Message[];

  /** Whether chat is in progress */
  inProgress: boolean;

  /** Child elements (typically suggestions) */
  children?: React.ReactNode;

  /** Current chat error if any */
  chatError?: ChatError | null;

  /** Assistant message component */
  AssistantMessage: React.ComponentType<AssistantMessageProps>;

  /** User message component */
  UserMessage: React.ComponentType<UserMessageProps>;

  /** Error message component */
  ErrorMessage?: React.ComponentType<ErrorMessageProps>;

  /** Message renderer */
  RenderMessage: React.ComponentType<RenderMessageProps>;

  /** Image renderer */
  ImageRenderer: React.ComponentType<ImageRendererProps>;

  /** Regenerate callback */
  onRegenerate?: (messageId: string) => void;

  /** Copy callback */
  onCopy?: (message: string) => void;

  /** Thumbs up callback */
  onThumbsUp?: (message: Message) => void;

  /** Thumbs down callback */
  onThumbsDown?: (message: Message) => void;

  /** Custom markdown renderers */
  markdownTagRenderers?: ComponentsMap;
}

interface InputProps {
  /** Whether chat is in progress */
  inProgress: boolean;

  /** Handler for sending messages */
  onSend: (text: string) => Promise<Message>;

  /** Whether input is visible */
  isVisible?: boolean;

  /** Stop generation handler */
  onStop?: () => void;

  /** Upload handler (file picker trigger) */
  onUpload?: () => void;

  /** Hide stop button */
  hideStopButton?: boolean;
}

interface WindowProps {
  clickOutsideToClose: boolean;
  hitEscapeToClose: boolean;
  shortcut: string;
  children?: React.ReactNode;
}

interface ButtonProps {
  // Can be extended with custom props
}

interface HeaderProps {
  // Can be extended with custom props
}

interface SuggestionsProps {
  /** Suggestion title to display */
  title: string;

  /** Message to send when clicked */
  message: string;

  /** Whether suggestion is still loading */
  partial?: boolean;

  /** Optional CSS class */
  className?: string;

  /** Click handler */
  onClick: (message: string) => void;
}

type ComponentsMap<T extends Record<string, object> = Record<string, object>> = {
  [K in keyof T]: React.FC<{ children?: React.ReactNode } & T[K]>;
};

Customization Types

Types for customizing icons, labels, and styles.

interface CopilotChatIcons {
  /** Icon for opening the chat (popup/sidebar button) */
  openIcon?: React.ReactNode;

  /** Icon for closing the chat (popup/sidebar button) */
  closeIcon?: React.ReactNode;

  /** Icon for header close button */
  headerCloseIcon?: React.ReactNode;

  /** Icon for send message button */
  sendIcon?: React.ReactNode;

  /** Icon for activity/loading indicator */
  activityIcon?: React.ReactNode;

  /** Spinner icon for loading states */
  spinnerIcon?: React.ReactNode;

  /** Icon for stop generation button */
  stopIcon?: React.ReactNode;

  /** Icon for regenerate response button */
  regenerateIcon?: React.ReactNode;

  /** Icon for push-to-talk microphone button */
  pushToTalkIcon?: React.ReactNode;

  /** Icon for copy to clipboard button */
  copyIcon?: React.ReactNode;

  /** Icon for positive feedback button */
  thumbsUpIcon?: React.ReactNode;

  /** Icon for negative feedback button */
  thumbsDownIcon?: React.ReactNode;

  /** Icon for upload/attach file button */
  uploadIcon?: React.ReactNode;
}

interface CopilotChatLabels {
  /** Initial message(s) displayed when chat starts - string or array of strings */
  initial?: string | string[];

  /** Chat header title (default: "CopilotKit") */
  title?: string;

  /** Input field placeholder (default: "Type a message...") */
  placeholder?: string;

  /** Error message text (default: "❌ An error occurred. Please try again.") */
  error?: string;

  /** Stop button label (default: "Stop generating") */
  stopGenerating?: string;

  /** Regenerate button label (default: "Regenerate response") */
  regenerateResponse?: string;

  /** Copy button label (default: "Copy to clipboard") */
  copyToClipboard?: string;

  /** Thumbs up button label (default: "Thumbs up") */
  thumbsUp?: string;

  /** Thumbs down button label (default: "Thumbs down") */
  thumbsDown?: string;

  /** Copied confirmation text (default: "Copied!") */
  copied?: string;
}

interface CopilotKitCSSProperties extends React.CSSProperties {
  /** Primary brand color */
  "--copilot-kit-primary-color"?: string;

  /** Contrast color for primary (text on primary background) */
  "--copilot-kit-contrast-color"?: string;

  /** Background color for chat panel */
  "--copilot-kit-background-color"?: string;

  /** Background color for input field */
  "--copilot-kit-input-background-color"?: string;

  /** Secondary UI color */
  "--copilot-kit-secondary-color"?: string;

  /** Contrast color for secondary (text on secondary background) */
  "--copilot-kit-secondary-contrast-color"?: string;

  /** Color for separators and borders */
  "--copilot-kit-separator-color"?: string;

  /** Color for muted/secondary text */
  "--copilot-kit-muted-color"?: string;

  /** Error background color */
  "--copilot-kit-error-background"?: string;

  /** Error border color */
  "--copilot-kit-error-border"?: string;

  /** Error text color */
  "--copilot-kit-error-text"?: string;

  /** Small shadow for subtle elevation */
  "--copilot-kit-shadow-sm"?: string;

  /** Medium shadow for moderate elevation */
  "--copilot-kit-shadow-md"?: string;

  /** Large shadow for prominent elevation */
  "--copilot-kit-shadow-lg"?: string;

  /** Dev console background color */
  "--copilot-kit-dev-console-bg"?: string;

  /** Dev console text color */
  "--copilot-kit-dev-console-text"?: string;
}

Observability Types

Types for event tracking and monitoring.

interface CopilotObservabilityHooks {
  /** Called when user sends a message */
  onMessageSent?: (message: string) => void;

  /** Called when chat is closed/minimized */
  onChatMinimized?: () => void;

  /** Called when chat is opened/expanded */
  onChatExpanded?: () => void;

  /** Called when message is regenerated */
  onMessageRegenerated?: (messageId: string) => void;

  /** Called when message is copied to clipboard */
  onMessageCopied?: (content: string) => void;

  /** Called when user provides feedback */
  onFeedbackGiven?: (messageId: string, type: "thumbsUp" | "thumbsDown") => void;

  /** Called when generation starts */
  onChatStarted?: () => void;

  /** Called when generation stops */
  onChatStopped?: () => void;

  /** Called on errors */
  onError?: (errorEvent: CopilotErrorEvent) => void;
}

interface CopilotErrorEvent {
  /** The error object */
  error: Error;

  /** Optional context about where the error occurred */
  context?: string;
}

Handler Types

Types for custom handlers and callbacks.

Note: OnStopGeneration and OnReloadMessages types ARE exported from the package and can be imported. However, their argument interfaces (OnStopGenerationArguments and OnReloadMessagesArguments) are internal and not exported.

type OnStopGeneration = (args: OnStopGenerationArguments) => void;

interface OnStopGenerationArguments {
  /** Currently executing agent name */
  currentAgentName: string | undefined;

  /** Current message array */
  messages: Message[];

  /** Function to update messages */
  setMessages: (messages: Message[]) => void;

  /** Default stop generation function */
  stopGeneration: () => void;

  /** Restart the current agent */
  restartCurrentAgent: () => void;

  /** Stop the current agent */
  stopCurrentAgent: () => void;

  /** Run the current agent with optional hint */
  runCurrentAgent: (hint?: HintFunction) => Promise<void>;

  /** Set agent state */
  setCurrentAgentState: (state: any) => void;
}

type OnReloadMessages = (args: OnReloadMessagesArguments) => void;

interface OnReloadMessagesArguments extends OnStopGenerationArguments {
  /** ID of message to regenerate */
  messageId: string;
}

type HintFunction = () => string | Promise<string>;

Context Types

Types for React context and hooks.

interface ChatContext {
  /** All label overrides with defaults applied */
  labels: Required<CopilotChatLabels>;

  /** All icon overrides with defaults applied */
  icons: Required<CopilotChatIcons>;

  /** Whether chat is currently open (for popup/sidebar) */
  open: boolean;

  /** Function to set open state */
  setOpen: (open: boolean) => void;
}

Dev Console Types

Types for development console functionality.

Note: CopilotKitVersion is an internal type used by the dev console and is not directly exported from @copilotkit/react-ui.

interface CopilotKitVersion {
  /** Current installed version */
  current: string;

  /** Latest available version */
  latest: string;

  /** Update urgency level */
  severity: "low" | "medium" | "high";

  /** Optional advisory message */
  advisory: string | null;

  /** Timestamp of last version check */
  lastChecked: number;
}

Deprecated Types

Types that are deprecated and will be removed in future versions.

/**
 * @deprecated Use RenderMessage prop instead
 * Legacy render props from earlier versions
 */
interface LegacyRenderMessageProps {
  RenderTextMessage?: React.ComponentType<any>;
  RenderActionExecutionMessage?: React.ComponentType<any>;
  RenderAgentStateMessage?: React.ComponentType<any>;
  RenderResultMessage?: React.ComponentType<any>;
  RenderImageMessage?: React.ComponentType<any>;
}

Type Utilities

Common type utilities used throughout the package.

/**
 * Generic type for mapping element names to React components
 * Used for markdown renderers and other extensible component maps
 */
type ComponentsMap<T extends Record<string, object> = Record<string, object>> = {
  [K in keyof T]: React.FC<{ children?: React.ReactNode } & T[K]>;
};

/**
 * Make all properties in T required
 */
type Required<T> = {
  [P in keyof T]-?: T[P];
};

/**
 * Simple renderer interface with content property
 * Used for basic content rendering scenarios
 */
interface Renderer {
  content: string;
}

/**
 * Type for image upload data structure
 * Contains the image content type and base64-encoded bytes
 */
type ImageUpload = {
  /** MIME type of the image (e.g., "image/png", "image/jpeg") */
  contentType: string;
  /** Base64-encoded image bytes */
  bytes: string;
};

Type Imports and Origins

Many types used in @copilotkit/react-ui are imported from other CopilotKit packages. This section clarifies which types are defined where.

Types from @copilotkit/react-ui:

All component props, customization interfaces, and UI-specific types are exported from this package.

Types from @copilotkit/shared:

Core domain types like Message, AIMessage, UserMessage, ImageData, and CopilotErrorEvent are imported from @copilotkit/shared.

Types from @copilotkit/react-core:

Some types like SuggestionItem, SystemMessageFunction, and HintFunction are defined in @copilotkit/react-core.

Complete Type Import Example

// Import UI component types from react-ui
import type {
  // Component props
  CopilotChatProps,
  CopilotModalProps,
  AssistantMessageProps,
  UserMessageProps,
  ErrorMessageProps,
  ImageRendererProps,
  RenderMessageProps,
  RenderSuggestionsListProps,
  MessagesProps,
  InputProps,
  WindowProps,
  ButtonProps,
  HeaderProps,

  // Customization
  CopilotChatIcons,
  CopilotChatLabels,
  CopilotKitCSSProperties,
  ComponentsMap,

  // Messages
  ChatError,

  // Utilities
  Renderer,
  ImageUpload,
  SuggestionsProps,

  // Suggestions
  ChatSuggestions,
  CopilotChatSuggestion,
  UseCopilotChatSuggestionsConfiguration,

  // Handlers
  OnStopGeneration, // Exported - can be used for type annotations
  OnReloadMessages, // Exported - can be used for type annotations
  // OnStopGenerationArguments, // Not exported - internal argument type
  // OnReloadMessagesArguments, // Not exported - internal argument type
  CopilotErrorHandler,

  // Observability
  CopilotObservabilityHooks,

  // Context
  ChatContext,

  // Dev console types are internal and not exported
  // CopilotKitVersion, // Not exported
} from "@copilotkit/react-ui";

// Import core domain types from shared package
import type {
  Message,
  AIMessage,
  UserMessage,
  ImageData,
  CopilotErrorEvent,
} from "@copilotkit/shared";

// Import from react-core if needed
import type {
  SuggestionItem,
  SystemMessageFunction,
  HintFunction,
} from "@copilotkit/react-core";

Note: In practice, you can import Message, AIMessage, UserMessage etc. from @copilotkit/react-ui as they are re-exported for convenience. However, they are originally defined in @copilotkit/shared.

Install with Tessl CLI

npx tessl i tessl/npm-copilotkit--react-ui@1.10.1

docs

chat-components.md

customization.md

dev-console.md

hooks.md

index.md

message-components.md

types.md

README.md

tile.json