Chain of Thought Tree

Installation

Usage & Integration

The Reasoning Tree component uses a recursive TreeNode sub-component to render infinitely nestable levels of thought processes.

It pairs beautifully with LLM architectures that emit structured logging (like LangChain callbacks or Vercel AI SDK onToolCall streams). The collapsible nature is powered by framer-motion's AnimatePresence applying height transitions.

Usage Guide

1. Import the Component

Import the component into your React or Next.js page:

import { ReasoningTree } from "@/components/creative/reasoning-tree";

2. Implementation Example

Render the component and customize its behavior by passing props:

import { ReasoningTree } from "@/components/creative/reasoning-tree";

export default function Example() {
  return (
    <div className="w-full flex items-center justify-center p-8">
      <ReasoningTree
        steps{/* value */}
      >
        <div>Content goes here</div>
      </ReasoningTree>
    </div>
  );
}