Playwright MCP Details
Playwright MCP server. A Model Context Protocol (MCP) server that provides browser automation capabilities using Playwright. This server enables large language models (LLMs) to interact with web pages through structured accessibility snapshots, bypassing the need for screenshots or visually-tuned models. The server is designed to be fast, lightweight, and deterministic, offering LLM-friendly tooling and a rich set of browser automation capabilities via MCP tools. It supports standalone operation, containerized deployments, and integration with a variety of MCP clients (Claude Desktop, VS Code, Copilot, Cursor, Goose, Windsurf, and others).
Use Case
The Playwright MCP server exposes a suite of MCP tools that enable an LLM to perform browser automation tasks programmatically without relying on pixel-based input or screenshots. Users configure the server with a standard JSON config, launch it via npx @playwright/mcp@latest, and then invoke the available tools from their MCP client to interact with web pages. Example: configuring the server in a central config file and starting it with npx, then integrating with clients like VS Code or Claude Desktop. Example configurations from the docs include:
{
"mcpServers": {
"playwright": {
"command": "npx",
"args": ["@playwright/mcp@latest"]
}
}
}amp mcp add playwright -- npx @playwright/mcp@latestclaude mcp add playwright npx @playwright/mcp@latestcodex mcp add playwright npx "@playwright/mcp@latest"{
"mcpServers": {
"playwright": {
"type": "local",
"command": "npx",
"tools": ["*"] ,
"args": ["@playwright/mcp@latest"]
}
}
}<h1 class="text-2xl font-semibold mt-5 mb-3">For VS Code</h1>
code --add-mcp '{"name":"playwright","command":"npx","args":["@playwright/mcp@latest"]}'{
"mcpServers": {
"playwright": {
"command": "docker",
"args": ["run", "-i", "--rm", "--init", "--pull=always", "mcr.microsoft.com/playwright/mcp"]
}
}
}These examples show how to configure and connect various MCP clients to the Playwright MCP server. Once configured, you can call tools such as browser_click, browser_type, browser_navigate, and many others to interact with pages in a structured, programmable way. The configuration also supports advanced options like --isolated, --storage-state for state persistence, and --config to supply a JSON configuration file for the server.
Available Tools (26)
Examples & Tutorials
Real example usage patterns directly from the docs:
1) Standard config snippet for starting Playwright MCP with the latest release (VS Code style):
{
"mcpServers": {
"playwright": {
"command": "npx",
"args": ["@playwright/mcp@latest"]
}
}
}2) VS Code install command (integrate with Copilot/VSC):
<h1 class="text-2xl font-semibold mt-5 mb-3">For VS Code</h1>
code --add-mcp '{"name":"playwright","command":"npx","args":["@playwright/mcp@latest"]}'3) AMP CLI setup example:
amp mcp add playwright -- npx @playwright/mcp@latest4) Claude Code CLI usage:
claude mcp add playwright npx @playwright/mcp@latest5) Docker-based standalone server config:
{
"mcpServers": {
"playwright": {
"command": "docker",
"args": ["run", "-i", "--rm", "--init", "--pull=always", "mcr.microsoft.com/playwright/mcp"]
}
}
}6) Example with storage state and isolated mode (from User Profile):
{
"mcpServers": {
"playwright": {
"command": "npx",
"args": ["@playwright/mcp@latest", "--isolated", "--storage-state={path/to/storage.json}"]
}
}
}Installation Guide
Step-by-step installation instructions with actual commands from the documentation:
{
"mcpServers": {
"playwright": {
"command": "npx",
"args": ["@playwright/mcp@latest"]
}
}
}amp mcp add playwright -- npx @playwright/mcp@latestclaude mcp add playwright npx @playwright/mcp@latestcodex mcp add playwright npx "@playwright/mcp@latest"{
"mcpServers": {
"playwright": {
"type": "local",
"command": "npx",
"tools": ["*"] ,
"args": ["@playwright/mcp@latest"]
}
}
}Go to Advanced settings -> Extensions -> Add custom extension. Name to your liking, use type STDIO, and set the command to npx @playwright/mcp.Go to Program -> Install -> Edit mcp.json. Use the standard config above.{
"$schema": "https://opencode.ai/config.json",
"mcp": {
"playwright": {
"type": "local",
"command": ["npx", "@playwright/mcp@latest"],
"enabled": true
}
}
}droid mcp add playwright "npx @playwright/mcp@latest"Integration Guides
Frequently Asked Questions
Is this your MCP?
Claim ownership and get verified badge
Sponsored
Notes and limitations from the docs:
Node.js 18 or newer; VS Code, Cursor, Windsurf, Claude Desktop, Goose or any other MCP client
Compare Alternatives
Similar MCP Tools
9 related toolsGraphiti MCP Server
Graphiti MCP Server is an experimental implementation that exposes Graphiti's real-time, temporally-aware knowledge graph capabilities through the MCP (Model Context Protocol) interface. It enables AI agents and MCP clients to interact with Graphiti's knowledge graph for structured extraction, reasoning, and memory across conversations, documents, and enterprise data. The server supports multiple backends (FalkorDB by default and Neo4j), a variety of LLM providers (OpenAI, Anthropic, Gemini, Groq, Azure OpenAI), and multiple embedder options, all accessible via an HTTP MCP endpoint at /mcp/ for broad client compatibility. It also includes queue-based asynchronous episode processing, rich entity types for structured data, and flexible configuration through config.yaml, environment variables, or CLI arguments.
Context7 MCP Server
Context7 MCP Server delivers up-to-date, code-first documentation and examples for LLMs and AI code editors by pulling content directly from the source. It supports multiple MCP clients and exposes tools that help you resolve library IDs and retrieve library documentation, ensuring prompts use current APIs and usage patterns. The repository provides installation and integration guides for Cursor, Claude Code, Opencode, and other clients, along with practical configuration samples and OAuth options for remote HTTP connections. This MCP server is designed to keep prompts in sync with the latest library docs, reducing hallucinations and outdated code snippets.
TrendRadar MCP
TrendRadar MCP is an AI-driven Model Context Protocol (MCP) based analysis server that exposes a suite of specialized tools for cross-platform news analysis, trend tracking, and intelligent push notifications. It integrates with TrendRadar’s multi-platform data aggregation (RSS and trending topics) and provides advanced AI-powered insights, sentiment analysis, and cross-platform correlation. The MCP server enables developers to query, analyze, and compare news across platforms using a consistent toolset, with ongoing updates that expand capabilities such as RSS querying, date parsing, and multi-date trend analysis. This documentation references the MCP module updates, tool additions, and architecture changes that enhance extensibility, cross-platform data handling, and AI-assisted reporting.
ChainAware Behavioural Prediction MCP
The ChainAware Behavioural Prediction MCP is an MCP-based server that provides AI-powered tools to analyze wallet behaviour prediction, fraud detection, and rug pull prediction. Designed for Web3 security and DeFi analytics, it enables developers and platforms to integrate risk assessment, predictive wallet behavior insights, and rug-pull detection through MCP-compatible clients. The server exposes three specialized tools and uses Server-Sent Events (SSE) for real-time responses, helping safeguard DeFi users, monitor liquidity risks, and score wallet or contract trustworthiness. Access to production endpoints is API-key gated, reflecting a private backend architecture that supports secure, scalable risk analytics across wallets, contracts, and pools.
Sequential Thinking MCP Server
Sequential Thinking MCP Server provides a dedicated MCP tool that guides problem-solving through a structured, step-by-step thinking process. It supports dynamic adjustment of the number of thoughts and allows revision and branching within a controlled workflow, making it ideal for complex analysis and solution hypothesis development. This server is designed to register a single tool, sequential_thinking, and is integrated with common MCP deployment methods (NPX, Docker) as well as editor integrations like Claude Desktop and VS Code for quick setup. The documentation provides exact configuration snippets, usage patterns, and building instructions to help you deploy and use the MCP server effectively, including Codex CLI, NPX, and Docker installation examples.
N8N MCP Server
An MCP (Model Context Protocol) server designed to integrate Claude Desktop, Claude Code, Windsurf, and Cursor with n8n workflows. This MCP enables users to build, test, and orchestrate complex workflows by exposing a set of tools that bridge Claude’s capabilities with n8n’s automation platform. The project emphasizes robust trigger handling, multi-tenant readiness, and progressive documentation to help developers understand how tools map to real-world workflow tasks. It also outlines future tooling integration points (such as getNodeEssentials and getNodeInfo) to further enhance node-structure awareness within MCP-powered automations.
Hugging Face MCP Server
Hugging Face Official MCP Server connects your large language models (LLMs) to the Hugging Face Hub and thousands of Gradio AI Applications, enabling seamless MCP (Model Context Protocol) integration across multiple transports. It supports STDIO, SSE (to be deprecated but still commonly deployed), StreamableHTTP, and StreamableHTTPJson, with the Web Application allowing dynamic tool management and status updates. This MCP server is designed to be run locally or in Docker, and it provides integrations with Claude Desktop, Claude Code, Gemini CLI (and its extension), VSCode, and Cursor, making it easy to configure and manage MCP-enabled tools and endpoints. Tools such as hf_doc_search and hf_doc_fetch can be enabled to enhance document discovery, and an optional Authenticate tool can be included to handle OAuth challenges when called.
Shadcn UI MCP Server v4
Shadcn UI v4 MCP Server is an advanced MCP (Model Context Protocol) server designed to give AI assistants comprehensive access to shadcn/ui v4 components, blocks, demos, and metadata. It enables multi-framework support (React, Svelte, Vue, and React Native) with fast, cache-friendly access to component source code, demos, and directory structures, empowering AI-driven development workflows. The project emphasizes production-readiness with Docker Compose, SSE transport for multi-client deployments, and smart caching to optimize GitHub API usage while providing rich metadata and usage patterns for rapid prototyping and learning across frameworks.
Figma MCP server
The Figma MCP server enables design context delivery from Figma files to AI agents and code editors, empowering teams to generate code directly from design selections. It supports both a remote hosted server and a locally hosted desktop server, allowing seamless integration with popular editors through Code Connect and a suite of tools that extract design context, metadata, variables, and more. This guide covers enabling the MCP server, configuring clients (VS Code, Cursor, Claude Code, and others), and using a curated set of MCP tools to fetch structured design data for faster, more accurate code generation. It also explains best practices, prompts, and integration workflows that help teams align generated output with their design systems. The documentation includes concrete JSON examples for configuring servers in editors like VS Code and Cursor, as well as command examples for Claude Code integration and plugin installation.