Skip to content

Agent plan

The agent writes its plan where you can see it, before and while it works.

Use it when

  • The agent proposes steps before it acts, so a person can check or change them.
  • A person will take the steps themselves, in order. Hide the buttons with showActions={false}.

Don’t use it when

  • The plan is running and needs progress on each step. It has no per-step state.
  • It’s the agent’s own working-out. Use Agent reasoning.

Before and after

AI

Explain the H1 gap

Split the ¥355m between exchange rates and performance, and trace each part to its entries.

  1. Read trial_balance_monthly.csv for H1
  2. Translate each entity at budget rates
Drafting step 3
AI

Explain the H1 gap

Split the ¥355m between exchange rates and performance, and trace each part to its entries.

  1. Read trial_balance_monthly.csv for H1
  2. Translate each entity at budget rates
  3. Compare with budget_forecast_monthly.csv
  4. Trace what remains to its accounts
Steps appear as the plan is written. Run plan waits for the last one.

Install

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

Usage

import { AgentBlock } from '@/components/tabular-ui/components/product/AgentBlock';import { AgentPlan } from '@/components/tabular-ui/components/product/AgentPlan'; <AgentBlock authorship="AI" meta="14:22">  <AgentPlan    title="Rebuild revenue model"    description="Switch revenue to net_amount and check the monthly totals still reconcile."    steps={steps}    status="ready"    onRun={run}    onEdit={edit}  /></AgentBlock>

Set up your app firstAgent plan in Storybook