Tool Call Components

Dev Design Library indexes 25 tool call components from 10 open-source UI libraries, with the most coming from LocalMode, Notra, beUI, Halaska UI and Spectrum UI. Each one links to its page with the source code, a live preview where available, the library license and the install command. Tool call components belong to the AI group.

• ToolAI Elements · ReactA collapsible component for displaying tool invocation details in AI chatbot interfaces.
• AI ConnectKokonut UI · ReactA tool call that stops because an app is not connected. Connect it right in the message, and the call picks up where…
• Agent ActivitybeUI · ReactRenders progressive agent work as message content.
• Agent StepsSpectrum UI · ReactA timeline of tool calls with status, arguments, results, and parallel sub-steps.
• Agent HandoffKinetics · HTML/CSSOne agent hands the live context to the next along a trace
• ConfirmationAI Elements (Svelte) · SvelteA confirmation workflow component for tool approval states, request and response rendering, and action handling.
• Claude Code Todo ListNotra · ReactThe Update Todos tool call with done, active and pending items.
• Data Extractor BlockLocalMode · ReactSchema-validated structured-data extraction from free text over its OWN on-device WebGPU-only WebLLM model (default…
• Action Receipt PatternHalaska UI · React
• Tool ChipEaseUI · ReactA small pill naming a tool an agent used, with a spinner, check, or error mark that crossfades in place as its status…
• AI Tool CallsKokonut UI · ReactTool calls inside a chat reply. Each call streams in as one row with a live timer, then they fold into a single line…
• Tool ApprovalbeUI · ReactTemporarily replaces freeform input with scoped permission.
• Tool ChipsSpectrum UI · ReactCompact tool-call chips that expand into their arguments and result.
• ToolAI Elements (Svelte) · SvelteA collapsible tool call block with parameter and result rendering.
• Claude Code Tool CallNotra · ReactTool calls with a status bullet and a ⎿ result line, plus the collapsed "Ran 3 shell commands" summary.
• Research Agent BlockLocalMode · ReactA tool-using ReAct research agent over its OWN on-device WebGPU-only WebLLM model (default Qwen3-1.7B-q4f16_1-MLC)…
• Tool Stream PatternHalaska UI · React
• Tool ResultbeUI · ReactPresents the evidence produced by an active task.
• Codex ExecNotra · ReactA Ran cell with shell syntax colors and output folded behind + N lines.
• Agent Step TimelineLocalMode · ReactA vertical timeline of ReAct agent steps: collapsible per-step cards (color-coded tool badge, args, observation…
• Codex ExploredNotra · ReactGrouped Read, Search and List calls with a + Show details fold.
• TaskLocalMode · ReactA multi-step agent process as an ordered list of steps (index, tool, status, args, observation) with the final-answer…
• OpenCode ActivityNotra · ReactOrange thoughts with a live Thinking spinner, plus muted read, web search and tool lines.
• ToolLocalMode · ReactA single tool invocation card with a status taxonomy (pending/running/streaming/completed/error), expandable…
• Tool ApprovalLocalMode · ReactA human-in-the-loop confirmation card that gates a tool call before execution (pending tool + args with…

Libraries with tool call components

• LocalMode
• Notra
• beUI
• Halaska UI
• Spectrum UI

Related categories

• React Tool Call Components
• Tailwind CSS Tool Call Components
• Animated Tool Call Components
• shadcn/ui Tool Call Components
• AI Element Components
• Prompt Input Components
• AI Orb Components
• Conversation Components
• Attachment Components
• Thinking Indicator Components
• Voice Input Components
• Model Selector Components
• Sources Components
• Streaming Text Components
• Reasoning Components
• AI Message Components
• Citation Components
• Suggestions Components
• Task Queue Components
• Agent Plan Components