AI Workbench

AI Workbench 是一个本地 AI CLI 工具的 Web 管理界面，在浏览器中统一管理 Claude Code CLI、Gemini CLI、Kimi Code CLI 等工具的会话、图片输入、Prompt 发送和执行输出。

核心解决一个问题：当前主流 AI CLI 已支持 @path/to/image.png 引用本地图片，但用户需要先保存图片、复制路径、切换终端、手动拼接 Prompt。AI Workbench 把这条链路收进 Web UI，实现拖拽/粘贴图片 → 自动保存 → 生成引用 → 发送执行的一站式体验。

安装与启动

npm 全局安装

npm install -g ai-workbench
ai-workbench

启动后默认打开浏览器，访问 http://127.0.0.1:9876。

常用参数

ai-workbench --no-open          # 不自动打开浏览器
ai-workbench --port 9999        # 指定端口
ai-workbench --cwd D:\my-project # 指定默认工作目录
ai-workbench --data-dir D:\data  # 指定数据存储目录
ai-workbench --help             # 查看完整帮助

开发模式

# 安装依赖
pnpm install

# 同时启动前端和后端（开发模式）
pnpm dev

# 或单独启动
pnpm dev:client
pnpm dev:server

# 构建生产版本
pnpm build

核心功能

图片交互

• 拖拽上传：将图片拖入 Web UI 输入区即可自动保存。
• 剪贴板粘贴：直接粘贴截图，无需先保存为文件。
• 自动引用：发送 Prompt 时，后端根据当前 CLI 适配器自动生成正确的图片引用格式（如 @D:\path\image.png）。

CLI 适配器

内置支持 Claude Code、Gemini CLI、Kimi Code CLI，同时支持添加自定义 CLI：

| CLI | 命令 | 图片引用 | 会话复用 | |---|---|---|---| | Claude Code | claude | @path | --resume | | Gemini CLI | gemini | @path | --resume | | Kimi Code CLI | kimi | @path | --session | | Custom CLI | 自定义 | 可配置 | 可选 |

在「设置」面板中可测试 CLI 是否可用、修改命令路径、调整图片引用前缀。

会话管理

• 新建会话：选择 CLI 和项目目录创建新聊天。
• 历史会话恢复：自动扫描本地 CLI 已有会话，支持导入历史消息并继续原会话上下文。
• 消息流式输出：通过 SSE 实时展示 CLI 的输出内容。
• 上下文保持：支持将本地聊天历史拼接进 Prompt，模拟多轮对话上下文。

项目管理

• 为每个会话绑定工作目录（项目）。
• 支持最近项目快速选择。
• 发送命令时 CLI 在正确的目录下执行。

技术架构

ai-workbench/
├── client/              # React 19 + Vite 前端
│   ├── src/
│   │   ├── components/  # UI 组件（会话列表、聊天面板、Prompt 编辑器等）
│   │   ├── api.ts       # 后端 API 调用
│   │   └── App.tsx      # 应用主入口
│   └── dist/            # 构建产物
├── server/              # Fastify + TypeScript 后端
│   ├── src/
│   │   ├── cli-adapters/    # CLI 适配器
│   │   ├── chat-session.ts  # 会话管理
│   │   ├── project-manager.ts # 项目管理
│   │   ├── image-handler.ts   # 图片上传与存储
│   │   ├── executor.ts        # 命令执行
│   │   └── index.ts           # 服务入口
│   └── dist/
├── shared/              # 前后端共享类型定义
│   └── src/index.ts
├── bin/
│   └── ai-workbench.js  # CLI 启动入口
└── .ai-manager/         # 用户数据目录（运行期生成）
    ├── uploads/         # 上传图片存储
    ├── sessions/        # 会话数据
    ├── projects.json    # 项目配置
    └── config.json      # CLI 配置

技术栈

• 前端：React 19、TypeScript、Vite
• 后端：Node.js 20+、Fastify、TypeScript
• 包管理：pnpm workspace
• 数据存储：本地 JSON 文件（无外部数据库依赖）

API 概览

| 方法 | 路径 | 说明 | |---|---|---| | GET | /api/config | 获取应用配置 | | PUT | /api/config | 更新应用配置 | | GET | /api/clis | 获取 CLI 列表 | | PUT | /api/clis/:id | 更新 CLI 配置 | | POST | /api/clis | 添加自定义 CLI | | DELETE | /api/clis/:id | 删除自定义 CLI | | POST | /api/clis/test | 测试 CLI 可用性 | | GET | /api/projects | 获取项目列表 | | POST | /api/projects | 创建项目 | | PATCH | /api/projects/:id | 更新项目 | | DELETE | /api/projects/:id | 删除项目 | | GET | /api/chats | 获取聊天会话列表 | | POST | /api/chats | 创建聊天会话 | | GET | /api/chats/:id | 获取会话详情 | | DELETE | /api/chats/:id | 删除会话 | | POST | /api/chats/:id/send | 发送消息（SSE 流式返回） | | POST | /api/chats/:id/import | 导入 CLI 历史消息 | | POST | /api/images/upload | 上传图片 | | GET | /api/images/:id | 获取图片 | | GET | /api/sessions | 扫描 CLI 本地历史会话 | | GET | /api/sessions/:cliId/:sessionId/messages | 获取 CLI 历史消息 |

配置说明

首次启动后，配置保存在 ~/.ai-manager/config.json：

{
  "clis": {
    "claude": {
      "id": "claude",
      "name": "Claude Code",
      "command": "claude",
      "enabled": true,
      "imageRefPrefix": "@",
      "defaultArgs": [],
      "supportsInteractiveSession": true,
      "builtin": true
    }
  },
  "uploadDir": "~/.ai-manager/uploads",
  "port": 9876
}

环境要求

• Node.js >= 20
• pnpm >= 8（开发时）
• Windows / macOS / Linux

License

MIT