![\"Glance\"](\".github/assets/glance-logo.png\"){kind=logo}
\n\n \n
\n AI-powered browser automation for Claude Code
\n by DebugBase\n
\n ![\"npm\"](\"https://img.shields.io/npm/v/glance-mcp?color=blue&label=npm\")
![\"License\"](\"https://img.shields.io/github/license/DebugBase/glance\")
![\"Stars\"](\"https://img.shields.io/github/stars/DebugBase/glance?style=social\")
![\"Discord\"](\"https://img.shields.io/badge/Discord-Join-5865F2?logo=discord&logoColor=white\"){kind=icon}
\n Navigate, click, screenshot, test — all from your terminal.\n
\n\n---\n\n## What is Glance?\n\nGlance is an [MCP server](https://modelcontextprotocol.io) 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.\n\n```\nYou: \"Test the login flow on localhost:3000\"\n\nClaude: *opens browser* *navigates* *fills form* *clicks submit*\n *takes screenshot* *verifies redirect* *checks for errors*\n \"Login flow works. Found 1 console warning about...\"\n```\n\n## Features\n\n- **30 MCP tools** for complete browser control\n- **Inline screenshots** — Claude sees what the browser sees\n- **Accessibility snapshots** — full page structure as text\n- **Test scenario runner** — define multi-step tests in JSON\n- **12 assertion types** — exists, textContains, urlEquals, and more\n- **Session recording** — record and replay browser sessions\n- **Visual regression** — pixel-level screenshot comparison\n- **Network & console monitoring** — catch errors and failed requests\n- **Security controls** — URL allowlist/denylist, rate limiting, JS execution policies\n- **Headed mode** — watch the browser in real-time\n\n## Quick Start\n\n### 1. Install\n\n```bash\nnpm install -g glance-mcp\n```\n\nOr add directly to Claude Code:\n\n```bash\nclaude mcp add glance -- npx glance-mcp\n```\n\n### 2. Configure\n\nAdd to your `.mcp.json`:\n\n```json\n{\n \"mcpServers\": {\n \"glance\": {\n \"command\": \"npx\",\n \"args\": [\"glance-mcp\"],\n \"env\": {\n \"BROWSER_HEADLESS\": \"false\"\n }\n }\n }\n}\n```\n\n### 3. Use\n\nJust ask Claude to interact with your web app:\n\n```\n\"Open localhost:3000 and take a screenshot\"\n\"Test the signup flow with invalid email\"\n\"Check if the pricing page has all three tiers\"\n\"Run a visual regression test on the dashboard\"\n```\n\n## Tools Reference\n\n### Browser Control (19 tools)\n\n| Tool | Description |\n|------|-------------|\n| `browser_navigate` | Navigate to a URL |\n| `browser_click` | Click an element (CSS selector or text) |\n| `browser_type` | Type into an input field |\n| `browser_hover` | Hover over an element |\n| `browser_drag` | Drag and drop between elements |\n| `browser_select_option` | Select from a dropdown |\n| `browser_press_key` | Press a keyboard key |\n| `browser_scroll` | Scroll the page or to an element |\n| `browser_screenshot` | Capture a screenshot (returned inline to Claude) |\n| `browser_snapshot` | Get the accessibility tree as text |\n| `browser_evaluate` | Execute JavaScript in the page |\n| `browser_console_messages` | Read console logs and errors |\n| `browser_network_requests` | Monitor network activity |\n| `browser_go_back` | Navigate back |\n| `browser_go_forward` | Navigate forward |\n| `browser_tab_new` | Open a new tab |\n| `browser_tab_list` | List all open tabs |\n| `browser_tab_select` | Switch to a tab |\n| `browser_close` | Close the browser |\n\n### Test Automation (7 tools)\n\n| Tool | Description |\n|------|-------------|\n| `test_scenario_run` | Run a multi-step test scenario |\n| `test_scenario_status` | Check running scenario status |\n| `test_assert` | Run a single assertion |\n| `test_fill_form` | Auto-fill a form |\n| `test_auth_flow` | Test a login/signup flow |\n| `test_watch_events` | Watch for DOM/network events |\n| `test_stop_watch` | Stop watching events |\n\n### Session & Visual (4 tools)\n\n| Tool | Description |\n|------|-------------|\n| `session_start` | Start recording a session |\n| `session_end` | End and save a session |\n| `session_list` | List recorded sessions |\n| `visual_baseline` | Save a visual baseline |\n| `visual_compare` | Compare against baseline |\n\n## Test Scenarios\n\nDefine multi-step test scenarios in JSON:\n\n```json\n{\n \"name\": \"Login Flow\",\n \"steps\": [\n { \"name\": \"Go to login\", \"action\": \"navigate\", \"url\": \"http://localhost:3000/login\" },\n { \"name\": \"Enter email\", \"action\": \"type\", \"selector\": \"input[type='email']\", \"value\": \"user@test.com\" },\n { \"name\": \"Enter password\", \"action\": \"type\", \"selector\": \"input[type='password']\", \"value\": \"password123\" },\n { \"name\": \"Click submit\", \"action\": \"click\", \"selector\": \"button[type='submit']\" },\n { \"name\": \"Wait for redirect\", \"action\": \"sleep\", \"ms\": 2000 },\n { \"name\": \"Verify dashboard\", \"action\": \"assert\", \"type\": \"urlContains\", \"expected\": \"/dashboard\" },\n { \"name\": \"Screenshot result\", \"action\": \"screenshot\", \"screenshotName\": \"post-login\" }\n ]\n}\n```\n\n### Assertion Types\n\n| Type | Description |\n|------|-------------|\n| `exists` | Element exists in DOM |\n| `notExists` | Element does not exist |\n| `textContains` | Element text contains value |\n| `textEquals` | Element text equals value |\n| `hasAttribute` | Element has attribute with value |\n| `hasClass` | Element has CSS class |\n| `isVisible` | Element is visible |\n| `isEnabled` | Element is enabled |\n| `urlContains` | Current URL contains value |\n| `urlEquals` | Current URL equals value |\n| `countEquals` | Number of matching elements |\n| `consoleNoErrors` | No console errors |\n\n## Configuration\n\nAll configuration is via environment variables:\n\n| Variable | Default | Description |\n|----------|---------|-------------|\n| `BROWSER_HEADLESS` | `true` | Run browser in headed mode |\n| `BROWSER_SESSIONS_DIR` | `.browser-sessions` | Directory for screenshots and sessions |\n| `BROWSER_SECURITY_PROFILE` | `local-dev` | Security profile (`local-dev`, `restricted`, `open`) |\n| `BROWSER_VIEWPORT_WIDTH` | `1280` | Browser viewport width |\n| `BROWSER_VIEWPORT_HEIGHT` | `720` | Browser viewport height |\n| `BROWSER_TIMEOUT` | `30000` | Default timeout in ms |\n| `BROWSER_CHANNEL` | — | Browser channel (e.g., `chrome`, `msedge`) |\n\n### Security Profiles\n\n| Profile | URL Access | JS Execution | Rate Limit |\n|---------|-----------|--------------|------------|\n| `local-dev` | All HTTP/HTTPS | Always | 60/min |\n| `restricted` | localhost only | Disabled | 30/min |\n| `open` | Everything | Always | 120/min |\n\n## How It Works\n\n```mermaid\ngraph LR\n A[\"Claude Code