by DebugBase
AI-powered browser automation MCP server for Claude Code. Navigate, click, screenshot, test — all from your terminal.
# Add to your Claude Code skills
git clone https://github.com/DebugBase/glanceLast scanned: 5/30/2026
{
"issues": [
{
"type": "npm-audit",
"message": "@hono/node-server: @hono/node-server: Middleware bypass via repeated slashes in serveStatic",
"severity": "medium"
},
{
"type": "npm-audit",
"message": "express-rate-limit: Vulnerability found",
"severity": "medium"
},
{
"type": "npm-audit",
"message": "fast-uri: fast-uri vulnerable to path traversal via percent-encoded dot segments",
"severity": "high"
},
{
"type": "npm-audit",
"message": "hono: Hono missing validation of cookie name on write path in setCookie()",
"severity": "medium"
},
{
"type": "npm-audit",
"message": "ip-address: ip-address has XSS in Address6 HTML-emitting methods",
"severity": "medium"
},
{
"type": "npm-audit",
"message": "qs: qs has a remotely triggerable DoS: qs.stringify crashes with TypeError on null/undefined entries in comma-format arrays when encodeValuesOnly is set",
"severity": "medium"
},
{
"type": "npm-audit",
"message": "uuid: uuid: Missing buffer bounds check in v3/v5/v6 when buf is provided",
"severity": "medium"
}
],
"status": "WARNING",
"scannedAt": "2026-05-30T16:02:44.057Z",
"npmAuditRan": true,
"pipAuditRan": true
}glance is an open-source ai agents skill for AI coding assistants such as Claude Code, Codex CLI, and ChatGPT, built by DebugBase. AI-powered browser automation MCP server for Claude Code. Navigate, click, screenshot, test — all from your terminal. It has 152 GitHub stars.
glance returned warnings in SkillsLLM's automated security scan. It has no critical vulnerabilities, but review the flagged issues in the Security Report section before adding it to your workflow.
Clone the repository with "git clone https://github.com/DebugBase/glance" and add it to your Claude Code skills directory (see the Installation section above).
glance is primarily written in TypeScript. It is open-source under DebugBase on GitHub, so you can review or fork the full source.
Yes. SkillsLLM lists many other AI Agents skills you can browse and compare side by side. Open the AI Agents category from the badge at the top of this page, or use the Related Skills and comparison links further down to weigh glance against similar tools.
No comments yet. Be the first to share your thoughts!
Requires a passing catalog security scan. Resolve the flagged issues and resubmit to enable featuring.
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..."
npm install -g glance-mcp
Or add directly to Claude Code:
claude mcp add glance -- npx glance-mcp
Add 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
browser_navigate, browser_screenshotGlance has been battle-tested on production apps:
git clone https://github.com/DebugBase/glance.git
cd glance
npm install
npx playwright install chromium
npm run build
npm start
e2e-testerGlance 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
/glance-testQuick E2E test runner. Just provide a URL:
/glance-test https://myapp.com
The skill will:
We welcome contributions! Please see CONTRIBUTING.md for guidelines.