restrcture

Author: alexdphan

browserbase/.npmignore

@@ -0,0 +1,15 @@
+# Ignore node_modules, build output, logs, env files, etc.
+node_modules
+dist
+*.log
+.env*
+
+# Ignore IDE/editor files
+.vscode
+.idea
+*.swp
+*.swo
+
+# Ignore OS files
+.DS_Store
+Thumbs.db 

browserbase/Dockerfile

@@ -0,0 +1,22 @@
+# Basic Node.js Dockerfile
+FROM node:20-slim
+
+WORKDIR /usr/src/app
+
+# Install dependencies
+COPY package*.json ./
+RUN npm ci --only=production
+
+# Copy application code
+COPY dist ./dist
+COPY src ./src
+
+# Define environment variables (can be overridden)
+ENV NODE_ENV=production
+# ENV BROWSERBASE_API_KEY=your_api_key
+# ENV BROWSERBASE_PROJECT_ID=your_project_id
+
+# Expose a default port (useful if deploying as a service, though stdio is used now)
+EXPOSE 8080
+
+CMD [ "node", "dist/index.js" ] 

browserbase/README.md

@@ -1,110 +1,48 @@
-# Browserbase MCP Server
+# Playwright Browserbase MCP Server
 
-![cover](../assets/browserbase-mcp.png)
+A Model Context Protocol server that uses Playwright and Browserbase
+to provide browser automation tools.
 
-## Get Started
+## Setup
 
-1. Run `npm install` to install the necessary dependencies, then run `npm run build` to get `dist/index.js`.
+1.  Install dependencies:
+    ```bash
+    npm install
+    ```
+2.  Set environment variables (e.g., in a `.env` file):
+    *   `BROWSERBASE_API_KEY`: Your Browserbase API key.
+    *   `BROWSERBASE_PROJECT_ID`: Your Browserbase project ID.
+3.  Compile TypeScript:
+    ```bash
+    npm run build
+    ```
 
-2. Set up your Claude Desktop configuration to use the server.  
+## Running
 
-```json
-{
-  "mcpServers": {
-    "browserbase": {
-      "command": "node",
-      "args": ["path/to/mcp-server-browserbase/browserbase/dist/index.js"],
-      "env": {
-        "BROWSERBASE_API_KEY": "<YOUR_BROWSERBASE_API_KEY>",
-        "BROWSERBASE_PROJECT_ID": "<YOUR_BROWSERBASE_PROJECT_ID>"
-      }
-    }
-  }
-}
+```bash
+node dist/index.js
 ```
 
-3. Restart your Claude Desktop app and you should see the tools available clicking the 🔨 icon.
-
-4. Start using the tools! Below is an image of Claude closing a browser session.
-
-<p align="center">
-  <img src="../assets/browserbase-demo.png" alt="demo" width="600"/>
-</p>
-
-
-## Tools
-
-### Browserbase API
-
-- **browserbase_create_session**
-
-  - Create a new cloud browser session using Browserbase
-  - No required inputs
-
-- **browserbase_navigate**
-
-  - Navigate to any URL in the browser
-  - Input: `url` (string)
-
-- **browserbase_screenshot**
-
-  - Capture screenshots of the entire page or specific elements
-  - Inputs:
-    - `name` (string, required): Name for the screenshot
-    - `selector` (string, optional): CSS selector for element to screenshot
-    - `width` (number, optional, default: 800): Screenshot width
-    - `height` (number, optional, default: 600): Screenshot height
-
-- **browserbase_click**
-
-  - Click elements on the page
-  - Input: `selector` (string): CSS selector for element to click
-
-- **browserbase_fill**
-
-  - Fill out input fields
-  - Inputs:
-    - `selector` (string): CSS selector for input field
-    - `value` (string): Value to fill
-
-- **browserbase_evaluate**
-
-  - Execute JavaScript in the browser console
-  - Input: `script` (string): JavaScript code to execute
-
-- **browserbase_get_content**
-
-  - Extract all content from the current page
-  - Input: `selector` (string, optional): CSS selector to get content from specific elements
-
-- **browserbase_parallel_sessions**
-  - Create multiple browser sessions and navigate to different URLs
-  - Input: `sessions` (array): Array of objects containing:
-    - `url` (string): URL to navigate to
-    - `id` (string): Session identifier
-
-### Resources
-
-The server provides access to two types of resources:
-
-1. **Console Logs** (`console://logs`)
-
-   - Browser console output in text format
-   - Includes all console messages from the browser
-
-2. **Screenshots** (`screenshot://<name>`)
-   - PNG images of captured screenshots
-   - Accessible via the screenshot name specified during capture
-
-## Key Features
-
-- Cloud browser automation
-- Web data extraction
-- Console log monitoring
-- Screenshot capabilities
-- JavaScript execution
-- Basic web interaction (navigation, clicking, form filling)
-
-## License
-
-This MCP server is licensed under the MIT License. This means you are free to use, modify, and distribute the software, subject to the terms and conditions of the MIT License. For more details, please see the LICENSE file in the project repository.
+The server communicates over stdio according to the Model Context Protocol.
+
+## Structure
+
+*   `src/`: TypeScript source code
+    *   `index.ts`: Main entry point, env checks, shutdown
+    *   `server.ts`: MCP Server setup and request routing
+    *   `sessionManager.ts`: Handles Browserbase session creation/management
+    *   `tools/`: Tool definitions and implementations
+    *   `resources/`: Resource (screenshot) handling
+    *   `types.ts`: Shared TypeScript types
+*   `dist/`: Compiled JavaScript output
+*   `tests/`: Placeholder for tests
+*   `utils/`: Placeholder for utility scripts
+*   `Dockerfile`: For building a Docker image
+*   Configuration files (`.json`, `.ts`, `.mjs`, `.npmignore`)
+
+## TODO
+
+*   Implement true `ref`-based interaction logic for click, type, drag, hover, select_option.
+*   Implement element-specific screenshots using `ref`.
+*   Add more standard Playwright MCP tools (tabs, navigation, etc.).
+*   Add tests.

browserbase/package.json

@@ -15,7 +15,6 @@
   ],
   "scripts": {
     "build": "tsc && shx chmod +x dist/*.js",
-    "playwright": "tsc && shx chmod +x dist/playwright.js",
     "prepare": "npm run build",
     "watch": "tsc --watch",
     "inspector": "npx @modelcontextprotocol/inspector build/index.js"

browserbase/playwright.config.ts

@@ -0,0 +1,34 @@
+import { defineConfig, devices } from '@playwright/test';
+
+/**
+ * Basic Playwright config - primarily useful if adding actual
+ * tests later, might not be strictly needed for the MCP server itself.
+ */
+export default defineConfig({
+  testDir: './tests',
+  fullyParallel: true,
+  forbidOnly: !!process.env.CI,
+  retries: process.env.CI ? 2 : 0,
+  workers: process.env.CI ? 1 : undefined,
+  reporter: 'html',
+  use: {
+    trace: 'on-first-retry',
+    // Base URL to use in actions like `await page.goto('/')`
+    // baseURL: 'http://127.0.0.1:3000',
+  },
+
+  /* Configure projects for major browsers */
+  // projects: [
+  //   {
+  //     name: 'chromium',
+  //     use: { ...devices['Desktop Chrome'] },
+  //   },
+  // ],
+
+  /* Run your local dev server before starting the tests */
+  // webServer: {
+  //   command: 'npm run start',
+  //   url: 'http://127.0.0.1:3000',
+  //   reuseExistingServer: !process.env.CI,
+  // },
+});