Interactive components
Create approval flows where the agent pauses and waits for human input.
What is this?#
Interactive generative UI creates flows where the agent pauses execution and waits for user input before continuing. This enables approval workflows, confirmation dialogs, and any scenario where human judgment is needed mid-execution.
When should I use this?#
Use interactive generative UI when you need:
- Approval/rejection flows (e.g. "Run this command?")
- User decisions that the agent should know about
- Confirmation dialogs with structured responses
- Any flow where the agent pauses for human judgment
How it works in code#
Model approvals as async frontend tools
Claude Agent SDK human-in-the-loop demos use CopilotKit's promise-based frontend tool flow. The agent calls an approval tool, the UI resolves the tool result after the user decides, and the same Claude run continues with that result. Register the approval UI from the page component.
useHumanInTheLoop({
agentId: "hitl-in-chat",
name: "book_call",
description:
"Ask the user to pick a time slot for a call. The picker UI presents fixed candidate slots; the user's choice is returned to the agent.",
parameters: z.object({
This framework implements the same interactive pause shape with a
Promise-based frontend tool. The agent calls schedule_meeting, the client
renders the picker, and the tool result resolves only after the user chooses a
slot or cancels.