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 💪

Step 3: Copilot Readable State Next Steps

Step 4: Copilot Actions

Available Actions

The useCopilotAction hook

Try it out!

The `useCopilotAction` hook