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 Imagine create 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.
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.
┌─────────────┐ ┌──────────────────┐ ┌─────────┐
│ Claude CLI │──HTTP──►│ server-mcp.js │◄──WS───│ Browser │
└─────────────┘ │ (MCP Server) │ └─────────┘
│ │
│ Tools: │
│ - update_ui │
│ - log_thought │
└──────────────────┘Related MCP server: F_MCP
npm installnpm run server:mcpServer runs at http://localhost:3000
claude mcp add --transport http imagine http://localhost:3000/mcpNavigate to http://localhost:3000 in your browser.
# Interactive mode
claude
# Or non-interactive
claude --print --dangerously-skip-permissions \
"Use update_ui to create a hello world page"Tool | Description |
| Updates HTML content in the browser |
| Displays status/thinking messages |
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{
"mcpServers": {
"imagine": {
"type": "http",
"url": "http://localhost:3000/mcp"
}
}
}Variable | Default | Description |
| 3000 | Server port |
| 127.0.0.1 | Server host |
# Start server
npm run server:mcp
# Run tests
npm test
# Check MCP connection
claude mcp listCLAUDE-LEARNING.md - Key technical discoveries
ROADMAP.md - Development roadmap
LESSONS-LEARNED.md - Project insights
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.
MIT
This server cannot be installed
Unclaimed servers have limited discoverability.
If you are the server author, to access and configure the admin panel.
Turn Claude or ChatGPT into a website builder that ships a real site to a live URL you own.
Generate, edit, and deploy immersive 3D/WebGL web projects from any MCP assistant.
Build, deploy, and operate hosted web apps on VibeKit (vibekit.bot) from any MCP client.
We provide all the information about MCP servers via our MCP API.
curl -X GET 'https://glama.ai/api/mcp/v1/servers/t3rm1nu55/ClaudeImagine'
If you have feedback or need assistance with the MCP directory API, please join our Discord server