Step 4: Copilot Actions
Now it’s time to make our copilot even more useful by taking actions.
Available Actions
Once again, let’s take a look at our app’s state in the lib/hooks/use-tasks.tsx
file.
Essentially, we want our copilot to be able to call the addTask
, setTaskStatus
and deleteTask
functions.
The useCopilotAction
hook
The useCopilotAction
hook makes actions available to our copilot. Let’s implement it in the lib/hooks/use-tasks.tsx
file.
libs/hooks/use-tasks.tsx
// ... the rest of the file
import { useCopilotReadable, useCopilotAction } from "@copilotkit/react-core";
export const TasksProvider = ({ children }: { children: ReactNode }) => {
const [tasks, setTasks] = useState<Task[]>(defaultTasks);
useCopilotAction({
name: "addTask",
description: "Adds a task to the todo list",
parameters: [
{
name: "title",
type: "string",
description: "The title of the task",
required: true,
},
],
handler: ({ title }) => {
addTask(title);
},
});
useCopilotAction({
name: "deleteTask",
description: "Deletes a task from the todo list",
parameters: [
{
name: "id",
type: "number",
description: "The id of the task",
required: true,
},
],
handler: ({ id }) => {
deleteTask(id);
},
});
useCopilotAction({
name: "setTaskStatus",
description: "Sets the status of a task",
parameters: [
{
name: "id",
type: "number",
description: "The id of the task",
required: true,
},
{
name: "status",
type: "string",
description: "The status of the task",
enum: Object.values(TaskStatus),
required: true,
},
],
handler: ({ id, status }) => {
setTaskStatus(id, status);
},
});
// ... the rest of the file
};
The useCopilotAction
hook is a powerful hook that allows us to register actions with our copilot. It takes an object with the following properties:
name
is the name of the action.description
is a description of the action. It’s important to choose a good description so that our copilot can choose the right action.parameters
is an array of parameters that the action takes. It follows the JSON Schema format.handler
is a function that will be called when the action is triggered. It’s even type safe!
You can check out the full reference for the useCopilotAction
hook here.
Try it out!
Now, head back to the app and ask your pilot to do any of the following:
- “Create a task about inviting Daniel to my birthday”
- “Delete all outstanding tasks”
- “Mark task with ID 2 as done”
- etc.
Your copilot is now more helpful than ever 💪