mirror of
https://github.com/CopilotKit/CopilotKit.git
synced 2026-09-14 16:26:20 +08:00
Tyler Slaton
8e1f1ec5f0
Shared MDX snippets had hardcoded langgraph URLs in IframeSwitcher components. Now they accept a framework prop so each integration page can specify its own feature viewer path. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
61 lines
2.5 KiB
Plaintext
61 lines
2.5 KiB
Plaintext
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.
|
|
|
|
```tsx title="page.tsx"
|
|
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>
|
|
{/* [!code highlight:2] */}
|
|
<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>
|
|
);
|
|
},
|
|
});
|
|
|
|
// ...
|
|
}
|
|
```
|