Merge pull request #62 from browserbase/kj/context

Author: Kylejeong2

browserbase/README.md

@@ -28,9 +28,8 @@ node dist/index.js
 ```json
    {
       "mcpServers": {
-         "playwright": {
+         "browserbase": {
             "url": "http://localhost:8931/sse",
-            "args" : ["--proxies"],
             "env": {
                "BROWSERBASE_API_KEY": "",
                "BROWSERBASE_PROJECT_ID": ""
@@ -53,7 +52,80 @@ From here you should be able to put the url as "http://localhost:8931/sse" in th
 You can also pass in the optional flags for proxies and context id that are shown in [`config.d.ts`](./config.d.ts).
 ____
 
-The server communicates over stdio according to the Model Context Protocol.
+## Flags & Example Configs
+
+### Proxies
+
+Here are our docs on [Proxies](https://docs.browserbase.com/features/proxies).
+
+To use proxies in STDIO, set the --proxies flag in your MCP Config
+
+```json
+   {
+      "mcpServers": {
+         "playwright": {
+            "command" : "npx",
+            "args" : ["@browserbasehq/mcp-server-browserbase", "--proxies"],
+            "env": {
+               "BROWSERBASE_API_KEY": "",
+               "BROWSERBASE_PROJECT_ID": ""
+            }
+         }
+      }
+   }
+
+```
+
+### Contexts
+
+Here are our docs on [Contexts](https://docs.browserbase.com/features/contexts)
+
+To use proxies in STDIO, set the --proxies flag in your MCP Config
+
+```json
+   {
+      "mcpServers": {
+         "playwright": {
+            "command" : "npx",
+            "args" : ["@browserbasehq/mcp-server-browserbase", "--contextId", "<YOUR_CONTEXT_ID>"],
+            "env": {
+               "BROWSERBASE_API_KEY": "",
+               "BROWSERBASE_PROJECT_ID": ""
+            }
+         }
+      }
+   }
+
+```
+
+### Cookie Injection
+
+Why would you need to inject cookies? Our context API currently works on persistent cookies, but not session cookies. So sometimes our persistent auth might not work (we're working hard to add this functionality). 
+
+You can flag cookies into the MCP by adding the cookies.json to your MCP Config.
+
+To use proxies in STDIO, set the --proxies flag in your MCP Config. Your cookies JSON must be in the type of [Playwright Cookies](https://playwright.dev/docs/api/class-browsercontext#browser-context-cookies)
+
+```json
+   {
+      "mcpServers": {
+         "playwright": {
+            "command" : "npx",
+            "args" : [
+               "@browserbasehq/mcp-server-browserbase", "cookies", 
+               "{
+                  COOKIES JSON IN TYPE OF PLAYWRIGHT COOKIES
+               }"
+            ],
+            "env": {
+               "BROWSERBASE_API_KEY": "",
+               "BROWSERBASE_PROJECT_ID": ""
+            }
+         }
+      }
+   }
+
+```
 
 ## Structure
 

browserbase/config.d.ts

@@ -1,3 +1,5 @@
+import type { Cookie } from "playwright-core";
+
 export type Config = {
     /**
      * The Browserbase API Key to use
@@ -18,7 +20,36 @@ export type Config = {
      * Potential Browserbase Context to use 
      * Would be a context ID 
      */
-    context?: string;
+    context?: {
+        /**
+         * The ID of the context to use
+         */
+        contextId?: string;
+        /**
+         * Whether or not to persist the context
+         * 
+         * @default true
+         */
+        persist?: boolean;
+    };
+    /**
+     * 
+     */
+    viewPort?: {
+        /**
+         * The width of the browser
+         */
+        browserWidth?: number;
+        /**
+         * The height of the browser
+         */
+        browserHeight?: number;
+    };
+    /**
+     * Cookies to inject into the Browserbase context
+     * Format: Array of cookie objects with name, value, domain, and optional path, expires, httpOnly, secure, sameSite
+     */
+    cookies?: Cookie[];
     /**
      * Whether or not to port to a server
      * 

browserbase/src/config.ts

@@ -1,7 +1,8 @@
 import os from 'os';
 import fs from 'fs';
 import path from 'path';
-import { sanitizeForFilePath } from './tools/utils.js'; // Assuming this path is correct
+import { sanitizeForFilePath } from './tools/utils.js'; 
+import type { Cookie } from "playwright-core";
 
 export type ToolCapability = 'core' | string; // Example capabilities
 
@@ -13,23 +14,49 @@ export interface Config {
     host?: string;
   };
   proxies?: boolean;
-  contextId?: string;
+  context?: {
+    contextId?: string;
+    persist?: boolean;
+  };
+  viewPort?: {
+    browserWidth?: number;
+    browserHeight?: number;
+  };
+  cookies?: Cookie[]; 
 }
 
 // Define Command Line Options Structure
 export type CLIOptions = {
+  browserbaseApiKey?: string;
+  browserbaseProjectId?: string;
   proxies?: boolean;
   contextId?: string;
+  persist?: boolean;
   port?: number;
   host?: string;
+  cookies?: Cookie[];
+  browserWidth?: number;
+  browserHeight?: number;
 };
 
 // Default Configuration Values
 const defaultConfig: Config = {
   browserbaseApiKey: process.env.BROWSERBASE_API_KEY,
   browserbaseProjectId: process.env.BROWSERBASE_PROJECT_ID,
   proxies: false,
-  contextId: undefined,
+  context: {
+    contextId: undefined,
+    persist: true,
+  },
+  server: {
+    port: undefined,
+    host: undefined,
+  },
+  viewPort: {
+    browserWidth: 1024,
+    browserHeight: 768,
+  },
+  cookies: undefined,
 };
 
 // Resolve final configuration by merging defaults, file config, and CLI options
@@ -40,8 +67,12 @@ export async function resolveConfig(cliOptions: CLIOptions): Promise<Config> {
 
   // --- Add Browserbase Env Vars ---
   // Ensure env vars are read *after* dotenv potentially runs (in index.ts)
-  mergedConfig.browserbaseApiKey = process.env.BROWSERBASE_API_KEY;
-  mergedConfig.browserbaseProjectId = process.env.BROWSERBASE_PROJECT_ID;
+  if (!mergedConfig.browserbaseApiKey) {
+    mergedConfig.browserbaseApiKey = process.env.BROWSERBASE_API_KEY;
+  }
+  if (!mergedConfig.browserbaseProjectId) {
+    mergedConfig.browserbaseProjectId = process.env.BROWSERBASE_PROJECT_ID;
+  }
   // --------------------------------
 
   // Basic validation for Browserbase keys
@@ -58,12 +89,22 @@ export async function resolveConfig(cliOptions: CLIOptions): Promise<Config> {
 // Create Config structure based on CLI options
 export async function configFromCLIOptions(cliOptions: CLIOptions): Promise<Config> {
  return {
+    browserbaseApiKey: cliOptions.browserbaseApiKey,
+    browserbaseProjectId: cliOptions.browserbaseProjectId,
     server: {
       port: cliOptions.port,
       host: cliOptions.host,
     },
-    proxies: cliOptions.proxies || false,
-    contextId: cliOptions.contextId || undefined,
+    proxies: cliOptions.proxies,
+    context: {
+      contextId: cliOptions.contextId,
+      persist: cliOptions.persist,
+    },
+    viewPort: {
+      browserWidth: cliOptions.browserWidth,
+      browserHeight: cliOptions.browserHeight,
+    },
+    cookies: cliOptions.cookies,
   };
 }
 
@@ -85,8 +126,37 @@ function pickDefined<T extends object>(obj: T | undefined): Partial<T> {
 
 // Merge two configuration objects (overrides takes precedence)
 function mergeConfig(base: Config, overrides: Config): Config {
-  return {
-    ...pickDefined(base),
-    ...pickDefined(overrides),
-  };
+  const baseFiltered = pickDefined(base);
+  const overridesFiltered = pickDefined(overrides);
+  
+  // Create the result object
+  const result = { ...baseFiltered } as Config;
+  
+  // For each property in overrides
+  for (const [key, value] of Object.entries(overridesFiltered)) {
+    if (key === 'context' && value && result.context) {
+      // Special handling for context object to ensure deep merge
+      result.context = {
+        ...result.context,
+        ...(value as Config['context'])
+      };
+    } else if (
+      value && 
+      typeof value === 'object' && 
+      !Array.isArray(value) && 
+      result[key as keyof Config] && 
+      typeof result[key as keyof Config] === 'object'
+    ) {
+      // Deep merge for other nested objects
+      result[key as keyof Config] = {
+        ...(result[key as keyof Config] as object),
+        ...value
+      } as any;
+    } else {
+      // Simple override for primitives, arrays, etc.
+      result[key as keyof Config] = value as any;
+    }
+  }
+  
+  return result;
 } 

browserbase/src/index.ts

@@ -15,7 +15,6 @@ import getText from "./tools/getText.js";
 import session from "./tools/session.js";
 import common from "./tools/common.js";
 import contextTools from "./tools/context.js";
-import cookies from "./tools/cookies.js";
 import { Server } from "@modelcontextprotocol/sdk/server/index.js";
 import { CallToolRequestSchema, ListResourcesRequestSchema, ListToolsRequestSchema, ReadResourceRequestSchema } from "@modelcontextprotocol/sdk/types.js";
 import { z } from "zod";
@@ -60,7 +59,6 @@ export async function createServer(config: Config): Promise<Server> {
     ...navigate,
     ...session,
     ...contextTools,
-    ...cookies,
   ];
 
   const toolsMap = new Map(tools.map(tool => [tool.schema.name, tool]));

browserbase/src/program.ts

@@ -12,10 +12,16 @@ import packageJSON from '../package.json' with { type: 'json' };
 program
     .version('Version ' + packageJSON.version)
     .name(packageJSON.name)
+    .option('--browserbaseApiKey <key>', 'The Browserbase API Key to use')
+    .option('--browserbaseProjectId <id>', 'The Browserbase Project ID to use')
     .option('--proxies', 'Use Browserbase proxies.')
-    .option('--context <contextId>', 'Browserbase Context to use.')
+    .option('--contextId <contextId>', 'Browserbase Context ID to use.')
+    .option('--persist [boolean]', 'Whether to persist the Browserbase context', true)
     .option('--port <port>', 'Port to listen on for SSE transport.')
     .option('--host <host>', 'Host to bind server to. Default is localhost. Use 0.0.0.0 to bind to all interfaces.')
+    .option('--cookies [json]', 'JSON array of cookies to inject into the browser. Format: [{"name":"cookie1","value":"val1","domain":"example.com"}, ...]')
+    .option('--browserWidth <width>', 'Browser width to use for the browser.')
+    .option('--browserHeight <height>', 'Browser height to use for the browser.')
     .action(async options => {
       const config = await resolveConfig(options);
       const serverList = new ServerList(async() => createServer(config));