show cli examples in welcome
This commit is contained in:
Tommy D. Rossi
+57
-77
@@ -3,7 +3,7 @@
|
|||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8" />
|
<meta charset="UTF-8" />
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
<title>Welcome to Playwriter MCP</title>
|
<title>Welcome to Playwriter</title>
|
||||||
<style>
|
<style>
|
||||||
:root {
|
:root {
|
||||||
--color-bg: #ffffff;
|
--color-bg: #ffffff;
|
||||||
@@ -146,32 +146,6 @@
|
|||||||
flex: 1;
|
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 {
|
footer {
|
||||||
margin-top: 3rem;
|
margin-top: 3rem;
|
||||||
padding-top: 2rem;
|
padding-top: 2rem;
|
||||||
@@ -185,24 +159,30 @@
|
|||||||
<body>
|
<body>
|
||||||
<main>
|
<main>
|
||||||
<section>
|
<section>
|
||||||
<h2>Getting Started with Playwriter MCP</h2>
|
<h2>Getting Started with Playwriter</h2>
|
||||||
|
|
||||||
<p>
|
<p>
|
||||||
Control your browser via extension instead of spawning a full new
|
Control your browser via Playwright API. Uses extension + CLI. No
|
||||||
Chrome window. Uses less context window by running Playwright CDP
|
context bloat.
|
||||||
protocol directly. Collaborate with your agent and help get it
|
|
||||||
unstuck when needed.
|
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
<h3>Quick Start</h3>
|
<h3>Installation</h3>
|
||||||
|
|
||||||
<div class="step">
|
<div class="step">
|
||||||
<span class="step-number">1</span>
|
<span class="step-number">1</span>
|
||||||
<div class="step-content">
|
<div class="step-content">
|
||||||
<strong>Pin this extension on Chrome toolbar</strong>
|
<strong>Install the extension</strong>
|
||||||
<p>
|
<p>
|
||||||
Click the puzzle icon in your Chrome toolbar and pin the
|
Add the Playwriter extension from the Chrome Web Store.
|
||||||
Playwriter MCP extension for easy access.
|
</p>
|
||||||
|
<p>
|
||||||
|
<a
|
||||||
|
href="https://chromewebstore.google.com/detail/playwriter-mcp/jfeammnjpkecdekppnclgkkffahnhfhe"
|
||||||
|
target="_blank"
|
||||||
|
rel="noopener noreferrer"
|
||||||
|
>
|
||||||
|
Open Chrome Web Store
|
||||||
|
</a>
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -210,11 +190,9 @@
|
|||||||
<div class="step">
|
<div class="step">
|
||||||
<span class="step-number">2</span>
|
<span class="step-number">2</span>
|
||||||
<div class="step-content">
|
<div class="step-content">
|
||||||
<strong>Click the extension icon</strong>
|
<strong>Enable a tab</strong>
|
||||||
<p>
|
<p>
|
||||||
Click the Playwriter MCP extension icon in your browser toolbar
|
Click the extension icon on a tab. It turns green when connected.
|
||||||
to attach the debugger to the current tab. The icon will turn
|
|
||||||
green when successfully connected.
|
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -222,46 +200,32 @@
|
|||||||
<div class="step">
|
<div class="step">
|
||||||
<span class="step-number">3</span>
|
<span class="step-number">3</span>
|
||||||
<div class="step-content">
|
<div class="step-content">
|
||||||
<strong>Add the MCP to your agent</strong>
|
<strong>Install the CLI and run a command</strong>
|
||||||
<p>
|
<p>
|
||||||
Add the following configuration to your MCP client settings (e.g.,
|
Install the CLI and start automating the browser:
|
||||||
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.
|
|
||||||
</p>
|
</p>
|
||||||
|
<pre><code>npm i -g playwriter
|
||||||
|
playwriter -s 1 -e "await page.goto('https://example.com')"</code></pre>
|
||||||
</div>
|
</div>
|
||||||
</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>
|
||||||
|
|
||||||
<section>
|
<section>
|
||||||
@@ -308,6 +272,22 @@
|
|||||||
</p>
|
</p>
|
||||||
</section>
|
</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>
|
<section>
|
||||||
<h2>Need Help?</h2>
|
<h2>Need Help?</h2>
|
||||||
|
|
||||||
@@ -326,7 +306,7 @@
|
|||||||
|
|
||||||
<footer>
|
<footer>
|
||||||
<p>
|
<p>
|
||||||
Playwriter MCP © Microsoft Corporation · Licensed under
|
Playwriter © Microsoft Corporation · Licensed under
|
||||||
Apache-2.0
|
Apache-2.0
|
||||||
</p>
|
</p>
|
||||||
</footer>
|
</footer>
|
||||||
|
|||||||
Reference in New Issue
Block a user