Configure Browserbase for Vercel AI

Get your API Key

Then, copy your API key and project ID directly from the input and set the BROWSERBASE_API_KEY and BROWSERBASE_PROJECT_ID environment variables.

Install the Vercel AI, Anthropic, Jsdom, Playwright, and Readability

We use Playwright to navigate the web and extract content, Jsdom to parse the HTML, and Readability to extract the text.

As for the Vercel AI SDK and Anthropic, we use them to generate the prompts and handle the responses.

 npm i playwright ai jsdom @ai-sdk/anthropic @mozilla/readability

Create the Session

The session is created to allow the browser to connect to the Browserbase API.

We’ll use the session ID to create a connection to the browser and extract the content from the page.

async function createSession() {
  const response = await fetch(`https://api.browserbase.com/v1/sessions`, {
    method: "POST",
    headers: {
      "x-bb-api-key": process.env.BROWSERBASE_API_KEY,
      "Content-Type": "application/json",
    },
    body: JSON.stringify({ projectId: process.env.BROWSERBASE_PROJECT_ID }),
  });
  const { id } = await response.json();
  return id;
}

Create a function to receive and summarize the page content

In this step, we’ll create a function to receive and summarize the page content. Based off a user’s message, we’ll create a search query and extract the content from the page.

We’ll use Jsdom to parse the HTML and Readability to extract the text.

async function getPageInfo(message: string) {
  const sessionId = await createSession();
  const wsUrl = `wss://connect.browserbase.com?apiKey=${process.env.BROWSERBASE_API_KEY}&sessionId=${sessionId}`;

  const browser = await chromium.connectOverCDP(wsUrl);
  const page = browser.contexts()[0].pages()[0];

  const searchQuery = encodeURIComponent(`${message}?`);
  await page.goto(`https://www.google.com/search?q=${searchQuery}`);


  const content = await page.content();
  const dom = new JSDOM(content);
  const article = new Readability(dom.window.document).parse();
  await browser.close();

  return article?.textContent || '';
}

Create the GET request to generate the summary

Next.js provides Route Handlers that can be used to direct incoming requests to the appropriate server components.

Below is an example of a route handler in the App Router, which processes the GET method using the Browserbase API and returns the text content of the page:

export async function GET(request: Request) {
  const userMessage = "What is the weather in San Francisco?";

  const info = await getPageInfo(userMessage);

  const response = await generateText({
    model: anthropic("claude-3-5-sonnet-20241022"),
    messages: convertToCoreMessages([
      { role: "system", content: "You are a helpful assistant" },
      { role: "user", content: `Info: ${info}\n\nQuestion: ${userMessage}` }
    ]),
  });

  return new Response(JSON.stringify({ content: response.text }), {
    status: 200,
    headers: { 'Content-Type': 'application/json' },
  });
}

Be sure to store the ANTHROPIC_API_KEY environment variable in your .env file.

Congratulations! You’ve successfully created a GET request to generate the summary of the page content using the Browserbase API and Vercel AI SDK.

In addition to learning how to use the Browserbase API with Vercel AI SDK, we’ve attached a Browserbase x Nextjs template to get you started.

Browserbase x Nextjs Template

Browserbase X Nextjs Template

Capabilities