Skip to main content
Glama
kjaiswal

Browsershot MCP

by kjaiswal
OverviewSchemaSourceRelated ServersScoreDiscussionsAdmin
JavaScript
Local

browsershot-mcp

Browser screenshot tool for Claude Code. Take screenshots of web pages during frontend development — see what your UI looks like without leaving the terminal.

Install

One command:

claude mcp add browsershot -- npx -y github:kjaiswal/browsershot-mcp

That's it. Puppeteer + Chromium are bundled — no system dependencies needed.

Related MCP server: dev-chrome-monitor

What it does

Once installed, Claude Code gets three new tools:

Tool

What it does

screenshot

Capture a webpage screenshot (full page or element)

screenshot_compare

Take mobile + tablet + desktop screenshots side by side

page_info

Get page metadata (fonts, colors, scroll height, resource counts)

Claude sees the screenshots directly and can analyze layout, styling, and visual regressions.

Usage

Just describe what you want in natural language:

> Take a screenshot of http://localhost:3000
> Screenshot the nav bar element on my dev server
> Compare my page at mobile, tablet, and desktop widths
> Check if dark mode looks right on localhost:8080

Tool parameters

screenshot

  • url — URL to capture (required)

  • width / height — Viewport size (default: 1440×900)

  • fullPage — Capture full scroll height (default: true)

  • selector — CSS selector to capture a specific element

  • device — Preset: "mobile", "tablet", "desktop", "4k", or Puppeteer device name like "iPhone 15 Pro"

  • darkMode — Emulate prefers-color-scheme: dark

  • waitFor — Ms to wait after load (default: 2000) or CSS selector to wait for

  • output — Custom file path

screenshot_compare

  • url — URL to capture (required)

  • widths — Array of viewport widths (default: [375, 768, 1440])

page_info

  • url — URL to inspect (required)

Examples

Claude can now do things like:

  • "Take a screenshot of my React app and tell me if the layout looks broken"

  • "Screenshot this page on mobile and desktop — is the nav responsive?"

  • "Check if the dark mode toggle works by screenshotting both themes"

  • "What fonts and colors is this page using?"

How it works

  • Runs as an MCP (Model Context Protocol) server

  • Puppeteer launches headless Chromium (bundled, no install needed)

  • Screenshots are returned as images that Claude can see and analyze

  • Self-signed certs are accepted (for local dev servers)

  • Browser instance is reused across calls for speed

Requirements

  • Node.js 18+

  • Claude Code

License

MIT

Available Tools

3 tools
page_infoA

Get page metadata: title, viewport size, scroll height, fonts, colors, and resource counts. Useful for auditing a page without a full screenshot.

ParametersJSON Schema
NameRequiredDescriptionDefault
urlYesURL to inspect

TDQS

A4/5.0
Behavior3/5

Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?

No annotations provided, so description carries full burden. Compensates by listing specific metadata fields returned (title, viewport, scroll height, etc.) since no output schema exists. However, omits behavioral details like page loading strategy, JavaScript execution, or caching behavior.

Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.

Conciseness5/5

Is the description appropriately sized, front-loaded, and free of redundancy?

Two sentences with zero waste: first front-loaded with capability list, second provides usage context. Every word earns its place; appropriately sized for tool complexity.

Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.

Completeness4/5

Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?

Given single parameter and lack of output schema, description adequately compensates by enumerating return metadata fields. Addresses sibling tool relationship. Minor gap: no mention of error handling or authentication requirements.

Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.

Parameters3/5

Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?

Schema coverage is 100% ('URL to inspect'), establishing baseline 3. Description implies the URL should be a web page (given 'page metadata' context) but adds minimal syntax or format guidance beyond the schema description.

Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.

Purpose5/5

Does the description clearly state what the tool does and how it differs from similar tools?

Clear specific verb ('Get') and resource ('page metadata') with explicit enumerated return values (title, viewport, fonts, etc.). Explicitly distinguishes from sibling 'screenshot' tool by contrasting with 'without a full screenshot'.

Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.

Usage Guidelines4/5

Does the description explain when to use this tool, when not to, or what alternatives exist?

States use case ('auditing a page') and implicitly positions against screenshot alternative ('without a full screenshot'). Lacks explicit 'when not to use' guidance, but context is clear enough for selection.

Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.

screenshotA

Take a browser screenshot of a URL. Returns the image file path. Use this to visually verify frontend changes, check responsive layouts, or debug CSS issues. The returned file path can be viewed with the Read tool.

ParametersJSON Schema
NameRequiredDescriptionDefault
urlYesURL to screenshot (http://, https://, or file://)
widthNoViewport width in pixels (default: 1440)
heightNoViewport height in pixels (default: 900)
fullPageNoCapture full scrollable page (default: true)
selectorNoCSS selector to screenshot a specific element instead of the full page
deviceNoDevice preset: "mobile" (375x812), "tablet" (768x1024), "desktop" (1440x900), "4k" (3840x2160), or a Puppeteer device name like "iPhone 15 Pro"
darkModeNoEmulate dark mode via prefers-color-scheme: dark
waitForNoMilliseconds to wait after load (default: 2000), or a CSS selector to wait for
outputNoCustom output file path (default: auto-generated in /tmp/browsershot-mcp/)

TDQS

A3.5/5.0
Behavior3/5

Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?

With no annotations provided, the description must carry full behavioral disclosure. It successfully states the return value ('image file path'), but omits other behavioral traits like error handling (timeouts, invalid URLs), browser engine details (though 'Puppeteer' appears in schema), or idempotency. It compensates minimally by mentioning the Read tool integration.

Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.

Conciseness5/5

Is the description appropriately sized, front-loaded, and free of redundancy?

Three sentences that are all essential: purpose/return, use cases, and output consumption. Front-loaded with the core action, zero redundancy, and appropriately dense for the tool complexity. No wasted words.

Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.

Completeness3/5

Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?

For a 9-parameter browser automation tool with no output schema and no annotations, the description covers the critical missing output information (file path return) and basic usage contexts. However, it lacks discussion of failure modes, network requirements, or JavaScript execution behavior that would be expected for a complex browser tool.

Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.

Parameters3/5

Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?

Schema description coverage is 100%, establishing a baseline of 3. The description adds no explicit parameter guidance, though the use cases ('responsive layouts') implicitly guide toward the device/width/height parameters. No additional syntax or format details are provided beyond the schema.

Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.

Purpose4/5

Does the description clearly state what the tool does and how it differs from similar tools?

The description states a specific action ('Take a browser screenshot') and target ('URL'), and distinguishes from sibling page_info by emphasizing visual verification ('visually verify frontend changes', 'debug CSS issues'). However, it does not explicitly contrast with screenshot_compare, which could lead to confusion about when to use simple capture versus visual diffing.

Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.

Usage Guidelines3/5

Does the description explain when to use this tool, when not to, or what alternatives exist?

Provides clear positive use cases ('visually verify frontend changes, check responsive layouts, or debug CSS issues') and mentions the Read tool for consuming output. Lacks explicit negative guidance ('do not use when...') or selection logic for when to prefer screenshot_compare over this tool.

Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.

screenshot_compareA

Take screenshots at multiple viewport widths to compare responsive layouts. Returns file paths for mobile (375px), tablet (768px), and desktop (1440px) by default.

ParametersJSON Schema
NameRequiredDescriptionDefault
urlYesURL to screenshot
widthsNoViewport widths to capture (default: [375, 768, 1440])

TDQS

A4.2/5.0
Behavior4/5

Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?

With no annotations provided, the description carries the full burden of disclosure. It successfully explains the output format ('Returns file paths') and reveals the default behavioral configuration (specific pixel widths). It could improve by clarifying if this creates local files or temporary resources, but it covers the essential return contract missing from the output schema.

Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.

Conciseness5/5

Is the description appropriately sized, front-loaded, and free of redundancy?

The description consists of exactly two sentences with zero waste: the first establishes the action and purpose, while the second covers return values and defaults. Every word earns its place and critical information is front-loaded.

Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.

Completeness4/5

Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?

Given the absence of both annotations and an output schema, the description adequately compensates by explaining what the tool returns ('file paths'). With 100% schema coverage for inputs, the description provides sufficient context for invocation, though it could briefly mention error handling or file persistence behavior.

Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.

Parameters4/5

Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?

While the schema has 100% coverage (baseline 3), the description adds valuable semantic meaning by categorizing the default widths as 'mobile (375px), tablet (768px), and desktop (1440px)', which helps the agent understand the intent behind the raw numeric defaults.

Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.

Purpose5/5

Does the description clearly state what the tool does and how it differs from similar tools?

The description clearly states the specific action ('Take screenshots'), the unique approach ('at multiple viewport widths'), and the goal ('to compare responsive layouts'). This effectively distinguishes it from the sibling 'screenshot' tool which likely captures a single viewport.

Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.

Usage Guidelines3/5

Does the description explain when to use this tool, when not to, or what alternatives exist?

The description implies the use case ('to compare responsive layouts') but does not explicitly state when to use this tool versus the sibling 'screenshot' tool, nor does it provide explicit when-not-to-use guidance or prerequisites.

Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.

Tool Schema Changelog

Recent tool additions, removals, and schema changes observed during successful MCP inspections. Dates show when Glama detected each change.

  1. 3 tool updatesv0.1.0
    • First observedpage_info
    • First observedscreenshot
    • First observedscreenshot_compare
Install Server
RayrunBuild, deploy, and operate MCP servers without becoming an infrastructure team.ray.runAd

TDQS

A3.8/5.0
Disambiguation5/5

Each tool has a clearly distinct purpose: page_info extracts metadata without rendering, screenshot captures a single viewport, and screenshot_compare generates multiple viewports for responsive testing. No functional overlap or ambiguity exists.

Naming Consistency3/5

Mixed structural patterns: page_info follows noun_noun (describing output data), while screenshot and screenshot_compare use noun or noun_verb patterns (describing actions). All use snake_case, but semantic consistency is lacking compared to a uniform verb_noun convention.

Tool Count4/5

Three tools is lean but appropriate for a focused screenshot utility. The set covers auditing (page_info), basic capture (screenshot), and responsive validation (screenshot_compare) without unnecessary proliferation.

Completeness4/5

Core screenshot workflow is well-covered including metadata inspection and multi-device responsive testing. Minor gaps might include PDF generation or granular viewport control (e.g., single mobile screenshot without the full comparison set), but the essential surface supports complete screenshot tasks.

Maintenance

ActivityInactive
ResponsivenessNo issues

Resources

Unclaimed servers have limited discoverability.

Looking for Admin?

If you are the server author, to access and configure the admin panel.

Related MCP Connectors

Related MCP Servers

Latest Blog Posts

MCP directory API

We provide all the information about MCP servers via our MCP API.

curl -X GET 'https://glama.ai/api/mcp/v1/servers/kjaiswal/browsershot-mcp'

If you have feedback or need assistance with the MCP directory API, please join our Discord server