loom video + readme updates

Author: Kylejeong2

browserbase/README.md

@@ -1,31 +1,72 @@
 # Playwright Browserbase MCP Server
 
+![cover](../assets/browserbase-mcp.png)
+
 A Model Context Protocol server that uses Playwright and Browserbase
 to provide browser automation tools.
 
+<div>
+   <a href="https://www.loom.com/share/d285d6093b2843e98908c65592031218">
+   <img style="max-width:600px;" src="https://cdn.loom.com/sessions/thumbnails/d285d6093b2843e98908c65592031218-1ab1288912ffd40c-full-play.gif">
+   </a>
+</div>
+
 ## How to setup in MCP json
 
-### Local Dev
+You can either use our Server hosted on NPM or run it completely locally by cloning this repo. 
+
+#### To run on NPM (Recommended)
+
+Go into your MCP Config JSON and add the Browserbase Server:
+
+```json
+   {
+      "mcpServers": {
+         "browserbase": {
+            "command": "npx",
+            "args" : ["@browserbasehq/mcp-server-browserbase"],
+            "env": {
+               "BROWSERBASE_API_KEY": "",
+               "BROWSERBASE_PROJECT_ID": ""
+            }
+         }
+      }
+   }
+```
+
+Thats it! Reload your MCP client and Claude will be able to use Browserbase. 
+
+#### To run 100% local: 
+
+```bash
+   # Clone the Repo 
+   git clone https://github.com/browserbase/mcp-server-browserbase.git
+
+   # Install the dependencies in the proper directory and build the project
+   cd browserbase
+   npm install && npm run build
+
+```
 
-To run locally we can use STDIO or self-host over SSE. 
+Then in your MCP Config JSON run the server. To run locally we can use STDIO or self-host over SSE. 
 
 ### STDIO: 
 
 To your MCP Config JSON file add the following: 
 
 ```json
-{
-  "mcpServers": {
-    "playwright": {
-      "command" : "node",
-      "args" : ["/path/to/mcp-server-browserbase/browserbase/cli.js"],
-      "env": {
-        "BROWSERBASE_API_KEY": "",
-        "BROWSERBASE_PROJECT_ID": ""
+   {
+   "mcpServers": {
+      "browserbase": {
+         "command" : "node",
+         "args" : ["/path/to/mcp-server-browserbase/browserbase/cli.js"],
+         "env": {
+            "BROWSERBASE_API_KEY": "",
+            "BROWSERBASE_PROJECT_ID": ""
+            }
+         }
       }
-    }
-  }
-}
+   }
 ```
 
 ### SSE: 
@@ -73,6 +114,8 @@ The Browserbase MCP server accepts the following command-line flags:
 
 These flags can be passed directly to the CLI or configured in your MCP configuration file.
 
+### NOTE: 
+
 Currently, these flags can only be used with the local server (npx @browserbasehq/mcp-server-browserbase). 
 
 ____
@@ -83,12 +126,12 @@ ____
 
 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
+To use proxies in STDIO, set the --proxies flag in your MCP Config:
 
 ```json
    {
       "mcpServers": {
-         "playwright": {
+         "browserbase": {
             "command" : "npx",
             "args" : ["@browserbasehq/mcp-server-browserbase", "--proxies"],
             "env": {
@@ -105,12 +148,12 @@ To use proxies in STDIO, set the --proxies flag in your MCP Config
 
 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
+To use contexts in STDIO, set the --contextId flag in your MCP Config:
 
 ```json
    {
       "mcpServers": {
-         "playwright": {
+         "browserbase": {
             "command" : "npx",
             "args" : ["@browserbasehq/mcp-server-browserbase", "--contextId", "<YOUR_CONTEXT_ID>"],
             "env": {
@@ -134,13 +177,13 @@ To use proxies in STDIO, set the --proxies flag in your MCP Config. Your cookies
 ```json
    {
       "mcpServers": {
-         "playwright": {
+         "browserbase" {
             "command" : "npx",
             "args" : [
-               "@browserbasehq/mcp-server-browserbase", "cookies", 
-               "{
-                  COOKIES JSON IN TYPE OF PLAYWRIGHT COOKIES
-               }"
+               "@browserbasehq/mcp-server-browserbase", "--cookies", 
+               '{
+                  "cookies": json,
+               }'
             ],
             "env": {
                "BROWSERBASE_API_KEY": "",
@@ -160,12 +203,12 @@ Here's how to use it for custom browser sizing. We recommend to stick with 16:9
 ```json
    {
       "mcpServers": {
-         "playwright": {
+         "browserbase": {
             "command" : "npx",
             "args" : [
                "@browserbasehq/mcp-server-browserbase",
-               "--browserHeight" : 1080,
-               "--browserWidth" : 1920,
+               "--browserHeight 1080",
+               "--browserWidth 1920",
             ],
             "env": {
                "BROWSERBASE_API_KEY": "",
@@ -243,9 +286,9 @@ These tools are useful for:
 - Debugging cookie-related issues
 - Manipulating cookie attributes (expiration, security flags, etc.)
 
-## TODO
+## TODO/Roadmap
 
 *   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 more standard MCP tools (tabs, navigation, etc.).
 *   Add tests.

browserbase/src/tools/common.ts

@@ -11,13 +11,12 @@
 export {}; // Ensure file is treated as a module 
 
 import { z } from 'zod';
-import type { Tool, ToolSchema, ToolContext, ToolResult } from "./tool.js"; // Assuming ToolContext is needed if handle uses context
+import type { Tool, ToolSchema, ToolResult } from "./tool.js"; // Assuming ToolContext is needed if handle uses context
 import type { Context } from '../context.js'; // Import main Context for handle
 import type { ToolActionResult } from '../context.js'; // Import ToolActionResult
 
 // Assuming createSuccessResult/createErrorResult exist in toolUtils.js
-import { createSuccessResult, createErrorResult } from './toolUtils.js';
-import type { CallToolResult } from '@modelcontextprotocol/sdk/types.js';
+// import type { CallToolResult } from '@modelcontextprotocol/sdk/types.js';
 
 // --- Tool: Wait ---
 const WaitInputSchema = z.object({