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
This server cannot be installed
Resources
Unclaimed servers have limited discoverability.
Looking for Admin?
If you are the server author, to access and configure the admin panel.