---
title: "CopilotSidebar"
description: "Sidebar variant of CopilotChat that renders in a fixed side panel"
---

## Overview

`CopilotSidebar` renders a fixed sidebar panel for chat interaction. It wraps [`CopilotChat`](/reference/components/CopilotChat) and provides sidebar-specific layout and open/close behavior. The sidebar includes a header with a title and close button, and can be toggled via a floating button.

See [`CopilotPopup`](/reference/components/CopilotPopup) for a popup variant of this component.

## Import

```tsx
import { CopilotSidebar } from "@copilotkit/react-core/v2";
import "@copilotkit/react-core/v2/styles.css";
```

## Props

### Own Props

<PropertyReference name="header" type="SlotValue<typeof CopilotModalHeader>">
  Slot override for the sidebar header. Accepts a replacement component, a
  `className` string merged into the default, or a partial props object. The
  default header displays a title and a close button.
</PropertyReference>

<PropertyReference name="defaultOpen" type="boolean" default="false">
  Whether the sidebar should be open when the component first mounts.
</PropertyReference>

<PropertyReference name="width" type="number | string">
  Width of the sidebar panel. Accepts a number (pixels) or a CSS string (e.g.
  `"400px"`, `"30vw"`).
</PropertyReference>

### Inherited CopilotChat Props

`CopilotSidebar` accepts all props from [`CopilotChatProps`](/reference/components/CopilotChat) **except** `chatView`, which is set internally to `CopilotSidebarView`. This includes:

<PropertyReference name="agentId" type="string">
  ID of the agent to use. Must match an agent configured in
  `CopilotKit`.
</PropertyReference>

<PropertyReference name="threadId" type="string">
  ID of the conversation thread.
</PropertyReference>

<PropertyReference name="labels" type="Partial<CopilotChatLabels>">
  Partial label overrides for all text strings rendered inside the chat.
</PropertyReference>

<PropertyReference name="autoScroll" type="boolean" default="true">
  Whether the chat scrolls to the bottom automatically when new messages arrive.
</PropertyReference>

<PropertyReference
  name="inputProps"
  type="Partial<Omit<CopilotChatInputProps, 'children'>>"
>
  Additional props forwarded to the inner `CopilotChatInput` component.
</PropertyReference>

<PropertyReference
  name="welcomeScreen"
  type="SlotValue<React.FC<WelcomeScreenProps>> | boolean"
>
  Controls the welcome screen shown when no messages exist.
</PropertyReference>

All `CopilotChatView` slot props (`messageView`, `input`, `scrollView`, `inputContainer`, `feather`, `disclaimer`, `suggestionView`) are also accepted and forwarded through.

## Slot System

All slot props follow the same override pattern used across CopilotKit v2 components. Each slot accepts one of three value types:

| Value                    | Behavior                                                                            |
| ------------------------ | ----------------------------------------------------------------------------------- |
| **Component**            | Replaces the default component entirely. Receives the same props the default would. |
| **`className` string**   | Merged into the default component's class list via `twMerge`.                       |
| **Partial props object** | Spread into the default component as additional or overriding props.                |

## Usage

### Basic Usage

```tsx
function App() {
  return (
    <CopilotSidebar
      agentId="my-agent"
      labels={{ modalHeaderTitle: "Assistant" }}
    />
  );
}
```

### Default Open with Custom Width

```tsx
function App() {
  return <CopilotSidebar agentId="my-agent" defaultOpen={true} width={500} />;
}
```

### Custom Header

```tsx
function App() {
  return (
    <CopilotSidebar agentId="my-agent" header="bg-indigo-700 text-white" />
  );
}
```

## Behavior

- **Toggle button**: Renders a floating toggle button that opens and closes the sidebar. The button uses `CopilotChatToggleButton` internally.
- **Modal state**: Open/close state is managed via the chat configuration context. The `defaultOpen` prop sets the initial state; after that, state changes come from user interaction (toggle button, close button in the header).
- **Layout**: The sidebar uses `CopilotSidebarView` internally, which provides a sidebar-specific welcome screen layout with suggestions at the top, the welcome message in the middle, and the input fixed at the bottom.
- **Fixed positioning**: The sidebar renders as a fixed panel on one side of the viewport, pushing or overlaying content depending on CSS.
- **Agent connection**: All agent wiring (messages, running state, suggestions) is handled by the parent `CopilotChat` logic.

## Related

- [`CopilotChat`](/reference/components/CopilotChat) -- the base chat component used internally
- [`CopilotPopup`](/reference/components/CopilotPopup) -- popup variant
- [`CopilotChatView`](/reference/components/CopilotChatView) -- the layout component used internally