From 81988c3305bb76fd9230c1177285edf5abc574c8 Mon Sep 17 00:00:00 2001
From: "Tommy D. Rossi" <beats.by.morse@gmail.com>
Date: Tue, 27 Jan 2026 13:29:03 +0100
Subject: [PATCH] show cli examples in welcome

---
 extension/src/welcome.html | 134 ++++++++++++++++---------------------
 1 file changed, 57 insertions(+), 77 deletions(-)
diff --git a/extension/src/welcome.html b/extension/src/welcome.html
index 62214b3..e79bdaf 100644
--- a/extension/src/welcome.html
+++ b/extension/src/welcome.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Welcome to Playwriter MCP</title>
+    <title>Welcome to Playwriter</title>
     <style>
       :root {
         --color-bg: #ffffff;
@@ -146,32 +146,6 @@
         flex: 1;
       }
 
-      .install-button {
-        display: inline-flex;
-        align-items: center;
-        gap: 0.5rem;
-        padding: 0.5rem 1rem;
-        background-color: #262626;
-        color: #fff;
-        border-radius: 0.5rem;
-        text-decoration: none;
-        transition: background-color 0.15s;
-        font-size: 0.875rem;
-        font-weight: 500;
-        margin-top: 0.5rem;
-      }
-
-      .install-button:hover {
-        background-color: #404040;
-        color: #fff;
-        text-decoration: none;
-      }
-
-      .install-button svg {
-        width: 1.25rem;
-        height: 1.25rem;
-      }
-
       footer {
         margin-top: 3rem;
         padding-top: 2rem;
@@ -185,24 +159,30 @@
   <body>
     <main>
       <section>
-        <h2>Getting Started with Playwriter MCP</h2>
+        <h2>Getting Started with Playwriter</h2>
 
         <p>
-          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.
+          Control your browser via Playwright API. Uses extension + CLI. No
+          context bloat.
         </p>
 
-        <h3>Quick Start</h3>
+        <h3>Installation</h3>
 
         <div class="step">
           <span class="step-number">1</span>
           <div class="step-content">
-            <strong>Pin this extension on Chrome toolbar</strong>
+            <strong>Install the extension</strong>
             <p>
-              Click the puzzle icon in your Chrome toolbar and pin the
-              Playwriter MCP extension for easy access.
+              Add the Playwriter extension from the Chrome Web Store.
+            </p>
+            <p>
+              <a
+                href="https://chromewebstore.google.com/detail/playwriter-mcp/jfeammnjpkecdekppnclgkkffahnhfhe"
+                target="_blank"
+                rel="noopener noreferrer"
+              >
+                Open Chrome Web Store
+              </a>
             </p>
           </div>
         </div>
@@ -210,11 +190,9 @@
         <div class="step">
           <span class="step-number">2</span>
           <div class="step-content">
-            <strong>Click the extension icon</strong>
+            <strong>Enable a tab</strong>
             <p>
-              Click the Playwriter MCP extension icon in your browser toolbar
-              to attach the debugger to the current tab. The icon will turn
-              green when successfully connected.
+              Click the extension icon on a tab. It turns green when connected.
             </p>
           </div>
         </div>
@@ -222,46 +200,32 @@
         <div class="step">
           <span class="step-number">3</span>
           <div class="step-content">
-            <strong>Add the MCP to your agent</strong>
+            <strong>Install the CLI and run a command</strong>
             <p>
-              Add the following configuration to your MCP client settings (e.g.,
-              Claude Desktop's <code>claude_desktop_config.json</code>):
-            </p>
-            <pre><code>{
-  "mcpServers": {
-    "playwriter": {
-      "command": "npx",
-      "args": [
-        "-y",
-        "playwriter@latest"
-      ]
-    }
-  }
-}</code></pre>
-            <p>
-              Or install directly in Cursor:
-            </p>
-            <a
-              href="https://cursor.com/en/install-mcp?name=playwriter&config=eyJjb21tYW5kIjoibnB4IiwiYXJncyI6WyJwbGF5d3JpdGVyQGxhdGVzdCJdfQ%3D%3D"
-              target="_blank"
-              rel="noopener noreferrer"
-              class="install-button"
-            >
-              <svg viewBox="0 0 466.73 533.32" xmlns="http://www.w3.org/2000/svg">
-                <path d="m233.37 266.66 231.16 133.46c-1.42 2.46-3.48 4.56-6.03 6.03l-216.06 124.74c-5.61 3.24-12.53 3.24-18.14 0l-216.06-124.74c-2.55-1.47-4.61-3.57-6.03-6.03z" fill="#72716d"/>
-                <path d="m233.37 0v266.66l-231.16 133.46c-1.42-2.46-2.21-5.3-2.21-8.24v-250.44c0-5.89 3.14-11.32 8.24-14.27l216.05-124.74c2.81-1.62 5.94-2.43 9.07-2.43z" fill="#55544f"/>
-                <path d="m464.52 133.2c-1.42-2.46-3.48-4.56-6.03-6.03l-216.06-124.74c-2.8-1.62-5.93-2.43-9.06-2.43v266.66l231.16 133.46c1.42-2.46 2.21-5.3 2.21-8.24v-250.44c0-2.95-.78-5.77-2.21-8.24z" fill="#43413c"/>
-                <path d="m448.35 142.54c1.31 2.26 1.49 5.16 0 7.74l-209.83 363.42c-1.41 2.46-5.16 1.45-5.16-1.38v-239.48c0-1.91-.51-3.75-1.44-5.36l216.42-124.95h.01z" fill="#d6d5d2"/>
-                <path d="m448.35 142.54-216.42 124.95c-.92-1.6-2.26-2.96-3.92-3.92l-207.39-119.74c-2.46-1.41-1.45-5.16 1.38-5.16h419.65c2.98 0 5.4 1.61 6.7 3.87z" fill="#fff"/>
-              </svg>
-              Install in Cursor
-            </a>
-            <p style="margin-top: 1rem;">
-              This will enable your AI assistant to control the browser through
-              the extension.
+              Install the CLI and start automating the browser:
             </p>
+            <pre><code>npm i -g playwriter
+playwriter -s 1 -e "await page.goto('https://example.com')"</code></pre>
           </div>
         </div>
+
+        <div class="step">
+          <span class="step-number">4</span>
+          <div class="step-content">
+            <strong>Add the skill to your agent</strong>
+            <p>
+              Install the Playwriter skill so your agent can call the CLI:
+            </p>
+            <pre><code>npx -y skills add remorses/playwriter</code></pre>
+          </div>
+        </div>
+
+        <h3>Quick Start (CLI)</h3>
+
+        <pre><code>playwriter session new  # creates stateful sandbox, outputs session id (e.g. 1)
+playwriter -s 1 -e "await page.goto('https://example.com')"
+playwriter -s 1 -e "console.log(await accessibilitySnapshot({ page }))"
+playwriter -s 1 -e "await page.locator('aria-ref=e5').click()"</code></pre>
       </section>
 
       <section>
@@ -308,6 +272,22 @@
         </p>
       </section>
 
+      <section>
+        <h2>MCP Setup (Optional)</h2>
+
+        <p>
+          The CLI is the recommended way to use Playwriter. If you need MCP
+          server setup, auto-configure it with:
+        </p>
+
+        <pre><code>npx -y @playwriter/install-mcp playwriter@latest</code></pre>
+
+        <p>
+          For full MCP instructions, see
+          <a href="https://github.com/remorses/playwriter/blob/main/MCP.md" target="_blank" rel="noopener noreferrer">MCP.md</a>.
+        </p>
+      </section>
+
       <section>
         <h2>Need Help?</h2>
 
@@ -326,7 +306,7 @@
 
       <footer>
         <p>
-          Playwriter MCP &copy; Microsoft Corporation &middot; Licensed under
+          Playwriter &copy; Microsoft Corporation &middot; Licensed under
           Apache-2.0
         </p>
       </footer>
