Interactive

What is this?#

Frontend tools enable you to define client-side functions that your agent can invoke, with execution happening entirely in the user's browser. When your agent calls a frontend tool, the logic runs on the client side, giving you direct access to the frontend environment.

This can be utilized for UI control, generative UI, or Human-in-the-loop interactions. In this guide, we cover the use of frontend tools for Human-in-the-loop.

When should I use this?#

Use frontend tools when you need your agent to interact with client-side primitives such as:

• Reading or modifying React component state
• Accessing browser APIs like localStorage, sessionStorage, or cookies
• Triggering UI updates or animations
• Interacting with third-party frontend libraries
• Performing actions that require the user's immediate browser context

Create a frontend human-in-the-loop tool#

Frontend tools can be leveraged in a variety of ways. One of those ways is to have a human-in-the-loop flow where the response of the tool is gated by a user's decision.

In this example we will simulate an "approval" flow for executing a command. Use the useHumanInTheLoop hook to create a tool that prompts the user for approval.

import { useHumanInTheLoop } from "@copilotkit/react-core/v2"; 
import { z } from "zod";

export function Page() {
  // ...

  useHumanInTheLoop({
    name: "humanApprovedCommand",
    description: "Ask human for approval to run a command.",
    parameters: z.object({
      command: z.string().describe("The command to run"),
    }),
    render: ({ args, respond, status }) => {
      if (status !== "executing") return <></>;
      return (
        <div>
          <pre>{args.command}</pre>
          <button onClick={() => respond?.(`Tell the user the command ran`)}>
            Approve
          </button>
          <button
            onClick={() => respond?.(`Tell the user the command wasn't run`)}
          >
            Deny
          </button>
        </div>
      );
    },
  });

  // ...
}