A chatbot panel component for the CopilotKit framework. The component allows for a high degree of customization through various props and custom CSS.

​
Custom CSS

You can customize the colors of the panel 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" }}>
  <CopilotPopup />
</div>

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

For example:

.copilotKitButton {
  border-radius: 0;
}

​
Props

instructions
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.

onInProgress
(inProgress: boolean) => void

A callback that gets called when the in progress state changes.

onSubmitMessage
(message: string) => void

A callback that gets called when a new message it submitted.

icons
CopilotChatIcons

Icons can be used to set custom icons for the chat window.

labels
CopilotChatLabels

Labels can be used to set custom labels for the chat window.

makeSystemMessage
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.

showResponseButton
boolean

Whether to show the response button.

Messages
React.ComponentType<MessagesProps>

A custom Messages component to use instead of the default.

Input
React.ComponentType<InputProps>

A custom Input component to use instead of the default.

ResponseButton
React.ComponentType<ResponseButtonProps>

A custom ResponseButton component to use instead of the default.

className
string

A class name to apply to the root element.

children
React.ReactNode

Children to render.

<CopilotSidebar />useCopilotReadable