🚀 Unleashing LLMs with Playwright: A Model Context Protocol (MCP) Server for Dynamic Web Interactions 🌐

This document details a powerful MCP server that seamlessly integrates the Playwright web automation library, enabling Large Language Models (LLMs) to interact with and extract information from dynamic web content. By leveraging the Model Context Protocol, this server provides a standardized interface for LLMs to access Playwright's capabilities, opening up a world of possibilities for AI-powered web applications.

Core Components: Resources, Prompts, and Tools

This Playwright MCP server is structured around three key components: resources, prompts, and tools, each designed to enhance the LLM's ability to understand and interact with web environments.

📚 Resources: Note Storage System

The server incorporates a simple note storage system, providing a persistent memory for the LLM. This system utilizes a custom note:// URI scheme for accessing individual notes, each containing:

• Name: A unique identifier for the note.
• Description: A brief summary of the note's content.
• Content: The main text of the note, formatted as text/plain.

💡 Prompts: Summarization Engine

The server offers a single, powerful prompt: summarize-notes. This prompt enables the LLM to generate summaries of all stored notes, providing a consolidated view of the available information.

• Style Argument: The style argument (optional) allows control over the level of detail in the summary (brief or detailed).
• Dynamic Prompt Generation: The prompt dynamically combines the content of all current notes with the specified style preference, ensuring the LLM has the most relevant context.

🛠️ Tools: Playwright Web Automation Suite

The heart of this MCP server lies in its comprehensive suite of Playwright tools, enabling the LLM to perform a wide range of web interactions:

• playwright_navigate: Navigates to a specified URL. Automatically creates a new session if none exists.
  • Argument: url (string) - The URL to navigate to.
• playwright_screenshot: Captures a screenshot of the current page or a specific element.
  • Argument: name (string) - The filename for the screenshot.
  • Optional Argument: selector (string) - A CSS selector for the element to screenshot. If omitted, a full-page screenshot is taken.
• playwright_click: Clicks an element on the page using a CSS selector.
  • Argument: selector (string) - The CSS selector for the element to click.
• playwright_fill: Fills out an input field.
  • Argument: selector (string) - The CSS selector for the input field.
  • Argument: value (string) - The value to fill the input field with.
• playwright_evaluate: Executes JavaScript code in the browser console.
  • Argument: script (string) - The JavaScript code to execute.
• playwright_click_text: Clicks an element on the page by its text content.
  • Argument: text (string) - The text content of the element to click.
• playwright_get_text_content: Retrieves the text content of all visible elements on the page.
• playwright_get_html_content: Retrieves the HTML content of a specific element on the page.
  • Argument: selector (string) - The CSS selector for the element.

⚙️ Configuration

[TODO: Add configuration details specific to your implementation]

🚀 Quickstart

Installation

To integrate this MCP server with your LLM application, you'll need to configure it within your LLM environment. Here's how to configure it for Claude Desktop:

Claude Desktop Configuration

• MacOS: ~/Library/Application\ Support/Claude/claude_desktop_config.json
• Windows: %APPDATA%/Claude/claude_desktop_config.json

"mcpServers": {
  "playwright-server": {
    "command": "uv",
    "args": [
      "--directory",
      "C:\\path\\to\\your\\playwright-server",
      "run",
      "playwright-server"
    ]
  }
}

"mcpServers": {
  "playwright-server": {
    "command": "uvx",
    "args": [
      "playwright-server"
    ]
  }
}

🛠️ Development

Building and Publishing

To contribute to the development of this MCP server or to publish your own version, follow these steps:

1. Sync Dependencies and Update Lockfile:

   uv sync

2. Build Package Distributions:

   uv build

   This will generate source and wheel distributions in the dist/ directory.

3. Publish to PyPI:

   uv publish

   Note: You'll need to configure your PyPI credentials using environment variables or command flags:

   • Token: --token or UV_PUBLISH_TOKEN
   • Username/Password: --username/UV_PUBLISH_USERNAME and --password/UV_PUBLISH_PASSWORD

🐞 Debugging

Debugging MCP servers that communicate over standard input/output (stdio) can be challenging. To streamline the debugging process, we highly recommend using the MCP Inspector.

You can launch the MCP Inspector using npm:

npx @modelcontextprotocol/inspector uv --directory C:\Users\YUNYING\Documents\project\python\mcp\playwright-server run playwright-server

After launching, the Inspector will provide a URL that you can access in your browser to begin debugging your Playwright MCP server. This tool provides invaluable insights into the communication between your LLM and the server, enabling you to quickly identify and resolve any issues.