Custom Sub-Components

You can swap out any of the sub-components of any Copilot UI to build up a completely custom look and feel. All components are fully typed with TypeScript for better development experience.

UserMessage

The user message is what displays when the user sends a message to the chat. In this example, we change the color and add an avatar.

AssistantMessage

The assistant message is what displays when the LLM responds to a user message. In this example, we remove the background color and add an avatar.

Window

The window is the main container for the chat. In this example, we turn it into a more traditional modal.

Button

The CopilotSidebar and CopilotPopup components allow you to customize their trigger button by passing in a custom Button component.

Header

The header component is the top of the chat window. In this example, we add a button to the left of the title with a custom icon.

Messages

The Messages component handles the display and organization of different message types in the chat interface. Its complexity comes from managing various message types (text, actions, results, and agent states) and maintaining proper scroll behavior.

Input

The input component that the user interacts with to send messages to the chat. In this example, we customize it to have a custom "Ask" button and placeholder text.

Actions

Actions allow the LLM to interact with your application's functionality. When an action is called by the LLM, you can provide custom components to visualize its execution and results. This example demonstrates a calendar meeting card implementation.

Agent State

The Agent State component allows you to visualize the internal state and progress of your CoAgents. When working with CoAgents, you can provide a custom component to render the agent's state. This example demonstrates a progress bar that updates as the agent runs.