Visual Loop MCP Server

                    ┌──────────────────────────────┐
                    │        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:2px

# 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 build

CODEBOX_URL=http://localhost:2358 CODEBOX_TOKEN=your_token npm start

$env:CODEBOX_URL = "http://localhost:2358"
$env:CODEBOX_TOKEN = "your_token"
npm start

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

AI writes code  →  Codebox validates logic  →  Playwright renders visuals  →  AI sees the result

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

# Build and run in one step
npm run dev

# Watch mode with tsx (great for iterating)
npx tsx watch src/index.ts

visual-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!