Interactive

import { IframeSwitcher } from "@/components/content"

<IframeSwitcher id="frontend-tools-based-hitl-example" exampleUrl={https://feature-viewer.copilotkit.ai/${props.framework || "langgraph"}/feature/human_in_the_loop?sidebar=false&chatDefaultOpen=false} codeUrl={https://feature-viewer.copilotkit.ai/${props.framework || "langgraph"}/feature/human_in_the_loop?view=code&sidebar=false&codeLayout=tabs} exampleLabel="Demo" codeLabel="Code" height="700px" />

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" // [!code highlight]
import { z } from "zod";

export function Page() {
  // ...

  // [!code highlight:16]
  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>
      );
    },
  });

  // ...
}