Chain of Thought for Svelte

A line says what the agent did, like Researched in 3 steps, and opens onto the steps behind it, one line each, with their output one level down.

Use it when an agent works through several tool calls before it answers: the summary reads Researching and stays open while the steps run, then closes when the answer starts. It is a Trace line that expands into a Trace of steps, with a Code Block for a step's output and a Badge for each file or site it found, so there is no Chain of Thought component to install in Svelte. Keep each step to one line that says what it did; its detail belongs one level down, not in the title.

Installation

Chain of Thought is a pattern. The command adds the parts it's built from, Trace, Code Block and Badge, and the code to copy is the demo's.

Anatomy

Trace
└── TraceCollapsible (the summary)
    ├── TraceCollapsibleTrigger
    │   └── TraceLine (Researched in 3 steps)
    └── TraceCollapsibleContent
        └── Trace (the steps)
            ├── TraceLine (a step with nothing to show)
            └── TraceCollapsible (a step with output)
                ├── TraceCollapsibleTrigger
                │   └── TraceLine
                └── TraceCollapsibleContent (Code Block, Badges, links)

Usage

<script lang="ts">
import { CircleCheckIcon } from "lucide-svelte";
import {
  Trace, TraceCollapsible, TraceCollapsibleContent,
  TraceCollapsibleTrigger, TraceIcon, TraceLine, TraceTitle,
} from "@/components/ui/trace";
</script>

const steps = [
  "Read the build log for dpl_8Kx2",
  "Searched the web for next.js image cache key",
  "Searched the code for cacheKey",
];

export function ChainOfThought() {
  return (
    <Trace>
      <TraceCollapsible>
        <TraceCollapsibleTrigger>
          <TraceLine>
            <TraceIcon>
              <CircleCheckIcon aria-hidden="true" />
            </TraceIcon>
            <TraceTitle>Researched in {steps.length} steps</TraceTitle>
          </TraceLine>
        </TraceCollapsibleTrigger>
        <TraceCollapsibleContent>
          <Trace>
            {steps.map((step) => (
              <TraceLine key={step}>
                <TraceIcon>
                  <CircleCheckIcon aria-hidden="true" />
                </TraceIcon>
                <TraceTitle>{step}</TraceTitle>
              </TraceLine>
            ))}
          </Trace>
        </TraceCollapsibleContent>
      </TraceCollapsible>
    </Trace>
  );
}

Set defaultOpen on the summary's TraceCollapsible to show the steps at first.

Steps

Each step is a TraceLine. Set its status and write the title in the matching tense, since the color and the shimmer don't reach a screen reader.

A step with output is a TraceCollapsible once the output arrives, and a plain line before, so there is nothing to open while it runs.

Closed content stays mounted, so the steps keep their open state when the summary closes.

Search Results

When a step runs a web search, show the results as a Badge for each hostname in the step's content, or as a Trace of links, one per result, as the demo does.

<TraceCollapsibleContent className="flex flex-wrap gap-1.5">
  {results.map((result) => (
    <Badge key={result.url} variant="secondary">
      {new URL(result.url).hostname}
    </Badge>
  ))}
</TraceCollapsibleContent>

AI SDK

Render each tool part as a step. running is true while tool parts stream and before the reply starts. Set the summary's status and title from the steps. The summary opens while the steps run, as in Trace.

import { Chat } from "@ai-sdk/svelte";

const chat = new Chat({});

// The last message's tool calls are the steps; its text, the answer.
const parts = $derived(chat.messages.at(-1)?.parts ?? []);
const steps = $derived(parts.filter((part) => part.type.startsWith("tool-")));
const answering = $derived(parts.some((part) => part.type === "text"));

The summary runs while chat.status is streaming and nothing has answered yet; render each step as the demo's step line.

StepLine renders one tool part as a TraceLine, as in Tool: running while its input streams, done with its output, failed with its error.

Migrating from AI SDK Elements

AI SDK Elements is for React. In Svelte, start from the demo above: its summary and steps are all there is to Chain of Thought.

FAQ

API Reference

Chain of Thought has no props of its own. The summary and each step are Trace lines, a step's output is a Code Block, and each file or hostname a Badge.