Skip to content

Web Validation

Agents work with code, but they often need to verify what that code produces in a browser. An agent edits CSS and needs to confirm the button moved. Or a form submission fails silently, and the only clue is in the network tab. Without browser access, agents guess at runtime behavior based on static analysis alone.

Browser Access for Verification

After editing a React component, the agent needs to confirm the change renders correctly. JSX describes intent; the rendered page shows reality.

JavaScript errors, failed API calls, and performance bottlenecks surface at runtime. Stack traces in the browser console pinpoint problems that file searches miss.

Network inspection catches authentication failures, CORS issues, and payload mismatches. The code might look correct while the requests fail.

MCP Integration

Browser interaction happens through MCP servers. The agent runtime connects to an MCP server that controls the browser, exposing tools like navigate, click, screenshot, and evaluate.

┌─────────────────┐         ┌──────────────┐         ┌─────────────┐
│  Agent Runtime  │──JSON──▶│  MCP Server  │──CDP───▶│   Browser   │
│  (Claude Code)  │◀────────│ (Playwright) │◀────────│  (Chromium) │
└─────────────────┘         └──────────────┘         └─────────────┘

The agent sends commands through JSON-RPC. The MCP server translates them to Chrome DevTools Protocol (CDP) calls. Results flow back as structured data the agent can parse.

Snapshots vs Screenshots

MCP browser tools offer two ways to see page content: accessibility snapshots and screenshots.

Accessibility snapshots return the page's semantic structure as text. Buttons, links, form fields, and headings appear with their labels and relationships. The agent reads "button 'Submit' ref=E47" and can immediately issue a click command targeting that reference.

Screenshots capture pixels. The agent (or a vision model) must interpret what's on screen to understand the UI.

For most agent workflows, snapshots win:

Aspect Snapshots Screenshots
Speed ~50ms ~200ms
Token cost Low (text) High (image)
Actionable Direct element refs Requires interpretation
Vision model Not needed Required

Use screenshots when visual appearance matters: verifying CSS, checking layouts, capturing evidence of bugs. Use snapshots for everything else.

When to Use Which Tool

Two MCP servers cover most web validation needs:

Playwright MCP handles browser automation. The agent drives the browser like a user would, loading pages, filling forms, clicking buttons. Use it for testing UI changes and form submission flows.

Chrome DevTools MCP provides debugger access: performance profiling, network inspection, console output, JavaScript evaluation. Use it when you need to understand why something failed.

Both can take screenshots and evaluate JavaScript. Pick based on what you need to do next.