fastbrowser_cli 1.0.14 → 1.0.18

package/dist/fastbrowser_mcp/fastbrowser_mcp.js

@@ -1,89 +1,65 @@
 #!/usr/bin/env node
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || (function () {
-    var ownKeys = function(o) {
-        ownKeys = Object.getOwnPropertyNames || function (o) {
-            var ar = [];
-            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
-            return ar;
-        };
-        return ownKeys(o);
-    };
-    return function (mod) {
-        if (mod && mod.__esModule) return mod;
-        var result = {};
-        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
-        __setModuleDefault(result, mod);
-        return result;
-    };
-})();
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.QuerySelectorsFirstInputSchema = exports.QuerySelectorFirstInputSchema = exports.QuerySelectorsInputSchema = exports.QuerySelectorInputSchema = void 0;
+// node imports
+import * as Assert from 'node:assert/strict';
+import Fs from 'node:fs';
+import Path from 'node:path';
 // npm imports
-const commander_1 = require("commander");
-const zod_1 = require("zod");
-const A11yParse = __importStar(require("../../../a11y_parse/dist/src/index.js"));
+import { Command, Option } from 'commander';
+import { z } from "zod";
+import * as A11yParse from "a11y_parse";
 // local imports
-const mcp_client_js_1 = require("./libs/mcp_client.js");
-const mcp_proxy_js_1 = require("./libs/mcp_proxy.js");
-const schemas_js_1 = require("./libs/schemas.js");
-Object.defineProperty(exports, "QuerySelectorInputSchema", { enumerable: true, get: function () { return schemas_js_1.QuerySelectorInputSchema; } });
-Object.defineProperty(exports, "QuerySelectorsInputSchema", { enumerable: true, get: function () { return schemas_js_1.QuerySelectorsInputSchema; } });
-Object.defineProperty(exports, "QuerySelectorFirstInputSchema", { enumerable: true, get: function () { return schemas_js_1.QuerySelectorFirstInputSchema; } });
-Object.defineProperty(exports, "QuerySelectorsFirstInputSchema", { enumerable: true, get: function () { return schemas_js_1.QuerySelectorsFirstInputSchema; } });
+import { McpMyClient } from "./libs/mcp_my_client.js";
+import { McpProxy } from "./libs/mcp_proxy.js";
+import { ResponseFormatter } from "./libs/response_formatter.js";
+import { QuerySelectorInputSchema, QuerySelectorsInputSchema, QuerySelectorFirstInputSchema, QuerySelectorsFirstInputSchema, } from "./libs/schemas.js";
+import { McpTargetHelper } from './libs/mcp_target_helper.js';
+export { QuerySelectorInputSchema, QuerySelectorsInputSchema, QuerySelectorFirstInputSchema, QuerySelectorsFirstInputSchema, };
 ///////////////////////////////////////////////////////////////////////////////
 ///////////////////////////////////////////////////////////////////////////////
 //	
 ///////////////////////////////////////////////////////////////////////////////
 ///////////////////////////////////////////////////////////////////////////////
 class MainHelper {
+    static async _getA11yText(mcpClient) {
+        const mcpTarget = await mcpClient.getMcpTarget();
+        const toolConfig = await McpTargetHelper.targetToolTakeSnapshot(mcpTarget);
+        const callToolResult = await mcpClient.callTool(toolConfig.toolName, toolConfig.toolArgs);
+        const snapshotText = await ResponseFormatter.formatTakeSnapshot(mcpTarget, callToolResult);
+        // sanity check
+        Assert.ok(snapshotText !== undefined, "Snapshot text is empty");
+        // return the snapshot text
+        return snapshotText;
+    }
+    /**
+     * TODO to remove this function - just call the .parse
+     * @param mcpClient
+     * @returns
+     */
+    static async _getSnapshotTree(mcpClient) {
+        const a11yText = await this._getA11yText(mcpClient);
+        // parse the accessibility tree
+        const a11yTree = A11yParse.A11yTree.parse(a11yText);
+        // return the parsed accessibility tree
+        return { snapshotText: a11yText, a11yTree };
+    }
     /**
      * Takes a snapshot of the current page to get the latest accessibility tree, and parses it into an AxNode tree structure.
      * @param mcpClient The MCP client to use for taking a snapshot.
      * @returns The parsed accessibility tree as an AxNode.
      */
     static async _resolveSelectorToUid(mcpClient, selector) {
+        // Fast path: if the selector is already a uid selector (e.g. "#1_3"), extract and return the uid directly without 
+        // taking a snapshot or querying the tree.
         const fastPathMatch = selector.match(/^#([\w-]+)$/);
         if (fastPathMatch !== null)
             return fastPathMatch[1];
-        const a11yTree = await this._getSnapshotTree(mcpClient);
+        // Slow path: take a snapshot, parse the tree, and query it with the provided selector to find the uid of the first matching node.
+        const { a11yTree } = await this._getSnapshotTree(mcpClient);
         const selectedNodes = A11yParse.A11yQuery.querySelectorAll(a11yTree, selector);
         if (selectedNodes.length === 0)
             throw new Error(`No node matched selector '${selector}'`);
         return selectedNodes[0].uid;
     }
-    static async _getSnapshotTree(mcpClient) {
-        // take a snapshot to get the latest accessibility tree
-        const response = await mcpClient.callTool('take_snapshot', {});
-        const responseText = response.content[0];
-        if (responseText.type !== "text")
-            throw new Error("Unexpected content type");
-        // get the snapshot text and remove the first line (snapshot metadata)	
-        let snapshotText = responseText.text;
-        snapshotText = snapshotText.split('\n').slice(1).join('\n');
-        // log to console for debugging
-        // console.log("Snapshot text content:");
-        // console.log(snapshotText);
-        // parse the accessibility tree
-        const a11yTree = A11yParse.A11yTree.parse(snapshotText);
-        return a11yTree;
-    }
     /**
      * Formats a list of selected accessibility-tree nodes into the text block used by
      * both querySelector and querySelectorsAll responses.
@@ -115,7 +91,7 @@ class MainHelper {
      * @returns A text representation of the query results.
      */
     static async querySelectorsAll(mcpClient, querySelectors) {
-        const a11yTree = await this._getSnapshotTree(mcpClient);
+        const { a11yTree } = await this._getSnapshotTree(mcpClient);
         const responseTexts = [];
         for (const querySelector of querySelectors.selectors) {
             // query the tree with the provided selector
@@ -139,7 +115,7 @@ class MainHelper {
      * @returns A text representation of the first matching node for each selector.
      */
     static async querySelectors(mcpClient, querySelectors) {
-        const a11yTree = await this._getSnapshotTree(mcpClient);
+        const { a11yTree } = await this._getSnapshotTree(mcpClient);
         const responseTexts = [];
         for (const querySelector of querySelectors.selectors) {
             const selectedNodes = A11yParse.A11yQuery.querySelectorAll(a11yTree, querySelector.selector);
@@ -150,90 +126,60 @@ class MainHelper {
     }
     ///////////////////////////////////////////////////////////////////////////////
     ///////////////////////////////////////////////////////////////////////////////
-    //	
+    //	Init external tools (i.e. tools that are implemented in terms of calls to the mcpClient, rather than directly registered on the mcpClient)
     ///////////////////////////////////////////////////////////////////////////////
     ///////////////////////////////////////////////////////////////////////////////
-    static async commandMcpServer({ verbose = false, }) {
+    static async initExternalTools(mcpServer, mcpClient) {
+        const mcpTarget = await mcpClient.getMcpTarget();
         ///////////////////////////////////////////////////////////////////////////////
         ///////////////////////////////////////////////////////////////////////////////
-        //	mcp client
+        //	list_pages
         ///////////////////////////////////////////////////////////////////////////////
         ///////////////////////////////////////////////////////////////////////////////
-        // Create the mcp client toward the official chrome-devtools-mcp tool, which provides access to a Chrome tab's accessibility 
-        // tree and allows us to take snapshots and query the tree with selectors.
-        const mcpClient = new mcp_client_js_1.McpClient({
-            name: "my-app",
-            version: "0.1.0",
-            transport: {
-                type: "stdio",
-                command: "npx",
-                args: [
-                    "chrome-devtools-mcp@latest", "--autoconnect", "--no-performance-crux", "--no-usage-statistics",
-                ],
-            },
+        mcpServer.registerTool(McpTargetHelper.EXTERNAL_TOOL_NAME.listPages, {
+            description: "List the open pages/tabs in the browser",
+            inputSchema: z.object({}),
+        }, async () => {
+            const toolConfig = await McpTargetHelper.targetToolListPages(mcpTarget);
+            const callToolResult = await mcpClient.callTool(toolConfig.toolName, toolConfig.toolArgs);
+            let outputStr = await ResponseFormatter.formatListPages(mcpTarget, callToolResult);
+            return {
+                content: [{ type: "text", text: outputStr }],
+            };
         });
-        // Connect the mcp client to the chrome-devtools-mcp tool, which will allow us to take snapshots and query the accessibility tree.
-        await mcpClient.connect();
-        if (verbose) {
-            // list all the tools available in mcpClient for debugging
-            const mcpClientTools = await mcpClient.listTools();
-            console.error("Tools available in mcpClient:");
-            for (const tool of mcpClientTools) {
-                console.error(`- ${tool.name}: ${tool.description}`);
-            }
-        }
         ///////////////////////////////////////////////////////////////////////////////
         ///////////////////////////////////////////////////////////////////////////////
-        //	
+        //	navigate_page
         ///////////////////////////////////////////////////////////////////////////////
         ///////////////////////////////////////////////////////////////////////////////
-        if (false) {
-            await mcpClient.callTool('navigate_page', {
-                // url: "https://www.example.com/",
-                url: "https://welcometothejungle.com/"
-            });
-            const responseText = await MainHelper.querySelectorsAll(mcpClient, {
-                selectors: [
-                    {
-                        selector: "link, button",
-                        withAncestors: true,
-                        limit: 0,
-                    },
-                    {
-                        selector: 'heading[level="1"]',
-                        withAncestors: false,
-                        limit: 0,
-                    },
-                ],
-            });
-            console.log(responseText);
-            await mcpClient.close();
-            process.exit(0);
-        }
+        mcpServer.registerTool(McpTargetHelper.EXTERNAL_TOOL_NAME.navigatePage, {
+            description: "Navigate the current page to a new URL",
+            inputSchema: z.object({
+                url: z.string().describe("The URL to navigate to"),
+            }),
+        }, async ({ url }) => {
+            const toolConfig = await McpTargetHelper.targetToolNavigatePage(mcpTarget, url);
+            const callToolResult = await mcpClient.callTool(toolConfig.toolName, toolConfig.toolArgs);
+            let outputStr = await ResponseFormatter.formatNavigatePage(mcpTarget, callToolResult);
+            return {
+                content: [{ type: "text", text: outputStr }],
+            };
+        });
         ///////////////////////////////////////////////////////////////////////////////
         ///////////////////////////////////////////////////////////////////////////////
-        //	
+        //	list_pages
         ///////////////////////////////////////////////////////////////////////////////
         ///////////////////////////////////////////////////////////////////////////////
-        // Create the MCP proxy server, which will expose tools to the MCP client and proxy calls to those tools to 
-        // the mcpClient connected to the chrome-devtools-mcp.
-        const mcpProxy = new mcp_proxy_js_1.McpProxy();
-        // Proxy the 'most interesting' tools from the mcpClient to the mcpProxy, so that they can be called from the 
-        // MCP server (and thus from an LLM agent connected to the MCP server).
-        // TODO new_page/navigate_page are very similar - maybe we can unify them in the chrome-devtools-mcp tool and 
-        // - have a single 'open_page' tool instead?
-        const toolsToProxys = [
-            'list_pages',
-            'new_page',
-            'close_page',
-            'navigate_page',
-            'take_snapshot',
-        ];
-        for (const toolName of toolsToProxys) {
-            await mcpProxy.proxyToolCall(mcpClient, toolName);
-        }
-        // Connect the MCP proxy server to start accepting connections from MCP clients (e.g. LLM agents).
-        await mcpProxy.connect();
+        mcpServer.registerTool(McpTargetHelper.EXTERNAL_TOOL_NAME.takeSnapshot, {
+            description: "Take a snapshot of the current page to get the latest accessibility tree",
+            inputSchema: z.object({}),
+        }, async () => {
+            const a11yText = await MainHelper._getA11yText(mcpClient);
+            let outputStr = a11yText;
+            return {
+                content: [{ type: "text", text: outputStr }],
+            };
+        });
         ///////////////////////////////////////////////////////////////////////////////
         ///////////////////////////////////////////////////////////////////////////////
         //	.querySelectorsAll tool implementation
@@ -252,13 +198,12 @@ class MainHelper {
             `- You can use union: e.g. "heading, link"`,
             `- You can combine selectors: e.g. 'RootWebArea > link[url*="iana"]'`,
         ].join('\n');
-        const mcpServer = await mcpProxy.getMcpServer();
-        mcpServer.registerTool("querySelectorsAll", {
+        mcpServer.registerTool(McpTargetHelper.EXTERNAL_TOOL_NAME.querySelectorsAll, {
             description: [
                 `Query the accessibility tree with CSS-like selectors`,
                 `Selector syntax: ${cssSelectorLanguageDescription} `,
             ].join('\n'),
-            inputSchema: schemas_js_1.QuerySelectorsInputSchema,
+            inputSchema: QuerySelectorsInputSchema,
         }, async (querySelectorsInput) => {
             // query the accessibility tree with the provided selector
             const outputText = await MainHelper.querySelectorsAll(mcpClient, querySelectorsInput);
@@ -271,12 +216,12 @@ class MainHelper {
         //	.querySelectors tool implementation
         ///////////////////////////////////////////////////////////////////////////////
         ///////////////////////////////////////////////////////////////////////////////
-        mcpServer.registerTool("querySelectors", {
+        mcpServer.registerTool(McpTargetHelper.EXTERNAL_TOOL_NAME.querySelectors, {
             description: [
                 `Query the accessibility tree with one or more CSS-like selectors. For each selector, returns the first matching node (or "No node found").`,
                 `Selector syntax: ${cssSelectorLanguageDescription} `,
             ].join('\n'),
-            inputSchema: schemas_js_1.QuerySelectorsFirstInputSchema,
+            inputSchema: QuerySelectorsFirstInputSchema,
         }, async (querySelectorsInput) => {
             const outputText = await MainHelper.querySelectors(mcpClient, querySelectorsInput);
             return {
@@ -288,10 +233,10 @@ class MainHelper {
         //	pressKeys tool implementation
         ///////////////////////////////////////////////////////////////////////////////
         ///////////////////////////////////////////////////////////////////////////////
-        mcpServer.registerTool("pressKeys", {
+        mcpServer.registerTool(McpTargetHelper.EXTERNAL_TOOL_NAME.pressKeys, {
             description: "Press a sequence of keys on the page. E.g. 'Tab', 'Enter', 'ArrowDown'",
-            inputSchema: zod_1.z.object({
-                keys: zod_1.z.string().describe("The keys to press, in order, comma-separated. E.g. 'Hello, Tab, Enter, ArrowDown'"),
+            inputSchema: z.object({
+                keys: z.string().describe("The keys to press, in order, comma-separated. E.g. 'Hello, Tab, Enter, ArrowDown'"),
             }),
         }, async ({ keys }) => {
             // Build the list of keys to send, splitting regular characters into individual key presses, but keeping special keys as-is
@@ -312,11 +257,20 @@ class MainHelper {
             console.error("Keys to send:", keysToSend);
             // chrome-devtools-mcp's 'press_key' tool accepts a single 'key' per call — loop through the sequence
             for (const key of keysToSend) {
-                await mcpClient.callTool('press_key', { key });
+                const toolConfig = await McpTargetHelper.targetToolPressKey(mcpTarget, key);
+                const callToolResult = await mcpClient.callTool(toolConfig.toolName, toolConfig.toolArgs);
+                // trying to handle the error case
+                if (callToolResult.isError) {
+                    console.error(`Error pressing key '${key}':`, callToolResult.error);
+                    return {
+                        content: [{ type: "text", text: `Error pressing key '${key}'` }],
+                    };
+                }
             }
+            let outputText = await ResponseFormatter.formatPressKeys(mcpTarget, keysToSend);
             // return a response indicating which keys were pressed
             return {
-                content: [{ type: "text", text: `Pressed keys: ${keysToSend.join(', ')}` }],
+                content: [{ type: "text", text: outputText }],
             };
         });
         ///////////////////////////////////////////////////////////////////////////////
@@ -324,74 +278,186 @@ class MainHelper {
         //	click tool implementation
         ///////////////////////////////////////////////////////////////////////////////
         ///////////////////////////////////////////////////////////////////////////////
-        mcpServer.registerTool("click", {
+        mcpServer.registerTool(McpTargetHelper.EXTERNAL_TOOL_NAME.click, {
             description: [
                 `Click an element selected by an accessibility selector.`,
                 `Selector syntax: ${cssSelectorLanguageDescription} `,
             ].join('\n'),
             inputSchema: {
-                selector: zod_1.z.string().describe('Accessibility selector (e.g. "#1_3" or \'button[name="Submit"]\')'),
+                selector: z.string().describe('Accessibility selector (e.g. "#1_3" or \'button[name="Submit"]\')'),
             },
         }, async ({ selector }) => {
             const uid = await MainHelper._resolveSelectorToUid(mcpClient, selector);
-            return await mcpClient.callTool('click', { uid });
+            const toolConfig = await McpTargetHelper.targetToolClick(mcpTarget, uid);
+            const callToolResult = await mcpClient.callTool(toolConfig.toolName, toolConfig.toolArgs);
+            let outputText = await ResponseFormatter.formatClick(mcpTarget, callToolResult);
+            return {
+                content: [{ type: "text", text: outputText }],
+            };
         });
         ///////////////////////////////////////////////////////////////////////////////
         ///////////////////////////////////////////////////////////////////////////////
         //	fill_form tool implementation
         ///////////////////////////////////////////////////////////////////////////////
         ///////////////////////////////////////////////////////////////////////////////
-        mcpServer.registerTool("fill_form", {
+        mcpServer.registerTool(McpTargetHelper.EXTERNAL_TOOL_NAME.fillForm, {
             description: [
                 `Fill one or more form fields, each selected by an accessibility selector.`,
                 `Selector syntax: ${cssSelectorLanguageDescription} `,
             ].join('\n'),
             inputSchema: {
-                elements: zod_1.z.array(zod_1.z.object({
-                    selector: zod_1.z.string().describe('Accessibility selector for the form field'),
-                    value: zod_1.z.string().describe('Value to fill into the field'),
+                elements: z.array(z.object({
+                    selector: z.string().describe('Accessibility selector for the form field'),
+                    value: z.string().describe('Value to fill into the field'),
                 })).describe('Elements to fill, each with a selector and a value'),
             },
         }, async ({ elements }) => {
-            const resolved = await Promise.all(elements.map(async (element) => ({
-                uid: await MainHelper._resolveSelectorToUid(mcpClient, element.selector),
-                value: element.value,
-            })));
-            return await mcpClient.callTool('fill_form', { elements: resolved });
+            const resolved = [];
+            for (const element of elements) {
+                const uid = await MainHelper._resolveSelectorToUid(mcpClient, element.selector);
+                resolved.push({
+                    uid,
+                    value: element.value,
+                });
+            }
+            if (mcpTarget === 'chrome_devtools') {
+                const toolConfig = await McpTargetHelper.targetToolFillForm(mcpTarget, resolved);
+                const callToolResult = await mcpClient.callTool(toolConfig.toolName, toolConfig.toolArgs);
+                // const callToolResult = await mcpClient.callTool('fill_form', { elements: resolved });
+                return callToolResult;
+            }
+            else if (mcpTarget === 'playwright') {
+                const fields = resolved.map((element, index) => ({
+                    name: `Field ${index + 1}`,
+                    type: 'textbox', // for simplicity, we assume all fields are textboxes in this example
+                    ref: element.uid,
+                    value: element.value,
+                }));
+                const callToolResult = await mcpClient.callTool('browser_fill_form', { fields: fields });
+                return callToolResult;
+            }
+            else {
+                throw new Error(`Unsupported MCP target: ${mcpTarget}`);
+            }
         });
         ///////////////////////////////////////////////////////////////////////////////
         ///////////////////////////////////////////////////////////////////////////////
         //	.get_current_datetime tool implementation
         ///////////////////////////////////////////////////////////////////////////////
         ///////////////////////////////////////////////////////////////////////////////
-        // const mcpServer = await mcpProxy.getMcpServer();
-        // const timezoneSchema = {
-        // 	timezone: z.string().optional().describe("IANA timezone name (e.g. 'America/New_York'). Defaults to local system timezone."),
-        // };
-        // mcpServer.registerTool(
-        // 	"get_current_datetime",
-        // 	{
-        // 		description: "Get the current date and time",
-        // 		inputSchema: timezoneSchema,
-        // 	},
-        // 	async ({ timezone }) => {
-        // 		const date = new Date();
-        // 		const options: Intl.DateTimeFormatOptions = {
-        // 			timeZone: timezone,
-        // 			year: "numeric",
-        // 			month: "2-digit",
-        // 			day: "2-digit",
-        // 			hour: "2-digit",
-        // 			minute: "2-digit",
-        // 			second: "2-digit",
-        // 			timeZoneName: "short",
-        // 		};
-        // 		const formatted = new Intl.DateTimeFormat("en-US", options).format(date);
-        // 		return {
-        // 			content: [{ type: "text", text: formatted }],
-        // 		};
-        // 	}
-        // );
+        const timezoneSchema = {
+            timezone: z.string().optional().describe("IANA timezone name (e.g. 'America/New_York'). Defaults to local system timezone."),
+        };
+        mcpServer.registerTool(McpTargetHelper.EXTERNAL_TOOL_NAME.getCurrentDateTime, {
+            description: "Get the current date and time",
+            inputSchema: timezoneSchema,
+        }, async ({ timezone }) => {
+            const date = new Date();
+            const options = {
+                timeZone: timezone,
+                year: "numeric",
+                month: "2-digit",
+                day: "2-digit",
+                hour: "2-digit",
+                minute: "2-digit",
+                second: "2-digit",
+                timeZoneName: "short",
+            };
+            const formatted = new Intl.DateTimeFormat("en-US", options).format(date);
+            return {
+                content: [{ type: "text", text: formatted }],
+            };
+        });
+    }
+    ///////////////////////////////////////////////////////////////////////////////
+    ///////////////////////////////////////////////////////////////////////////////
+    //	.commandMcpServer: the main entry point for starting the MCP proxy server, which connects to the MCP 
+    // 	target (e.g. chrome-devtools-mcp), proxies tools from the MCP target, and registers external tools that 
+    // 	are implemented in terms of calls to the MCP target.
+    ///////////////////////////////////////////////////////////////////////////////
+    ///////////////////////////////////////////////////////////////////////////////
+    static async commandMcpServer({ mcpTarget, verbose = false, }) {
+        ///////////////////////////////////////////////////////////////////////////////
+        ///////////////////////////////////////////////////////////////////////////////
+        //	mcp client
+        ///////////////////////////////////////////////////////////////////////////////
+        ///////////////////////////////////////////////////////////////////////////////
+        const { command: mcpCommand, args: mcpArgs } = McpTargetHelper.mcpArgs(mcpTarget);
+        // TODO remove this MCPMyClient - confusing
+        // Create the mcp client toward the official chrome-devtools-mcp tool, which provides access to a Chrome tab's accessibility 
+        // tree and allows us to take snapshots and query the tree with selectors.
+        const mcpClient = new McpMyClient({
+            name: "fastbrowser_mcp_proxy_client",
+            version: "1.0.0",
+            mcpTarget,
+            transport: {
+                type: "stdio",
+                command: mcpCommand,
+                args: mcpArgs,
+            },
+        });
+        // Connect the mcp client to the chrome-devtools-mcp tool, which will allow us to take snapshots and query the accessibility tree.
+        await mcpClient.connect();
+        // If verbose mode is enabled, list all the tools available in the mcpClient for debugging purposes.
+        if (verbose) {
+            // list all the tools available in mcpClient for debugging
+            const mcpClientTools = await mcpClient.listTools();
+            console.error("Tools available in mcpClient:");
+            for (const tool of mcpClientTools) {
+                console.error(`- ${tool.name}: ${tool.description}`);
+            }
+        }
+        ///////////////////////////////////////////////////////////////////////////////
+        ///////////////////////////////////////////////////////////////////////////////
+        //	
+        ///////////////////////////////////////////////////////////////////////////////
+        ///////////////////////////////////////////////////////////////////////////////
+        if (false) {
+            await mcpClient.callTool('navigate_page', {
+                // url: "https://www.example.com/",
+                url: "https://welcometothejungle.com/"
+            });
+            const responseText = await MainHelper.querySelectorsAll(mcpClient, {
+                selectors: [
+                    {
+                        selector: "link, button",
+                        withAncestors: true,
+                        limit: 0,
+                    },
+                    {
+                        selector: 'heading[level="1"]',
+                        withAncestors: false,
+                        limit: 0,
+                    },
+                ],
+            });
+            console.log(responseText);
+            await mcpClient.close();
+            process.exit(0);
+        }
+        ///////////////////////////////////////////////////////////////////////////////
+        ///////////////////////////////////////////////////////////////////////////////
+        //	
+        ///////////////////////////////////////////////////////////////////////////////
+        ///////////////////////////////////////////////////////////////////////////////
+        // Create the MCP proxy server, which will expose tools to the MCP client and proxy calls to those tools to 
+        // the mcpClient connected to the chrome-devtools-mcp.
+        const mcpProxy = new McpProxy();
+        // Proxy the 'most interesting' tools from the mcpClient to the mcpProxy, so that they can be called from the 
+        // MCP server (and thus from an LLM agent connected to the MCP server).
+        const toolsToProxys = await McpTargetHelper.toolsToProxy(mcpTarget);
+        for (const toolName of toolsToProxys) {
+            await mcpProxy.proxyToolCall(mcpClient, toolName);
+        }
+        ///////////////////////////////////////////////////////////////////////////////
+        ///////////////////////////////////////////////////////////////////////////////
+        //	.querySelectorsAll tool implementation
+        ///////////////////////////////////////////////////////////////////////////////
+        ///////////////////////////////////////////////////////////////////////////////
+        const mcpServer = await mcpProxy.getMcpServer();
+        await MainHelper.initExternalTools(mcpServer, mcpClient);
+        // Connect the MCP proxy server to start accepting connections from MCP clients (e.g. LLM agents).
+        await mcpProxy.connect();
     }
 }
 ///////////////////////////////////////////////////////////////////////////////
@@ -400,14 +466,31 @@ class MainHelper {
 ///////////////////////////////////////////////////////////////////////////////
 ///////////////////////////////////////////////////////////////////////////////
 async function main() {
-    const program = new commander_1.Command();
+    // Redirect process.stderr to a log file, so that the MCP communication is not polluted by logs.
+    const logFile = Path.resolve(import.meta.dirname, `../../outputs/fastbrowser_mcp_${new Date().toISOString()}.log`);
+    const logStream = Fs.createWriteStream(logFile, { flags: 'a' });
+    process.stderr.write = logStream.write.bind(logStream);
+    // throw Error("This entry point is not meant to be run directly. Please run one of the npm scripts defined in package.json, e.g. 'npm run start:fastbrowser_mcp' or 'npm run inspect:fastbrowser_mcp:chrome_devtools'");
+    const program = new Command();
     program
         .command('mcp_server')
         .description('Start the MCP proxy server')
         .option('-v, --verbose', 'Enable verbose logging')
-        .action(async ({ verbose }) => {
-        await MainHelper.commandMcpServer({ verbose });
+        .addOption(new Option('-b, --mcp_target <mcpTarget>', 'the MCP> of MCP to run')
+        .choices(['chrome_devtools', 'playwright'])
+        .default('playwright'))
+        .action(async (options) => {
+        await MainHelper.commandMcpServer({
+            mcpTarget: options.mcp_target,
+            verbose: options.verbose,
+        });
     });
+    // display help if no command is provided
+    if (process.argv.length < 3) {
+        program.help();
+        process.exit(1);
+    }
+    // Parse the command-line arguments and execute the appropriate command action.
     program.parse(process.argv);
 }
 ///////////////////////////////////////////////////////////////////////////////