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., "@Visual Loop MCP Server Create a simple web page with a red square and take a screenshot"
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.
🚀 Quick Start • 📖 Documentation • 🔧 Configuration • 🤖 Claude Desktop • 📡 API Reference
Most AI coding assistants can write code — but they can't see the result. Visual Loop MCP closes that gap by providing a single tool that:
Think of it asgiving your AI eyes — it can now verify layouts, catch visual bugs, and iterate on designs without human intervention.
Related MCP server: Netmind Code Interpreter
┌──────────────────────────────┐
│ AI Client │
│ (Claude Desktop / Cursor) │
└──────────────┬───────────────┘
│
stdio (JSON-RPC 2.0)
│
┌──────────────▼───────────────┐
│ Visual Loop MCP Server │
│ │
│ ┌───────────────────────┐ │
│ │ Phase A: Execute │ │ ┌──────────────────┐
│ │ Code Validation │───┼────▶│ Judge0/Codebox │
│ │ │ │ │ (Sandboxed API) │
│ └───────────────────────┘ │ └──────────────────┘
│ │
│ ┌───────────────────────┐ │
│ │ Phase B: Render │ │ ┌──────────────────┐
│ │ Visual Screenshot │───┼────▶│ Playwright │
│ │ │ │ │ (Headless Chrome) │
│ └───────────────────────┘ │ └──────────────────┘
│ │
│ ┌───────────────────────┐ │
│ │ Phase C: Cleanup │ │ Temp files removed
│ │ Resource Disposal │ │ Browser closed
│ └───────────────────────┘ │
│ │
└───────────────────────────────┘graph LR
A[🤖 AI Client] -->|stdio JSON-RPC| B[🔄 Visual Loop MCP]
B -->|POST /submissions| C[⚡ Judge0 Codebox]
B -->|file:// render| D[🌐 Playwright]
C -->|stdout / stderr| B
D -->|base64 PNG| B
B -->|multimodal response| A
style A fill:#6C63FF,stroke:#4F46E5,color:#fff,stroke-width:2px
style B fill:#A855F7,stroke:#9333EA,color:#fff,stroke-width:2px
style C fill:#F59E0B,stroke:#D97706,color:#fff,stroke-width:2px
style D fill:#10B981,stroke:#059669,color:#fff,stroke-width:2pxRequirement | Version | Purpose |
| Runtime environment | |
| Package management | |
Any | Judge0 container hosting |
# Pull and run Judge0 CE in Docker
docker run -d -p 2358:2358 --name judge0 judge0/judge0-ce# Clone the repository
git clone https://github.com/IqbalHere/-Visual-Loop-MCP-Server.git
cd -Visual-Loop-MCP-Server
# Install dependencies
npm install
# Install Playwright Chromium (minimal footprint)
npx playwright install chromium
# Build the TypeScript project
npm run buildCODEBOX_URL=http://localhost:2358 CODEBOX_TOKEN=your_token npm start$env:CODEBOX_URL = "http://localhost:2358"
$env:CODEBOX_TOKEN = "your_token"
npm startVariable | Required | Description |
| ✅ | Base URL of your Judge0/Codebox instance |
| ❌ | Auth token for the Codebox API (omit if no auth) |
IfCODEBOX_URL is unset, the server gracefully skips code execution and only performs visual rendering. No crash, no fuss.
Add this to your Claude Desktop configuration file:
Platform | Config Path |
macOS |
|
Windows |
|
{
"mcpServers": {
"visual-loop": {
"command": "node",
"args": ["C:/absolute/path/to/visual-loop-mcp/build/index.js"],
"env": {
"CODEBOX_URL": "http://localhost:2358",
"CODEBOX_TOKEN": "your_token_here" // optional
}
}
}
}Replace the path inargs with the absolute path to your cloned project. Use forward slashes (/) even on Windows.
After saving, restart Claude Desktop. The execute_and_render tool will appear in the tool picker. 🎉
execute_and_renderThe single, powerful tool exposed by this server.
AI writes code → Codebox validates logic → Playwright renders visuals → AI sees the resultParameter | Type | Required | Default | Description |
|
| ✅ | — | Raw HTML/CSS/JS source code to execute and render |
|
| ✅ | — | Judge0 language ID (see table below) |
|
| ❌ |
| Browser viewport width in pixels |
|
| ❌ |
| Browser viewport height in pixels |
The tool returns a multimodal MCP content array containing both text and image:
{
"content": [
{
"type": "text",
"text": "[Codebox] Status: Accepted (id: 3)\n── stdout ──\nHello, world!\n\nExecution time: 0.012s | Memory: 3456 KB"
},
{
"type": "image",
"data": "<base64-encoded-PNG-screenshot>",
"mimeType": "image/png"
}
]
}Language | ID | Language | ID |
🟨 JavaScript (Node.js) |
| 🐍 Python 3 |
|
🔷 TypeScript |
| ☕ Java |
|
⚙️ C++ (GCC) |
| 💎 Ruby |
|
🐹 Go |
| 🌐 HTML/CSS |
|
For a complete list of 60+ supported languages, query your Judge0 instance:GET /languages
The server is engineered to never crash from tool-level errors. Every failure is caught and returned gracefully:
Scenario | Behavior |
🔌 Codebox timeout / network error | Error details in text response; screenshot still attempted |
🖥️ Playwright crash | Codebox results returned with rendering error note |
💥 Both fail | Descriptive error text returned; no image block |
⚠️ Missing | Codebox phase skipped with warning; rendering proceeds |
# Build and run in one step
npm run dev
# Watch mode with tsx (great for iterating)
npx tsx watch src/index.tsvisual-loop-mcp/
├── 📄 src/
│ └── index.ts # Main server — Codebox + Playwright + MCP
├── 📁 build/ # Compiled JavaScript output
├── 📦 package.json # Dependencies & scripts
├── ⚙️ tsconfig.json # TypeScript configuration
└── 📖 README.md # You are here!Technology | Role |
Core language with strict type safety | |
Model Context Protocol server framework | |
Headless browser automation & screenshots | |
Sandboxed multi-language code execution | |
HTTP client for Codebox API | |
Runtime schema validation |
Contributions are welcome! Here's how to get started:
Fork the repository
Create a feature branch (git checkout -b feature/amazing-feature)
Commit your changes (git commit -m 'Add amazing feature')
Push to the branch (git push origin feature/amazing-feature)
Open a Pull Request
This project is licensed under the MIT License — see the LICENSE file for details.
Built with ❤️ by Iqbal
⭐ Star this repo if you found it useful! ⭐
Unclaimed servers have limited discoverability.
If you are the server author, to access and configure the admin panel.
Generate images, GIFs, and PDFs from HTML, URLs, or templates — from your AI agent.
Execute code in 8 languages (Python, JS, TS, Go, Java, C++, C, Bash) in gVisor sandboxes.
Browser-backed QA with evidence and fix-ready reports for coding agents.
We provide all the information about MCP servers via our MCP API.
curl -X GET 'https://glama.ai/api/mcp/v1/servers/IqbalHere/Visual-Loop-MCP-Server'
If you have feedback or need assistance with the MCP directory API, please join our Discord server