Crew-based Chat
Create interactive chat experiences with CrewAI crews.
This video shows the result of npx copilotkit@latest init with the implementation section applied to it!
What is this?
CopilotKit allows you to chat with an LLM that has the ability to kick off your crews. This is a great way to enable natural conversations that flow in and out of your crews. In addition to this, this chat serves as a shared communication channel for your executing crews to report their thoughts, progress, and results.
If you've gone through the getting started guide you've already got this working!
How does this work?
CopilotKit provides a "llm-in-the-middle" chat that will communicate with your user to determine which Crew to kick off and gather the necessary input data in order to kick off the Crew.
Once the Crew is kicked-off, CopilotKit will handle streaming thoughts, progress, interrupts, and results back to the user.
When should I use this?
The crew-based chat interface is ideal when you need to:
- Enable natural conversations with complex crews - Let users interact with multiple specialized Crews through a single chat interface
- Support long-running crew tasks - Provide real-time feedback during research, analysis, and other time-intensive operations
- Create guided experiences - Allow your CrewAI crew to ask for inputs, provide outputs, and maintain context throughout an interaction
Implementation
CopilotKit provides a variety of different batteries-included components to choose from when creating Crew-enabled applications. They scale from simple chat UIs to completely custom interfaces.
CopilotPopup is a convenience wrapper for CopilotChat that lives at the same level as your main content in the view hierarchy. It provides a floating chat interface that can be toggled on and off.
import { CopilotPopup } from "@copilotkit/react-ui";
export function YourApp() {
return (
<>
<YourMainContent />
<CopilotPopup
instructions={"You are assisting the user as best as you can. Answer in the best way possible given the data you have."}
labels={{
title: "Popup Assistant",
initial: "Need any help?",
}}
/>
</>
);
}CopilotSidebar is a convenience wrapper for CopilotChat that wraps your main content in the view hierarchy. It provides a collapsible and expandable sidebar chat interface.
import { CopilotSidebar } from "@copilotkit/react-ui";
export function YourApp() {
return (
<CopilotSidebar
defaultOpen={true}
instructions={"You are assisting the user as best as you can. Answer in the best way possible given the data you have."}
labels={{
title: "Sidebar Assistant",
initial: "How can I help you today?",
}}
>
<YourMainContent />
</CopilotSidebar>
);
}CopilotChat is a flexible chat interface component that can be placed anywhere in your app and can be resized as you desire.
import { CopilotChat } from "@copilotkit/react-ui";
export function YourComponent() {
return (
<CopilotChat
instructions={"You are assisting the user as best as you can. Answer in the best way possible given the data you have."}
labels={{
title: "Your Assistant",
initial: "Hi! 👋 How can I assist you today?",
}}
/>
);
}The built-in Copilot UI can be customized in many ways -- both through css and by passing in custom sub-components.
CopilotKit also offers fully custom headless UI, through the useCopilotChat hook. Everything built with the built-in UI (and more) can be implemented with the headless UI, providing deep customizability.
import { useCopilotChat } from "@copilotkit/react-core";
import { Role, TextMessage } from "@copilotkit/runtime-client-gql";
export function CustomChatInterface() {
const {
visibleMessages,
appendMessage,
setMessages,
deleteMessage,
reloadMessages,
stopGeneration,
isLoading,
} = useCopilotChat();
const sendMessage = (content: string) => {
appendMessage(new TextMessage({ content, role: Role.User }));
};
return (
<div>
{/* Implement your custom chat UI here */}
</div>
);
}
