CopilotSidebar

"use client";import React from "react";import { CopilotKit } from "@copilotkit/react-core";import {  CopilotSidebar,  useConfigureSuggestions,} from "@copilotkit/react-core/v2";// Outer layer — provider + main content + sidebar.export default function PrebuiltSidebarDemo() {  return (    <CopilotKit runtimeUrl="/api/copilotkit" agent="prebuilt-sidebar">      <MainContent />      <CopilotSidebar agentId="prebuilt-sidebar" defaultOpen={true} />      <Suggestions />    </CopilotKit>  );}function MainContent() {  return (    <main className="min-h-screen w-full p-12">      <h1 className="text-3xl font-semibold mb-4">        Sidebar demo — click the launcher      </h1>      <p className="text-gray-600 max-w-xl">        This page showcases the pre-built <code>&lt;CopilotSidebar /&gt;</code>{" "}        component wired to a Mastra-backed agent. The sidebar is rendered        alongside this main content and can be toggled via its launcher button.        It opens by default to make the difference from the full-page chat demo        obvious.      </p>    </main>  );}function Suggestions() {  useConfigureSuggestions({    suggestions: [{ title: "Say hi", message: "Say hi!" }],    available: "always",  });  return null;}

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.

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:

    <CopilotKit runtimeUrl="/api/copilotkit" agent="prebuilt-sidebar">      <MainContent />      <CopilotSidebar agentId="prebuilt-sidebar" defaultOpen={true} />      <Suggestions />    </CopilotKit>

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:

      <CopilotSidebar agentId="prebuilt-sidebar" defaultOpen={true} />

Common sidebar-specific props:

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.