CopilotSidebar

CopilotSidebar is a React component that provides a slide-in sidebar chat interface. It wraps CopilotChat with additional sidebar-specific behavior including a toggle button, slide-in animation, and automatic body margin adjustment.

What is CopilotSidebar?

The CopilotSidebar component:

• Provides a fixed right-side panel with smooth slide-in animation
• Includes a toggle button for open/close
• Automatically adjusts body margin when open to prevent content overlap
• Responsive design (full width on mobile, custom width on desktop)
• Built on CopilotChat - inherits all its features and customization options

Component Architecture

CopilotSidebar extends CopilotChat with additional slots:

graph LR
    CS[CopilotSidebar] --> header
    CS --> toggleButton

Slot Descriptions

CopilotSidebar also inherits all slots from CopilotChat: messageView, scrollView, input, suggestionView, and welcomeScreen.

See Slot Customization for details on how to customize these slots.

Basic Usage

import { CopilotSidebar, CopilotKitProvider } from "@copilotkit/react-core";

function App() {
  return (
    <CopilotKitProvider runtimeUrl="/api/copilotkit">
      <CopilotSidebar />
    </CopilotKitProvider>
  );
}

Props

Sidebar-Specific Props

These props are unique to CopilotSidebar:

Shared Props

CopilotSidebar inherits all props from CopilotChat, including:

• agentId - The agent to connect to
• threadId - The conversation thread ID
• labels - Customize text labels
• autoScroll - Auto-scroll behavior
• className - CSS class for the root container

See CopilotChat Props for the complete list.

Header Customization

The sidebar includes a header with a title and close button. Customize it through the header prop:

<CopilotSidebar
  header={{
    titleContent: "My Assistant",
    closeButton: "hidden",
  }}
/>

Header Sub-Slots

Custom Header Component

Replace the entire header with your own component:

function CustomHeader() {
  return (
    <div className="flex items-center justify-between p-4 border-b">
      <div className="flex items-center gap-2">
        <BotIcon className="w-5 h-5" />
        <span className="font-semibold">My AI Assistant</span>
      </div>
      <button onClick={() => /* close sidebar */}>
        <XIcon className="w-5 h-5" />
      </button>
    </div>
  );
}

<CopilotSidebar header={CustomHeader} />

Toggle Button Customization

The sidebar includes a floating toggle button to open and close it. Customize it through the toggleButton prop:

<CopilotSidebar
  toggleButton={{
    className: "bg-purple-500 hover:bg-purple-600",
    openIcon: "text-white",
    closeIcon: "text-white",
  }}
/>

Toggle Button Sub-Slots

Custom Toggle Button Component

Replace the toggle button entirely:

function CustomToggleButton() {
  return (
    <button className="fixed bottom-4 right-4 p-3 bg-blue-500 rounded-full">
      <ChatIcon className="w-6 h-6 text-white" />
    </button>
  );
}

<CopilotSidebar toggleButton={CustomToggleButton} />;

Slot Customization

CopilotSidebar uses the same slot system as CopilotChat. Each slot accepts four types of values:

1. Tailwind class string - Add or override CSS classes
2. Props object - Pass additional props to the default component
3. Custom component - Replace the component entirely
4. Nested sub-slots - Drill down to customize child components

Custom Width

<CopilotSidebar width={600} />

// Or with CSS units
<CopilotSidebar width="50vw" />

Custom Header Styling

<CopilotSidebar
  header={{
    className: "bg-gradient-to-r from-blue-500 to-purple-500 text-white",
    titleContent: "AI Assistant",
  }}
/>

Nested Slot Customization

<CopilotSidebar
  messageView={{
    assistantMessage: {
      onThumbsUp: (msg) => console.log("Liked:", msg.id),
      onThumbsDown: (msg) => console.log("Disliked:", msg.id),
    },
  }}
  input={{
    className: "border-2 border-gray-200",
    sendButton: "bg-blue-500 hover:bg-blue-600",
  }}
/>

Related

• CopilotChat - Base chat component with full customization options
• CopilotPopup - Floating popup chat dialog
• Slot System - Deep dive into slot customization
• CopilotKitProvider - Provider configuration