Agent Steps

About this piece

Vertical agent plan with done, active, and pending states indicated by check, spinner, and dot icons.

Usage

The import and the props worth knowing about, in one place.

import { Ai23 } from "@/components/beste/piece/ai23";

<Ai23
  steps={[
    {
      "label": "Parse user intent",
      "status": "done"
    },
    {
      "label": "Search knowledge base",
      "status": "done"
    },
    {
      "label": "Draft response",
      "status": "active"
    },
    {
      "label": "Format citations",
      "status": "pending"
    }
  ]}
/>

More AI pieces

View all AI

Reasoning3 steps

1Identify the customer segment behind the refund spike
2Check whether the pricing change overlaps the spike
3Weigh a targeted email against a pricing rollback
Final answerSend a clarifying email to annual plan customers first; roll back only if refunds stay high next week.

Thinking Steps

Reasoning panel whose numbered steps stagger in once while a thin connector draws down between them, finishing on a final answer row that stays in place.

Epoch7/10

loss0.0421

step 1,280/2,00064%

Training Progress

Training run card with current epoch, step counter, loss value, and a violet progress bar reflecting completion.

Feedback Row

Thumbs up and down buttons with tinted active state, alongside copy and share actions.

"where is my order?"

order_status

87%

shipping_eta

refund_request

Intent Classifier

Intent ranking panel with the raw user input quoted above and a list of candidate labels with confidence bars.

Thought for 8 seconds

User wants to rate limit 100 req/min per key.

Leaky bucket gives smoother traffic than fixed window.

Redis INCR with TTL is the simplest implementation.

Chain of Thought

Collapsible reasoning panel with a brain icon header and italic thought bullets on a left border rail.

Suggestion Pills

Wrapping row of pill suggestions that seed the prompt input with common intents.