AI Conversation Tree

AI chats 33

About

A compound component that visualizes branching AI conversations as an expandable tree with node type indicators, active path highlighting, and click-to-navigate selection.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds AI Conversation Tree to your project and fits it to your theme.

Code

How AI Conversation Tree is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

"use client";

import {
  AiConversationTree,
  AiConversationTreeContent,
  AiConversationTreeHeader,
  AiConversationTreePreview,
  type ConversationNode,
} from "@/components/ui/conversation-tree";

const DEMO_NODES: ConversationNode[] = [
  {
    id: "1",
    type: "user",
    content: "How do I implement auth?",
    isActive: true,
    children: [
      {
        id: "2",
        type: "assistant",
        content:
          "There are several approaches to implementing authentication. You could use OAuth, JWT, or session-based auth...",
        isActive: true,
        children: [
          {
            id: "3",
            type: "user",
            content: "What about OAuth?",
          },
          {
            id: "4",
            type: "user",
            content: "Tell me about JWT",
            isActive: true,
            children: [
              {
                id: "5",
                type: "assistant",
                content:
                  "JWT (JSON Web Tokens) are a compact, URL-safe means of representing claims between two parties...",
                isActive: true,
              },
            ],
          },
          {
            id: "6",
            type: "user",
            content: "Session-based auth?",
          },
        ],
      },
    ],
  },
];

export default function AiConversationTreeDemo() {
  return (
    <div className="flex w-full items-center justify-center p-6">
      <AiConversationTree
        nodes={DEMO_NODES}
        activeNodeId="5"
        defaultExpandAll
        className="w-full max-w-lg"
      >
        <AiConversationTreeHeader />
        <AiConversationTreeContent />
        <AiConversationTreePreview />
      </AiConversationTree>
    </div>
  );
}