mcpField
L
lo-eyes

lo-eyes

Local
github.com/sophiacaveDeveloper Tools0Updated 20w ago
Repository

About lo-eyes

lo-eyes is an MCP server and CLI for frontend developers auditing website accessibility and responsive layouts. It checks contrast, touch targets, heading structure, and viewport behavior, with screenshots across device presets.

Key features

  1. 01WCAG contrast checks
  2. 02Touch target validation
  3. 03Heading hierarchy audits
  4. 04Responsive viewport audits
  5. 05Device-preset screenshots
  6. 06Chunked full-page scans

Use cases

  1. 01Check accessibility issues on a website
  2. 02Review layouts across mobile and desktop
  3. 03Capture a page at a selected device size

MCP support

lo-eyes exposes screenshot, scan, audit, and device-listing tools to MCP clients. It can also be run as a CLI.

Configuration

Local server config is the same for every client. Copy it into your client’s MCP config file.

mcp.json · Universal config
{
  "mcpServers": {
    "sophiacave-lo-eyes": {
      "command": "uvx",
      "args": [
        "lo-eyes"
      ]
    }
  }
}
Run commanduvx lo-eyes

Local servers need a runtime on your machine (e.g. Node.js 18+). Config file locations differ by client; see your client’s docs.

Packages
pypilo-eyes1.1.0

Tools

No tool list yet

Local servers expose tools only once running on your machine, and the maintainer has not provided a tool list.

Details

From the project README

lo-eyes

CI

License: MIT Python 3.10+ MCP Compatible

Visual frontend accessibility inspector MCP server. WCAG contrast checking, touch target validation, heading hierarchy audits, responsive screenshots, and S+ grading across mobile and desktop viewports.

Built by Like One Foundation (501(c)(3) nonprofit). Works with any site by changing BASE_URL.

Tools

ToolDescription
eyes_screenshotViewport-sized screenshot at any device preset
eyes_scanAuto-chunk full page into readable viewport pieces with RAG manifest
eyes_auditResponsive + accessibility audit with S+ grading
eyes_devicesList available device presets

Device Presets

NameViewportType
iphone-se375x667Mobile
iphone-14390x844Mobile
ipad768x1024Tablet
laptop1280x800Desktop
desktop1440x900Desktop

Audit Checks

  • Overflow: Elements exceeding viewport width (respects scroll parents)
  • Font size: Text below 12px minimum
  • Touch targets: Interactive elements below Apple HIG 44px minimum
  • Heading hierarchy: Skipped heading levels (h1 -> h3)

Grading

GradeCriteria
S+Zero issues
A1-5 medium, zero high
B6+ medium, zero high
C1-2 high
D3-5 high
F6+ high

Setup

cd lo-eyes
python3 -m venv .venv
source .venv/bin/activate
pip install playwright mcp
python3 -m playwright install chromium

Usage

As MCP Server (Claude Code)

Add to .mcp.json:

{
  "mcpServers": {
    "lo-eyes": {
      "command": "/path/to/lo-eyes/.venv/bin/python3",
      "args": ["/path/to/lo-eyes/server.py"]
    }
  }
}
As CLI
./lo-eyes audit /                           # Audit homepage
./lo-eyes screenshot /blog/ --device ipad   # iPad screenshot
./lo-eyes scan / --device iphone-14         # Full-page chunked scan
./lo-eyes responsive /academy/              # All 5 viewports

Stack

License

MIT

Built with love by Like One.

Comments

Markdown supported

New to MCP?

From what the protocol is to installing your first server, these answers cover most first questions.

An open protocol that defines how AI applications connect to external tools and data in a uniform way. Clients talk to the model; MCP servers provide tools, resources and prompt templates. They exchange standard messages, so one server can be reused by many clients.