uisight — Claude Code MCP server: what it does, how to install
Measures real DOM metrics like contrast ratios and tap target sizes instead of relying on vision guesses. Great for debugging responsive web layouts alongside an agent.
claude mcp add --env UISIGHT_URL=<UISIGHT_URL> --env UISIGHT_PORT=<UISIGHT_PORT> --env UISIGHT_LANG=<UISIGHT_LANG> --transport stdio uisight -- npx -y uisightWhat uisight does
Vision models usually glance at screenshots and guess why a layout feels broken. This server inspects the live DOM instead. It gives the coding agent exact numbers: WCAG contrast values, tap bounds in pixels, and the exact CSS selector responsible for the issue.
The setup includes tools like inspect for layout checks and see_screen for visual frames. It also supports side-by-side desktop and mobile sessions. You can browse together with the agent and pin bug notes to specific frames.
Playwright powers the headless execution under the hood. On the first run, it needs Chromium, which takes around 700 MB on disk. In automated pipelines, install it beforehand with npx playwright install chromium. Native mobile apps are outside its scope.
What it helps with
- calculate exact WCAG text contrast ratios from live DOM elements
- detect tap targets falling below the 44px touch threshold
- extract CSS selectors for broken elements across light and dark modes
- inspect desktop and mobile viewports simultaneously in live sessions
Example prompts for the agent
- Inspect http://localhost:3000 with uisight and list elements failing contrast standards
- Run uisight inspect on the signup flow to check touch target sizes on mobile
How to install uisight
Platform CLI
claude mcp add --env UISIGHT_URL=<UISIGHT_URL> --env UISIGHT_PORT=<UISIGHT_PORT> --env UISIGHT_LANG=<UISIGHT_LANG> --transport stdio uisight -- npx -y uisightReplace <…> with your own values
Platform CLI
codex mcp add uisight --env UISIGHT_URL=<UISIGHT_URL> --env UISIGHT_PORT=<UISIGHT_PORT> --env UISIGHT_LANG=<UISIGHT_LANG> -- npx -y uisightReplace <…> with your own values
Config file
{
"mcpServers": {
"uisight": {
"command": "npx",
"args": [
"-y",
"uisight"
],
"env": {
"UISIGHT_URL": "<UISIGHT_URL>",
"UISIGHT_PORT": "<UISIGHT_PORT>",
"UISIGHT_LANG": "<UISIGHT_LANG>"
}
}
}
}Replace <…> with your own values
Config file
{
"servers": {
"uisight": {
"type": "stdio",
"command": "npx",
"args": [
"-y",
"uisight"
],
"env": {
"UISIGHT_URL": "<UISIGHT_URL>",
"UISIGHT_PORT": "<UISIGHT_PORT>",
"UISIGHT_LANG": "<UISIGHT_LANG>"
}
}
}
}Replace <…> with your own values
Platform CLI
gemini mcp add -e UISIGHT_URL=<UISIGHT_URL> -e UISIGHT_PORT=<UISIGHT_PORT> -e UISIGHT_LANG=<UISIGHT_LANG> uisight npx -y uisightReplace <…> with your own values
Step by step, with commands for each platform: How to add an MCP server to Claude Code, Codex, Cursor, VS Code, Gemini CLI and more
Questions about uisight
How do I install uisight in Claude Code?
Run claude mcp add uisight -- npx -y uisight. If needed, pass environment variables with `claude mcp add --env UISIGHT_URL=<UISIGHT_URL> --env UISIGHT_PORT=<UISIGHT_PORT> --env UISIGHT_LANG=<UISIGHT_LANG> --transport stdio uisight -- npx -y uisight`.
What does uisight do?
It inspects live web pages using Playwright and delivers quantitative layout data to your agent. Rather than eyeballing screenshots, the agent gets CSS selectors, contrast figures, and pixel-level tap targets.
Does uisight require external browser binaries?
Yes, it depends on Playwright. Chromium requires roughly 700 MB of disk space, which you can fetch beforehand by executing npx playwright install chromium.
