tools-ui

Tool UI Components Tool lifecycle components from ui.inference.sh . Quick Start npx shadcn@latest add https://ui.inference.sh/r/tools.json Tool States State Description pending Tool call requested, waiting to execute running Tool is currently executing approval Requires human approval before execution success Tool completed successfully error Tool execution failed Components Tool Call Display import { ToolCall } from "@/registry/blocks/tools/tool-call" < ToolCall name = " search_web " args = { { query : "latest AI news" } } status = " running " /> Tool Result import { ToolResult } from "@/registry/blocks/tools/tool-result" < ToolResult name = " search_web " result = { { results : [ ... ] } } status = " success " /> Tool Approval import { ToolApproval } from "@/registry/blocks/tools/tool-approval" ToolApproval name = " send_email " args = { { to : "user@example.com" , subject : "Hello" } } onApprove = { ( ) = executeTool ( ) } onDeny = { ( ) => cancelTool ( ) } /> Full Example import { ToolCall , ToolResult , ToolApproval } from "@/registry/blocks/tools" function ToolDisplay ( { tool } ) { if ( tool . status === 'approval' ) { return ( < ToolApproval name = { tool . name } args = { tool . args } onApprove = { tool . approve } onDeny = { tool . deny } /> ) } if ( tool . result ) { return ( < ToolResult name = { tool . name } result = { tool . result } status = { tool . status } /> ) } return ( < ToolCall name = { tool . name } args = { tool . args } status = { tool . status } /> ) } Styling Tool Cards < ToolCall name = " read_file " args = { { path : "/src/index.ts" } } status = " running " className = " border-blue-500 " /> Tool Icons Tools automatically get icons based on their name: Pattern Icon search , find Search read , get File write , create Pencil delete , remove Trash send , email Mail Default Wrench With Agent Component The Agent component handles tool lifecycle automatically: import { Agent } from "@/registry/blocks/agent/agent" < Agent proxyUrl = "/api/inference/proxy" config = { { core_app : { ref : 'openrouter/claude-sonnet-45@0fkg6xwb' } , tools : [ { name : 'search_web' , description : 'Search the web' , parameters : { query : { type : 'string' } } , requiresApproval : true , // Enable approval flow } , ] , } } /