Customize the Look and Feel

​

Custom Colors

Hover over the different UI elements below to see the CSS variable names.

The easiest way to change the colors is to override CopilotKit CSS variables. You can simply wrap CopilotKit in a div and override the CSS variables. CopilotKitCSSProperties will have the variable names as types:

 <div
    style={
      {
        "--copilot-kit-primary-color": "#222222",
      } as CopilotKitCSSProperties
    }
  >
    <CopilotSidebar .../>
  </div>

​

Custom CSS

In addition to customizing the colors, the CopilotKit CSS is structured in a way that you can easily customize the CSS classes.

Have a look at the CSS classes defined here.

For example:

.copilotKitButton {
  border-radius: 0;
}

​

Custom Icons

You can customize the icons by passing the icons prop to the CopilotSidebar, CopilotPopup or CopilotChat.

We support the following icons:

• openIcon: The icon to use for the open chat button.
• closeIcon: The icon to use for the close chat button.
• headerCloseIcon: The icon to use for the close chat button in the header.
• sendIcon: The icon to use for the send button.
• activityIcon: The icon to use for the activity indicator.
• spinnerIcon: The icon to use for the spinner.
• stopIcon: The icon to use for the stop button.
• regenerateIcon: The icon to use for the regenerate button.
• pushToTalkIcon: The icon to use for push to talk.

​

Custom Labels

To customize labels, pass the labels prop to the CopilotSidebar, CopilotPopup or CopilotChat.

• initial: The initial message(s) to display in the chat window.
• title: The title to display in the header.
• placeholder: The placeholder to display in the input.
• stopGenerating: The label to display on the stop button.
• regenerateResponse: The label to display on the regenerate button.

​

Swapping out components

To completely customize the look and feel of CopilotKit, you can swap out the components of the chat window.

The following components can be customized by passing it as props to the CopilotChat component:

• Window: The window component that contains the chat.
• Button: The button for opening/closing the chat window.
• Header: The chat header.
• Messages: The chat messages area.
• Input: The chat input.
• ResponseButton: The button for regenerating a response.

For example, to customize the response button, you can pass a custom component to the ResponseButton prop:

const CustomResponseButton = ({ onClick, inProgress }: ResponseButtonProps) => {
  return (
    <div style={{ 
        display: "flex", 
        marginTop: "10px" 
      }}>
      <button
        style={{ 
          flex: 1, 
          border: "1px solid #eee", 
          borderRadius: "4px", 
          marginRight: "5px" 
        }}
      >
        👍
      </button>
      <button style={{ 
        flex: 1, 
        border: "1px solid #eee", 
        borderRadius: "4px" 
      }}>👎</button>
    </div>
  );
};

<CopilotSidebar ResponseButton={CustomResponseButton}>
...
</CopilotSidebar>

Have a look at the props file to see the different interfaces for components that can be swapped: