AI-assisted UI development loop

Build faster feedback loops between code, browser behavior, and AI.

ai-ui-dev-loop is a demo-first template for verifying UI changes through a deterministic browser surface, Playwright checks, and MCP-driven observability.

Open live demo Open repository
The dev-loop page showing deterministic interaction controls and token swatches.
The demo page exposes stable controls for console, network, color, and interaction checks.

Why this exists

Most UI work still relies on manually bouncing between code, browser state, and screenshots. This repo shows a tighter loop: a browser surface designed for automation, a reproducible local activation path, and a verifier that proves console, network, and computed-style signals are actually observable.

  • Deterministic UI surface at /dev-loop
  • Playwright E2E for the baseline user flow
  • Sidecar MCP verification for console, network, and style observability
  • Public demo plus local-first activation and troubleshooting docs

What you can do with it

Use it as a template

Start from a minimal Next.js + shadcn setup that already has stable automation hooks, a theme toggle, and browser-facing verification patterns.

Use it as a reference

Study how a repo can separate readiness checks, app tests, public demo publication, and repo-owned MCP verification without conflating them.

Use it as a demo

Try the hosted app immediately, then inspect how the same interactions are validated locally.

How to use it

  1. Try the hosted demo. Open the public Vercel demo and visit /dev-loop.
  2. Activate the local loop. Run pnpm activate from the repo root.
  3. Verify browser observability. Start the app with pnpm dev, then run pnpm mcp:verify. 
pnpm activate
pnpm dev
pnpm e2e
pnpm mcp:verify

Supported paths

Repository docs

Use the README and knowledge docs for commands, troubleshooting, and implementation context.

Repository home

Local verification

Use Playwright for app behavior and the MCP sidecar for observability-specific checks.

pnpm e2e and pnpm mcp:verify

What the verifier proves

The sidecar MCP verifier is the repo-owned observability contract. It does not depend on Codex-native MCP transport being available in your environment.

  • Console signals are emitted and captured
  • A deterministic network probe reaches /api/health?probe=dev-loop
  • Computed colors change when the theme changes
  • Failure categories are explicit: config, tooling, or assertion

GitHub Pages setup note

This site is published from the tracked docs/ directory through a GitHub Actions workflow. If the workflow does not publish on first run, the exact repository-level action is:

In GitHub, open Settings → Pages and set the source to GitHub Actions.

After that, pushes to the default branch can publish the explainer automatically.