Let the Copilot Take Action

Specify `"use client"` (Next.js App Router)

This is only necessary if you are using Next.js with the App Router.

YourComponent.tsx

"use client"

Like other React hooks such as useState and useEffect, this is a client-side hook. If you're using Next.js with the App Router, you'll need to add the "use client" directive at the top of any file using this hook.

`useCopilotAction`

In addition to understanding state, you can empower the copilot to take actions. Use the useCopilotAction hook to define specific tasks that the copilot can perform based on user input.

YourComponent.tsx

import { useCopilotAction } from "@copilotkit/react-core"; 
 
export function YourComponent() {
  const { todos, addTodo } = useTodos();
 
  // Define Copilot action

  useCopilotAction({
    name: "addTodoItem",
    description: "Add a new todo item to the list",
    parameters: [
      {
        name: "todoText",
        type: "string",
        description: "The text of the todo item to add",
        required: true,
      }
    ],
    handler: async ({ todoText }) => {
      addTodo(todoText);
    },
  });
 
  return (
    // Your custom UI component
    <>...</>
  );
}

Test it out!

After defining the action, ask the copilot to perform the task. For example, you can now ask the copilot to "select an employee" by specifying the employeeId.

Advanced (Generative UI, and more)

You can render custom components in the chat while actions execute. For more detail see the Generative UI guide.
For more advanced use cases, refer to the useCopilotAction reference.

Frontend Actions

Let the Copilot Take Action

Specify `"use client"` (Next.js App Router)

`useCopilotAction`

Test it out!

Advanced (Generative UI, and more)

Cloud & Backend Actions

Backend Action Hooks

Enterprise Integrations

On this page