Copilot UI & (headless) Copilot OS

Copilot UI: built-in UI components

CopilotKit provides pre-built UI components for quick integration:

CopilotChat: A flexible, customizable chat interface.
CopilotSidebar: Wraps CopilotChat in a collapsible sidebar.
CopilotPopup: Wraps CopilotChat in a toggleable popup window.

These components offer instant solutions while allowing easy customization to suit your application’s needs.

These components are highly customizable and can be styled to match your application’s look and feel. Alternatively, you can create your own UI using the core functionalities provided by CopilotKit.

Copilot OS without Copilot UI (Headless UI)

As your product matures, useCopilotChat provides deeply customizable headless UI so you can benefit from Copilot OS while fully controlling the UI layer of your Copilot.

useCopilotChat can also be used side-by - side with Copilot UI — to programmatically communicate with Copilot OS and more deeply integrate the Copilot into your application.

useCopilotChat returns an object with the following properties:

const {
  visibleMessages, // An array of messages that are currently visible in the chat.
  appendMessage, // A function to append a message to the chat.
  setMessages, // A function to set the messages in the chat.
  deleteMessage, // A function to delete a message from the chat.
  reloadMessages, // A function to reload the messages from the API.
  stopGeneration, // A function to stop the generation of the next message.
  isLoading, // A boolean indicating if the chat is loading.
} = useCopilotChat();