📌Overview

Purpose: To provide a versatile MCP server utilizing Playwright tools for managing and summarizing notes efficiently.

Overview: The Playwright Server MCP offers a streamlined environment for storing notes and executing browser operations seamlessly. With an intuitive note storage system, users can summarize notes and perform various web automation tasks using dedicated tools.

Key Features:

• Custom Note Storage: Implements a note:// URI scheme allowing access to individual notes, which consist of a name, description, and text/plain mimetype for structured storage.

• Summarization Tool: The summarize-notes prompt aggregates all notes and creates summaries with an adjustable detail level, enhancing information retrieval and management.

• Web Automation Tools: A range of Playwright tools (e.g., playwright_navigate, playwright_screenshot, and playwright_fill) enables users to automate actions on web pages, including navigation, taking screenshots, and filling forms, enhancing productivity and efficiency.

playwright-server MCP server

A MCP server with playwright tools.

Components

Resources

The server implements a simple note storage system with:

• Custom note:// URI scheme for accessing individual notes
• Each note resource has a name, description and text/plain mimetype

Prompts

The server provides a single prompt:

• summarize-notes: Creates summaries of all stored notes
  • Optional "style" argument to control detail level (brief/detailed)
  • Generates prompt combining all current notes with style preference

Tools

The server implements the following tools:

• playwright_navigate: Navigates to a specified URL. Automatically creates a new session if none is active.
  • Requires a url argument (string).
• playwright_screenshot: Takes a screenshot of the current page or a specific element.
  • Requires a name argument (string) for the screenshot file name.
  • Optional selector argument (string) for CSS selector; if omitted, takes a full-page screenshot.
• playwright_click: Clicks an element using a CSS selector.
  • Requires a selector argument (string).
• playwright_fill: Fills out an input field.
  • Requires selector (string) and value (string) arguments.
• playwright_evaluate: Executes JavaScript code in the browser console.
  • Requires a script argument (string).
• playwright_click_text: Clicks an element by text content.
  • Requires a text argument (string).
• playwright_get_text_content: Gets text content of all visible elements.
• playwright_get_html_content: Gets HTML content of the page or a specific element.
  • Requires a selector argument (string).

Configuration

TODO: Add configuration details specific to your implementation.

Quickstart

Install

Claude Desktop

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

"mcpServers": {
  "playwright-server": {
    "command": "uv",
    "args": [
      "--directory",
      "C:\\Users\\xxxxx\\Documents\\project\\python\\mcp\\playwright-server",
      "run",
      "playwright-server"
    ]
  }
}

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

Development

Building and Publishing

To prepare the package for distribution:

1. Sync dependencies and update lockfile:

   uv sync
   

2. Build package distributions:

   uv build
   

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

3. Publish to PyPI:

   uv publish
   

Note: Set PyPI credentials via environment variables or command flags:

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

Debugging

Since MCP servers run over stdio, debugging can be challenging. For the best debugging experience, use the MCP Inspector.

You can launch the MCP Inspector via npm with this command:

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

Once launched, the Inspector will display a URL to access in your browser for debugging.