show cli examples in welcome
This commit is contained in:
Tommy D. Rossi
+57
-77
@@ -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 © Microsoft Corporation · Licensed under
|
||||
Playwriter © Microsoft Corporation · Licensed under
|
||||
Apache-2.0
|
||||
</p>
|
||||
</footer>
|
||||
|
||||
Reference in New Issue
Block a user