glance

Name: glance
Author: DebugBase

Warning

AI-powered browser automation MCP server for Claude Code. Navigate, click, screenshot, test — all from your terminal.

152stars

23forks

TypeScript

Installation

# Add to your Claude Code skills
git clone https://github.com/DebugBase/glance

Getting Started

Guides for using ai agents skills like glance.

Caveman: Cut Claude Token Use by 65%
How agent-side prompt compression works, when to use it, and when not to.
What is an AI Skills Marketplace?
Definitions, how marketplaces work, and how to choose between them in 2026.
Getting Started with AI Skills

Security ReportWarning

Last 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
}

README.md

Frequently Asked Questions

What is glance?

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.

Is glance safe to use?

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.

How do I install glance?

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).

What programming language is glance written in?

glance is primarily written in TypeScript. It is open-source under DebugBase on GitHub, so you can review or fork the full source.

Are there alternatives to glance?

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.

Agentic AI for Beginners

Build your first AI agent from scratch - tool use, ReAct pattern, memory, deployment

41 minBeginner

Comments (0)

to leave a comment.

No comments yet. Be the first to share your thoughts!

Related Skills

superpowers

by obra

An agentic skills framework & software development methodology that works.

234,966

decodo-openclaw-skill odin-slides

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..."

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)

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

Test Automation (7 tools)

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

Session & Visual (4 tools)

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

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

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

Configuration

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`)

Security Profiles

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

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

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

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:

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

Contributing

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

License

MIT — built by DebugBase