121 Pro components and page blocks

Get Pro
uibrik

Updated

Tool Call

Pro

Preview

Customize

Pace1.0×
Max lines6

Installation

Pro

Tool Call is a Pro component

Sign in to see the source, or install it with a license key. The live preview and props above are free to explore.

Sign inGet Pro

Install with a key

  1. Add the Pro registry to components.json:
    components.json
    {
  "registries": {
    "@uibrik-pro": {
      "url": "https://uibrik.com/r/pro/{name}.json",
      "headers": { "Authorization": "Bearer ${UIBRIK_LICENSE}" }
    }
  }
}
  2. Put your key in .env.local and add that file to .gitignore:
    .env.local
    UIBRIK_LICENSE=your-license-key
  3. Install it:
    Terminal
    npx shadcn@latest add @uibrik-pro/tool-call

Usage

import { ToolCall } from "@/components/uibrik/tool-call/tool-call";​const error = "CalendarError: 409 Conflict — an event already exists at 11:05.";​<ToolCall  name="…"  defaultExpanded  maxLines={6}  status="success"  error={error}  onRetry={() => {}}  // description="…"  // args={{}}  // result={…}  // duration={0}  // icon={<…/>}  // expanded={false}  // onExpandedChange={(expanded) => {}}/>

Where to use Tool Call

  • Agent chat transcripts

    Each tool the model uses shows up inline with its arguments and result, so users can see what it did and why.

    Pairs with Streaming Chat and Agent Trace

  • Developer consoles

    Status, live duration and pretty-printed output make debugging tool use quick without opening logs.

    Pairs with Code Block

  • Approval and retry flows

    A failed call explains the error in place and offers one Retry action.

    Pairs with Inline Confirm

Props

ToolCall
defaultExpanded
Type boolean
true
Open the input and output panel on mount.
maxLines
Type number
6
Output lines shown before Show all.
namerequired
Type string
–
The function name, shown in mono.
description
Type string
–
A short human label under the name.
args
Type Record<string, unknown>
–
Arguments the model passed, listed as key/value rows.
status
Type "pending" | "running" | "success" | "error"
"success"
Where the call is. Running shows a live timer; error shakes once.
result
Type unknown
–
What the tool returned. Objects are pretty-printed as JSON.
error
Type string
–
Shown when status is error.
duration
Type number
–
Final duration in ms. While running and unset, the card counts up itself.
icon
Type ReactNode
–
Icon in the tile. Defaults to a gear.
expanded / onExpandedChange
Type boolean / (expanded) => void
–
Controlled open state. Closed shows a one-line preview of the arguments.
onRetry
Type () => void
–
Shows a Retry button on failure.
className
Type string
–
Classes for the card.