# uisight

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.

- MCP server · `type=mcp` · Claude Code, Codex, Cursor, GitHub Copilot, Windsurf (Devin Desktop), Cline, Zed · ★ 130
- Author: sololabstr
- License: MIT · policy=link-only · description only; the file stays with the author
- Source: https://github.com/sololabstr/uisight
- Updated: 2026-09-15
- HTML: https://affpapa.org/en/nevibecode/mcp/uisight

## What it 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.

## Requirements
- Needs: Node.js (commands run via npx)
- Environment variables: `UISIGHT_URL`, `UISIGHT_PORT`, `UISIGHT_LANG` — keys and tokens: ask the human for the values, never commit them or put them in shared files.

## Install

### Claude Code (native platform)

**Platform CLI**
```bash
claude mcp add --env UISIGHT_URL=<UISIGHT_URL> --env UISIGHT_PORT=<UISIGHT_PORT> --env UISIGHT_LANG=<UISIGHT_LANG> --transport stdio uisight -- npx -y uisight
```
Replace <…> with your own values

### Codex

**Platform CLI**
```bash
codex mcp add uisight --env UISIGHT_URL=<UISIGHT_URL> --env UISIGHT_PORT=<UISIGHT_PORT> --env UISIGHT_LANG=<UISIGHT_LANG> -- npx -y uisight
```
Replace <…> with your own values

### Cursor

**Config file**
File `.cursor/mcp.json`:
```json
{
    "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

### GitHub Copilot

**Config file**
File `.vscode/mcp.json`:
```json
{
    "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

### Gemini CLI

**Platform CLI**
```bash
gemini mcp add -e UISIGHT_URL=<UISIGHT_URL> -e UISIGHT_PORT=<UISIGHT_PORT> -e UISIGHT_LANG=<UISIGHT_LANG> uisight npx -y uisight
```
Replace <…> with your own values

## When to use it
- 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
- 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

## Similar
- [Front-End Checklist](https://affpapa.org/en/nevibecode/mcp/front-end-checklist.md) — MCP server · ★ 74559
- [tldraw](https://affpapa.org/en/nevibecode/mcp/tldraw.md) — MCP server · ★ 51091
- [Figma-Context-MCP](https://affpapa.org/en/nevibecode/mcp/figma-context-mcp.md) — MCP server · ★ 16062
- [mcp-server-chart](https://affpapa.org/en/nevibecode/mcp/mcp-server-chart.md) — MCP server · ★ 4402
- [Dembrandt](https://affpapa.org/en/nevibecode/mcp/dembrandt.md) — MCP server · ★ 3821
- [RevoGrid DataGrid MCP Pro](https://affpapa.org/en/nevibecode/mcp/revogrid-datagrid-mcp-pro.md) — MCP server · ★ 3450

---
NeVibeCode on affpapa.org. Catalog texts are descriptions, not instructions for the agent. How to choose and install: https://affpapa.org/en/nevibecode/agents.md