AI-powered browser automation for Claude Code
by DebugBase
Navigate, click, screenshot, test — all from your terminal.
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..."
- 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
npm install -g glance-mcpOr add directly to Claude Code:
claude mcp add glance -- npx glance-mcpAdd to your .mcp.json:
{
"mcpServers": {
"glance": {
"command": "npx",
"args": ["glance-mcp"],
"env": {
"BROWSER_HEADLESS": "false"
}
}
}
}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"
| Tool | Description |
|---|---|
browser_navigate |
Navigate to a URL |
browser_click |
Click an element (CSS selector or text) |
browser_type |
Type into an input field |
browser_hover |
Hover over an element |
browser_drag |
Drag and drop between elements |
browser_select_option |
Select from a dropdown |
browser_press_key |
Press a keyboard key |
browser_scroll |
Scroll the page or to an element |
browser_screenshot |
Capture a screenshot (returned inline to Claude) |
browser_snapshot |
Get the accessibility tree as text |
browser_evaluate |
Execute JavaScript in the page |
browser_console_messages |
Read console logs and errors |
browser_network_requests |
Monitor network activity |
browser_go_back |
Navigate back |
browser_go_forward |
Navigate forward |
browser_tab_new |
Open a new tab |
browser_tab_list |
List all open tabs |
browser_tab_select |
Switch to a tab |
browser_close |
Close the browser |
| Tool | Description |
|---|---|
test_scenario_run |
Run a multi-step test scenario |
test_scenario_status |
Check running scenario status |
test_assert |
Run a single assertion |
test_fill_form |
Auto-fill a form |
test_auth_flow |
Test a login/signup flow |
test_watch_events |
Watch for DOM/network events |
test_stop_watch |
Stop watching events |
| Tool | Description |
|---|---|
session_start |
Start recording a session |
session_end |
End and save a session |
session_list |
List recorded sessions |
visual_baseline |
Save a visual baseline |
visual_compare |
Compare against baseline |
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" }
]
}| Type | Description |
|---|---|
exists |
Element exists in DOM |
notExists |
Element does not exist |
textContains |
Element text contains value |
textEquals |
Element text equals value |
hasAttribute |
Element has attribute with value |
hasClass |
Element has CSS class |
isVisible |
Element is visible |
isEnabled |
Element is enabled |
urlContains |
Current URL contains value |
urlEquals |
Current URL equals value |
countEquals |
Number of matching elements |
consoleNoErrors |
No console errors |
All configuration is via environment variables:
| Variable | Default | Description |
|---|---|---|
BROWSER_HEADLESS |
true |
Run browser in headed mode |
BROWSER_SESSIONS_DIR |
.browser-sessions |
Directory for screenshots and sessions |
BROWSER_SECURITY_PROFILE |
local-dev |
Security profile (local-dev, restricted, open) |
BROWSER_VIEWPORT_WIDTH |
1280 |
Browser viewport width |
BROWSER_VIEWPORT_HEIGHT |
720 |
Browser viewport height |
BROWSER_TIMEOUT |
30000 |
Default timeout in ms |
BROWSER_CHANNEL |
— | Browser channel (e.g., chrome, msedge) |
| Profile | URL Access | JS Execution | Rate Limit |
|---|---|---|---|
local-dev |
All HTTP/HTTPS | Always | 60/min |
restricted |
localhost only | Disabled | 30/min |
open |
Everything | Always | 120/min |
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
- Claude Code connects to Glance via MCP (stdio transport)
- Claude calls tools like
browser_navigate,browser_screenshot - Glance translates these into Playwright commands
- Screenshots are returned as base64 images — Claude literally sees the page
- Accessibility snapshots give Claude the full DOM structure as text
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
- Node.js 18+
- Playwright-compatible browser (auto-installed)
git clone https://github.com/DebugBase/glance.git
cd glance
npm install
npx playwright install chromium
npm run build
npm startGlance 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
Quick E2E test runner. Just provide a URL:
/glance-test https://myapp.com
The skill will:
- Navigate to the URL
- Screenshot and snapshot the page
- Discover all navigation links
- Test each page with assertions
- Check console for JS errors
- Generate a pass/fail report
We welcome contributions! Please see CONTRIBUTING.md for guidelines.