---
name: Playwright MCP
slug: playwright-mcp
url: "https://dontmakeitugly.com/resources/playwright-mcp"
website: "https://github.com/microsoft/playwright-mcp"
github: "https://github.com/microsoft/playwright-mcp"
type: mcp-server
categories:
  - agent-resources
  - tools
tags:
  - mcp
  - browser
  - screenshots
  - testing
  - responsive
  - qa
  - accessibility
frameworks:
  - agnostic
pricing: free
license: Apache-2.0
openSource: true
agentFriendly: excellent
agentAccessMethods:
  - mcp
  - github
  - npm
  - documentation
installCommand: "claude mcp add playwright -- npx @playwright/mcp@latest"
difficulty: intermediate
staffPick: true
dateAdded: "2026-09-02"
lastVerified: "2026-09-02"
---

# Playwright MCP

Give your agent a browser so it can see and test what it built.

- Type: MCP server
- Categories: Agent Resources, Tools
- Pricing: Free · License: Apache-2.0
- Open source: yes
- Works with: Framework agnostic, MCP, Playwright

## What it is

Microsoft's Playwright MCP server lets a coding agent open pages, click, type, take screenshots and read the accessibility tree of a running site. For design work this means the agent can look at its own output, check responsive layouts, and iterate on what it sees rather than what it guesses.

## Why it's here

The most underused design tool for agents. "Take a screenshot at 375px wide and fix anything that overflows" is a prompt that only works if the agent can actually look.

## Best for

- visual QA by the agent
- responsive checks
- accessibility tree inspection
- iterating on design

## Links

- Website: https://github.com/microsoft/playwright-mcp
- GitHub: https://github.com/microsoft/playwright-mcp

## Can my agent use this?

Yes, this is built for agents. Add it to your client, then ask the agent to open your dev server, screenshot pages at several widths, and fix what it sees.

Agent friendliness: Excellent. Public docs, public source or an installable package. An agent can read, install and implement this directly.
Access methods: MCP, GitHub, npm, Docs.
Install: `claude mcp add playwright -- npx @playwright/mcp@latest`

## Prompt to hand your agent

```text
Set up and use Playwright MCP in this project.

What it is: Give your agent a browser so it can see and test what it built.

Website: https://github.com/microsoft/playwright-mcp
GitHub: https://github.com/microsoft/playwright-mcp
Install: claude mcp add playwright -- npx @playwright/mcp@latest

Use it specifically for:
- visual QA by the agent
- responsive checks
- accessibility tree inspection
- iterating on design

How you can access it: MCP, GitHub, npm, Docs.
Works with: Framework agnostic.
License: Apache-2.0. Respect it.

Follow the official setup instructions above. Once available, use it when it is relevant to the task rather than by default, and tell me what it changed.
```

## Related

- [Chrome DevTools MCP](https://dontmakeitugly.com/resources/chrome-devtools-mcp.md): Let your agent inspect, debug and profile a live Chrome tab.
- [Checklist Design](https://dontmakeitugly.com/resources/checklist-design.md): Checklists of what every common screen and component should include.
- [DesignMD](https://dontmakeitugly.com/resources/designmd.md): Point it at a URL and it extracts that site's design system as a DESIGN.md.
- [DESIGNMD by Hyperbrowser](https://dontmakeitugly.com/resources/hyperbrowser-designmd.md): A single-purpose tool that extracts a DESIGN.md from any URL you give it.

## In collections

- [Best resources for designing with Claude Code](https://dontmakeitugly.com/collections/building-with-claude-code.md)

Playwright MCP is an independent resource listed by Don't Make It Ugly. We link to it; we aren't affiliated with it. Pricing and licence details are as understood at the time of listing; check the official site.