{"id":5475,"date":"2026-06-28T16:08:24","date_gmt":"2026-06-28T16:08:24","guid":{"rendered":"https:\/\/jonjones.ai\/uncategorized\/playwright-mcp-server-guide-2026\/"},"modified":"2026-06-28T16:08:24","modified_gmt":"2026-06-28T16:08:24","slug":"%e5%8a%87%e4%bd%9c%e5%ae%b6-mcp-%e4%bc%ba%e6%9c%8d%e5%99%a8%e6%8c%87%e5%8d%97-2026","status":"publish","type":"post","link":"https:\/\/jonjones.ai\/zh\/%e4%ba%ba%e5%b7%a5%e6%99%ba%e6%85%a7\/%e5%8a%87%e4%bd%9c%e5%ae%b6-mcp-%e4%bc%ba%e6%9c%8d%e5%99%a8%e6%8c%87%e5%8d%97-2026\/","title":{"rendered":"Playwright MCP \u4f3a\u670d\u5668\uff1a\u7d66\u4f60\u7684 AI \u4ee3\u7406\u4e00\u500b\u771f\u6b63\u7684\u700f\u89bd\u5668\uff082026 \u5e74\u7368\u7acb\u5275\u696d\u5bb6\u6307\u5357\uff09"},"content":{"rendered":"<p>If you&#8217;ve been following the MCP server wave, you already know this: Claude&#8217;s toolbox is expanding fast. But here&#8217;s the one most solopreneurs sleep on \u2014 <strong>playwright mcp server<\/strong>. It gives your AI agent a real, live browser it can actually operate. Not screenshots. Not HTML dumps. A browser. Clicking, typing, navigating, scraping \u2014 everything you do manually on the web, your agent does on autopilot.<\/p>\n\n<p>This is the guide I wish existed when I wired Playwright MCP into my own JonOps container stack. No QA jargon. No software engineering degree required. Just what it is, how to install it in five minutes, and the exact use cases that are saving me hours every week.<\/p>\n\n<h2>What Is Playwright MCP Server? (The Plain-English Version)<\/h2>\n\n<figure class=\"wp-block-image size-large\">\n  <img decoding=\"async\" src=\"https:\/\/jonjones.ai\/wp-content\/uploads\/2026\/06\/playwright-mcp-what-is-section.jpg\" alt=\"playwright mcp server\" \/>\n<\/figure>\n\n<p><a href=\"https:\/\/github.com\/microsoft\/playwright-mcp\" target=\"_blank\" rel=\"noopener\">Playwright MCP server<\/a> is Microsoft&#8217;s official bridge between Claude (or any AI agent) and a real web browser. It&#8217;s part of the <a href=\"https:\/\/jonjones.ai\/ai\/mcp-server-meaning-solopreneur-guide-2026\/\">Model Context Protocol ecosystem<\/a> \u2014 the open standard Anthropic created so AI agents can connect to external tools through a single, consistent interface.<\/p>\n\n<p>Here&#8217;s the simple version:<\/p>\n\n<ul>\n  <li><strong>Playwright<\/strong> = a browser automation library that can control Chrome, Firefox, or Safari programmatically<\/li>\n  <li><strong>MCP server<\/strong> = a plug-in that exposes tools to your AI agent in a standardized way<\/li>\n  <li><strong>Playwright MCP server<\/strong> = the combination: Claude now has browser hands<\/li>\n<\/ul>\n\n<p>What makes this different from other approaches? Most AI browser tools use screenshots \u2014 they take a picture of the screen, the model &#8220;sees&#8221; it, and responds. That&#8217;s slow, expensive (vision models cost more), and error-prone. Playwright MCP is smarter: it works through the browser&#8217;s <strong>accessibility tree<\/strong> \u2014 a structured representation of every element on the page. Claude reads the page like a map, not a photograph. Faster, cheaper, more reliable.<\/p>\n\n<p>The result: an AI agent that can navigate, click, type, fill forms, take screenshots, monitor page changes, and extract data from any website \u2014 using the same technology that powers enterprise test automation, adapted for the one-operator model.<\/p>\n\n<blockquote>\n<p><strong>JonOps receipt:<\/strong> I added Playwright MCP to my agent stack and now have it running weekly competitor pricing checks, automated form-submission tests on jonjones.ai, and fresh lead research without any manual browser work. The whole thing runs headlessly in a Docker container while I&#8217;m asleep in Taipei.<\/p>\n<\/blockquote>\n\n<h2>Why Browser Automation Is a Solopreneur Superpower<\/h2>\n\n<figure class=\"wp-block-image size-large\">\n  <img decoding=\"async\" src=\"https:\/\/jonjones.ai\/wp-content\/uploads\/2026\/06\/playwright-mcp-solopreneur-automation.jpg\" alt=\"solopreneur browser automation with AI agents\" \/>\n<\/figure>\n\n<p>Think about everything you do on the web every week. Checking competitor prices. Researching prospects. Testing whether your own contact form still works. Looking up lead info. Reviewing site analytics. Filling out onboarding forms for new tools. This is all <em>manual browser work<\/em> \u2014 and it is the biggest hidden time drain in a one-person operation.<\/p>\n\n<p>Agency owners hire VAs to do this. Enterprise teams build dedicated QA pipelines. Solopreneurs&#8230; just do it themselves, manually, repeatedly, forever.<\/p>\n\n<p>Playwright MCP server breaks that loop. When you wire it into Claude, your agent can:<\/p>\n\n<ul>\n  <li>Navigate to any URL and extract specific data<\/li>\n  <li>Click through multi-step workflows (login \u2192 navigate \u2192 scrape \u2192 export)<\/li>\n  <li>Fill and submit forms, then verify the result<\/li>\n  <li>Take screenshots for visual verification or reporting<\/li>\n  <li>Monitor pages for changes and alert you when something shifts<\/li>\n  <li>Download PDFs and files from behind paywalled pages (if you authenticate first)<\/li>\n<\/ul>\n\n<p>The compounding effect is what makes this powerful. When your AI agent can browse the web, every research task, every monitoring job, every data-collection workflow goes from &#8220;manual hour&#8221; to &#8220;automated background task.&#8221; You&#8217;re operating like a ten-person team because your agent is doing the browser work while you&#8217;re focused on high-leverage work.<\/p>\n\n<p>This is the <a href=\"https:\/\/jonjones.ai\/automation\/autonomous-ai-agents-guide\/\">autonomous AI agent<\/a> model in action \u2014 not just text generation, but actual task completion in the real-world web environment.<\/p>\n\n<h2>How to Install Playwright MCP Server in 5 Minutes<\/h2>\n\n<figure class=\"wp-block-image size-large\">\n  <img decoding=\"async\" src=\"https:\/\/jonjones.ai\/wp-content\/uploads\/2026\/06\/playwright-mcp-installation-setup.jpg\" alt=\"playwright mcp server installation setup\" \/>\n<\/figure>\n\n<p>The setup is surprisingly simple. You need Node.js 18 or newer installed on your machine (check with <code>node --version<\/code>), then one command depending on which AI tool you&#8217;re using.<\/p>\n\n<h3>Claude Code (Recommended for Builders)<\/h3>\n\n<p>Claude Code is the fastest path. Open your terminal in your project directory and run:<\/p>\n\n<pre><code>claude mcp add playwright npx @playwright\/mcp@latest<\/code><\/pre>\n\n<p>That&#8217;s the entire installation. This command adds the Playwright MCP server to your Claude Code configuration for that directory. It persists \u2014 so next time you run <code>claude<\/code> in that folder, Playwright is already available.<\/p>\n\n<p>To confirm it&#8217;s connected, inside a Claude Code session run <code>\/mcp<\/code> and look for &#8220;playwright&#8221; in the list. You&#8217;ll see all 25 browser tools listed there.<\/p>\n\n<h3>Claude Desktop<\/h3>\n\n<p>For Claude Desktop, open your MCP configuration file (usually at <code>~\/.claude\/claude_desktop_config.json<\/code> on Mac) and add this to the <code>mcpServers<\/code> block:<\/p>\n\n<pre><code>{\n  \"mcpServers\": {\n    \"playwright\": {\n      \"command\": \"npx\",\n      \"args\": [\"@playwright\/mcp@latest\"]\n    }\n  }\n}<\/code><\/pre>\n\n<p>Save and restart Claude Desktop. Playwright MCP is now live.<\/p>\n\n<h3>VS Code, Cursor, or Windsurf<\/h3>\n\n<p>Each of these tools has a one-click install option in their MCP settings panel. Search for &#8220;playwright&#8221; in the MCP marketplace or add the server manually using the same JSON config above. The official <a href=\"https:\/\/playwright.dev\/docs\/getting-started-mcp\" target=\"_blank\" rel=\"noopener\">Playwright MCP docs<\/a> have deep-links that install directly to each editor.<\/p>\n\n<h3>First-time use tip<\/h3>\n\n<p>When you first use Playwright MCP, explicitly say &#8220;playwright mcp&#8221; in your prompt \u2014 for example: &#8220;Use playwright mcp to open a browser to google.com and search for jonjones.ai.&#8221; Otherwise Claude may try to use Bash to run Playwright manually. Once Claude understands the MCP is available, future requests handle routing automatically.<\/p>\n\n<p>For authentication: Playwright opens a visible browser window. If a site requires login, have Claude navigate to the login page, then you log in manually. Cookies persist for the session \u2014 Claude takes over from there. Zero code needed.<\/p>\n\n<h2>The Playwright MCP Browser Tools: What Your Agent Can Actually Do<\/h2>\n\n<figure class=\"wp-block-image size-large\">\n  <img decoding=\"async\" src=\"https:\/\/jonjones.ai\/wp-content\/uploads\/2026\/06\/playwright-mcp-browser-tools.jpg\" alt=\"playwright mcp server browser tools capabilities\" \/>\n<\/figure>\n\n<p>Playwright MCP gives Claude 25 browser tools. Here are the ones that matter most for solopreneurs \u2014 described the way a builder actually thinks about them, not the way a QA engineer documents them:<\/p>\n\n<h3>Navigation Tools<\/h3>\n<ul>\n  <li><strong>browser_navigate<\/strong> \u2014 Go to any URL. The foundation of everything.<\/li>\n  <li><strong>browser_navigate_back \/ forward<\/strong> \u2014 Move through browser history, useful for multi-step flows.<\/li>\n  <li><strong>browser_tab_new<\/strong> \u2014 Open a new tab. Good for parallel research or comparison tasks.<\/li>\n  <li><strong>browser_tab_select<\/strong> \u2014 Switch between open tabs.<\/li>\n<\/ul>\n\n<h3>Interaction Tools<\/h3>\n<ul>\n  <li><strong>browser_click<\/strong> \u2014 Click any element on the page. Buttons, links, dropdowns, checkboxes.<\/li>\n  <li><strong>browser_type<\/strong> \u2014 Type into any text field. Search boxes, forms, email inputs.<\/li>\n  <li><strong>browser_select_option<\/strong> \u2014 Choose from dropdown menus.<\/li>\n  <li><strong>browser_file_upload<\/strong> \u2014 Upload a file through a browser file picker.<\/li>\n  <li><strong>browser_press_key<\/strong> \u2014 Press keyboard keys (Enter, Tab, Escape, etc.).<\/li>\n  <li><strong>browser_drag<\/strong> \u2014 Drag-and-drop interactions.<\/li>\n<\/ul>\n\n<h3>Data Capture Tools<\/h3>\n<ul>\n  <li><strong>browser_snapshot<\/strong> \u2014 Read the full accessibility tree of the current page. This is how Claude &#8220;reads&#8221; a page without vision.<\/li>\n  <li><strong>browser_take_screenshot<\/strong> \u2014 Capture a PNG screenshot for visual verification or reporting.<\/li>\n  <li><strong>browser_pdf_save<\/strong> \u2014 Save the current page as a PDF.<\/li>\n  <li><strong>browser_console_messages<\/strong> \u2014 Read browser console output. Useful for debugging web apps.<\/li>\n  <li><strong>browser_network_requests<\/strong> \u2014 Monitor network requests from the page. API calls, data fetches.<\/li>\n<\/ul>\n\n<h3>Utility Tools<\/h3>\n<ul>\n  <li><strong>browser_wait_for<\/strong> \u2014 Wait for a specific element or condition before proceeding. Critical for dynamic pages that load content via JavaScript.<\/li>\n  <li><strong>browser_handle_dialog<\/strong> \u2014 Dismiss or accept JavaScript alerts and confirmation dialogs.<\/li>\n  <li><strong>browser_generate_playwright_test<\/strong> \u2014 Generate a reusable Playwright test script from what Claude just did. Useful if you want to save a workflow as a script.<\/li>\n  <li><strong>browser_install<\/strong> \u2014 Install browser binaries if needed.<\/li>\n  <li><strong>browser_resize<\/strong> \u2014 Resize the browser window for responsive testing.<\/li>\n<\/ul>\n\n<p>You never have to reference these tools by name. Claude picks the right tool based on your natural language request. Say &#8220;click the Sign Up button&#8221; and it calls <code>browser_click<\/code> automatically.<\/p>\n\n<p>This is the same tool layer that powers <a href=\"https:\/\/jonjones.ai\/ai\/claude-code-mcp-guide-2026\/\">Claude Code&#8217;s MCP ecosystem<\/a> \u2014 the same principle that makes MCP servers the de-facto standard for AI agent tool integration in 2026.<\/p>\n\n<h2>5 Real Ways Solopreneurs Are Using Playwright MCP Server<\/h2>\n\n<figure class=\"wp-block-image size-large\">\n  <img decoding=\"async\" src=\"https:\/\/jonjones.ai\/wp-content\/uploads\/2026\/06\/playwright-mcp-use-cases.jpg\" alt=\"playwright mcp server use cases for solopreneurs\" \/>\n<\/figure>\n\n<p>Let me get specific. These aren&#8217;t theoretical \u2014 these are actual workflows I&#8217;ve tested in the JonOps container stack or seen builders implement directly.<\/p>\n\n<h3>1. Competitor Price Monitoring (Weekly Automated)<\/h3>\n\n<p>If you sell services or products, your competitors&#8217; pricing is strategic intelligence. Playwright MCP lets you build a weekly monitoring loop: Claude navigates to each competitor&#8217;s pricing page, snapshots the accessibility tree, extracts the current plan prices and feature tiers, and logs any changes to Airtable. No scraping scripts. No API keys. Just Claude + Playwright doing what any VA would do \u2014 except it never sleeps.<\/p>\n\n<p><strong>Prompt pattern:<\/strong> &#8220;Use playwright mcp to navigate to [competitor URL]\/pricing and extract all plan names and prices. Compare to last week&#8217;s snapshot in Airtable. Alert me if anything changed.&#8221;<\/p>\n\n<h3>2. Form Submission Testing on Your Own Site<\/h3>\n\n<p>One of the most painful things about running an autonomous content site: your contact form breaks, your newsletter signup stops working, your lead magnet delivery fails \u2014 and you don&#8217;t find out for a week because you weren&#8217;t manually testing it. Playwright MCP closes this gap.<\/p>\n\n<p>Wire it into a weekly test: Claude navigates to your site, submits each form with test data, verifies the confirmation message appears, checks that the lead hit your CRM, and sends you a Telegram alert if anything fails. This is site reliability automation for a one-person shop. No engineering team needed.<\/p>\n\n<h3>3. Lead Research Automation<\/h3>\n\n<p>Outreach without research is spam. Research without automation is a full-time job. Playwright MCP is the bridge: give Claude a list of prospect URLs, and it navigates each site, reads the About page, the Services page, the Contact page \u2014 extracts the key signals (size, tech stack, active social platforms, email addresses in the footer) \u2014 and formats everything into your Airtable outreach database.<\/p>\n\n<p>This pairs perfectly with the <a href=\"https:\/\/jonjones.ai\/ai\/github-mcp-server-guide-2026\/\">GitHub MCP server<\/a> if your prospects are technical \u2014 Claude can check their repos, see what they&#8217;re building, and craft hyper-personalized outreach based on real code signals.<\/p>\n\n<h3>4. Screenshot + Report Pipelines<\/h3>\n\n<p>Clients and stakeholders want proof. Playwright MCP automates the &#8220;here&#8217;s what I built \/ found \/ changed&#8221; reporting loop. After any deployment, publishing event, or SEO change, Claude navigates to the relevant pages, takes clean screenshots at specified viewport sizes, and drops them into a formatted report. The Google Lighthouse-style audit done automatically, without you sitting there pressing Cmd+Shift+4 twelve times.<\/p>\n\n<h3>5. Scraping Data Behind Login Walls<\/h3>\n\n<p>Many of the most valuable data sources require authentication: your ad platform analytics, your CRM dashboards, your newsletter analytics. APIs don&#8217;t always cover everything. Playwright MCP handles the authenticated session problem elegantly \u2014 you log in manually once per session (visible browser, your credentials), then Claude takes over to navigate, extract, and process the data. No credential sharing in code. No API workarounds.<\/p>\n\n<p>Combined with <a href=\"https:\/\/jonjones.ai\/automation\/n8n-mcp-claude-agents-workflow-guide-2026\/\">n8n MCP<\/a> for workflow orchestration, this becomes a full automated data pipeline \u2014 Claude browsing and extracting, n8n routing and processing, Airtable storing.<\/p>\n\n<h2>Playwright MCP vs Browser Use vs Selenium: Which One Actually Wins?<\/h2>\n\n<figure class=\"wp-block-image size-large\">\n  <img decoding=\"async\" src=\"https:\/\/jonjones.ai\/wp-content\/uploads\/2026\/06\/playwright-mcp-vs-alternatives.jpg\" alt=\"playwright mcp server vs alternatives comparison\" \/>\n<\/figure>\n\n<p>If you&#8217;ve looked into AI browser automation before, you&#8217;ve probably run into a few options. Here&#8217;s the honest breakdown:<\/p>\n\n<h3>Playwright MCP Server<\/h3>\n<p><strong>Best for:<\/strong> Claude Code users, solopreneurs building agent workflows, anyone who wants the fastest setup with the most reliable AI integration. Uses accessibility trees (no vision model required). Maintained by Microsoft. Free. Works natively with Claude Code, Claude Desktop, Cursor, VS Code, Windsurf. Install time: one command. <strong>Winner for most solopreneur use cases.<\/strong><\/p>\n\n<h3>Browser Use<\/h3>\n<p><strong>Best for:<\/strong> Python-first builders who want a standalone library with more visual AI control. Browser Use is a Python library that integrates with multiple AI providers, uses vision + DOM parsing, and gives more control over the automation loop. Higher setup complexity, but more flexibility if you&#8217;re building a custom Python agent from scratch. Good option if you&#8217;re not in the Claude Code ecosystem.<\/p>\n\n<h3>Selenium \/ Raw Playwright (Without MCP)<\/h3>\n<p><strong>Best for:<\/strong> Developers who need precise, repeatable automated test scripts. These are code-first frameworks \u2014 you write Python, JavaScript, or Java scripts that run deterministic automation paths. Zero AI involvement. Excellent for QA testing pipelines. NOT the right choice for solopreneurs who want to describe tasks in plain English and have an agent execute them. These require coding skill and maintenance overhead.<\/p>\n\n<h3>Bottom line<\/h3>\n<p>If you&#8217;re running Claude Code or Claude Desktop and want to give your agent browser capabilities in the next five minutes, Playwright MCP server is the answer. Full stop. The other options are more complex, require more code, and don&#8217;t have the same native integration with Claude&#8217;s MCP ecosystem that&#8217;s now the industry standard.<\/p>\n\n<p>The whole point of <a href=\"https:\/\/jonjones.ai\/ai\/claude-agent-sdk-guide-2026\/\">agentic AI<\/a> is task completion, not tool configuration. Playwright MCP gets you to task completion faster than anything else on the market right now.<\/p>\n\n<h2>Playwright MCP Server: Frequently Asked Questions<\/h2>\n\n<p><strong>Does Playwright MCP require Node.js?<\/strong><br>\nYes. Node.js 18 or newer must be installed on your machine. Check with <code>node --version<\/code> in your terminal. If you don&#8217;t have it, <a href=\"https:\/\/nodejs.org\/\" target=\"_blank\" rel=\"noopener\">nodejs.org<\/a> has one-click installers for Mac, Windows, and Linux. This is a one-time setup.<\/p>\n\n<p><strong>Is Playwright MCP free?<\/strong><br>\nYes. The Playwright MCP server itself is free and open source (MIT license, maintained by Microsoft). The only cost is the AI model calls \u2014 Claude&#8217;s standard token usage for whatever task your agent is performing. No additional subscription or API fee.<\/p>\n\n<p><strong>Does it work headlessly (in the background, no visible browser)?<\/strong><br>\nYes, with a flag. By default it opens a visible Chrome window, which is useful for tasks requiring authentication. For fully headless operation (useful in server\/container environments like JonOps), configure the MCP with headless mode enabled. The Playwright MCP documentation covers the flag options.<\/p>\n\n<p><strong>Can it handle JavaScript-heavy sites (SPAs, React apps)?<\/strong><br>\nYes \u2014 this is one of Playwright&#8217;s core strengths over older scraping tools like BeautifulSoup. Playwright MCP renders the full JavaScript before taking a snapshot, so React apps, Vue dashboards, and dynamic content all load correctly. The <code>browser_wait_for<\/code> tool lets Claude wait for specific elements to appear before proceeding.<\/p>\n\n<p><strong>Is it safe to use with my login credentials?<\/strong><br>\nYes \u2014 because YOU log in via the visible browser window, not Claude. Your credentials are never passed through the AI or stored in any prompt. Once you&#8217;re authenticated, cookies persist for the session. This is the same security model as any browser session you&#8217;d open manually.<\/p>\n\n<p><strong>Can I run multiple browser sessions at once?<\/strong><br>\nYes. Playwright MCP supports multiple tabs via <code>browser_tab_new<\/code> and <code>browser_tab_select<\/code>. Running multiple simultaneous browser instances from one Claude session requires separate MCP server instances, but parallel tab usage within one session is fully supported.<\/p>\n\n<p><strong>Does it work with Claude Desktop as well as Claude Code?<\/strong><br>\nYes. Playwright MCP is client-agnostic \u2014 it works with Claude Code, Claude Desktop, VS Code Copilot, Cursor, Windsurf, and any other MCP-compatible client. The configuration differs slightly per client but the same MCP server and toolset run identically across all of them.<\/p>\n\n<h2>Your AI Agent Just Got Eyes \u2014 Here&#8217;s What to Build First<\/h2>\n\n<p>Playwright MCP server is one of those tools where the moment you wire it up, your backlog of &#8220;I should automate that&#8221; items becomes a list of things you can actually build this week. Competitor checks. Site testing. Lead research. Data extraction. Reports. All of it automated, running in the background, no code required \u2014 just Claude + a browser.<\/p>\n\n<p>The MCP ecosystem is evolving fast. Playwright is the browser layer. <a href=\"https:\/\/jonjones.ai\/ai\/mcp-server-meaning-solopreneur-guide-2026\/\">MCP servers<\/a> are the plug-in standard. What you&#8217;re building is an agent stack where Claude can see, navigate, and act on the entire web \u2014 not just the APIs that happen to have an SDK. That&#8217;s a fundamentally different level of automation capability.<\/p>\n\n<p>Install it. Give Claude a URL. Ask it to do something. You&#8217;ll understand immediately why this is the browser automation tool for the solopreneur era.<\/p>\n\n<style>#kt-layout-idsignup_end_5475 > .kt-row-column-wrap{align-content:start;}:where(#kt-layout-idsignup_end_5475 > .kt-row-column-wrap) > .wp-block-kadence-column{justify-content:start;}#kt-layout-idsignup_end_5475 > .kt-row-column-wrap{column-gap:var(--global-kb-gap-md, 2rem);row-gap:var(--global-kb-gap-md, 2rem);padding-top:var( --global-kb-row-default-top, 25px );padding-bottom:var( --global-kb-row-default-bottom, 25px );padding-top:30px;padding-right:30px;padding-bottom:30px;padding-left:30px;grid-template-columns:repeat(2, minmax(0, 1fr));}#kt-layout-idsignup_end_5475{border-top-left-radius:16px;border-top-right-radius:16px;border-bottom-right-radius:16px;border-bottom-left-radius:16px;overflow:clip;isolation:isolate;}#kt-layout-idsignup_end_5475 > .kt-row-layout-overlay{border-top-left-radius:16px;border-top-right-radius:16px;border-bottom-right-radius:16px;border-bottom-left-radius:16px;}#kt-layout-idsignup_end_5475{background-color:#f0f0f0;}#kt-layout-idsignup_end_5475 > .kt-row-layout-overlay{opacity:0.30;}@media all and (max-width: 1024px){#kt-layout-idsignup_end_5475 > .kt-row-column-wrap{grid-template-columns:minmax(0, 1fr);}}@media all and (max-width: 767px){#kt-layout-idsignup_end_5475 > .kt-row-column-wrap{grid-template-columns:repeat(2, minmax(0, 1fr));}}<\/style>\n<div class=\"wp-block-kadence-rowlayout alignnone\">\n<style>.kadence-columnsignup_img_5475 > .kt-inside-inner-col{border-top-width:0px;border-right-width:0px;border-bottom-width:0px;border-left-width:0px;}.kadence-columnsignup_img_5475 > .kt-inside-inner-col,.kadence-columnsignup_img_5475 > .kt-inside-inner-col:before{border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;}.kadence-columnsignup_img_5475 > .kt-inside-inner-col{column-gap:var(--global-kb-gap-sm, 1rem);}.kadence-columnsignup_img_5475 > .kt-inside-inner-col{flex-direction:column;}.kadence-columnsignup_img_5475 > .kt-inside-inner-col > .aligncenter{width:100%;}.kadence-columnsignup_img_5475 > .kt-inside-inner-col:before{opacity:0.3;}.kadence-columnsignup_img_5475{position:relative;}@media all and (max-width: 1024px){.kadence-columnsignup_img_5475 > .kt-inside-inner-col{flex-direction:column;justify-content:center;}}@media all and (max-width: 767px){.kadence-columnsignup_img_5475 > .kt-inside-inner-col{flex-direction:column;justify-content:center;}}<\/style>\n<div class=\"wp-block-kadence-column inner-column-1\"><div class=\"kt-inside-inner-col\">\n\n<figure class=\"wp-block-image size-medium\">\n  <img decoding=\"async\" src=\"https:\/\/jonjones.ai\/wp-content\/uploads\/2026\/06\/newsletter-cta-ai-playbook.jpg\"\n       alt=\"Join the AI Playbook newsletter\" \/>\n<\/figure>\n\n<\/div><\/div>\n\n<style>.kadence-columnsignup_txt_5475 > .kt-inside-inner-col{border-top-width:0px;border-right-width:0px;border-bottom-width:0px;border-left-width:0px;}.kadence-columnsignup_txt_5475 > .kt-inside-inner-col,.kadence-columnsignup_txt_5475 > .kt-inside-inner-col:before{border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;}.kadence-columnsignup_txt_5475 > .kt-inside-inner-col{column-gap:var(--global-kb-gap-sm, 1rem);}.kadence-columnsignup_txt_5475 > .kt-inside-inner-col{flex-direction:column;}.kadence-columnsignup_txt_5475 > .kt-inside-inner-col > .aligncenter{width:100%;}.kadence-columnsignup_txt_5475 > .kt-inside-inner-col:before{opacity:0.3;}.kadence-columnsignup_txt_5475{position:relative;}@media all and (max-width: 1024px){.kadence-columnsignup_txt_5475 > .kt-inside-inner-col{flex-direction:column;justify-content:center;}}@media all and (max-width: 767px){.kadence-columnsignup_txt_5475 > .kt-inside-inner-col{flex-direction:column;justify-content:center;}}<\/style>\n<div class=\"wp-block-kadence-column inner-column-2\"><div class=\"kt-inside-inner-col\">\n\n<h3 class=\"wp-block-heading has-text-color\" style=\"color:#1e1b3a\">Get the AI Automation Playbook<\/h3>\n\n\n<p class=\"has-text-color\" style=\"color:#4a4568\">Real MCP setups, agent workflows, and JonOps receipts delivered weekly. No theory \u2014 just the systems that actually run.<\/p>\n\n<div class='fluentform ff-default fluentform_wrapper_8 ffs_default_wrap'><form data-form_id=\"8\" id=\"fluentform_8\" class=\"frm-fluent-form fluent_form_8 ff-el-form-top ff_form_instance_8_1 ff-form-loading ffs_default\" data-form_instance=\"ff_form_instance_8_1\" method=\"POST\" ><fieldset  style=\"border: none!important;margin: 0!important;padding: 0!important;background-color: transparent!important;box-shadow: none!important;outline: none!important; min-inline-size: 100%;\">\n                    <legend class=\"ff_screen_reader_title\" style=\"display: block; margin: 0!important;padding: 0!important;height: 0!important;text-indent: -999999px;width: 0!important;overflow:hidden;\">Lead Magnet - AI Playbook<\/legend><input type='hidden' name='__fluent_form_embded_post_id' value='5475' \/><input type=\"hidden\" id=\"_fluentform_8_fluentformnonce\" name=\"_fluentform_8_fluentformnonce\" value=\"29fb2b3c50\" \/><input type=\"hidden\" name=\"_wp_http_referer\" value=\"\/zh\/wp-json\/wp\/v2\/posts\/5475\" \/><div class='ff-el-group'><div class='ff-el-input--content'><input type=\"email\" name=\"email\" id=\"ff_8_email\" class=\"ff-el-form-control\" placeholder=\"Your email address\" data-name=\"email\"  aria-invalid=\"false\" aria-required=true><\/div><\/div><div class='ff-el-group ff-text-left ff_submit_btn_wrapper ff_submit_btn_wrapper_custom'><button class=\"ff-btn ff-btn-submit ff-btn-md ff_btn_style wpf_has_custom_css\" type=\"submit\" name=\"custom_submit_button-8_1\" data-name=\"custom_submit_button-8_1\"  aria-label=\"GET THE PLAYBOOK\">GET THE PLAYBOOK<\/button><style>form.fluent_form_8 .wpf_has_custom_css.ff-btn-submit { background-color:#00ff88;border-color:#00ff88;color:#0a0a14;min-width:100%; }form.fluent_form_8 .wpf_has_custom_css.ff-btn-submit:hover { background-color:#00cc6a;border-color:#00cc6a;color:#0a0a14;min-width:100%; } <\/style><\/div><\/fieldset><\/form><div id='fluentform_8_errors' class='ff-errors-in-stack ff_form_instance_8_1 ff-form-loading_errors ff_form_instance_8_1_errors'><\/div><\/div>            <script type=\"text\/javascript\">\n                window.fluent_form_ff_form_instance_8_1 = {\"id\":\"8\",\"settings\":{\"layout\":{\"labelPlacement\":\"top\",\"helpMessagePlacement\":\"with_label\",\"errorMessagePlacement\":\"inline\",\"asteriskPlacement\":\"asterisk-right\"},\"restrictions\":{\"denyEmptySubmission\":{\"enabled\":false}}},\"form_instance\":\"ff_form_instance_8_1\",\"form_id_selector\":\"fluentform_8\",\"rules\":{\"email\":{\"required\":{\"value\":true,\"message\":\"This field is required\"},\"email\":{\"value\":true,\"message\":\"Please enter a valid email address\"}}},\"debounce_time\":300};\n                            <\/script>\n            \n\n<\/div><\/div>\n\n<\/div>\n\n","protected":false},"excerpt":{"rendered":"<p>\u5982\u679c\u4f60\u4e00\u76f4\u5728\u95dc\u6ce8MCP\u4f3a\u670d\u5668\u7684\u767c\u5c55\uff0c\u4f60\u80af\u5b9a\u77e5\u9053\uff1aClaude\u7684\u5de5\u5177\u7bb1\u6b63\u5728\u5feb\u901f\u64f4\u5c55\u3002\u4f46\u9019\u88e1\u6709\u4e00\u500b\u5927\u591a\u6578\u7368\u7acb\u5275\u696d\u8005\u90fd\u5ffd\u7565\u7684\u5de5\u5177\u2014\u2014\u5287\u4f5c\u5bb6MCP\u4f3a\u670d\u5668\u3002\u5b83\u80fd\u70ba\u4f60\u7684AI\u4ee3\u7406\u8ce6\u4e88\u2026<\/p>","protected":false},"author":2,"featured_media":5468,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_kad_blocks_custom_css":"","_kad_blocks_head_custom_js":"","_kad_blocks_body_custom_js":"","_kad_blocks_footer_custom_js":"","_kadence_starter_templates_imported_post":false,"_kad_post_transparent":"","_kad_post_title":"","_kad_post_layout":"","_kad_post_sidebar_id":"","_kad_post_content_style":"","_kad_post_vertical_padding":"","_kad_post_feature":"","_kad_post_feature_position":"","_kad_post_header":false,"_kad_post_footer":false,"_kad_post_classname":"","footnotes":""},"categories":[28,44,46],"tags":[],"class_list":["post-5475","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-ai","category-ai-automation","category-tutorials"],"taxonomy_info":{"category":[{"value":28,"label":"AI"},{"value":44,"label":"AI Automation"},{"value":46,"label":"Tutorials"}]},"featured_image_src_large":["https:\/\/jonjones.ai\/wp-content\/uploads\/2026\/06\/playwright-mcp-server-guide-2026-featured.jpg",1344,752,false],"author_info":{"display_name":"Jon Jones","author_link":"https:\/\/jonjones.ai\/zh\/author\/jonjonjones-ai\/"},"comment_info":0,"category_info":[{"term_id":28,"name":"AI","slug":"ai","term_group":0,"term_taxonomy_id":28,"taxonomy":"category","description":"","parent":0,"count":43,"filter":"raw","cat_ID":28,"category_count":43,"category_description":"","cat_name":"AI","category_nicename":"ai","category_parent":0},{"term_id":44,"name":"AI Automation","slug":"ai-automation","term_group":0,"term_taxonomy_id":44,"taxonomy":"category","description":"","parent":0,"count":56,"filter":"raw","cat_ID":44,"category_count":56,"category_description":"","cat_name":"AI Automation","category_nicename":"ai-automation","category_parent":0},{"term_id":46,"name":"Tutorials","slug":"tutorials","term_group":0,"term_taxonomy_id":46,"taxonomy":"category","description":"","parent":0,"count":16,"filter":"raw","cat_ID":46,"category_count":16,"category_description":"","cat_name":"Tutorials","category_nicename":"tutorials","category_parent":0}],"tag_info":false,"_links":{"self":[{"href":"https:\/\/jonjones.ai\/zh\/wp-json\/wp\/v2\/posts\/5475","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/jonjones.ai\/zh\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/jonjones.ai\/zh\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/jonjones.ai\/zh\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/jonjones.ai\/zh\/wp-json\/wp\/v2\/comments?post=5475"}],"version-history":[{"count":0,"href":"https:\/\/jonjones.ai\/zh\/wp-json\/wp\/v2\/posts\/5475\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/jonjones.ai\/zh\/wp-json\/wp\/v2\/media\/5468"}],"wp:attachment":[{"href":"https:\/\/jonjones.ai\/zh\/wp-json\/wp\/v2\/media?parent=5475"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/jonjones.ai\/zh\/wp-json\/wp\/v2\/categories?post=5475"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/jonjones.ai\/zh\/wp-json\/wp\/v2\/tags?post=5475"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}