# 1. 克隆项目
git clone https://cnb.cool/xbotter/kimi_web_builder
cd web-builder

# 2. 安装服务端依赖
cd server && npm install

# 3. 确保已安装 Kimi CLI
which kimi  # 如未安装请参考 https://moonshotai.github.io/kimi-cli/

# 4. 启动服务
npm start

# 5. 访问 http://localhost:8080

Docker 部署

# 构建镜像
docker build -t web-builder .

# 运行容器
docker run -d -p 8080:8080 web-builder

📖 使用指南

与 AI 对话修改代码

在右下角聊天框输入你的需求，例如：
- "把按钮改成蓝色"
- "添加一个计数器功能"
- "优化页面布局"
AI 会自动修改代码并刷新预览

工具调用状态

AI 执行工具调用时会显示简洁的状态图标：

○ Used toolName - 等待执行
✓ Used toolName - 执行成功
✗ Used toolName - 执行失败

自定义模板

模板文件位于 templates/vanilla/ 目录：

templates/
└── vanilla/
    ├── index.html    # 页面结构
    ├── main.js       # JavaScript 逻辑
    ├── style.css     # 样式文件
    └── .gitignore    # Git 忽略配置

修改模板文件后，新项目或重置时会自动应用更改。

🏗️ 系统架构

┌─────────────────────────────────────────────────────────┐
│                      前端 (Client)                       │
│  ┌─────────────────┐  ┌──────────────────────────────┐  │
│  │   预览窗口       │  │        AI 聊天框              │  │
│  │  - Vite 实时预览 │  │  - 自然语言输入               │  │
│  │  - 全屏/刷新     │  │  - 流式响应显示               │  │
│  │  - 下载项目     │  │  - 工具调用状态               │  │
│  └─────────────────┘  └──────────────────────────────┘  │
└──────────────────────────┬──────────────────────────────┘
                           │ WebSocket / HTTP
┌──────────────────────────┴──────────────────────────────┐
│                      后端 (Server)                       │
│  ┌───────────────────────────────────────────────────┐  │
│  │  Express API                                      │  │
│  │  - /api/preview        启动/停止 Vite 预览       │  │
│  │  - /api/sessions       会话管理                  │  │
│  │  - /api/agent/chat     发送消息给 AI             │  │
│  └───────────────────────────────────────────────────┘  │
│  ┌───────────────────────────────────────────────────┐  │
│  │  Agent Bridge (Kimi Wire Mode)                    │  │
│  │  - JSON-RPC 2.0 通信                              │  │
│  │  - 消息转发到前端                                 │  │
│  └───────────────────────────────────────────────────┘  │
└─────────────────────────────────────────────────────────┘

📁 项目结构

web-builder/
├── .env.example           # 环境变量配置示例
├── Dockerfile             # Docker 镜像配置
├── README.md              # 本文件
├── bin/
│   └── web-builder        # 启动脚本
├── client/                # 前端代码
│   ├── index.html
│   ├── style.css
│   ├── app.js
│   └── modules/           # JS 模块
├── server/                # 后端代码
│   ├── index.js           # 主入口
│   ├── agent-bridge.js    # AI Agent 桥接
│   ├── session-store.js   # 会话存储
│   └── package.json
├── templates/             # 项目模板
│   └── vanilla/           # Vanilla JS 模板
│       ├── index.html
│       ├── main.js
│       ├── style.css
│       └── .gitignore
└── projects/              # 项目工作目录（运行时创建）

🔌 API 参考

预览相关

方法	路径	说明
POST	`/api/preview`	启动 Vite 预览服务器
DELETE	`/api/preview`	停止预览服务器
GET	`/api/preview`	获取预览状态
POST	`/api/project/reset`	重置项目为模板状态

会话相关

方法	路径	说明
GET	`/api/sessions`	列出所有会话
POST	`/api/sessions`	创建新会话
POST	`/api/sessions/:id/switch`	切换到指定会话
DELETE	`/api/sessions/:id`	删除会话

Agent 相关

方法	路径	说明
POST	`/api/agent/chat`	发送消息给 AI
POST	`/api/agent/cancel`	取消当前对话
GET	`/api/agent/history`	获取聊天记录
DELETE	`/api/agent/history`	清空聊天记录