图片色调
由Claude AI使用模型上下文协议（MCP）支持的可视化UI构建器。
Claude通过HTTP传输连接到MCP服务器，该服务器通过WebSocket将UI命令中继到浏览器。这使Claude能够实时构建和更新web界面。
建筑
┌─────────────┐ ┌──────────────────┐ ┌─────────┐
│ Claude CLI │──HTTP──►│ server-mcp.js │◄──WS───│ Browser │
└─────────────┘ │ (MCP Server) │ └─────────┘
│ │
│ Tools: │
│ - update_ui │
│ - log_thought │
└──────────────────┘快速开始
1.安装依赖项
npm install2.启动MCP服务器
npm run server:mcp服务器运行于 http://localhost:3000
3.将MCP服务器添加到Claude（一次性）
claude mcp add --transport http imagine http://localhost:3000/mcp4.打开浏览器
导航至 http://localhost:3000 在您的浏览器中。
5.使用克劳德
# Interactive mode
claude
# Or non-interactive
claude --print --dangerously-skip-permissions \
"Use update_ui to create a hello world page"MCP工具
| 工具 | 说明 |
|---|---|
update_ui | 更新浏览器中的HTML内容 |
log_thought | 显示状态/思考信息 |
项目结构
ClaudeImagine/
├── src/
│ └── server-mcp.js # MCP server (HTTP transport)
├── public/
│ └── index.html # Browser UI
├── scripts/
│ └── create-isolated-claude.js
├── tests/
│ ├── prerequisites/ # Unit tests
│ └── e2e/ # Integration tests
├── docs/
│ ├── CLAUDE-LEARNING.md # Key discoveries
│ ├── ROADMAP.md # Development plan
│ └── ...
├── claude_config.json # MCP configuration
└── package.json配置
claude_config json
{
"mcpServers": {
"imagine": {
"type": "http",
"url": "http://localhost:3000/mcp"
}
}
}环境变量
| 变量 | 默认值 | 描述 |
|---|---|---|
PORT | 3000 | 服务器端口 |
HOST | 127.0.0.1 | 服务器主机 |
发展
# Start server
npm run server:mcp
# Run tests
npm test
# Check MCP connection
claude mcp list文档
- CLAUDE-LEARNING.md -关键技术发现
- ROADMAP.md -发展路线图
- 经验教训.md -项目见解
关键收获
- HTTP传输 -Claude连接到正在运行的服务器（未生成）
- 工具命名 -工具成为
mcp__imagine__ - 会话管理 -每个Claude会话创建一个MCP会话
- WebSocket网桥 -单台服务器同时处理MCP和浏览器
看 docs/CLAUDE-LEARNING.md 了解全部细节。
许可证
麻省理工学院