Playwright MCP Server Example

This project provides an example Model Context Protocol (MCP) server that integrates with Playwright to offer browser automation capabilities, specifically code generation and a prompt for creating user manuals.

Overview

The server exposes:

1. A Tool: playwright_codegen - Launches the Playwright Codegen UI to record browser interactions and generates a Playwright script.
2. A Prompt: create_manual_from_codegen - Guides an LLM (or user) through the process of using the playwright_codegen tool to record actions for a web feature and then generating a step-by-step user manual based on the recorded script.

It communicates over standard input/output (stdio), making it easy to integrate with MCP clients.

Prerequisites

• Node.js: Version 16 or later recommended.
• npm or yarn: For package management.
• Playwright Browsers: The server uses Playwright, which requires browser binaries. You might need to install them initially:

  npx playwright install

Installation

1. Clone the repository (if applicable):

   # git clone <your-repo-url>
   # cd <your-repo-directory>

2. Install dependencies:

   npm install
   # or
   # yarn install

Running the Server

Since the server is written in TypeScript, you can run it directly using ts-node or compile it first.

Using ts-node:

npx ts-node playwright/index.ts

Compiling and Running:

1. Add a build script to your package.json (if you don't have one):

   "scripts": {
     "build": "tsc",
     "start": "node dist/playwright/index.js"
     // ... other scripts
   }

2. Configure your tsconfig.json appropriately (e.g., set "outDir": "./dist").
3. Compile the TypeScript code:

   npm run build

4. Run the compiled JavaScript:

   npm start

The server will start and listen for MCP requests on stdin/stdout.

Capabilities

Tools

• playwright_codegen
  • Description: Starts Playwright codegen to record browser interactions and generate scripts.
  • Arguments:
    • url (string, optional): The URL to start the codegen browser window with.
  • Output: Returns the generated Playwright TypeScript code as text content upon successful completion after the codegen window is closed.
  • Note: This tool executes npx playwright codegen directly and requires user interaction with the opened browser window.

Prompts

• create_manual_from_codegen
  • Description: Generates a step-by-step user manual for a website feature by recording actions with Playwright codegen, analyzing the script, and producing human-readable instructions.
  • Arguments: None directly to the prompt itself (it uses the playwright_codegen tool).
  • Workflow: When a client requests this prompt using prompts/get, the server returns an initial message outlining the steps:
    1. Use the playwright_codegen tool (potentially providing a starting URL).
    2. The user interacts with the codegen browser to record the desired actions.
    3. The tool returns the generated script.
    4. The LLM/client analyzes the script, removes unnecessary steps, and formats the essential actions into a user-friendly manual.

Usage with an MCP Client

A typical interaction flow with an MCP client (like an AI assistant) would be:

1. The client connects to the running server.
2. The client (or user) lists available prompts (prompts/list) and discovers create_manual_from_codegen.
3. The client requests the prompt details (prompts/get with name: "create_manual_from_codegen").
4. The server responds with the initial message explaining the task.
5. The client/LLM proceeds with the task, likely involving a call to the playwright_codegen tool (tool/call).
6. The user interacts with the Playwright Codegen window that appears.
7. Once the codegen window is closed, the tool returns the script content to the client.
8. The client/LLM processes the script and generates the final user manual.

npx @modelcontextprotocol/inspector node dist/index.js --> 이 명령어로 mcp 테스트 가능

description 수정으로 LLM이 툴 사용을 무조건 우선하게 할것. codegen 진행 중간중간에 snapshot 및 동작 하이라이트 넣을것. manual에 playwright 코드와 사진 함께 넣을것. 유저가 manual 확인할 시 유저에게 메뉴얼 시연 보여주면 좋을 지 물어볼 것.