TreeGPT：可视化树状对话的AI聊天界面

综合介绍

TreeGPT 是一个基于 Next.js 开发的开源聊天应用，专注于通过树状图结构（有向无环图，DAG）可视化与大型语言模型（LLM，如 GPT）的对话，取代传统的线性聊天方式，提升速度和易用性。该项目托管于 https://github.com/jamesmoore24/treegpt，用户可通过克隆源码并配置 OpenAI API 密钥，在本地运行应用（http://localhost:3000）或访问 treegpt.app 在线体验。TreeGPT 解决了传统聊天界面中分支对话难管理、搜索不便和 token 使用不透明的问题，适合开发者、研究人员或需要高效交互的用户使用。

功能列表

• 树状对话可视化：以互动树形图展示聊天内容，支持分支导航。
• 自然语言搜索：通过描述搜索对话记录，利用嵌入式元数据优化结果。
• 实时 token 管理：跟踪 token 使用量，提供成本估算和输出控制。
• 多模型支持：连接 OpenAI、Anthropic 等 LLM 提供商，智能选择模型。
• 快捷键操作：提供类似 Vim 的按键，快速切换模式和编辑节点。

使用帮助

TreeGPT 是一个需要在本地搭建运行的 Next.js 应用，以下是详细的安装和使用指南，帮助用户从零开始部署并掌握其核心功能。

安装流程

1. 环境准备
   • 安装 Node.js：访问 nodejs.org，下载并安装 v18 或更高版本。安装后，在终端输入 node -v 确认版本。
   • 安装 npm 或 yarn：Node.js 自带 npm，若偏好 yarn，可运行 npm install -g yarn 安装。
2. 克隆仓库
   • 打开终端，运行以下命令：

     git clone https://github.com/jamesmoore24/treegpt.git
     cd treegpt
     

   • 这将下载 TreeGPT 源码并进入项目目录。
3. 安装依赖
   • 在终端输入：

     npm install
     

     或使用 yarn：

     yarn install
     

   • 等待依赖安装完成（可能需要几分钟，视网络情况而定）。
4. 配置 OpenAI API 密钥
   • 在项目根目录创建 .env 文件，输入以下内容：

     OPENAI_API_KEY=你的_api_密钥
     

   • 获取密钥：登录 OpenAI 官网（platform.openai.com），在 API Keys 页面生成新密钥，复制并替换 你的_api_密钥。
   • 保存文件，确保不泄露密钥。

运行应用

1. 启动开发服务器
   • 在终端运行：

     npm run dev
     

     或：

     yarn dev
     

   • 启动后，终端会显示类似 http://localhost:3000 的地址。
2. 访问应用
   • 打开浏览器，输入 http://localhost:3000（或终端显示的地址）。
   • 页面加载后即可看到 TreeGPT 的聊天界面。

核心功能操作

• 树状对话可视化
  • 开始聊天：在输入框输入问题（如“如何优化代码”），回车后回答显示为树的一个节点。
  • 创建分支：点击任一节点，输入新问题（如“具体工具”），生成子节点。
  • 导航树：使用鼠标点击节点，或按快捷键 [j] 上移，[1-9] 选择分支，[r] 返回根节点。
  • 查看概览：界面提供迷你地图，展示完整对话树结构，鼠标悬停节点可预览内容。
• 自然语言搜索
  • 按 [/] 进入搜索模式，输入描述（如“昨天讨论的算法”）。
  • 系统会根据嵌入式元数据返回匹配的对话节点。
• 实时 token 管理
  • 界面显示当前对话的 token 使用量和预计成本。
  • 可通过设置调整输出长度或上下文窗口大小。
• 多模型支持
  • 默认使用 OpenAI，若需切换模型（如 Anthropic），需在代码中配置其他 API 密钥（参考项目文档）。
  • 系统会根据内置规则智能选择最优模型。
• 快捷键操作
  • [``]：切换聊天和查看模式。
  • [e]：编辑当前节点内容。
  • [dd]：删除当前节点及其子树。
  • 这些命令模仿 Vim 操作，提升效率。

示例操作

假设你想探讨“学习 Python 的方法”：

1. 输入“如何学习 Python”，得到回答。
2. 点击回答节点，输入“有哪些免费资源”，生成分支。
3. 按 [j] 上移查看父节点，再输入“需要多久掌握”，形成新分支。
4. 对话树显示：

如何学习 Python
├── 有哪些免费资源
└── 需要多久掌握

5. 按 [/] 搜索“免费资源”，快速定位相关节点。

注意事项

• 网络要求：运行时需连接互联网以访问 LLM API。
• 密钥安全：.env 文件不要上传至公开仓库。
• 性能优化：对话树过大时，建议定期清理无用节点（[dd]）。

通过以上步骤，用户可以轻松搭建 TreeGPT，并在本地体验其强大的树状对话功能。