Tool Calls with UI Confirmation

useToolCalls — human-in-the-loop approval for AI tool execution.

Prompt

"Plan a trip from Toronto to Paris in June"

Ready

The code:

const { content, start, isStreaming } = useStream({
  api: "/api/tools",
  providerFormat: "openai",
});

const { toolCalls, pendingCalls, resolveToolCall, rejectToolCall, isExecuting } =
  useToolCalls({
    stream: content,
    providerFormat: "openai",
  });

// Render pending calls as approval cards
{pendingCalls.map(call => (
  <ToolApprovalCard
    key={call.id}
    toolCall={call}
    onApprove={() => resolveToolCall(call.id, mockResult)}
    onDeny={() => rejectToolCall(call.id, new Error("Denied"))}
  />
))}

Human-in-the-loop. useToolCalls parses tool calls from the stream and gives you resolveToolCall / rejectToolCall for UI-confirmed execution.

Pending calls render as approval cards. The user decides what the AI is allowed to do. Once approved, results flow back and the AI generates a final response.

Real production pattern. Build agentic approval workflows, human-verified tool use, or auditable AI pipelines — in ~20 lines of hook code.

🛡️

Approval flow

Users control tool execution

⚡

Streaming

Tool calls arrive mid-stream

🔄

Parallel calls

Multiple tools at once

🔌

Provider agnostic

OpenAI & Anthropic formats