Click on "Install Server".
Wait a few minutes for the server to deploy. Once ready, it will show a "Started" state.
In the chat, type
@followed by the MCP server name and your instructions, e.g., "@Claude Imaginecreate a dashboard with a header, sidebar, and main content area"
That's it! The server will respond to your query, and you can continue using it as needed.
Here is a step-by-step guide with screenshots.
Claude Imagine
A visual UI builder powered by Claude AI using the Model Context Protocol (MCP).
Claude connects to an MCP server via HTTP transport, which relays UI commands to a browser via WebSocket. This enables Claude to build and update web interfaces in real-time.
Architecture
┌─────────────┐ ┌──────────────────┐ ┌─────────┐
│ Claude CLI │──HTTP──►│ server-mcp.js │◄──WS───│ Browser │
└─────────────┘ │ (MCP Server) │ └─────────┘
│ │
│ Tools: │
│ - update_ui │
│ - log_thought │
└──────────────────┘Quick Start
1. Install Dependencies
npm install2. Start the MCP Server
npm run server:mcpServer runs at http://localhost:3000
3. Add MCP Server to Claude (one-time)
claude mcp add --transport http imagine http://localhost:3000/mcp4. Open Browser
Navigate to http://localhost:3000 in your browser.
5. Use Claude
# Interactive mode
claude
# Or non-interactive
claude --print --dangerously-skip-permissions \
"Use update_ui to create a hello world page"MCP Tools
Tool | Description |
| Updates HTML content in the browser |
| Displays status/thinking messages |
Project Structure
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.jsonConfiguration
claude_config.json
{
"mcpServers": {
"imagine": {
"type": "http",
"url": "http://localhost:3000/mcp"
}
}
}Environment Variables
Variable | Default | Description |
| 3000 | Server port |
| 127.0.0.1 | Server host |
Development
# Start server
npm run server:mcp
# Run tests
npm test
# Check MCP connection
claude mcp listDocumentation
CLAUDE-LEARNING.md - Key technical discoveries
ROADMAP.md - Development roadmap
LESSONS-LEARNED.md - Project insights
Key Learnings
HTTP Transport - Claude connects to a running server (not spawned)
Tool Naming - Tools become
mcp__imagine__<tool_name>Session Management - Each Claude session creates an MCP session
WebSocket Bridge - Single server handles both MCP and browser
See docs/CLAUDE-LEARNING.md for full details.
License
MIT