diff --git a/README.md b/README.md
index a570d9c..5cb6d3b 100644
--- a/README.md
+++ b/README.md
@@ -7,6 +7,8 @@
+
+
## 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()
+```
diff --git a/playwriter/package.json b/playwriter/package.json
index 4663278..215191c 100644
--- a/playwriter/package.json
+++ b/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",
diff --git a/playwriter/src/extension/cdp-relay.ts b/playwriter/src/extension/cdp-relay.ts
index 4e596ef..b3f505c 100644
--- a/playwriter/src/extension/cdp-relay.ts
+++ b/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()
const playwrightClients = new Map()
@@ -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')
diff --git a/playwriter/src/index.ts b/playwriter/src/index.ts
index 26c53f3..bade296 100644
--- a/playwriter/src/index.ts
+++ b/playwriter/src/index.ts
@@ -1 +1,2 @@
export * from './extension/cdp-relay.js'
+export * from './utils.js'
diff --git a/playwriter/src/mcp.ts b/playwriter/src/mcp.ts
index 12594e4..cbb0bdd 100644
--- a/playwriter/src/mcp.ts
+++ b/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()
diff --git a/playwriter/src/utils.ts b/playwriter/src/utils.ts
new file mode 100644
index 0000000..dfbf33e
--- /dev/null
+++ b/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}`
+}