# Let the agent check its own UI with Playwright MCP

> Stop pasting screenshots. Add the Playwright MCP server so the agent can open your dev server, read the page structure and compare it with what you asked for.

- **Category:** [Coding](https://stepgleam.com/categories/coding)
- **Difficulty:** Beginner
- **Time:** ~20 minutes
- **Tools:** Playwright MCP, Claude Code
- **Reliability score:** 76/100
- **Steps:** 5
- **Last updated:** 2026-10-26
- **Published:** 2026-10-26

## Tools used

- [Playwright MCP](https://playwright.dev/docs/getting-started-mcp) — Gives the agent a browser it can drive
- [Claude Code](https://code.claude.com/docs) — Runs the check and fixes the differences

## What you'll get

An agent that opens your local app, inspects the result and reports evidence, instead of you taking screenshots.

## Who this is for

Frontend developers using Claude Code, Cursor or another MCP client.

## Before you start

A developer on r/ClaudeAI said they were "losing brain cells" taking screenshots of their UI for Claude Code. The replies pointed to one fix: add a Playwright MCP server so the agent can look for itself. Anthropic's guide recommends giving the agent this kind of visual check.

## Steps

### Step 1: Add the Playwright MCP server

**Tool:** Claude Code

In Claude Code: `claude mcp add playwright npx @playwright/mcp@latest`. In Cursor: **Settings → MCP → Add new MCP Server** with `npx @playwright/mcp@latest`. One user's summary: *"Just add puppeteer or playwright MCP servers to your Claude config. It's a few lines of JSON."*

**Prompt:**

```
claude mcp add playwright npx @playwright/mcp@latest
```

[Open step 1](https://stepgleam.com/guides/let-the-agent-check-its-own-ui-with-playwright-mcp#step-1)

### Step 2: Start your dev server yourself

Run the app locally (the poster's example is localhost:3000) so the agent has something to open.

[Open step 2](https://stepgleam.com/guides/let-the-agent-check-its-own-ui-with-playwright-mcp#step-2)

### Step 3: Ask it to open the page and report what it finds

**Tool:** Playwright MCP

Playwright MCP works from the page's accessibility tree rather than pixels, returning roles and text the model can act on. The same user had Claude try both tools and *"it preferred playwright due to ability to snapshot DOM"*; others in the thread use it to read console errors.

**Prompt:**

```
Open http://localhost:3000/settings, check the form matches the spec in SPEC.md, report any console errors, and list the differences.
```

[Open step 3](https://stepgleam.com/guides/let-the-agent-check-its-own-ui-with-playwright-mcp#step-3)

### Step 4: Give it a visual target and let it iterate

**Tool:** Claude Code

Anthropic's example for UI work: *"[paste screenshot] implement this design. take a screenshot of the result and compare it to the original. list differences and fix them."*

**Why this works:** A check it can run closes the loop without you.

[Open step 4](https://stepgleam.com/guides/let-the-agent-check-its-own-ui-with-playwright-mcp#step-4)

### Step 5: Review the evidence, then look yourself

Ask for evidence (snapshots, console output) rather than a claim that it looks right, then open the page yourself before shipping. Anthropic: *"Have Claude show evidence rather than asserting success."*

[Open step 5](https://stepgleam.com/guides/let-the-agent-check-its-own-ui-with-playwright-mcp#step-5)

## Pro tips

- Give stated acceptance criteria rather than "does it look right".
- Screenshots fill the context quickly; use page snapshots for routine checks.

## Common mistakes

- Letting the agent call a UI change done without opening the page.
- Taking a screenshot after every tiny edit.

## FAQ

### Does it need a vision model?

No. Playwright MCP uses structured accessibility snapshots.

### Puppeteer or Playwright?

Both have MCP servers; users in the thread preferred Playwright.

---

Canonical guide: https://stepgleam.com/guides/let-the-agent-check-its-own-ui-with-playwright-mcp
Read this guide as Markdown: https://stepgleam.com/guides/let-the-agent-check-its-own-ui-with-playwright-mcp.md