CopilotPopup
The CopilotPopup component, providing a popup interface for interacting with your copilot.
A chatbot popup component for the CopilotKit framework. The component allows for a high degree of customization through various props and custom CSS.
See CopilotSidebar for a sidebar version of this component.
Install Dependencies
This component is part of the @copilotkit/react-ui package.
npm install @copilotkit/react-core @copilotkit/react-uiUsage
import { CopilotPopup } from "@copilotkit/react-ui";
import "@copilotkit/react-ui/styles.css";
<CopilotPopup
labels={{
title: "Your Assistant",
initial: "Hi! 👋 How can I assist you today?",
}}
/>With Observability Hooks
To monitor user interactions, provide the observabilityHooks prop.
Note: This requires a publicApiKey in the <CopilotKit> provider.
<CopilotKit publicApiKey="YOUR_PUBLIC_API_KEY">
<CopilotPopup
observabilityHooks={{
onChatExpanded: () => {
console.log("Popup opened");
},
onChatMinimized: () => {
console.log("Popup closed");
},
}}
/>
</CopilotKit>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
Prop
Type
Prop
Type
Prop
Type
Prop
Type
Prop
Type
Prop
Type
Prop
Type
Prop
Type
Prop
Type
Prop
Type
Prop
Type
Prop
Type
Prop
Type
Prop
Type
Prop
Type
Prop
Type
Prop
Type
Prop
Type
Prop
Type
Prop
Type
Prop
Type
Prop
Type
Prop
Type
Prop
Type
Prop
Type
Prop
Type
Prop
Type
Prop
Type
Prop
Type
Prop
Type
Prop
Type
Prop
Type
Prop
Type
Prop
Type
Prop
Type
Prop
Type
Prop
Type