Orbeez kit
Reasoning

Steps

<Steps />
A run of small things done, like the pages searched, strung on a thread under one line, a bead each.
web.dev: Building a colour scheme
MDN: prefers-color-scheme
W3C: Understanding contrast (minimum)
tokens.css
theme.ts
button.tsx
card.tsx

Install

bash
npx shadcn@latest add https://orbeez-kit.vercel.app/r/steps.json

Usage

tsx
<Steps>
  <StepsTrigger icon={<SearchIcon />}>Searched 3 sites</StepsTrigger>
  <StepsContent>
    <StepsItem>web.dev: Building a colour scheme</StepsItem>
  </StepsContent>
</Steps>

// still going
<Steps>
  <StepsTrigger icon={<FileIcon />} working>Reading 4 files</StepsTrigger>
  <StepsContent>
    <StepsItem>tokens.css</StepsItem>
    <StepsItem status="active">button.tsx</StepsItem>
    <StepsItem status="pending">card.tsx</StepsItem>
  </StepsContent>
</Steps>

Good to know

  • Moods. While the run is going, the bead it hangs from works and the step in hand thinks.

Chain of thought

<ChainOfThought />

The steps an agent reasoned through, on a thread of beads, each with its detail folded under it.

  1. Cart total is one item short when there are two or more items.
  3. Tracing the total in cart.ts
  4. Write a failing test
bash
npx shadcn@latest add https://orbeez-kit.vercel.app/r/chain-of-thought.json
tsx
<ChainOfThought>
  <ChainOfThoughtStep label="Read the issue">Cart total is one item short.</ChainOfThoughtStep>
  <ChainOfThoughtStep label="Tracing the total" status="active" />
  <ChainOfThoughtStep label="Write a failing test" status="pending" />
</ChainOfThought>
  • Moods. The active step thinks; done steps wear a tick.
PreviousReasoningNextAgent list