[docs]: add Playwriter integration for controlling existing browser

[remorses]

why

• Users want to control their existing Chrome browser instead of launching a new instance
• Playwriter extension enables this via CDP but there's no documentation for using it with Stagehand
• Common use cases: debugging on existing pages, using saved sessions, solving CAPTCHAs manually

what changed

• Added packages/docs/v3/integrations/playwriter.mdx with installation, example, and troubleshooting
• Updated packages/docs/docs.json to include Playwriter in the integrations nav

test plan

• Build docs locally and verify the Playwriter page renders
• Check navigation includes the new page under Integrations

---

Summary by cubic

Added docs for the Playwriter integration to control an existing Chrome session with Stagehand via CDP. Includes install steps, a TypeScript example, extension states, troubleshooting, and a new entry in the Integrations nav.

^{Written for commit 09cd71b. Summary will update automatically on new commits.}

[changeset-bot]

⚠️ No Changeset found

Latest commit: 09cd71b

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

[greptile-apps]

Greptile Overview

Greptile Summary

Added comprehensive documentation for the Playwriter Chrome extension integration, enabling users to control their existing browser with Stagehand instead of launching a new instance.

Key additions:

• Overview section explaining Playwriter's CDP-based approach and benefits (existing sessions, extensions, lower resource usage)
• Step-by-step installation guide covering extension setup, npm dependencies, and connection process
• Working TypeScript example demonstrating relay server setup and Stagehand initialization with cdpUrl
• Troubleshooting section addressing common connection issues
• Comparison table showing differences between standard Stagehand and Playwriter-enabled workflows
• Next Steps cards linking to relevant Stagehand documentation

The documentation follows established patterns from other integration pages (Playwright, Puppeteer, Selenium) and provides clear, actionable guidance for users wanting to automate their existing browser sessions.

Confidence Score: 5/5

• This PR is safe to merge with no issues
• Documentation-only change that adds well-structured, accurate content following existing patterns. No code changes, no breaking changes, and the documentation is comprehensive and helpful.
• No files require special attention

Important Files Changed

File Analysis

Filename	Score	Overview
packages/docs/docs.json	5/5	Added playwriter integration page to navigation structure between playwright and puppeteer entries
packages/docs/v3/integrations/playwriter.mdx	5/5	Created comprehensive documentation for Playwriter integration with installation, usage examples, troubleshooting, and comparison table

Sequence Diagram

sequenceDiagram
    participant User
    participant Browser as Chrome Browser
    participant Extension as Playwriter Extension
    participant Relay as CDP Relay Server
    participant Script as Stagehand Script
    
    User->>Extension: Click extension icon on tab
    Extension->>Extension: Connect to tab via CDP
    Extension-->>User: Show green icon (connected)
    
    Script->>Relay: startPlayWriterCDPRelayServer()
    Relay->>Relay: Start server on port 19988
    
    Script->>Relay: getCdpUrl()
    Relay-->>Script: CDP WebSocket URL
    
    Script->>Script: Initialize Stagehand with cdpUrl
    Script->>Relay: Connect via CDP WebSocket
    Relay->>Extension: Forward CDP commands
    Extension->>Browser: Execute commands on connected tab
    Browser-->>Extension: Return results
    Extension->>Relay: Forward results
    Relay-->>Script: Return results to Stagehand
    
    Script->>Relay: page.goto("https://example.com")
    Relay->>Extension: Forward navigation command
    Extension->>Browser: Navigate tab
    Browser-->>Script: Navigation complete
    
    Script->>Relay: page.locator().click()
    Relay->>Extension: Forward click command
    Extension->>Browser: Execute click
    Browser-->>Script: Action complete

Loading

[greptile-apps]

_{2 files reviewed, no comments}

_{Edit Code Review Agent Settings | Greptile}

[cubic-dev-ai]

No issues found across 2 files

[Copilot]

Pull request overview

This PR adds comprehensive documentation for the Playwriter integration, which enables users to control their existing Chrome browser with Stagehand instead of launching a new browser instance. This integration is particularly useful for scenarios requiring existing browser sessions, extensions, or manual CAPTCHA solving.

Key Changes:

• Added new integration documentation file explaining Playwriter setup and usage
• Updated navigation configuration to include Playwriter in the integrations section
• Documented the relay server approach for connecting Stagehand to existing Chrome tabs via CDP

Reviewed changes

Copilot reviewed 2 out of 2 changed files in this pull request and generated 1 comment.

File	Description
packages/docs/v3/integrations/playwriter.mdx	New documentation page covering Playwriter integration overview, installation steps, code example, troubleshooting, and comparison with standard Stagehand
packages/docs/docs.json	Added playwriter to integrations navigation in alphabetical order between playwright and puppeteer

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.