← Back to examples

Tool Approval New

This demo shows the native tool approval system. When an agent needs to execute a tool that requires human approval, an inline approval bubble appears in the chat with Approve/Deny buttons.

How it works

The SDK natively handles agent_approval_start and step_await (with approval_required) SSE events. It creates an approval bubble inline in the chat. When the user clicks Approve or Deny, the SDK calls the approval API and pipes the response stream back through the chat.

// Approval config { approval: { title: "Approval Required", approveLabel: "Approve", denyLabel: "Deny", approveButtonColor: "#16a34a", // Custom handler (optional) onDecision: async (data, decision) => { // Return Response or ReadableStream } } }

Programmatic Control

Use controller.resolveApproval(approvalId, decision) to resolve approvals programmatically from your application code.

Controller Events

Listen for approval:requested and approval:resolved events on the controller to react to the approval lifecycle in your app.

Customization

Style the approval bubble via config.approval (colors, labels), override rendering with the renderApproval plugin hook, or disable entirely with approval: false.

Event Log