tool invocation ui

displays tool lifecycle: pending, in-progress, approval, and results.

tool states

click to expand/collapse. first example is open by default.

pending

status: pending

arguments:

{
  "query": "latest news about AI"
}

in progress

status: in_progress

completed

status: completed

failed

status: failed

awaiting approval

status: awaiting_approval

delete_file awaiting approval

arguments:

{
  "path": "/data/old_backup.zip"
}

with widget

status: completed

Sales Chart

Generated bar chart with 3 data pointschart ready

app invocation

tools can invoke inference apps, displaying real-time task output with streaming support.

live app invocation

compact task output with streaming status

standalone task output (compact)

can also be used directly without tool wrapper

installation

bash

1npx shadcn@latest add https://ui.inference.sh/r/tools.json

usage

tsx

1import { ToolInvocation } from '@/components/tools/tool-invocation'2import { FinishTool } from '@/components/tools/finish-tool'34// ToolInvocation displays tool calls with collapsible details5<ToolInvocation6  invocation={{7    id: 'tool-1',8    status: 'completed',9    function: {10      name: 'search_web',11      arguments: { query: 'latest news' },12    },13    result: JSON.stringify({ results: ['...'] }),14  }}15  defaultOpen={false}16/>1718// FinishTool displays the conversation completion state19<FinishTool20  invocation={{21    id: 'finish',22    status: 'completed',23    function: { name: 'finish', arguments: {} },24  }}25/>

features

collapsible tool details with arguments and results
status indicators: pending, running, completed, failed
human-in-the-loop approval ui for sensitive operations
widget rendering for structured tool outputs
finish tool display for conversation completion