Frontend Actions

Setup CopilotKit

To use frontend actions, you'll need to setup CopilotKit first. For the sake of brevity, we won't cover it here.

Check out our getting started guide and come back here when you're setup!

Create a frontend action

First, you'll need to create a frontend action using the useCopilotAction hook. Here's a simple one to get you started that says hello to the user.

import { useCopilotAction } from "@copilotkit/react-core"

export function Page() {
  // ...

  useCopilotAction({
    name: "sayHello",
    description: "Say hello to the user",
    available: "remote", // optional, makes it so the action is *only* available to the agent
    parameters: [
      {
        name: "name",
        type: "string",
        description: "The name of the user to say hello to",
        required: true,
      },
    ],
    handler: async ({ name }) => {
      alert(`Hello, ${name}!`);
    },
  });

  // ...
}

Frontend actions are made available automatically to Crews

We don't need to do anything special to access these frontend actions from within a CrewAI Crew, since they're automatically available.

Give it a try!

You've now given your agent the ability to directly call any CopilotActions you've defined. These actions will be available as tools to the agent where they can be used as needed.