adding getCdpUrl and playwright examlpe

README.md

@@ -7,6 +7,8 @@
     <br/>
 </div>
 
+
+
 ## Comparison
 
 ### BrowserMCP
@@ -34,3 +36,28 @@ Navigation:
 - `browsermcp_browser_press_key` - Press a key on the keyboard
   Utilities:
 - `browsermcp_browser_wait` - Wait for a specified time in seconds
+
+
+### Using with Playwright
+
+You can use playwriter programmatically with playwright-core:
+
+```typescript
+import { chromium } from 'playwright-core'
+import { startPlayWriterCDPRelayServer, getCdpUrl } from 'playwriter'
+
+const port = 19987
+const server = await startPlayWriterCDPRelayServer({ port })
+
+
+const browser = await chromium.connectOverCDP(getCdpUrl({ port }))
+
+const context = browser.contexts()[0]
+const page = context.pages()[0]
+
+await page.goto('https://example.com')
+await page.screenshot({ path: 'screenshot.png' })
+
+await browser.close()
+server.close()
+```

playwriter/package.json

@@ -3,6 +3,8 @@
   "description": "",
   "version": "0.0.5",
   "type": "module",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
   "repository": "https://github.com/remorses/playwriter",
   "scripts": {
     "build": "rm -rf dist *.tsbuildinfo && mkdir dist && cp src/resource.md src/prompt.md dist/ && tsc",

playwriter/src/extension/cdp-relay.ts

@@ -20,7 +20,7 @@ type PlaywrightClient = {
   ws: WSContext
 }
 
-export async function startPlayWriterCDPRelayServer({ port = 19988, logger = console }: { port?: number; logger?: { log(...args: any[]): void; error(...args: any[]): void } } = {}) {
+export async function startPlayWriterCDPRelayServer({ port = 19988, host = '127.0.0.1', logger = console }: { port?: number; host?: string; logger?: { log(...args: any[]): void; error(...args: any[]): void } } = {}) {
   const connectedTargets = new Map<string, ConnectedTarget>()
 
   const playwrightClients = new Map<string, PlaywrightClient>()
@@ -461,20 +461,20 @@ export async function startPlayWriterCDPRelayServer({ port = 19988, logger = con
     }
   }))
 
-  const server = serve({ fetch: app.fetch, port })
+  const server = serve({ fetch: app.fetch, port, hostname: host })
   injectWebSocket(server)
 
-  const wsHost = `ws://localhost:${port}`
+  const wsHost = `ws://${host}:${port}`
   const cdpEndpoint = `${wsHost}/cdp`
   const extensionEndpoint = `${wsHost}/extension`
 
   logger.log('CDP relay server started')
+  logger.log('Host:', host)
+  logger.log('Port:', port)
   logger.log('Extension endpoint:', extensionEndpoint)
   logger.log('CDP endpoint:', cdpEndpoint)
 
   return {
-    cdpEndpoint,
-    extensionEndpoint,
     close() {
       for (const client of playwrightClients.values()) {
         client.ws.close(1000, 'Server stopped')

playwriter/src/index.ts

@@ -1 +1,2 @@
 export * from './extension/cdp-relay.js'
+export * from './utils.js'

playwriter/src/mcp.ts

@@ -7,6 +7,7 @@ import path from 'node:path'
 import { spawn } from 'node:child_process'
 import { createRequire } from 'node:module'
 import vm from 'node:vm'
+import { getCdpUrl } from './utils.js'
 
 const require = createRequire(import.meta.url)
 
@@ -67,7 +68,7 @@ async function ensureConnection(): Promise<{ browser: Browser; page: Page }> {
 
   await ensureRelayServer()
 
-  const cdpEndpoint = `ws://localhost:${RELAY_PORT}/cdp/${Date.now()}`
+  const cdpEndpoint = getCdpUrl({ port: RELAY_PORT })
   const browser = await chromium.connectOverCDP(cdpEndpoint)
 
   const contexts = browser.contexts()

playwriter/src/utils.ts

@@ -0,0 +1,4 @@
+export function getCdpUrl({ port = 19988, host = '127.0.0.1', clientId }: { port?: number; host?: string; clientId?: string } = {}) {
+  const id = clientId || Date.now().toString()
+  return `ws://${host}:${port}/cdp/${id}`
+}