CopilotSidebar.mdx

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

A chatbot sidebar component for the CopilotKit framework. Highly customizable through various props and custom CSS.

```jsx CopilotSidebar Example import { CopilotSidebar } from "@copilotkit/react-ui";

<CopilotSidebar labels={{ title: "Your Assistant", initial: "Hi! 👋 How can I assist you today?", }}

<YourApp/>

```

See CopilotPopup for a popup version of this component.

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.

Custom CSS

You can customize the colors of the chat window by overriding the CSS variables defined in the default styles.

For example, to set the primary color to purple:

<div style={{ "--copilot-kit-primary-color": "#7D5BA6" }}>
  <CopilotSidebar />
</div>

To further customize the chat window, you can override the CSS classes defined here.

For example:

.copilotKitButton {
  border-radius: 0;
}

Props

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. Whether the chat window should be open by default. If the chat window should close when the user clicks outside of it. If the chat window should close when the user hits the Escape key. A callback `(open: boolean) => void` that gets called when the chat window opens or closes. The shortcut key to open the chat window. Uses Command-`shortcut` on a Mac and Ctrl-`shortcut` on Windows. `icons` can be used to set custom icons for the chat window. `labels` can be used to set custom labels for the chat window.

<ResponseField name="initial" type="string | string[]">
  The initial message(s) to display in the chat window.
</ResponseField>

<ResponseField name="title" type="string" default="CopilotKit">
  The title to display in the header.
</ResponseField>

<ResponseField name="placeholder" type="string" default="Type a message...">
  The placeholder to display in the input.
</ResponseField>

<ResponseField name="thinking" type="string" default="Thinking...">
  The message to display while the assistant is "thinking".
</ResponseField>

<ResponseField name="error" type="string" default="❌ An error occurred. Please try again.">
  The message to display when an error occurs.
</ResponseField>

<ResponseField name="stopGenerating" type="string" default="Stop generating">
  The label to display on the stop button.
</ResponseField>

<ResponseField name="regenerateResponse" type="string" default="Regenerate response">
  The label to display on the regenerate button.
</ResponseField>

A function `(contextString: string, additionalInstructions?: string) => string` 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. Whether to show the response button. A class name to apply to the root element. A custom Window component to use instead of the default. A custom Button component to use instead of the default. A custom Header component to use instead of the default. A custom Messages component to use instead of the default. A custom Input component to use instead of the default.

<ResponseField name="ResponseButton" type="React.ComponentType"

A custom ResponseButton component to use instead of the default.