一个用于预览 Vite 项目的 Web IDE，集成了 Kimi AI Agent，可以通过对话方式修改代码。

• 📁 项目管理: 创建、删除、管理多个 Vite 项目
• 🚀 实时预览: 一键启动 Vite 开发服务器
• 🎯 多模板支持: Vanilla JS、React、Vue
• 🤖 AI Agent: 通过对话让 Kimi AI 帮你修改代码
• 💬 悬浮聊天框: 实时与 AI Agent 对话
• 📜 聊天记录: 持久化存储聊天记录和会话状态

┌─────────────────────────────────────────────────────────────┐
│                      前端 (Client)                           │
│  ┌──────────────┐  ┌──────────────┐  ┌──────────────────┐  │
│  │   项目列表    │  │   预览窗口    │  │  🤖 AI 聊天框     │  │
│  │  - 创建项目   │  │  - 全屏预览   │  │  - 发送消息       │  │
│  │  - 运行/停止  │  │  - 刷新页面   │  │  - 接收回复       │  │
│  │  - 删除项目   │  │  - 新标签页   │  │  - 历史记录       │  │
│  └──────────────┘  └──────────────┘  └──────────────────┘  │
└───────────────────────────┬─────────────────────────────────┘
                            │ WebSocket / HTTP
┌───────────────────────────┴─────────────────────────────────┐
│                    后端 (Server)                             │
│  ┌────────────────────────────────────────────────────────┐ │
│  │  Express API                                           │ │
│  │  - /api/projects      项目管理                         │ │
│  │  - /api/projects/:name/preview   Vite 预览             │ │
│  │  - /api/projects/:name/agent/*   Agent 管理            │ │
│  └────────────────────────────────────────────────────────┘ │
│  ┌────────────────────────────────────────────────────────┐ │
│  │  Agent Bridge (Wire Mode)                              │ │
│  │  - 每个项目独立的 Kimi --wire 进程                      │ │
│  │  - JSON-RPC 2.0 通信协议                               │ │
│  │  - 消息转发到前端                                      │ │
│  └────────────────────────────────────────────────────────┘ │
│  ┌────────────────────────────────────────────────────────┐ │
│  │  Agent Store                                           │ │
│  │  - 保存会话状态到 .agent-session.json                  │ │
│  │  - 保存聊天记录到 .agent-chat.json                     │ │
│  │  - 支持加载历史记录                                    │ │
│  └────────────────────────────────────────────────────────┘ │
└─────────────────────────────────────────────────────────────┘
                            │
                    ┌───────┴───────┐
                    │  Kimi AI CLI  │
                    │   --wire      │
                    └───────────────┘

cd server
npm install

默认情况下，项目数据存储在 workspace 根目录的 projects 文件夹中。

如需自定义项目目录，可创建 .env 文件：

cp .env.example .env

编辑 .env 文件：

# 项目存储目录（绝对路径或相对于 server 目录的路径）
PROJECTS_DIR=/path/to/your/projects

# 服务端口
PORT=3001

which kimi

如果未安装，请参考 Kimi CLI 文档 进行安装。

npm start

服务将启动在 http://localhost:3001

打开浏览器访问 http://localhost:3001

1. 点击「新建项目」按钮
2. 输入项目名称，选择模板
3. 项目创建后会自动运行

1. 选择一个运行中的项目
2. 在右下角聊天框输入你的需求，例如：
   • "把按钮改成蓝色"
   • "添加一个计数器功能"
   • "优化页面布局"
3. Agent 会自动修改代码并刷新预览

• 历史记录: 切换项目时自动加载最近 50 条聊天记录
• 持久化: 聊天记录保存在 .agent-chat.json 文件中
• 清空记录: 点击聊天框标题栏的 🗑️ 按钮清空当前项目的聊天记录

每个项目的 Agent 会话状态自动保存：

• 连接状态
• 总对话轮次
• 最后连接时间

状态保存在 .agent-session.json 文件中。

POST /api/projects/:name/agent/start

POST /api/projects/:name/agent/stop

GET /api/projects/:name/agent/status

POST /api/projects/:name/agent/chat
Content-Type: application/json

{
  "message": "修改按钮颜色为红色"
}

POST /api/projects/:name/agent/cancel

GET /api/projects/:name/agent/history?limit=50

DELETE /api/projects/:name/agent/history

GET /api/agent/sessions

本系统使用 Kimi CLI 的 Wire Mode 与 AI Agent 通信：

• 协议: JSON-RPC 2.0
• 通信方式: stdin/stdout
• 消息类型:
  • initialize - 初始化握手
  • prompt - 发送用户输入
  • event - Agent 事件通知（内容输出、工具调用等）
  • request - Agent 请求（需要响应）

用户输入 → HTTP POST /agent/chat
               ↓
         WebSocket 广播
               ↓
        前端显示消息
               ↓
    Agent 处理（通过 Wire）
               ↓
    event:ContentPart → 流式显示文本
    event:ToolCall    → 显示执行状态
    event:ToolResult  → 显示执行结果
               ↓
    agent:turn_complete → 隐藏打字指示器
               ↓
    保存到 .agent-chat.json

/workspace/
├── .env.example           # 环境变量配置示例
├── .gitignore
├── README.md
├── client/                # 前端
│   ├── index.html
│   ├── style.css
│   └── app.js
├── server/                # 后端
│   ├── index.js
│   ├── agent-bridge.js
│   ├── agent-store.js
│   └── package.json
└── projects/              # 项目存储目录（默认，可通过 .env 配置）
    └── my-project/
        ├── .agent-session.json
        ├── .agent-chat.json
        └── ...

注意：projects 目录默认在 workspace 根目录，不包含在代码仓库中。可通过 .env 文件配置到其他位置。

[
  {
    "id": "msg-1234567890-ab12c",
    "role": "user",
    "content": "把按钮改成蓝色",
    "timestamp": 1704067200000
  },
  {
    "id": "msg-1704067201000-xyz78",
    "role": "agent",
    "content": "已修改按钮颜色为蓝色",
    "timestamp": 1704067201000,
    "turnId": "msg-1"
  }
]

{
  "projectName": "my-project",
  "isActive": true,
  "lastConnectedAt": 1704067200000,
  "totalTurns": 5,
  "createdAt": 1704060000000,
  "updatedAt": 1704067200000
}

变量	说明	示例
CNB_VSCODE_PROXY_URI	CNB 代理地址	https://xxx-{{port}}.cnb.run

MIT