<CopilotChat />
A chatbot panel component for the CopilotKit framework. The component allows for a high degree of customization through various props and custom CSS.
Install Dependencies
This component is part of the @copilotkit/react-ui package.
npm install @copilotkit/react-core @copilotkit/react-uiUsage
import { CopilotChat } from "@copilotkit/react-ui";
import "@copilotkit/react-ui/styles.css";
<CopilotChat
labels={{
title: "Your Assistant",
initial: "Hi! 👋 How can I assist you today?",
}}
/>Look & Feel
By default, CopilotKit components do not have any styles. You can import CopilotKit’s stylesheet at the root of your project:
...
import "@copilotkit/react-ui/styles.css";
export function YourRootComponent() {
return (
<CopilotKit>
...
</CopilotKit>
);
}For more information about how to customize the styles, check out the Customize Look & Feel guide.
Properties
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.
A callback that gets called when the in progress state changes.
A callback that gets called when a new message it submitted.
Icons can be used to set custom icons for the chat window.
Labels can be used to set custom labels for the chat window.
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.
Whether to show the response button.
A custom Messages component to use instead of the default.
A custom Input component to use instead of the default.
A custom ResponseButton component to use instead of the default.
A class name to apply to the root element.
Children to render.
