@roxybrowser/playwright-mcp 0.0.1

package/lib/loop/loopOpenAI.js

@@ -0,0 +1,141 @@
+/**
+ * Copyright (c) Microsoft Corporation.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+const model = 'gpt-4.1';
+export class OpenAIDelegate {
+    _openai;
+    async openai() {
+        if (!this._openai) {
+            const oai = await import('openai');
+            this._openai = new oai.OpenAI();
+        }
+        return this._openai;
+    }
+    createConversation(task, tools, oneShot) {
+        const genericTools = tools.map(tool => ({
+            name: tool.name,
+            description: tool.description || '',
+            inputSchema: tool.inputSchema,
+        }));
+        if (!oneShot) {
+            genericTools.push({
+                name: 'done',
+                description: 'Call this tool when the task is complete.',
+                inputSchema: {
+                    type: 'object',
+                    properties: {},
+                },
+            });
+        }
+        return {
+            messages: [{
+                    role: 'user',
+                    content: task
+                }],
+            tools: genericTools,
+        };
+    }
+    async makeApiCall(conversation) {
+        // Convert generic messages to OpenAI format
+        const openaiMessages = [];
+        for (const message of conversation.messages) {
+            if (message.role === 'user') {
+                openaiMessages.push({
+                    role: 'user',
+                    content: message.content
+                });
+            }
+            else if (message.role === 'assistant') {
+                const toolCalls = [];
+                if (message.toolCalls) {
+                    for (const toolCall of message.toolCalls) {
+                        toolCalls.push({
+                            id: toolCall.id,
+                            type: 'function',
+                            function: {
+                                name: toolCall.name,
+                                arguments: JSON.stringify(toolCall.arguments)
+                            }
+                        });
+                    }
+                }
+                const assistantMessage = {
+                    role: 'assistant'
+                };
+                if (message.content)
+                    assistantMessage.content = message.content;
+                if (toolCalls.length > 0)
+                    assistantMessage.tool_calls = toolCalls;
+                openaiMessages.push(assistantMessage);
+            }
+            else if (message.role === 'tool') {
+                openaiMessages.push({
+                    role: 'tool',
+                    tool_call_id: message.toolCallId,
+                    content: message.content,
+                });
+            }
+        }
+        // Convert generic tools to OpenAI format
+        const openaiTools = conversation.tools.map(tool => ({
+            type: 'function',
+            function: {
+                name: tool.name,
+                description: tool.description,
+                parameters: tool.inputSchema,
+            },
+        }));
+        const openai = await this.openai();
+        const response = await openai.chat.completions.create({
+            model,
+            messages: openaiMessages,
+            tools: openaiTools,
+            tool_choice: 'auto'
+        });
+        const message = response.choices[0].message;
+        // Extract tool calls and add assistant message to generic conversation
+        const toolCalls = message.tool_calls || [];
+        const genericToolCalls = toolCalls.map(toolCall => {
+            const functionCall = toolCall.function;
+            return {
+                name: functionCall.name,
+                arguments: JSON.parse(functionCall.arguments),
+                id: toolCall.id,
+            };
+        });
+        // Add assistant message to generic conversation
+        conversation.messages.push({
+            role: 'assistant',
+            content: message.content || '',
+            toolCalls: genericToolCalls.length > 0 ? genericToolCalls : undefined
+        });
+        return genericToolCalls;
+    }
+    addToolResults(conversation, results) {
+        for (const result of results) {
+            conversation.messages.push({
+                role: 'tool',
+                toolCallId: result.toolCallId,
+                content: result.content,
+                isError: result.isError,
+            });
+        }
+    }
+    checkDoneToolCall(toolCall) {
+        if (toolCall.name === 'done')
+            return toolCall.arguments.result;
+        return null;
+    }
+}

package/lib/loop/main.js

@@ -0,0 +1,60 @@
+/**
+ * Copyright (c) Microsoft Corporation.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/* eslint-disable no-console */
+import path from 'path';
+import url from 'url';
+import dotenv from 'dotenv';
+import { StdioClientTransport } from '@modelcontextprotocol/sdk/client/stdio.js';
+import { Client } from '@modelcontextprotocol/sdk/client/index.js';
+import { program } from 'commander';
+import { OpenAIDelegate } from './loopOpenAI.js';
+import { ClaudeDelegate } from './loopClaude.js';
+import { runTask } from './loop.js';
+dotenv.config();
+const __filename = url.fileURLToPath(import.meta.url);
+async function run(delegate) {
+    const transport = new StdioClientTransport({
+        command: 'node',
+        args: [
+            path.resolve(__filename, '../../../cli.js'),
+            '--save-session',
+            '--output-dir', path.resolve(__filename, '../../../sessions')
+        ],
+        stderr: 'inherit',
+        env: process.env,
+    });
+    const client = new Client({ name: 'test', version: '1.0.0' });
+    await client.connect(transport);
+    await client.ping();
+    for (const task of tasks) {
+        const messages = await runTask(delegate, client, task);
+        for (const message of messages)
+            console.log(`${message.role}: ${message.content}`);
+    }
+    await client.close();
+}
+const tasks = [
+    'Open https://playwright.dev/',
+];
+program
+    .option('--model <model>', 'model to use')
+    .action(async (options) => {
+    if (options.model === 'claude')
+        await run(new ClaudeDelegate());
+    else
+        await run(new OpenAIDelegate());
+});
+void program.parseAsync(process.argv);

package/lib/loopTools/context.js

@@ -0,0 +1,67 @@
+/**
+ * Copyright (c) Microsoft Corporation.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import { Client } from '@modelcontextprotocol/sdk/client/index.js';
+import { contextFactory } from '../browserContextFactory.js';
+import { BrowserServerBackend } from '../browserServerBackend.js';
+import { Context as BrowserContext } from '../context.js';
+import { runTask } from '../loop/loop.js';
+import { OpenAIDelegate } from '../loop/loopOpenAI.js';
+import { ClaudeDelegate } from '../loop/loopClaude.js';
+import { InProcessTransport } from '../mcp/inProcessTransport.js';
+import * as mcpServer from '../mcp/server.js';
+import { packageJSON } from '../utils/package.js';
+export class Context {
+    config;
+    _client;
+    _delegate;
+    constructor(config, client) {
+        this.config = config;
+        this._client = client;
+        if (process.env.OPENAI_API_KEY)
+            this._delegate = new OpenAIDelegate();
+        else if (process.env.ANTHROPIC_API_KEY)
+            this._delegate = new ClaudeDelegate();
+        else
+            throw new Error('No LLM API key found. Please set OPENAI_API_KEY or ANTHROPIC_API_KEY environment variable.');
+    }
+    static async create(config) {
+        const client = new Client({ name: 'Playwright Proxy', version: packageJSON.version });
+        const browserContextFactory = contextFactory(config);
+        const server = mcpServer.createServer('Playwright Subagent', packageJSON.version, new BrowserServerBackend(config, browserContextFactory), false);
+        await client.connect(new InProcessTransport(server));
+        await client.ping();
+        return new Context(config, client);
+    }
+    async runTask(task, oneShot = false) {
+        const messages = await runTask(this._delegate, this._client, task, oneShot);
+        const lines = [];
+        // Skip the first message, which is the user's task.
+        for (const message of messages.slice(1)) {
+            // Trim out all page snapshots.
+            if (!message.content.trim())
+                continue;
+            const index = oneShot ? -1 : message.content.indexOf('### Page state');
+            const trimmedContent = index === -1 ? message.content : message.content.substring(0, index);
+            lines.push(`[${message.role}]:`, trimmedContent);
+        }
+        return {
+            content: [{ type: 'text', text: lines.join('\n') }],
+        };
+    }
+    async close() {
+        await BrowserContext.disposeAll();
+    }
+}

package/lib/loopTools/main.js

@@ -0,0 +1,54 @@
+/**
+ * Copyright (c) Microsoft Corporation.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import dotenv from 'dotenv';
+import * as mcpServer from '../mcp/server.js';
+import { packageJSON } from '../utils/package.js';
+import { Context } from './context.js';
+import { perform } from './perform.js';
+import { snapshot } from './snapshot.js';
+import { toMcpTool } from '../mcp/tool.js';
+export async function runLoopTools(config) {
+    dotenv.config();
+    const serverBackendFactory = {
+        name: 'Playwright',
+        nameInConfig: 'playwright-loop',
+        version: packageJSON.version,
+        create: () => new LoopToolsServerBackend(config)
+    };
+    await mcpServer.start(serverBackendFactory, config.server);
+}
+class LoopToolsServerBackend {
+    _config;
+    _context;
+    _tools = [perform, snapshot];
+    constructor(config) {
+        this._config = config;
+    }
+    async initialize() {
+        this._context = await Context.create(this._config);
+    }
+    async listTools() {
+        return this._tools.map(tool => toMcpTool(tool.schema));
+    }
+    async callTool(name, args) {
+        const tool = this._tools.find(tool => tool.schema.name === name);
+        const parsedArguments = tool.schema.inputSchema.parse(args || {});
+        return await tool.handle(this._context, parsedArguments);
+    }
+    serverClosed() {
+        void this._context.close();
+    }
+}

package/lib/loopTools/perform.js

@@ -0,0 +1,32 @@
+/**
+ * Copyright (c) Microsoft Corporation.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import { z } from 'zod';
+import { defineTool } from './tool.js';
+const performSchema = z.object({
+    task: z.string().describe('The task to perform with the browser'),
+});
+export const perform = defineTool({
+    schema: {
+        name: 'browser_perform',
+        title: 'Perform a task with the browser',
+        description: 'Perform a task with the browser. It can click, type, export, capture screenshot, drag, hover, select options, etc.',
+        inputSchema: performSchema,
+        type: 'destructive',
+    },
+    handle: async (context, params) => {
+        return await context.runTask(params.task);
+    },
+});

package/lib/loopTools/snapshot.js

@@ -0,0 +1,29 @@
+/**
+ * Copyright (c) Microsoft Corporation.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import { z } from 'zod';
+import { defineTool } from './tool.js';
+export const snapshot = defineTool({
+    schema: {
+        name: 'browser_snapshot',
+        title: 'Take a snapshot of the browser',
+        description: 'Take a snapshot of the browser to read what is on the page.',
+        inputSchema: z.object({}),
+        type: 'readOnly',
+    },
+    handle: async (context, params) => {
+        return await context.runTask('Capture browser snapshot', true);
+    },
+});

package/lib/loopTools/tool.js

@@ -0,0 +1,18 @@
+/**
+ * Copyright (c) Microsoft Corporation.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+export function defineTool(tool) {
+    return tool;
+}

package/lib/mcp/http.js

@@ -0,0 +1,120 @@
+/**
+ * Copyright (c) Microsoft Corporation.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import assert from 'assert';
+import http from 'http';
+import crypto from 'crypto';
+import debug from 'debug';
+import { SSEServerTransport } from '@modelcontextprotocol/sdk/server/sse.js';
+import { StreamableHTTPServerTransport } from '@modelcontextprotocol/sdk/server/streamableHttp.js';
+import * as mcpServer from './server.js';
+const testDebug = debug('pw:mcp:test');
+export async function startHttpServer(config, abortSignal) {
+    const { host, port } = config;
+    const httpServer = http.createServer();
+    await new Promise((resolve, reject) => {
+        httpServer.on('error', reject);
+        abortSignal?.addEventListener('abort', () => {
+            httpServer.close();
+            reject(new Error('Aborted'));
+        });
+        httpServer.listen(port, host, () => {
+            resolve();
+            httpServer.removeListener('error', reject);
+        });
+    });
+    return httpServer;
+}
+export function httpAddressToString(address) {
+    assert(address, 'Could not bind server socket');
+    if (typeof address === 'string')
+        return address;
+    const resolvedPort = address.port;
+    let resolvedHost = address.family === 'IPv4' ? address.address : `[${address.address}]`;
+    if (resolvedHost === '0.0.0.0' || resolvedHost === '[::]')
+        resolvedHost = 'localhost';
+    return `http://${resolvedHost}:${resolvedPort}`;
+}
+export async function installHttpTransport(httpServer, serverBackendFactory) {
+    const sseSessions = new Map();
+    const streamableSessions = new Map();
+    httpServer.on('request', async (req, res) => {
+        const url = new URL(`http://localhost${req.url}`);
+        if (url.pathname.startsWith('/sse'))
+            await handleSSE(serverBackendFactory, req, res, url, sseSessions);
+        else
+            await handleStreamable(serverBackendFactory, req, res, streamableSessions);
+    });
+}
+async function handleSSE(serverBackendFactory, req, res, url, sessions) {
+    if (req.method === 'POST') {
+        const sessionId = url.searchParams.get('sessionId');
+        if (!sessionId) {
+            res.statusCode = 400;
+            return res.end('Missing sessionId');
+        }
+        const transport = sessions.get(sessionId);
+        if (!transport) {
+            res.statusCode = 404;
+            return res.end('Session not found');
+        }
+        return await transport.handlePostMessage(req, res);
+    }
+    else if (req.method === 'GET') {
+        const transport = new SSEServerTransport('/sse', res);
+        sessions.set(transport.sessionId, transport);
+        testDebug(`create SSE session: ${transport.sessionId}`);
+        await mcpServer.connect(serverBackendFactory, transport, false);
+        res.on('close', () => {
+            testDebug(`delete SSE session: ${transport.sessionId}`);
+            sessions.delete(transport.sessionId);
+        });
+        return;
+    }
+    res.statusCode = 405;
+    res.end('Method not allowed');
+}
+async function handleStreamable(serverBackendFactory, req, res, sessions) {
+    const sessionId = req.headers['mcp-session-id'];
+    if (sessionId) {
+        const transport = sessions.get(sessionId);
+        if (!transport) {
+            res.statusCode = 404;
+            res.end('Session not found');
+            return;
+        }
+        return await transport.handleRequest(req, res);
+    }
+    if (req.method === 'POST') {
+        const transport = new StreamableHTTPServerTransport({
+            sessionIdGenerator: () => crypto.randomUUID(),
+            onsessioninitialized: async (sessionId) => {
+                testDebug(`create http session: ${transport.sessionId}`);
+                await mcpServer.connect(serverBackendFactory, transport, true);
+                sessions.set(sessionId, transport);
+            }
+        });
+        transport.onclose = () => {
+            if (!transport.sessionId)
+                return;
+            sessions.delete(transport.sessionId);
+            testDebug(`delete http session: ${transport.sessionId}`);
+        };
+        await transport.handleRequest(req, res);
+        return;
+    }
+    res.statusCode = 400;
+    res.end('Invalid request');
+}

package/lib/mcp/inProcessTransport.js

@@ -0,0 +1,72 @@
+/**
+ * Copyright (c) Microsoft Corporation.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+export class InProcessTransport {
+    _server;
+    _serverTransport;
+    _connected = false;
+    constructor(server) {
+        this._server = server;
+        this._serverTransport = new InProcessServerTransport(this);
+    }
+    async start() {
+        if (this._connected)
+            throw new Error('InprocessTransport already started!');
+        await this._server.connect(this._serverTransport);
+        this._connected = true;
+    }
+    async send(message, options) {
+        if (!this._connected)
+            throw new Error('Transport not connected');
+        this._serverTransport._receiveFromClient(message);
+    }
+    async close() {
+        if (this._connected) {
+            this._connected = false;
+            this.onclose?.();
+            this._serverTransport.onclose?.();
+        }
+    }
+    onclose;
+    onerror;
+    onmessage;
+    sessionId;
+    setProtocolVersion;
+    _receiveFromServer(message, extra) {
+        this.onmessage?.(message, extra);
+    }
+}
+class InProcessServerTransport {
+    _clientTransport;
+    constructor(clientTransport) {
+        this._clientTransport = clientTransport;
+    }
+    async start() {
+    }
+    async send(message, options) {
+        this._clientTransport._receiveFromServer(message);
+    }
+    async close() {
+        this.onclose?.();
+    }
+    onclose;
+    onerror;
+    onmessage;
+    sessionId;
+    setProtocolVersion;
+    _receiveFromClient(message) {
+        this.onmessage?.(message);
+    }
+}