Skip to content
don’t make it ugly
All resources

MCP serverAgent Resources, Tools

Playwright MCP

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

Staff pickUsed by meOpen sourceFree
Visit website (opens in a new tab)View GitHub (opens in a new tab)
Preview of Playwright MCP

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

Can my agent use this?

Agent excellent agent friendliness

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.

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

Related resources

  • Chrome DevTools MCP
    Preview of Chrome DevTools MCP

    Chrome DevTools MCP

    Let your agent inspect, debug and profile a live Chrome tab.

    MCP serverFreeOpen sourceexcellent agent friendliness
  • Context7
    Preview of Context7

    Context7

    An MCP server that feeds your agent current, version-specific library docs.

    MCP serverOpen sourceexcellent agent friendliness
    Staff pickUsed by me
  • Checklist Design
    Preview of Checklist Design

    Checklist Design

    Checklists of what every common screen and component should include.

    GuideFreegood agent friendliness
    Staff pick
  • 21st.dev Magic MCP
    Preview of 21st.dev Magic MCP

    21st.dev Magic MCP

    Describe a component in your agent and get a polished one generated from a large library.

    MCP serverOpen sourceexcellent agent friendliness