一个集成 Kimi AI Agent 的智能网页开发环境。通过自然语言对话，让 AI 帮你写代码、改样式、加功能，实时预览效果。

🚀 在线 Demo: https://cnb.cool/xbotter/KWBD

• 🤖 AI 对话编程 - 用自然语言描述需求，AI 自动生成代码
• ⚡ 实时预览 - Vite 驱动，代码修改即时生效
• 📝 智能输入 - 聊天框自动调整高度，支持多行输入
• 📁 模板系统 - 可自定义项目初始化模板
• 💬 会话管理 - 多会话支持，聊天记录持久化
• 🔧 工具调用 - 实时显示 AI 工具调用状态

# 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 build -t web-builder .

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

1. 在右下角聊天框输入你的需求，例如：
   • "把按钮改成蓝色"
   • "添加一个计数器功能"
   • "优化页面布局"
2. 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/              # 项目工作目录（运行时创建）

方法	路径	说明
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	删除会话

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

变量	说明	默认值
PORT	服务端口	8080
PROJECTS_DIR	项目存储目录	/workspace
TEMP_DIR	临时文件目录	/data/temp
CNB_VSCODE_PROXY_URI	CNB 代理地址	-

存储在 Kimi CLI 工作目录中（~/.kimi/sessions/{sessionId}/）：

• context.json - 对话上下文
• wire.jsonl - 原始 Wire 消息

存储在 PROJECTS_DIR 指定的目录中。

• Kimi CLI 文档
• Vite 官方文档
• Wire Mode 协议

MIT License