diff --git a/extension-playwright/welcome.html b/extension-playwright/welcome.html index f5b7c50..817f6c8 100644 --- a/extension-playwright/welcome.html +++ b/extension-playwright/welcome.html @@ -127,21 +127,13 @@ - .info-box { - background-color: var(--color-code-bg); - border-left: 4px solid var(--color-link); - padding: 1rem; - margin-bottom: 1rem; - border-radius: 4px; - } - .step-number { color: var(--color-link); font-weight: 700; font-size: 1.125rem; margin-right: 0.75rem; flex-shrink: 0; - line-height: 1; + line-height: 1.6; } .step { @@ -170,26 +162,21 @@

Getting Started with Playwriter MCP

- Playwriter MCP enables Playwright to connect to your existing Chrome - instance without requiring Chrome to be started in CDP mode. This - allows AI assistants and automation tools to interact with your - browser seamlessly through the Model Context Protocol. + Control your browser via extension instead of spawning a full new + Chrome window. Uses less context window by running Playwright CDP + protocol directly. Collaborate with your agent and help get it + unstuck when needed.

-
- Prerequisites: You need Node.js installed on your - system to run the Playwriter MCP server. -
-

Quick Start

1
- Navigate to any webpage + Pin this extension on Chrome toolbar

- Open a tab with the website you want to control via MCP. This - could be any URL you want to automate or interact with. + Click the puzzle icon in your Chrome toolbar and pin the + Playwriter MCP extension for easy access.

@@ -209,27 +196,24 @@
3
- Run the Playwriter MCP server + Add the MCP to your agent

- Open your terminal and run the following command to start the MCP - server: + Add the following configuration to your MCP client settings (e.g., + Claude Desktop's claude_desktop_config.json):

-
npx playwriter
+
{
+  "mcpServers": {
+    "playwriter": {
+      "command": "npx",
+      "args": [
+        "playwriter"
+      ]
+    }
+  }
+}

- This will start the relay server that bridges the extension with - your MCP client. -

-
-
- -
- 4 -
- Connect your MCP client -

- Your MCP client (like Claude Desktop or other AI assistants) can - now connect to the browser and control it using Playwright - commands. + This will enable your AI assistant to control the browser through + the extension.