Quickstart: Chatbot
To set up a chatbot with CopilotKit, we will install the following dependencies:
@copilotkit/react-core: The core library for CopilotKit, which contains the CopilotKit provider and useful hooks.@copilotkit/react-ui: The UI library for CopilotKit, which contains the CopilotKit UI components such as the sidebar, chat popup, textare and more.
To install the CopilotKit dependencies, run the following:
Install Dependencies
npm install @copilotkit/react-core @copilotkit/react-uiSetup CopilotKit
Copilot Readable State
You likely want to provide state knowledge to the copilot. You can achieve this by using the useCopilotReadable hook.
YourComponent.tsx
import { useCopilotReadable } from "@copilotkit/react-core";
export function YourComponent() {
const { employees } = useEmployees();
// Define Copilot readable state
useCopilotReadable({
description: "List of available users",
value: users,
});
return (
<>...</>
);
}Let the Copilot take action
Aside from being aware of the state, you can make your copilots even more powerful by allowing them to take actions. You can achieve this by using the useCopilotAction hook.
YourComponent.tsx
import { useCopilotReadable, useCopilotAction } from "@copilotkit/react-core";
export function YourComponent() {
const { employees, selectEmployee } = useEmployees();
// Define Copilot readable state
useCopilotReadable({
description: "List of available users",
value: users,
});
// Define Copilot action
useCopilotAction({
name: "Select an employee",
description: "Select an employee from the list",
parameters: [
{
name: "employeeId",
type: "string",
description: "The ID of the employee to select",
required: true,
}
],
handler: async ({ employeeId }) => selectEmployee(employeeId),
});
return (
<>...</>
);
}Next Steps
We highly recommend checkout out our simple AI Todo List Copilot Tutorial to learn more about CopilotKit.
