Skip to content

Agent reasoning

Thinking stays folded until you open it, so nothing jumps while you read.

Use it when

  • The agent’s working-out is worth checking, but not worth reading every time.
  • The answer takes a few seconds, and people should see the agent is thinking.

Don’t use it when

  • It would stand on its own. It draws no rail or label: put it inside an Agent block.
  • The steps are for someone to carry out. Use Agent plan.

Before and after

AI
AI
Read trial_balance_monthly.csv and budget_forecast_monthly.csv. Translated each entity at budget rates, then compared H1 with budget.

H1 operating profit is ¥355m under budget. Exchange rates explain ¥317m of it.

The reasoning stays folded while the AI thinks. Open it to read the steps.

Install

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

Usage

import { AgentBlock } from '@/components/tabular-ui/components/product/AgentBlock';import { AgentReasoning } from '@/components/tabular-ui/components/product/AgentReasoning'; <AgentBlock authorship="AI" meta="14:22">  <AgentReasoning status="done" durationSeconds={4} text={reasoning} /></AgentBlock>

Set up your app firstAgent reasoning in Storybook