drio
Open app

playwright-mcp-fetch

Source

This tool provides a Model Context Protocol (MCP) server for fetching content from websites and converting it to different formats using Playwright.

Catalog onlyCatalog onlySTDIO

Overview

playwright-mcp-fetch is a tool that provides a Model Context Protocol (MCP) server for fetching content from websites and converting it into various formats using Playwright.

To use playwright-mcp-fetch, install it via pip, run the server, and access its endpoints to fetch content in different formats.

  • Fetch raw HTML content from websites. - Convert fetched content to Markdown format. - Retrieve plain text content with HTML tags removed. - Parse and fetch JSON content from websites.
  1. Web scraping for data extraction.
  2. Converting web content into Markdown for documentation.
  3. Fetching and processing JSON data from APIs.

Add to your AI client

Use these steps to connect playwright-mcp-fetch in Cursor, Claude, VS Code, and other MCP-compatible apps. The same JSON appears in the Use with menu above for one-click copy.

Cursor

Add this to your .cursor/mcp.json file in your project root, then restart Cursor.

.cursor/mcp.json

{
  "mcpServers": {
    "playwright-mcp-fetch-kevinwatt": {
      "command": "npx",
      "args": [
        "-y",
        "@modelcontextprotocol/server-playwright-mcp-fetch-kevinwatt"
      ]
    }
  }
}

Claude Desktop

Add this server entry to the mcpServers object in your Claude Desktop config, then restart the app.

~/Library/Application Support/Claude/claude_desktop_config.json (macOS) or %APPDATA%\Claude\claude_desktop_config.json (Windows)

{
  "mcpServers": {
    "playwright-mcp-fetch-kevinwatt": {
      "command": "npx",
      "args": [
        "-y",
        "@modelcontextprotocol/server-playwright-mcp-fetch-kevinwatt"
      ]
    }
  }
}

Claude Code

Add this to your project's .mcp.json file. Claude Code will detect it automatically.

.mcp.json (project root)

{
  "mcpServers": {
    "playwright-mcp-fetch-kevinwatt": {
      "command": "npx",
      "args": [
        "-y",
        "@modelcontextprotocol/server-playwright-mcp-fetch-kevinwatt"
      ]
    }
  }
}

VS Code (Copilot)

Add this to your .vscode/mcp.json file. Requires the GitHub Copilot extension with MCP support enabled.

.vscode/mcp.json

{
  "servers": {
    "playwright-mcp-fetch-kevinwatt": {
      "type": "stdio",
      "command": "npx",
      "args": [
        "-y",
        "@modelcontextprotocol/server-playwright-mcp-fetch-kevinwatt"
      ]
    }
  }
}

Windsurf

Add this to your Windsurf MCP config file, then restart Windsurf.

~/.codeium/windsurf/mcp_config.json

{
  "mcpServers": {
    "playwright-mcp-fetch-kevinwatt": {
      "command": "npx",
      "args": [
        "-y",
        "@modelcontextprotocol/server-playwright-mcp-fetch-kevinwatt"
      ]
    }
  }
}

Cline

Open Cline settings, navigate to MCP Servers, and add this server configuration.

Cline MCP Settings (via UI)

{
  "mcpServers": {
    "playwright-mcp-fetch-kevinwatt": {
      "command": "npx",
      "args": [
        "-y",
        "@modelcontextprotocol/server-playwright-mcp-fetch-kevinwatt"
      ]
    }
  }
}

FAQ

What programming language is playwright-mcp-fetch written in?

Python.

How do I install playwright-mcp-fetch?

You can install it by cloning the repository and running pip install -e .

Can I run playwright-mcp-fetch in a Docker container?

Yes! It supports Docker for easy deployment.

Developer tools