Claude Imagine

图片色调

由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 install

2.启动MCP服务器

npm run server:mcp

服务器运行于 http://localhost:3000

3.将MCP服务器添加到Claude（一次性）

claude mcp add --transport http imagine http://localhost:3000/mcp

4.打开浏览器

导航至 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工具

项目结构

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"
    }
  }
}

环境变量

发展

# Start server
npm run server:mcp

# Run tests
npm test

# Check MCP connection
claude mcp list

文档

• CLAUDE-LEARNING.md -关键技术发现
• ROADMAP.md -发展路线图
• 经验教训.md -项目见解

关键收获

1. HTTP传输 -Claude连接到正在运行的服务器（未生成）
2. 工具命名 -工具成为 mcp__imagine__
3. 会话管理 -每个Claude会话创建一个MCP会话
4. WebSocket网桥 -单台服务器同时处理MCP和浏览器

看 docs/CLAUDE-LEARNING.md 了解全部细节。

许可证

麻省理工学院