CopilotSidebar

What is this?

<CopilotSidebar> is a prebuilt chat surface that docks to the side of your app. It wraps your main content so the chat can slide out on demand, making it a good fit for in-app copilots that need to stay accessible without taking over the entire viewport.

When should I use this?

Use the sidebar when you want:

• A persistent, collapsible chat attached to your app shell
• Chat to live alongside your main content rather than on top of it
• A launcher the user can toggle without losing their place

For a floating bubble that overlays content, see CopilotPopup. For a fully embedded chat pane, use <CopilotChat> directly.

Here's the sidebar in action. Click the panel icon to toggle it open:

<InlineDemo demo="prebuilt-sidebar" />

The gif below shows the sidebar sliding out alongside page content:

Basic setup

Wrap your app in <CopilotKit> once (it wires the runtime, session, and agent registry) and drop <CopilotSidebar> alongside your main content. The sidebar renders as a sibling so it can slide out without reflowing your page:

<Snippet region="sidebar-basic-setup" title="frontend/src/app/page.tsx — CopilotSidebar wired up" />

Configuring the sidebar

<CopilotSidebar> accepts the same props as <CopilotChat> plus a few of its own. The example below opens the sidebar by default and targets a named agent:

<Snippet region="sidebar-configuration" title="frontend/src/app/page.tsx — defaultOpen + agentId" />

Common sidebar-specific props:

Prop	Description
defaultOpen	Whether the sidebar starts open on first render.
agentId	Agent slug the sidebar should talk to (must match an agent configured on the runtime).
labels	User-facing copy for the header, placeholder, and disclaimer.
header	Slot for the sidebar header bar — see the slot system.
toggleButton	Slot for the open/close launcher button.

Styling

CopilotSidebar participates in the slot system, so every piece of its UI is customizable, from Tailwind classes on the message view to a full component swap for the header or toggle button. See custom look and feel for the full slot reference.