Skip to content

Tool

An action says it’s done only after it ran. A failure says what to do next.

Use it when

  • The agent reads, searches or queries while it works, and people should see what it used.
  • It makes several calls in a row. ToolGroup folds them into one line, and any failure stays in view.

Don’t use it when

  • The steps are a pipeline run, each with a status to scan. Use Run log row.
  • The agent is about to change something. Ask first with Confirmation, and show the call here once it has run.

Before and after

AI
    AI

    • Couldn’t read the columns in bank_export_kjp_2026-09.csv: it has no header row.

      I’ll take both payments as the invoice file records them.

    Each line changes from Reading to Read only when the file is done. A failure says what happens next.

    Install

    pnpm dlx shadcn@latest add https://tabularui.com/r/tool.json https://tabularui.com/r/agent-block.json

    Usage

    import { AgentBlock } from '@/components/tabular-ui/components/product/AgentBlock';import { ToolGroup } from '@/components/tabular-ui/components/product/Tool'; <AgentBlock authorship="AI">  <ToolGroup    summary="Read 1 of 2 files"    calls={[      {        id: 'invoices',        status: 'done',        running: 'Reading supplier_invoices_fy2026_h1.csv',        done: 'Read supplier_invoices_fy2026_h1.csv',      },      {        id: 'bank',        status: 'failed',        running: 'Reading bank_export_kjp_2026-09.csv',        error: 'Couldn’t read the columns in bank_export_kjp_2026-09.csv: it has no header row.',        next: 'I’ll take both payments as the invoice file records them.',      },    ]}  /></AgentBlock>

    Set up your app firstTool in Storybook