---
title: "<CopilotSidebar />"
description: "A chatbot sidebar component for CopilotKit."
---

{/* GENERATE-DOCS path=packages/react-ui/src/components/chat/Sidebar.tsx component=CopilotSidebar */}
 
<img src="/images/CopilotSidebar/CopilotSidebar.gif" width="500" />
 
<img referrerPolicy="no-referrer-when-downgrade" src="https://static.scarf.sh/a.png?x-pxid=a9b290bb-38f9-4518-ac3b-8f54fdbf43be" />
 
A chatbot sidebar component for the CopilotKit framework. Highly customizable through various props and custom CSS.
 
<RequestExample>
  ```jsx CopilotSidebar Example
  import { CopilotSidebar } from "@copilotkit/react-ui";
 
  <CopilotSidebar
    labels={{
      title: "Your Assistant",
      initial: "Hi! 👋 How can I assist you today?",
    }}
  >
    <YourApp/>
  </CopilotSidebar>
  ```
</RequestExample>
 
 
See [CopilotPopup](./CopilotPopup) for a popup version of this component.
 
<Note>
  To make the sidebar push your content to the side, wrap your content in the
  sidebar component. If you want the sidebar to overlay your content, place the
  sidebar component outside of your content.
</Note>
 
## Custom CSS
 
You can customize the colors of the chat window by overriding the CSS variables
defined in the [default styles](https://github.com/CopilotKit/CopilotKit/blob/main/CopilotKit/packages/react-ui/src/css/colors.css).
 
For example, to set the primary color to purple:
 
```jsx
<div style={{ "--copilot-kit-primary-color": "#7D5BA6" }}>
  <CopilotSidebar />
</div>
```
 
To further customize the chat window, you can override the CSS classes defined
[here](https://github.com/CopilotKit/CopilotKit/blob/main/CopilotKit/packages/react-ui/src/css/).
 
For example:
 
```css
.copilotKitButton {
  border-radius: 0;
}
```

## Props

<ResponseField name="instructions" type="string" >
Custom instructions to be added to the system message. Use this property to
  provide additional context or guidance to the language model, influencing
  its responses. These instructions can include specific directions,
  preferences, or criteria that the model should consider when generating
  its output, thereby tailoring the conversation more precisely to the
  user's needs or the application's requirements.
</ResponseField>

<ResponseField name="onInProgress" type="(inProgress: boolean) => void" >
A callback that gets called when the in progress state changes.
</ResponseField>

<ResponseField name="onSubmitMessage" type="(message: string) => void" >
A callback that gets called when a new message it submitted.
</ResponseField>

<ResponseField name="icons" type="CopilotChatIcons" >
Icons can be used to set custom icons for the chat window.
</ResponseField>

<ResponseField name="labels" type="CopilotChatLabels" >
Labels can be used to set custom labels for the chat window.
</ResponseField>

<ResponseField name="makeSystemMessage" type="SystemMessageFunction" >
A function that takes in context string and instructions and returns
  the system message to include in the chat request.
  Use this to completely override the system message, when providing
  instructions is not enough.
</ResponseField>

<ResponseField name="showResponseButton" type="boolean" >
Whether to show the response button.
</ResponseField>

<ResponseField name="Messages" type="React.ComponentType<MessagesProps>" >
A custom Messages component to use instead of the default.
</ResponseField>

<ResponseField name="Input" type="React.ComponentType<InputProps>" >
A custom Input component to use instead of the default.
</ResponseField>

<ResponseField name="ResponseButton" type="React.ComponentType<ResponseButtonProps>" >
A custom ResponseButton component to use instead of the default.
</ResponseField>

<ResponseField name="className" type="string" >
A class name to apply to the root element.
</ResponseField>

<ResponseField name="children" type="React.ReactNode" >
Children to render.
</ResponseField>

<ResponseField name="defaultOpen" type="boolean" >
Whether the chat window should be open by default.
</ResponseField>

<ResponseField name="clickOutsideToClose" type="boolean" >
If the chat window should close when the user clicks outside of it.
</ResponseField>

<ResponseField name="hitEscapeToClose" type="boolean" >
If the chat window should close when the user hits the Escape key.
</ResponseField>

<ResponseField name="shortcut" type="string" >
The shortcut key to open the chat window.
  Uses Command-[shortcut] on a Mac and Ctrl-[shortcut] on Windows.
</ResponseField>

<ResponseField name="onSetOpen" type="(open: boolean) => void" >
A callback that gets called when the chat window opens or closes.
</ResponseField>

<ResponseField name="Window" type="React.ComponentType<WindowProps>" >
A custom Window component to use instead of the default.
</ResponseField>

<ResponseField name="Button" type="React.ComponentType<ButtonProps>" >
A custom Button component to use instead of the default.
</ResponseField>

<ResponseField name="Header" type="React.ComponentType<HeaderProps>" >
A custom Header component to use instead of the default.
</ResponseField>

