N
Nyxis
Reasoning

ChainOfThought

Vertical stepper for explicit, structured reasoning steps.

Preview

  1. Plan: identify the three architectural choices behind peer-dep adapters

  2. Search the codebase for the createModel implementation

    Found in packages/ui/src/ai/adapters/create-model.ts

  3. Synthesise the answer as a numbered list with a code example

  4. 4

    Validate the example compiles against the Vercel AI SDK

Installation

pnpm add nyxis-ui

Usage

import { ChainOfThought, type ChainStep } from 'nyxis-ui';

const steps: ChainStep[] = [
  { id: '1', text: 'Identify intent', status: 'done' },
  { id: '2', text: 'Search documentation', status: 'active' },
  { id: '3', text: 'Synthesise answer', status: 'pending' },
];

<ChainOfThought steps={steps} />;

Anatomy

  • Indicator: number → spinning loader (active) → checkmark (done) → red badge (errored).
  • Connector: vertical line shifts to the primary tone once a step is done.
  • Detail: optional second line for context (e.g. file path, found count).

When to use this vs. <ReasoningTrace>

  • <ChainOfThought> — when steps are structured: planner agents, multi-tool flows, explicit ReAct traces.
  • <ReasoningTrace> — when reasoning is unstructured prose: extended-thinking, o1 reasoning.