Pixel Forge

Isi folder

server.js       # HTTP + MCP (Streamable HTTP) + WebSocket bridge, 1 proses/1 port
tools.js        # Definisi tools MCP
public/index.html  # Pixel Forge editor (dibuka di browser)
package.json
render.yaml

1. Push ke GitHub

cd pixel-forge-mcp
git init
git add .
git commit -m "Pixel Forge MCP - remote HTTP build"
git branch -M main
git remote add origin https://github.com/<username>/pixel-forge-mcp.git
git push -u origin main

2. Deploy ke Render

1. https://dashboard.render.com → New → Web Service.
2. Connect repo GitHub pixel-forge-mcp.
3. Render otomatis membaca render.yaml. Kalau ditanya manual:
   • Environment: Node
   • Build Command: npm install
   • Start Command: npm start
4. Klik Create Web Service. Tunggu deploy selesai.
5. Catat URL yang diberikan, mis. https://pixel-forge-mcp.onrender.com.

Plan Free Render akan sleep setelah idle dan bangun ~30-60 detik saat request pertama. Kalau perlu selalu aktif, pakai plan berbayar atau tambahkan external cron ping ke /healthz.

3. Sambungkan ke Claude

Di Claude.ai / Claude Desktop -> Settings -> Connectors -> Add custom connector:

• URL: https://pixel-forge-mcp.onrender.com/mcp

4. Buka editor & sambungkan jembatan

1. Buka https://pixel-forge-mcp.onrender.com/ di browser (ini editornya).
2. Di kolom Agent Bridge, isi: wss://pixel-forge-mcp.onrender.com/ws
3. Klik Connect Agent -> titik status jadi hijau.
4. Minta Claude memakai tool create_project, draw_pixel, dst -> hasil langsung tergambar di editor yang terbuka.

Catatan

• Endpoint /mcp di sini publik tanpa auth - cukup untuk pemakaian pribadi. Kalau mau dibagi ke orang lain, tambahkan API key/header check di server.js.
• Editor harus tetap terbuka di satu tab browser agar tool bisa jalan (state canvas hidup di browser, bukan di server).
• pixel-forge-mcp.mcpb (versi Desktop Extension lokal) tidak dipakai lagi untuk mode online ini - itu untuk instalasi lokal stdio di Claude Desktop.