Prototyping Mode

Let marketing, product, and management make UI changes through natural language — no code skills required.

The problem

Small UI changes — updating a headline, adjusting spacing, changing a button label — shouldn't require a developer sprint. But non-technical team members can't edit code, and design tools don't produce production-ready output.

Prototyping Mode bridges this gap. Your team describes what they want in plain language. An AI agent makes the changes on a live preview. When it looks right, the changes become a merge request.

How it works

Init — The AI agent starts a session for a whitelisted project. mcpgate spins up a Kubernetes pod with a dev server and live preview URL in 1–2 minutes.
Edit — The user describes changes in natural language. The AI reads files, writes changes, and the preview updates instantly. Every write waits until the dev server is healthy again — no broken intermediate states.
Review — The user checks the preview URL in their browser. If something isn't right, the AI reads browser console errors and app logs to self-diagnose — no screenshots needed.
Ship — When the changes look good, the AI commits to a branch and creates a merge request. The team gets a Slack notification.

User (natural language)
  ↓
AI Agent (Claude / Codex)
  ↓
mcpgate (Prototyping Mode)
  ↓
Kubernetes Pod (dev server + file API)
  ↓
Live Preview URL → User reviews in browser

What makes it different

AI sees what you see

The AI reads browser console logs (errors, warnings, network failures) and container logs (build errors, runtime exceptions) directly. When something breaks, it diagnoses and fixes the issue without the user having to explain what went wrong.

Instant feedback, never broken

After every file change, the system waits for the dev server to be healthy before responding. Combined with hot module replacement, this means the preview always shows a working state — no white screens, no reload needed.

Ready in under 2 minutes

Pre-warmed Docker images with pre-installed dependencies. A new prototype session is live and editable in 1–2 minutes instead of the 5+ minutes a cold npm install would take.

Key capabilities

Live preview environments

Each session gets its own preview URL with a running dev server. Changes appear in seconds via HMR. No waiting for builds or deployments.

Browser logs & error collection

The AI can read the browser's console output — JavaScript errors, failed network requests, hydration warnings, React/Astro errors. This means the AI can debug rendering issues the same way a developer would, without the user needing to open DevTools or take screenshots.

App logs & build diagnostics

Container logs from the dev server, file API sidecar, and git operations are accessible via the get_logs action. When a build fails or a dependency is missing, the AI reads the error output and fixes it autonomously.

Branch resume & collaboration

Sessions are tied to Git branches, not to a single user. This enables two powerful workflows:

Resume later — Stop a session today, resume on the same branch tomorrow. The pod is recreated, but all committed changes are intact.
Team collaboration — Any team member can work on any active session. No ownership lock. Marketing starts a change, product refines it, a designer polishes it.

Slack notifications

The session owner receives DMs at key moments: preview URL is ready, changes are saved, merge request is created. Team members can subscribe to session updates.

Framework support

Works with modern frontend frameworks out of the box:

Astro — with HMR recovery and loading spinner during restarts
Next.js — with fast refresh
Vite — with hot module replacement

Environment presets

At session start, choose which backend the preview connects to (development, staging, or production APIs). This lets the team see real data without affecting production.

Session lifecycle

Sessions run for 7 days by default (extendable to 30). The AI can stop and resume sessions — branches persist in Git even after the pod is torn down.

Safe by design

Whitelisted projects only — only approved repositories can be used
Branch isolation — all changes go to a prototype/* branch, never to main
Merge request workflow — developers review before any code reaches production
Automatic cleanup — expired sessions are removed automatically

12 AI actions

Prototyping Mode exposes these actions via the MCP protocol:

Action	What it does
`init`	Start a new session or resume an existing branch (~15s with warm image)
`file` (read)	Read, list, search, or glob files in the project
`file` (write)	Write, patch, or multi-patch files (waits for dev server readiness)
`file` (browser_logs)	Read browser console output — errors, warnings, network failures
`status`	Check session health, uptime, and expiration
`save`	Commit and push without ending the session
`stop`	Tear down pod, keep branch for later
`extend`	Change session lifetime (up to 30 days)
`finish`	Save, create merge request, tear down, notify via Slack
`discard`	Tear down and optionally delete branch
`list_branches`	List all prototype branches
`history`	View past sessions (90-day retention)
`get_logs`	Read container logs — build errors, runtime exceptions

Who is it for?

Marketing — Update landing pages, change copy, adjust visuals
Product — Prototype new features, test layout ideas, iterate with real data
Management — Make quick fixes without waiting for the next sprint
Designers — Iterate on production code directly, see results instantly
QA — Review prototype branches, test changes before merge

Requirements

Kubernetes cluster (K3s or managed K8s)
GitLab repository for the target project
mcpgate with Prototyping Mode enabled in config/prototype_projects.yaml

See Configuration Reference for setup details.