Reasoning tree
ProAn illustration of tree search over thoughts: candidates are scored, weak branches fade, the best expand, and the winning path from question to answer draws in.
Live · keyboard ready
Claude Opus 5.5Tree of thoughts
Ready- Explainers, docs and landing pages that teach tree of thoughts, beam search or test time search over reasoning steps.
- Showing why a wider search can beat a greedy one, with a control the reader can change and replay.
- A visual summary of how an agent weighed options before it chose a plan.
- Use agent-run or research-run to show a real agent's steps and output as they stream.
- Use agent-loop to explain the plan, act and observe cycle of a tool using agent.
- Use speculative-decoding or attention-map for token level mechanics rather than whole thoughts.
- Use model-router when the decision is which model handles a request.
Installation
Pro source and install commands unlock with a Pro plan.
example.tsx
import { ReasoningTree } from "@/components/arc/reasoning-tree/reasoning-tree"; export function SearchExplainer() { return ( <ReasoningTree question="Which caching plan cuts p95 latency?" defaultBeamWidth={2} onAnswer={({ answer }) => console.log(answer.label, answer.score)} thoughts={[ { label: "Cache at the edge", score: 0.81, text: "Serve product pages from the CDN with a 60 second TTL.", children: [ { label: "Purge on publish", score: 0.77, children: [ { label: "Tag based purge", score: 0.9 }, { label: "Purge everything", score: 0.42 }, ] }, { label: "Stale while revalidate", score: 0.84 }, ] }, { label: "Add a Redis layer", score: 0.66 }, { label: "Bigger database", score: 0.35 }, ]} /> );}ReasoningTree
An illustration of tree search over thoughts. A question proposes candidate thoughts; each gets a score bar that fills, the weakest fade while their edges retract into the parent, and the best few expand another depth, up to three. At the end the best path from the question to the answer draws in the accent with a shimmer travelling along it, and the answer settles in with a check. Play, pause, step and restart drive the search, and a beam width control from 1 to 3 changes how many thoughts survive each depth. The scores are illustrative sample values, not the output of a real model.
PropTypeDefaultDescription
questionstring"Which release plan ships by Friday?"Short question on the root node. Keep it to about three short lines.questionDetailstring–The full question, shown on hover and focus and read to screen readers. Defaults to the question.thoughtsReasoningThought[]sample release planThoughts at the first depth, each { id?, label, text?, score?, children? }. label is the short node text (about 2 to 4 words), text the full thought, score an illustrative value from 0 to 0.99. The tree is read to a depth of 3.beamWidthnumber–How many thoughts survive each depth, from 1 to 3. Controlled; pair it with onBeamWidthChange.defaultBeamWidthnumber2Starting beam width when uncontrolled.onBeamWidthChange(beamWidth: number) => void–Called when the beam width control changes. A new width starts the search over.seednumber7Seeds the scores of thoughts that have none, so the same tree and seed always search the same way.autoPlaybooleantrueStarts the search the first time the tree scrolls into view. Ignored under reduced motion, which shows the answer.loopbooleanfalseStarts over about four seconds after the answer is found.speednumber1Multiplies the pace. At 1 a three depth search takes about 7 seconds; 0 holds still.controlsbooleantrueShows play and pause, step, restart and the beam width control.model{ name: string; mark?: ReactNode } | nullClaude Opus 5.5 with the Claude markThe model named in the header. Pass null to show only the title.titlestring"Tree of thoughts"Header title, shown after the model name.accentstring"var(--series-1)"Color of kept thoughts and the best path. The answer always uses the success color with a check.onAnswer(result: { answer, path, beamWidth }) => void–Called once each time the search reaches its answer, with the answer thought and the path from the first depth to it.classNamestring–Class on the root element.styleCSSProperties–Inline style on the root element. Set --rt-accent here to recolor the path.- Tab
- Moves to the tree (one stop on the current thought), then play or pause, step, restart and the beam width control.
- Arrow uporArrow down
- In the tree, moves to the previous or next thought at the same depth on wide layouts, or the previous or next line of the outline on phones.
- Arrow rightorArrow left
- Moves to a thought's best shown child, or back to its parent.
- HomeorEnd
- Moves to the question, or to the answer once it is found.
- Arrow leftorArrow right on the beam width
- Changes the beam width, which starts the search over.
- The thoughts form a tree with treeitems that carry their level and position, and a roving tab stop, so the whole tree is a single Tab stop.
- Every thought's accessible name is its full text with its score and its fate: not scored yet, scored, kept, pruned, on the best path, or answer. A pruned thought fades and loses its edge, and the answer has a check icon, so state never relies on color alone.
- Focus and hover show the full thought in a tag next to the node; the same text is in the accessible name.
- A polite status region speaks each step when you step or pause, and the answer when the search ends, but stays quiet while the search plays on its own.
- The header status pairs a pause or check icon with a short label, and the working label carries a calm shimmer.
- Pointer focus draws no ring; keyboard focus shows Arc's shared focus ring around the node.
- A proposed thought fades in as its edge draws out of the parent, 20ms apart per sibling.
- Scores fill as a bar with digits that roll on the same 640ms curve, using tabular numerals in a fixed width.
- Pruning fades the thought to 40% and retracts its edge back into the parent. Kept thoughts turn their bar to the accent.
- At the end the best path draws from the question to the answer in about 760ms with a lighter sheen at its head, each node on it lights up as the line reaches it, and the answer settles with one short press and a check.
- On phones a new child glides the lines below it down on a critically damped spring before it fades in, so nothing jumps and nothing bounces.
- Header labels swap with a single 160ms crossfade; the play and pause icons crossfade in place.
- Reduced motion shows the finished search with the path highlighted. Stepping and playing still work, with every change applied at once and no shimmer.
- From about 670px wide the tree reads left to right in four columns: the question, then depths 1 to 3, each with a header that counts how many thoughts were kept.
- Narrower, it becomes a vertical outline with one line per thought, indented by depth and joined by elbow edges, which holds down to 320px.
- The stage reserves the full tree before the search starts, so the card never changes size while it plays; a new beam width animates the height on phones.
- The controls wrap under each other on the narrowest widths.
- The search and the layout are pure functions memoized on the data and beam width.
- Positions and edges are written straight to the DOM from one requestAnimationFrame loop that runs only while something glides, so React renders once per step, not per frame.
- Fades, edge draws, bars and the rolling score are CSS transitions on transform, opacity, stroke-dashoffset and a registered integer property.
- Autoplay waits until the tree is in view.
Notes for AI
Give your coding assistant the Markdown reference instead of screenshots.
- Use it to explain how a reasoning search works, not to show a live model's real scores. Say in the surrounding copy that the scores are illustrative.
- Keep labels to about 2 to 4 words (under about 20 characters) and put the full sentence in text. Give the first depth about 3 thoughts and each later thought about 2 children; deeper levels are ignored.
- The search is plain beam search: every depth proposes the children of the survivors, keeps the best beamWidth, and the last depth keeps only the best one as the answer. Write scores so that a wider beam can find a better answer than the greedy path, which is what makes the control worth trying.
- Thoughts without a score get a seeded one, so a given tree and seed always produce the same outcome.
- Pass model={null} when no specific model is involved. Brand marks are sample content, never an implied endorsement.
The full library index for assistants is at /llms.txt.