Interactive components

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.

<InlineDemo demo="gen-ui-interrupt" />

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

On the frontend, register an interrupt renderer with useInterrupt. When the agent pauses, your component mounts inline in the chat, captures the user's choice, and resumes the run with that input.

<Snippet region="frontend-useinterrupt-render" title="frontend/src/app/page.tsx — useInterrupt" />

On the backend, the agent calls into the interrupt primitive and waits for the resumed response before continuing the graph.

<Snippet region="backend-interrupt-tool" title="backend — interrupt tool" /> <FeatureIntegrations feature="gen-ui-interrupt" /> <IntegrationGrid path="human-in-the-loop" />