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

index.mddocs/

CopilotKit React UI

CopilotKit React UI provides production-ready chat interface components for building AI-powered copilots in React applications. It offers flexible chat components (embedded, popup, and sidebar layouts), complete customization options, and seamless integration with the CopilotKit framework.

Package Information

  • Package Name: @copilotkit/react-ui
  • Package Type: npm
  • Language: TypeScript
  • Installation: npm install @copilotkit/react-ui

Core Imports

import {
  CopilotChat,
  CopilotPopup,
  CopilotSidebar,
  useCopilotChatSuggestions,
} from "@copilotkit/react-ui";
import "@copilotkit/react-ui/styles.css";

For CommonJS:

const {
  CopilotChat,
  CopilotPopup,
  CopilotSidebar,
  useCopilotChatSuggestions,
} = require("@copilotkit/react-ui");
require("@copilotkit/react-ui/styles.css");

Basic Usage

import { CopilotKit } from "@copilotkit/react-core";
import { CopilotPopup } from "@copilotkit/react-ui";
import "@copilotkit/react-ui/styles.css";

function App() {
  return (
    <CopilotKit runtimeUrl="/api/copilotkit">
      <YourApp />
      <CopilotPopup
        instructions="You are a helpful assistant."
        labels={{
          title: "My Assistant",
          initial: "Hi! How can I help you today?",
        }}
      />
    </CopilotKit>
  );
}

Architecture

CopilotKit React UI is built around several key architectural patterns:

  • Layout Components: Three ready-to-use layouts (CopilotChat, CopilotPopup, CopilotSidebar) that provide different UI patterns for the same chat functionality
  • Component Composition: Highly composable architecture where nearly every visual element can be replaced with custom implementations
  • Customization Layers: Multiple levels of customization from simple (labels/icons) to advanced (complete component replacement)
  • Context-Based State: Internal state management via React Context, with hooks for accessing chat state
  • Observability Hooks: Event tracking system for monitoring user interactions and system events
  • Type Safety: Full TypeScript support with comprehensive type definitions for all props and return values

Capabilities

Chat Interface Components

Three production-ready chat layouts for different UI patterns, all sharing the same core functionality with different presentation styles.

function CopilotChat(props: CopilotChatProps): JSX.Element;
function CopilotPopup(props: CopilotModalProps): JSX.Element;
function CopilotSidebar(props: CopilotModalProps): JSX.Element;

Chat Components

Message Components

Default and customizable components for rendering different message types in the chat interface.

function AssistantMessage(props: AssistantMessageProps): JSX.Element;
function UserMessage(props: UserMessageProps): JSX.Element;
function ImageRenderer(props: ImageRendererProps): JSX.Element;
function Markdown(props: { content: string; components?: ComponentsMap }): JSX.Element;

Message Components

Customization System

Comprehensive customization options including icons, labels, CSS properties, and custom component renderers.

interface CopilotChatIcons {
  openIcon?: React.ReactNode;
  closeIcon?: React.ReactNode;
  headerCloseIcon?: React.ReactNode;
  sendIcon?: React.ReactNode;
  activityIcon?: React.ReactNode;
  spinnerIcon?: React.ReactNode;
  stopIcon?: React.ReactNode;
  regenerateIcon?: React.ReactNode;
  pushToTalkIcon?: React.ReactNode;
  copyIcon?: React.ReactNode;
  thumbsUpIcon?: React.ReactNode;
  thumbsDownIcon?: React.ReactNode;
  uploadIcon?: React.ReactNode;
}

interface CopilotChatLabels {
  initial?: string | string[];
  title?: string;
  placeholder?: string;
  error?: string;
  stopGenerating?: string;
  regenerateResponse?: string;
  copyToClipboard?: string;
  thumbsUp?: string;
  thumbsDown?: string;
  copied?: string;
}

interface CopilotKitCSSProperties extends React.CSSProperties {
  "--copilot-kit-primary-color"?: string;
  "--copilot-kit-contrast-color"?: string;
  "--copilot-kit-background-color"?: string;
  "--copilot-kit-input-background-color"?: string;
  "--copilot-kit-secondary-color"?: string;
  "--copilot-kit-secondary-contrast-color"?: string;
  "--copilot-kit-separator-color"?: string;
  "--copilot-kit-muted-color"?: string;
  "--copilot-kit-error-background"?: string;
  "--copilot-kit-error-border"?: string;
  "--copilot-kit-error-text"?: string;
  "--copilot-kit-shadow-sm"?: string;
  "--copilot-kit-shadow-md"?: string;
  "--copilot-kit-shadow-lg"?: string;
  "--copilot-kit-dev-console-bg"?: string;
  "--copilot-kit-dev-console-text"?: string;
}

Customization

Hooks

React hooks for chat suggestions and accessing chat context.

function useCopilotChatSuggestions(
  config: UseCopilotChatSuggestionsConfiguration,
  dependencies?: any[]
): void;

function useChatContext(): ChatContext;

interface ChatContext {
  labels: Required<CopilotChatLabels>;
  icons: Required<CopilotChatIcons>;
  open: boolean;
  setOpen: (open: boolean) => void;
}

Hooks

TypeScript Types

Comprehensive TypeScript interfaces and types for all components and configurations.

interface CopilotChatProps {
  instructions?: string;
  suggestions?: ChatSuggestions;
  onInProgress?: (inProgress: boolean) => void;
  onSubmitMessage?: (message: string) => void | Promise<void>;
  className?: string;
  // ... extensive prop interface
}

interface CopilotModalProps extends CopilotChatProps {
  defaultOpen?: boolean;
  clickOutsideToClose?: boolean;
  hitEscapeToClose?: boolean;
  shortcut?: string;
  onSetOpen?: (open: boolean) => void;
  // ... modal-specific props
}

Types

Development Console

Development tools for debugging CopilotKit applications.

function CopilotDevConsole(): JSX.Element | null;
function shouldShowDevConsole(showDevConsole: boolean): boolean;

Dev Console

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