CopilotSidebar
Drop-in collapsible sidebar chat that wraps your main content.
This feature (prebuilt-sidebar) hasn't been tagged in any MS Agent Harness (.NET) cell yet. Try CopilotKit's Built-in Agent, LangGraph (Python), LangGraph (TypeScript).
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:
ms-agent-harness-dotnet::prebuilt-sidebar. Known demos are bundled from manifest demos[i]; check the cell id and framework slug.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:
ms-agent-harness-dotnet::prebuilt-sidebar. Known demos are bundled from manifest demos[i]; check the cell id and framework slug.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.
