MCP UX review for coding agents

AI builds the UI. UXRay catches the mess.

Real screenshots. Structured UX issues. Repair prompts your agent can act on. Then a before/after scorecard to prove the UI got better.

Install locally Read docs

39 → 100 score 11 → 0 issues same prompt same local eval

Real fixture evidence landing-chaos · desktop · same pipeline

Real before screenshot from the landing-chaos fixture before UXRay repair — **Before**46 / 100 · vague H1, CTA conflict, mobile overflow

Real after screenshot from the same landing-chaos fixture after Codex repaired it using UXRay — **After**100 / 100 · one CTA, clear task, mobile-safe

Validated repair loop

Same fixtures. Same reviewer. Same environment.

UXRay reset three flawed AI-generated screens, reviewed them locally, let Codex repair with MCP screenshots, then reviewed again. The images above are from that actual run, not mockups.

39 → 100average score

9 → 0high severity

3/3fixtures improved

How it works

Review → repair → diff.

Render the UI

Desktop and mobile screenshots, DOM text, headings, buttons, links, forms, and overflow signals.

Tell the agent what broke

Severity, category, evidence, affected area, and a focused repair prompt.

Measure the fix

review_ui_diff compares score, issue count, high-severity count, and fixed categories.

Install

Use it where your agent already works.

Codex Claude Code Local API

npm install
npm run typecheck
codex mcp add uxray -- npm --prefix "$PWD" run mcp
npm run demo:pipeline

Cloudflare hosts the public site and static demo API. Full URL rendering runs locally today because it needs Chrome/Playwright. Hosted paid calls should run on a browser-capable backend.

Next layer

Paid calls fit naturally.

Keep local MCP free as the developer wedge. Add hosted rendering as usage-based API calls, then bundle teams by review volume and CI seats.