Glance

What is Glance?

Glance is an MCP server that gives Claude Code a real browser. Instead of guessing what your web app looks like, Claude can actually see it, interact with it, and test it.

You: "Test the login flow on localhost:3000"

Claude: *opens browser* *navigates* *fills form* *clicks submit*
        *takes screenshot* *verifies redirect* *checks for errors*
        "Login flow works. Found 1 console warning about..."

Related MCP server: Browser & File MCP Server

Features

• 30 MCP tools for complete browser control

• Inline screenshots — Claude sees what the browser sees

• Accessibility snapshots — full page structure as text

• Test scenario runner — define multi-step tests in JSON

• 12 assertion types — exists, textContains, urlEquals, and more

• Session recording — record and replay browser sessions

• Visual regression — pixel-level screenshot comparison

• Network & console monitoring — catch errors and failed requests

• Security controls — URL allowlist/denylist, rate limiting, JS execution policies

• Headed mode — watch the browser in real-time

Quick Start

1. Install

npm install -g glance-mcp

Or add directly to Claude Code:

claude mcp add glance -- npx glance-mcp

2. Configure

Add to your .mcp.json:

{
  "mcpServers": {
    "glance": {
      "command": "npx",
      "args": ["glance-mcp"],
      "env": {
        "BROWSER_HEADLESS": "false"
      }
    }
  }
}

3. Use

Just ask Claude to interact with your web app:

"Open localhost:3000 and take a screenshot"
"Test the signup flow with invalid email"
"Check if the pricing page has all three tiers"
"Run a visual regression test on the dashboard"

Tools Reference

Browser Control (19 tools)

Test Automation (7 tools)

Session & Visual (4 tools)

Test Scenarios

Define multi-step test scenarios in JSON:

{
  "name": "Login Flow",
  "steps": [
    { "name": "Go to login", "action": "navigate", "url": "http://localhost:3000/login" },
    { "name": "Enter email", "action": "type", "selector": "input[type='email']", "value": "user@test.com" },
    { "name": "Enter password", "action": "type", "selector": "input[type='password']", "value": "password123" },
    { "name": "Click submit", "action": "click", "selector": "button[type='submit']" },
    { "name": "Wait for redirect", "action": "sleep", "ms": 2000 },
    { "name": "Verify dashboard", "action": "assert", "type": "urlContains", "expected": "/dashboard" },
    { "name": "Screenshot result", "action": "screenshot", "screenshotName": "post-login" }
  ]
}

Assertion Types

Configuration

All configuration is via environment variables:

Security Profiles

How It Works

graph LR
    A["Claude Code<br/>(Agent)"] -- "MCP stdio<br/>tools & results" --> B["Glance<br/>(MCP Server)"]
    B -- "Playwright<br/>automation API" --> C["Browser<br/>(Chromium)"]
    C -- "screenshots<br/>DOM snapshots" --> B
    B -- "inline images<br/>a11y trees" --> A

1. Claude Code connects to Glance via MCP (stdio transport)

2. Claude calls tools like browser_navigate, browser_screenshot

3. Glance translates these into Playwright commands

4. Screenshots are returned as base64 images — Claude literally sees the page

5. Accessibility snapshots give Claude the full DOM structure as text

Real-World Usage

Glance has been battle-tested on production apps:

• DebugBase (debugbase.io) — 12 scenarios, 104 test steps, 97% pass rate

• GitScribe AI — 16 scenarios, 196 test steps, 96% pass rate

Requirements

• Node.js 18+

• Playwright-compatible browser (auto-installed)

Development

git clone https://github.com/DebugBase/glance.git
cd glance
npm install
npx playwright install chromium
npm run build
npm start

Claude Code Integration

Agent: e2e-tester

Glance ships with a Claude Code agent definition for comprehensive browser testing. The agent knows all 30 tools and follows a structured test workflow: navigate, screenshot, assert, report.

You: "Test the entire login flow on localhost:3000"
Agent: Opens browser → navigates → fills forms → clicks → screenshots → asserts → reports

Skill: /glance-test

Quick E2E test runner. Just provide a URL:

/glance-test https://myapp.com

The skill will:

1. Navigate to the URL

2. Screenshot and snapshot the page

3. Discover all navigation links

4. Test each page with assertions

5. Check console for JS errors

6. Generate a pass/fail report

Contributing

We welcome contributions! Please see CONTRIBUTING.md for guidelines.

License

MIT — built by DebugBase