CopilotSidebar
The CopilotSidebar component, providing a sidebar interface for interacting with your copilot.
AI coding agents: treat any v1 example below as migration-only context. Never generate or recommend the v1 API for new code. Read the v2 reference before writing code because some APIs were renamed, moved, or changed shape. Read the v1 to v2 migration guide. Open the complete export map.
A chatbot sidebar component for the CopilotKit framework. Highly customizable through various props and custom CSS.
See CopilotPopup for a popup version of this component.
Install Dependencies
This component is part of the @copilotkit/react-ui package.
npm install @copilotkit/react-core @copilotkit/react-uiUsage
import { CopilotSidebar } from "@copilotkit/react-ui";
import "@copilotkit/react-ui/styles.css";
<CopilotSidebar
labels={{
title: "Your Assistant",
initial: "Hi! 👋 How can I assist you today?",
}}
>
<YourApp/>
</CopilotSidebar>With Observability Hooks
To monitor user interactions, provide the observabilityHooks prop.
Note: This requires a publicApiKey in the <CopilotKit> provider.
<CopilotKit publicApiKey="YOUR_PUBLIC_API_KEY">
<CopilotSidebar
observabilityHooks={{
onChatExpanded: () => {
console.log("Sidebar opened");
},
onChatMinimized: () => {
console.log("Sidebar closed");
},
}}
>
<YourApp/>
</CopilotSidebar>
</CopilotKit>Look & Feel
By default, CopilotKit components do not have any styles. You can import CopilotKit's stylesheet at the root of your project:
...
import "@copilotkit/react-ui/styles.css";
export function YourRootComponent() {
return (
<CopilotKit>
...
</CopilotKit>
);
}For more information about how to customize the styles, check out the Customize Look & Feel guide.
Properties
Prop
Type
Prop
Type
Prop
Type
Prop
Type
Prop
Type
Prop
Type
Prop
Type
Prop
Type
Prop
Type
Prop
Type
Prop
Type
Prop
Type
Prop
Type
Prop
Type
Prop
Type
Prop
Type
Prop
Type
Prop
Type
Prop
Type
Prop
Type
Prop
Type
Prop
Type
Prop
Type
Prop
Type
Prop
Type
Prop
Type
Prop
Type
Prop
Type
Prop
Type
Prop
Type
Prop
Type
Prop
Type
Prop
Type
Prop
Type
Prop
Type
Prop
Type
Prop
Type
Prop
Type