Browserbase Functions Skill

Guide Claude through deploying serverless browser automation using the official bb CLI.

When to Use

Use this skill when:

• User wants to deploy automation to run on a schedule


• User needs a webhook endpoint for browser automation


• User wants to run automation in the cloud (not locally)


• User asks about Browserbase Functions

Prerequisites

1. Get Credentials

Get API key and Project ID from:

2. Set Environment Variables

Either store for reuse:

stagehand fn auth login
# Enter API key and Project ID when prompted

Then export for the current session:

eval "$(stagehand fn auth export)"

Or set directly:

export BROWSERBASE_API_KEY="your_api_key"
export BROWSERBASE_PROJECT_ID="your_project_id"

Creating a Function Project

1. Initialize with Official CLI

pnpm dlx @browserbasehq/sdk-functions init my-function
cd my-function

This creates:

my-function/
├── package.json
├── index.ts        # Your function code
└── .env            # Add credentials here

2. Add Credentials to .env

# Copy from stored credentials
echo "BROWSERBASE_API_KEY=$BROWSERBASE_API_KEY" >> .env
echo "BROWSERBASE_PROJECT_ID=$BROWSERBASE_PROJECT_ID" >> .env

Or manually edit .env:

BROWSERBASE_API_KEY=your_api_key
BROWSERBASE_PROJECT_ID=your_project_id

3. Install Dependencies

pnpm install

Function Structure

import { defineFn } from "@browserbasehq/sdk-functions";
import { chromium } from "playwright-core";

defineFn("my-function", async (context) => {
  const { session, params } = context;
  
  // Connect to browser
  const browser = await chromium.connectOverCDP(session.connectUrl);
  const page = browser.contexts()[0]!.pages()[0]!;
  
  // Your automation
  await page.goto(params.url || "");
  const title = await page.title();
  
  // Return JSON-serializable result
  return { success: true, title };
});

Key objects:

• context.session.connectUrl - CDP endpoint to connect Playwright


• context.params - Input parameters from invocation

Development Workflow

1. Start Dev Server

pnpm bb dev index.ts

Server runs at ### 2. Test Locally __CODE_BLOCK_10__ ### 3. Iterate The dev server auto-reloads on file changes. Use console.log() for debugging - output appears in the terminal. ## Deploying ### Publish to Browserbase __CODE_BLOCK_11__ Output: __CODE_BLOCK_12__ **Save the Function ID** - you need it to invoke. ## Invoking Deployed Functions ### Via curl __CODE_BLOCK_13__ ### Via Code __CODE_BLOCK_14__ ## Common Patterns ### Parameterized Scraping __CODE_BLOCK_15__ ### With Authentication __CODE_BLOCK_16__ ### Error Handling __CODE_BLOCK_17__ ## CLI Reference | Command | Description | |---------|-------------| | pnpm dlx @browserbasehq/sdk-functions init | Create new project | | pnpm bb dev | Start local dev server | | pnpm bb publish | Deploy to Browserbase | ## Troubleshooting ### "Missing API key" __CODE_BLOCK_18__ ### Dev server won't start __CODE_BLOCK_19__ ### Function times out - Max execution time is 15 minutes - Add specific timeouts to page operations - Use waitForSelector instead of sleep ### Can't connect to browser - Check session.connectUrl is being used correctly - Ensure you're using chromium.connectOverCDP() not chromium.launch()`