Read more about Browserbase - a web browser for your AI - the company, product, features, and news on the Browserbase blog

Browserbase Blog: Automate the web

The Browser Blog

Paul Klein

>Try our new product, [Director.ai](https://director.ai) today

In this hyper-fast world of AI, in order to compete you have to keep up. Even since starting Browserbase 16 months ago, I’ve seen the promises of AI turn into production-ready reality. 

We're proud to be part of this transformation, building the infrastructure that makes web automation accessible to everyone. What started with a thesis that AI agents would require great browser infrastructure, has turned into billion dollar companies using Browserbase to deliver better outcomes for their customers.

## Building on a foundation of primitives

The most transformative technology companies (Twilio, Stripe, Vercel) all share something in common: they're primitives. They provide the fundamental building blocks that enable developers to create powerful applications.

Browser infrastructure represents the next critical primitive. It's the foundation that will change how people interact with and automate the web, empowering developers to build software that fundamentally transforms online work.

## The opportunity ahead

Think about how often we interact with a web browser: buying products, sending messages, deploying code. Now consider all the routine online tasks, from sending emails to booking travel, that consume our time every single day.

The future of browsing is selective automation. Humans will still do the joyful, discovery-driven tasks. But repetitive, time-consuming work should be done by software. That’s what we’re building for.

This vision where AI handles the boring parts while humans focus on what matters, represents a massive business opportunity. If Browserbase can become the rails of this new era, we'll be enabling an entirely new category of applications.

And yes, maybe developers are inherently lazy, we build tools to avoid repetitive work. Browserbase is the ultimate expression of that philosophy.

## Expanding our platform

Along with our Series B announcement and lots of small product improvements, we're announcing three main platform upgrades:

1. [**Director.ai**](http://director.ai/): Browserbase has always been built for developers, and we plan to always help developers automate the web, but in this era of AI, everyone can be a developer. And that's why we're launching Director. Director is here to let anyone automate the web, generate Stagehand scripts and deploy them on Browserbase. It's empowering. And it's transformational for infrastructure companies like us, which traditionally only sold to developers, but now we can sell or support everybody. I think that's monumental.
2. **Stagehand for Python**: We're now working with two of the most popular programming languages, Python and Node.js. And I'm very excited for that. The Python version also comes with enhanced observability features built into the Browserbase dashboard, including session recordings, token usage tracking, and comprehensive logging.
3. **We're lowering our prices**: We've been hard at work improving our infrastructure to continue to offer better pricing and value. We hope to make automation a more accessible tool for all builders. Here are the key changes, but you can see all the details here. 
    - **~~Hobby~~ Developer plan**: 50% price reduction to get started, from $39 to $20/month for 100 browser hours and 1 GB of proxies.
    - **More concurrent browsers**: From 3 to 25 on the Developer plan & doubled concurrency from 25 to 50 browsers on the Startup plan.
    - **New feature**: Variable-size browsers for scale customers, choose from our pre-configured small, medium, or large instances.


 ## Series B & beyond

The product release coincides with a $40 million Series B financing round led by Notable Capital, with participation from existing investors CRV and Kleiner Perkins. This new funding marks our commitment to the long haul. Our team, investors, and most importantly, our customers share a vision of a future where people operate with unprecedented leverage through intelligent automation.

The journey ahead is substantial. Browser infrastructure still needs deep innovation—in the browser technology itself, the surrounding infrastructure, and all the supplemental features required to build powerful applications on this foundation.

The market opportunity attracts competition, which we welcome. In markets this large, innovation benefits everyone, pushing the entire ecosystem forward and delivering better solutions for customers.

Looking ahead to the next year at Browserbase, our mission remains clear: help everyone automate the web. We're building the best browser infrastructure platform, the most powerful framework, and the most accessible application to make that vision reality.

We can't wait to see what everyone builds.

We're excited to announce our Series B funding, major platform updates, and our plans for building the primitive infrastructure that will enable AI to automate the mundane work we do online every day.

Building the future of web automation

Today, Browserbase has been named to the seventh annual Enterprise Tech 30—a definitive list of the most promising, private enterprise tech companies across all stages of maturity.

We're honored to be part of such a powerful list of companies. It's such an exciting time to be building an AI infrastructure company!

#### Browserbase's place in the AI landscape

AI isn’t just flying, it’s traveling at warp speed. Along with AI’s momentum comes an imminent need for reliable railroad tracks for the first trains traversing this new landscape. Developers are using LLMs to automate more tasks than ever before and web browsers are an essential platform to execute these automations… and developers need help running them, which is where Browserbase comes in.

Developers use headless web browsers to programmatically interact with the web. These headless web browsers are especially difficult to run in a production environment. With Browserbase, customers simply connect to a managed web browser that integrates seamlessly with their existing code.

Browserbase is excited about continuing to power the world's best AI tools.

#### What's next?

Hiring! In the age of AI, talent is the biggest differentiator. Our team is the reason that Browserbase is being named the #1 early-stage startup today by ET30. They're some of the most impressive and fun people I've ever worked with.

Join us! https://browserbase.com/careers

#### The selection process

The Enterprise Tech 30 reveals the enterprise startups who have the most potential to meaningfully shift how enterprises operate. Companies are inducted into the community through a selection-only process based on a successful background and substantial reach in enterprise technology. Nearly 600 venture-backed private enterprise tech companies across various stages were considered in the two-phase process by a record 100+ venture capitalists.

For more information on the research methodology, additional insights, and to view the results, visit enterprisetech30.com.




Today, Browserbase has been named to the seventh annual Enterprise Tech 30—a definitive list of the most promising, private enterprise tech companies across all stages of maturity. We're honored to be number one on the early companies list. 

Browserbase named #1 on the Enterprise Tech 30 list

### What is a headless browser?

The innate value of code is its ability to automate work on behalf of people. Traditionally, that means connecting many APIs together, processing data, and presenting it in a beautiful interface. Code uses other code to get things done.

Over the last decade, software has undergone a massive shift from desktop to web applications. People now complete their work, handle their finances, and run their businesses through web browsers. As more of our daily tasks move online, the desire to automate web-based workflows becomes increasingly crucial. But what if you want to automate something that doesn't expose an API? What if you need to interact with an application that hasn't been built to be used by code?

Simply fetching HTML data from the website often isn't enough. Modern websites use JavaScript to load data on the client side and control interactive elements - if you only retrieve the HTML, you miss crucial parts of how the application actually works.

Instead, what if you could use software the same way people do? Going to the website, clicking buttons, submitting forms, and performing all the actions a person would do. But instead of being controlled by a human, it's controlled by code.

This is the concept of a headless browser.

## How does a headless browser work?

A headless browser is a browser designed to be controlled by code. It's functionally identical to the web browser you use on your machine, but can run on a server. It's "headless" because there's no graphical user interface (GUI), but it still loads and interacts with pages exactly like a regular web browser does.

But if there's no GUI, how does code control a headless browser? The answer lies in browser protocols - standardized ways for code to communicate with and control browsers. The most widely used is the Chrome DevTools Protocol (CDP), which provides low-level control over browser operations.

These protocols are low-level, meaning they provide a lot of control over the browser, but they are also complex and difficult to work with. It's like building software using machine code.

That's why developers typically use browser automation frameworks - tools that provide simple, abstracted interfaces for controlling browsers.

## Browser automation frameworks

Browser automation frameworks make it easy to write code that controls browsers. They handle the complexity of protocol communication and provide familiar programming interfaces. Here are the most popular options:

#### Playwright

*   Created by Microsoft
    
*   Modern, promise-based API
    
*   Originally focused on testing web applications

<br>

#### Stagehand

*   Created by Browserbase
    
*   A superset of Playwright, with AI features for self-healing automations
    
*   Specialized for browser automation
    

#### Puppeteer

*   Developed by Google’s Chrome team
    
*   Deep integration with CDP
    
*   Excellent for PDF generation and screenshots
    

#### Selenium

*   Oldest automation framework
    
*   Uses WebDriver protocol - a legacy protocol for browser automation
    
*   Large ecosystem of tools and plugins
    

## Using headless browsers

Headless browsers unlock new possibilities for developers. By enabling code to interact with any website the same way people do, they allow you to build integrations without being limited by available APIs.

Getting started with headless browsers is straightforward. With just a few lines of code, you can automate basic web interactions locally:

```
const { chromium } = require('playwright');

async function example() {

const browser = await chromium.launch();

const page = await browser.newPage();

await page.goto('https://example.com');

await page.click('#submit-button');

}
```

However, running headless browsers in production presents significant challenges.

You need to:

*   Manage browser instances and resources
    
*   Handle concurrent sessions
    
*   Deal with browser crashes and cleanup
    
*   Scale infrastructure as demand grows
    
*   Monitor performance and reliability
    

This is where Browserbase comes in. We provide a reliable, scalable infrastructure for running headless browsers in production, letting you focus on building your automation logic rather than managing browser infrastructure.


A headless browser is a web browser controlled by code that uses software like humans do - visiting sites, clicking buttons, and submitting forms, all automatically.

What is a headless browser?

Beatriz Go

We finally did it!
------------------

Today, we're thrilled to announce what many of you have been asking for – a free plan at Browserbase. We've designed our free plan to give you a better experience with our platform, more time to understand our value proposition, and a place for your personal projects.

What's changing?
----------------

Our previous sign up experience included 10 total web browser sessions to test our product. While this was a starting point, we've heard from many of you that it didn't provide enough opportunity to properly evaluate Browserbase and understand how it could fit into your workflows.

**Starting February 25, 2025, our new free plan includes:**

*   **60 minutes of browser sessions per month** recurring monthly from your sign-up date
    
*   **15-minute maximum session duration** to help you manage your time efficiently
    
*   **7-day data retention** for all your sessions
    
*   **The same reliable browser automation you expect from Browserbase**
    

![](https://framerusercontent.com/images/l3zonw4Qf4hU1aHJ8gNBpgOavqA.png)

Why we’re launching this now
----------------------------

For those familiar with browser automations, we want you to have a chance to explore and test the exciting features we’ve recently rolled out. It should be easy to get started and seamless to grow with us when it’s time.

For those less familiar with browser automations, we want to make them more accessible! Build your first automation, test out Stagehand, or experiment with new ideas, on us.

We also just think Browserbase is really cool, and we want you to experience this for yourself. The free plan is your chance to explore.

Your personal app awaits
------------------------

It’s important to us that the free plan is generous enough to power your personal projects, while also balancing the real cost of providing the browser infrastructure behind it. We built a script that looks up a recipe and orders the ingredients, and it only takes about 10 browser minutes. That means you could run this 6 times per month!

Now you can build that restaurant reservation bot or automate your grocery delivery, for free.

Ready to get started?
---------------------

If you've been browser-curious but haven't yet tried our product, now is absolutely the time to jump in! The playground is open, and we can't wait to see what you'll build.

We finally did it! Today, we're thrilled to announce what many of you have been asking for – a free plan at Browserbase.

The Browserbase Free Plan (Finally!)

Alex Phan

Anirudh Kamath

In web automation and testing, three tools tend to lead the field: Playwright, Puppeteer, and Selenium. Each tool has its own features and benefits.

However, for the most powerful and reliable option, Playwright is the best of the three. At Browserbase, we support all three frameworks. We have seen why developers and teams often choose Playwright for modern automation. In this article, we will break down the key differences and explain why Playwright reigns supreme.

We'll also check out Browserbase's new open-source library called Stagehand: the robust, AI-powered successor to Playwright.

## Choosing Your Browser Automation Tool

### What to Look for in 2025

Before finding out what tools are out in the market, it’s important to know what to look for. Some of these features that developers often as for are listed below:

*   Setup and initialization process is streamlined, requiring minimal configuration compared to other frameworks.
    
*   Chrome execution is highly reliable due to direct integration with Chrome DevTools Protocol.
    
*   The framework provides debugging capabilities through modern tools.
    
*   Documentation is comprehensive, with guides, API references, and practical examples that help developers get started quickly.
    

## Understanding Your Options

Let's go through three of the most common frameworks being used as we examine their strengths, limitations, and use cases in modern web automation.

### Selenium

Jason Huggins at ThoughtWorks created Selenium in 2004 (the oldest of the three frameworks). It changed web automation as one of the first complete testing frameworks. It has evolved through multiple versions, with Selenium WebDriver becoming the industry standard. Selenium works with many popular programming languages like Java, Python, C#, Ruby, and JavaScript. This flexibility lets development teams use their preferred languages.

Selenium's architecture consists of the WebDriver for browser-specific automation bindings, Grid for distributed testing, and IDE for record-and-playback functionality. Unlike other tools, it needs different browser-specific drivers (ChromeDriver for Chrome and GeckoDriver for Firefox) to function. While Selenium offers support, its architecture introduces complexity and performance overhead compared to modern alternatives.

Selenium does have some major weaknesses, which includes slower execution speed compared to Playwright and Puppeteer in performance tests, more complex setup and configuration required, lacks advanced features like Playwright's custom selector engines, and does not have deep integration with Chrome's DevTools like Puppeteer.

Let’s examine how Selenium approaches an automation task:
```json
// Selenium

  

import { Builder } from "selenium-webdriver";

import chrome from "selenium-webdriver/chrome";

  

(async () \=> {

// Create new Chrome options

const options = new chrome.Options();

// Create the WebDriver instance

const driver = await new Builder()

.forBrowser("chrome")

.setChromeOptions(options)

.build();

  

try {

// Navigate to the website

await driver.get("https://www.browserbase.com");

// Add any additional automation steps here

} finally {

// Make sure to quit the driver to clean up resources

await driver.quit();

}

})().catch((error) \=> console.error(error.message));
```

Selenium is the most verbose and failure-prone - it requires explicit waits and more setup code, reflecting its enterprise-focused architecture and broad compatibility requirements.

### Puppeteer

Launched in 2017, Google created Puppeteer as a powerful Node.js library specifically designed for automating and testing Chromium-based browsers. Instead of building a separate driver like Selenium, Puppeteer communicates directly with Chrome DevTools Protocol. This allows for more efficient and streamlined browser control.

While Puppeteer only works with JavaScript and TypeScript, it remains a powerful tool for Chromium-specific automation needs, particularly when deep browser integration is required.

However, Puppeteer has limitations as well. This includes limited browser support primarily focused on Chrome and Chromium-based browsers, lacks native mobile app testing features, primarily supports JavaScript limiting language options for developers, and is less suitable for complex end-to-end testing across multiple browsers.

Here's an example of how Puppeteer handles browser automation:

```
// Puppeteer
import puppeteer from 'puppeteer';
(async () \=> {
// Launch a browser instance instead of connecting to BrowserBase
const browser = await puppeteer.launch({
headless: "new" // Use new headless mode
});
// Create a new page (pages() might be empty in fresh browser)
const page = await browser.newPage();
// Navigate to the website
await page.goto('https://www.browserbase.com');
// Close the page and browser
await page.close();
await browser.close();
})().catch((error) \=> console.error(error.message));
```

While more streamlined than Selenium, Puppeteer's Chrome-only focus and lack of built-in smart waiting requires more manual handling compared to Playwright, which is mentioned in the next section.

## Enter Playwright: The Clear Winner

Microsoft released Playwright in 2020. Since its launch, Playwright has evolved to become a comprehensive automation solution.

Built with a more modern architecture, it works across Chrome, Firefox, and Safari browsers, solving a plethora of issues that arose with other contemporaries like Puppeteer and Selenium.

One of the main benefits of Playwright is its simple syntax with powerful abstractions behind the scenes. This lets users write tests that look like real user actions. These actions happen when using a web application. This means that the code is not only easier to read and understand but also more maintainable over time. Developers can easily understand the purpose of the code. This makes it simpler to work with team members or help new developers join.

Let's go through a code example of how Playwright works:

// Playwright

  

import { chromium } from 'playwright';

  

(async () \=> {

// Launch the browser instead of connecting to BrowserBase

const browser = await chromium.launch();

// Create a new context (equivalent to an incognito window)

const context = await browser.newContext();

// Create a new page in the context

const page = await context.newPage();

// Navigate to the website

await page.goto('https://browserbase.com/');

// Close the page

await page.close();

// Close the browser

await browser.close();

})().catch((error) \=> console.error(error.message));

As you can see, the playwright code is more straightforward than any other framework.

These actions happen when using a web application. This means that the code is not only easier to read and understand but also more maintainable over time. Not only do developers easily understand the purpose of the code, this makes it simpler to work with team members or help new developers join.

Browserbase can also serve as a direct substitute for this, enabling you to execute sessions concurrently and perform real-time debugging. This adds more control while being able to have the same functionality as Playwright

## Introducing Stagehand: The AI-Powered Successor to Playwright

Given that Playwright it the most ideal and upcoming framework, Stagehand (stagehand.dev) is the easiest way to build browser automations. You can turn your Playwright code into Stagehand with one line. It is completely interoperable with Playwright and has seamless integration with Browserbase.

Anything that can be done in a browser can be done with Stagehand. Think about tasks like:

1.  Log into Amazon, search for AirPods, and buy the most relevant product
    
2.  Go to Hacker News and extract the top stories of the day
    
3.  Go to ESPN, search for Steph Curry, and get stats for his last 10 games
    

Stagehand offers three simple AI APIs (act, extract, and observe) on top of the base Playwright Page class that provide the building blocks for web automation via natural language. It also makes Playwright more accessible to non-technical users and less vulnerable to minor changes in the UI/DOM.

Stagehand, especially when combined with Browserbase's stealth mode, makes it easier to write durable, performant code that can bypass bot detection and captchas.

## Stagehand in Action

As you can see, the Playwright code is more straightforward than any other framework. The code demonstrates why Selenium is more verbose - it requires explicit waits and more setup code, reflecting its enterprise-focused architecture and broad compatibility requirements. While Puppeteer offers powerful Chrome-specific features, it requires more explicit waiting patterns and additional boilerplate compared to Playwright.

![](https://framerusercontent.com/images/0GSgnTGQhVjFZaWZwBCWcxkwY98.png)

## Start using Stagehand today

If you have Node.js installed, you can easily create a new Stagehand app with baked-in best practices with the following command:

`npx create-browser-app --example quickstart`

Explaining the current automation frameworks and why we recommend Playwright

Choosing between Playwright, Puppeteer, or Selenium? We recommend Playwright

Security in mind from day one
-----------------------------

In October 2024, we announced that Browserbase is SOC 2 Type I certified and HIPAA compliant.

While achieving SOC 2 and HIPAA compliance required dedicated engineering effort, we saw it as a crucial investment. We prioritized these certifications to enable our customers to process sensitive data with confidence, especially as an early-stage company. Our existing security practices made this certification process straightforward, setting a strong foundation for handling mission-critical workloads.

Our Cause
---------

Many organizations recognized how Browserbase could enhance their products and systems. We made it our priority to obtain these certifications so they could seamlessly integrate our platform into their workflows.

This was especially important for healthcare organizations handling Protected Health Information (PHI), where having proper security certifications was essential for enabling collaboration.

We recognized that unlocking these markets required both certifications:

*   Healthcare companies, hospitals, clinics, and pharmaceutical customers needed HIPAA
    
*   Enterprise customers required SOC2 audit documentation
    
*   Many prospects wouldn't even start conversations without compliance
    
*   Certifications served as a competitive differentiator
    

By achieving both SOC2 and HIPAA compliance, we removed these barriers and opened access to more possibilities for these organizations - allowing them to automate workflows where they previously didn’t think possible.

Our Best Practices
------------------

By planning strategically, we completed both certifications in just 2 months instead of the typical 1-2 year timeline.

Getting SOC 2 and HIPAA certified can be daunting for startups, but our early architectural decisions made the process remarkably smooth. Since we’ve had best practices from day one, we built a natural pathway to compliance.

Our core development practices and essential compliance practices set the stage from day one:

*   Enhanced cloud-level security controls
    
*   Documentation of all security incidents and response procedures
    
*   Rigorous code review and automated testing which allowed us to catch issues early through local and pre-merge checks, maintaining consistent quality across our codebase
    
*   Streamlined CI/CD pipelines, multiple testing environments, and documented deployments, alongside full rollback capabilities when needed
    
*   Vendor relationship tracking, defined employee onboarding and off-boarding processes, and mandatory security training for compliance verification
    

Tooling
-------

Scalable compliance requires extensive documentation and tooling to track and verify requirements. This still wouldn’t have been achieved without the team’s work on:

1.  A structured framework with specific compliance tests and tasks
    
2.  Completing tasks for security documentation and policies
    
3.  Having direct system integrations with our core infrastructure to verify compliance requirements
    
4.  Comprehensive tracking of ongoing compliance status
    

Through focused teamwork and our efficient processes, we implemented these rigorous compliance requirements in a short span of time.

This demonstrates our team's ability to execute rapidly and effectively on complex requirements. It showcases not just technical capabilities, but also our commitment to delivering results efficiently while maintaining high standards.

Looking Ahead
-------------

While we've achieved SOC2 Type 1 compliance in record time, we view this as just the beginning. Our current focus is maintaining these standards while planning for the more rigorous SOC2 Type 2 certification that represents our next level of maturity.

As our organization grows, we're strengthening our security infrastructure through enhanced off-boarding protocols and automated access management systems. We're bringing other solutions aimed to bolster our InfoSec capabilities and serve as the foundation of our security program.

Recognizing that compliance requires constant vigilance, we maintain rigorous monitoring and regular updates to uphold our SOC2 and HIPAA standards, ensuring we protect all sensitive data in our care.

To learn more about how Browserbase's HIPAA and SOC2 compliance can benefit your organization, please reach out to our team with any questions.

Having the best security in mind from day one

How we achieved SOC2 and HIPAA compliance in just two months

## The Challenge: Single-Region Growing Pains

When we first built Browserbase, we operated exclusively from AWS `us-west-1`. While this served our initial needs, we quickly discovered a critical limitation: latency. Every request faced a 70-80ms delay, and these delays weren't just adding up—they were multiplying as operations stacked on each other.

As our customer base grew globally, performance emerged as the #1 concern in our feedback. This prompted us to make latency reduction our top priority for Q4.

## Our Investigation

Our investigation took us through various possibilities. We first tried utilizing more resources for our browsers. In addition, we also attempted to remove layers of virtualization.

However, the answer to this problem is distance. Our architecture relied heavily on CDP (Chrome DevTools Protocol) commands—small instructions that needed to be executed sequentially. Each command had to complete before the next could begin, creating a waterfall of delays.

## The Root Cause

![](https://framerusercontent.com/images/SCWbcZ9yfFXAmOEFRSRposZVPyU.png)

User Request -> \[Long Distance Travel\] -> us\-west\-1 -> \[Processing\] -> \[Long Distance Travel\] -> User Response

Whether a customer was in London, Tokyo, or New York, their requests had to make a longer journey to where servers were running, `us-west-1`.

That means for users in Singapore, this meant their browser commands were traveling nearly halfway around the world—and back—for every single operation.

## Multi-Region

Looking at our latency data, we realized we needed to shift our infrastructure strategy. Instead of optimizing traffic through a single region, we needed to rethink how we could minimize the physical distance between our customers and their browser sessions.

**The solution became clear**: rather than forcing all users to connect to a single point, we needed to bring our browser infrastructure closer to where our customers operate.

The entire migration took just one month to implement, proving that sometimes the most impactful solutions aren't the most complex. Below, we’ve expanded our infrastructure to multiple strategic locations worldwide:

![](https://framerusercontent.com/images/Xkqwo5nwiDEsPN4v1JTuje1KNgQ.png)

![](https://framerusercontent.com/images/1nngE0vZaAoEgRLLw20Eoz9dQ.png)

## The Numbers

To validate our multi-region approach, we ran tests using a sample web scraping script that performs multiple CDP operations.

We tested this script from different locations connecting to both nearby and distant regions.

The script performs multiple sequential operations - waiting for elements, selecting DOM nodes, and extracting data - each requiring multiple CDP commands to complete.

To summarize the results:

*   **More than 2x faster** task completion for users connecting to their nearest region
    
*   **Reduced resource consumption** due to faster task completion
    
*   **Lower costs** for customers through improved efficiency
    

### Before vs After Comparison

**Before (Single Region -** `**us-west-1**`**):**

Eastern US (us-east-1) → us-west-1: ~63ms latency

Western US (us-west-2) → us-west-1: ~23ms latency

Frankfurt (eu-central-1) → us-west-1: ~152ms latency

Singapore (ap-southeast-1) → us-west-1: ~169ms latency

Each command must wait for the previous one to complete and every command faces this round-trip latency. Below are the improvements after we’ve implemented multi-region:

**After (Multi-Region):**

With our multi-region deployment, users can specify their preferred region when connecting. By choosing a server closer to their location, they can significantly reduce the distance each CDP command needs to travel.

Here's what the latency looks like when users connect to their local regions instead of routing everything through `us-west-1:`

New York → us-east-1: ~6ms latency

Frankfurt → eu-central-1: ~3ms latency

Singapore → ap-southeast-1: ~5ms latency

Tokyo → ap-northeast-1: ~4ms latency

**This represents a dramatic improvement:**

Eastern US users: 90% reduction in latency (63ms → 6ms)

Western US users: 87% reduction in latency (23ms → 3ms)

European users: 98% reduction in latency (152ms → 3ms)

Asian users: 97% reduction in latency (169ms → 5ms)

It’s important to remember that these latencies compound with each CDP command, so the real-world performance improvement is even more significant when running complex browser automation tasks that require multiple sequential commands.

## Best Practices for Customers

To get the most out of our multi-region infrastructure, we recommend:

*   Choose the region closest to your primary user base
    
*   For applications serving global users, consider using multiple regions
    
*   Monitor latency metrics to ensure optimal performance
    
*   Contact our support team for region-specific optimization advice
    

The switch to multi-region is straightforward. When creating a new browser session, simply specify your preferred region using the `region` parameter in your API request.

Here's how to create a session in `us-east-1` using a curl request:

curl --request POST \\\\

\--url <https://www.browserbase.com/v1/sessions> \\\\

\--header 'Content-Type: application/json' \\\\

\--header 'X-BB-API-Key: YOUR\_BROWSERBASE\_API\_KEY' \\\\

\--data '{

"projectId": "<YOUR\_BROWSERBASE\_PROJECT\_ID",

"region": "us-east-1"

}'

We have a dedicated page for how to use Multi-Region capabilities here.

For best results, we now recommend that customers simply choose the location nearest to them when using our service. While our main location is still in the Western USA (`us-west-2`), you can choose any of our locations to get the best possible performance for your needs.

## Looking Forward

We are continuously monitoring usage patterns and performance metrics to identify potential new regions and further optimize our existing infrastructure.  
  
For more information, visit Browserbase to learn more!

How Browserbase drastically slashed global latency

Becoming Multi-Region

Jason Howmans

## Creating a Codegen Feature: A Generalized Guide

Code generation from natural language commands is now commonly used in modern development workflows. We'll build a tool that converts natural language instructions into functional Playwright test scripts that can interact with live browser sessions.

In this short guide we share a framework for building a natural language to Playwright code generator for any website. Our example uses a NextJS app with Browserbase, but the principles can be adapted for many different programming languages and frameworks.

## Prerequisites

First of all let’s create a new NextJS app using `create-next-app` and add the necessary dependencies.

pnpm dlx create-next-app@latest \--ts browserbase-codegen

  

pnpm add \-D shadcn

pnpm add react-spinners

  

pnpm exec shadcn init

pnpm exec shadcn add separator tabs textarea button label input toast

Along with the dependencies above, you will also need:

*   Anthropic account & API key
    
*   Browserbase account & API key
    

You should add these values as variables in your `.env.development.local` file:

ANTHROPIC\_API\_KEY\=

BROWSERBASE\_API\_KEY\=

## 1\. User Interface

Let’s start by building out a simple UI with our installed components for inputting prompts and displaying generated code.

Here are some key features we should consider for the UI:

*   Support multi-line input for complex prompts
    
*   Provide clear visual feedback for different states
    
*   User-editable code input to make it possible to extend existing Playwright scripts
    

![](https://framerusercontent.com/images/nJ9ks3EQQp0t3bg4eeXvVA7RGI.png)

The component below is used to create the UI. Add this to your default NextJS `page.tsx` file. Don’t worry about the empty `handleExecute` and `useEffect` functions; we’ll get to these shortly.

// app/page.tsx

"use client";

  

import { Button } from "@/components/ui/button";

import { Input } from "@/components/ui/input";

import { Separator } from "@/components/ui/separator";

import { Textarea } from "@/components/ui/textarea";

import { useToast } from "@/components/ui/use-toast";

import { useEffect, useRef, useState } from "react";

import { MoonLoader } from "react-spinners";

import { codegenAction, getBrowserbasePage } from "./actions";

  

export default function Codegen() {

const { toast } = useToast();

// The user's input prompt

const \[prompt, setPrompt\] = useState("");

// The Playwright script to be generated or edited by the user

const \[script, setScript\] = useState("");

// The page we want to write the script for

const \[websiteUrl, setWebsiteUrl\] = useState("");

// THe component state

const \[state, setState\] = useState<"ready" | "connecting" | "generating"\>(

"ready",

);

// A toast that shows the current loading state

const staticToast = useRef<ReturnType<typeof toast\> | null\>(null);

  

const appendCode = (newLines: string) \=> {

setScript((prev) \=> prev + newLines);

};

  

// Execute a prompt

const handleExecute = async () \=> {

// To be implemented...

};

  

We’re relying on a `toast` to communicate various loading and error states. For toasts to work, we’ll need to put a `<Toaster />` provider in our `app/layout.tsx` file. Let’s do that to complete the UI:

// app/layout.tsx

import { Toaster } from "@/components/ui/toaster";

import type { Metadata } from "next";

  

export default function RootLayout({

children,

}: Readonly<{

children: React.ReactNode;

}\>) {

return (

<html lang\="en"\>

<body\>

{children}

<Toaster />

</body\>

</html\>

);

}

With the UI so far, we’ve created:

1.  An easy way to input code and prompts.
    
2.  A way to submit the prompt for AI codegen.
    
3.  A way to handle loading states using toasts.
    

In the next step we’ll implement connecting to a running Browserbase session, generating valid Playwright JS code for the open page, and we’ll add some basic error handling and user feedback. Let’s continue.

## 2\. Connect to a Browserbase page

Before we get to the exciting part of generating Playwright code, we need to pull some data from a running Browserbase session. To do this we’ll create a new file `app/actions.ts` where we’ll add a NextJS server action to connect to a new Browserbase session and visit the user-inputted URL stored in `websiteUrl`:

// app/actions.ts

"use server";

  

import playwright from "playwright";

  

export async function getBrowserbasePage(targetUrl: string) {

try {

const browser = await playwright.chromium.connectOverCDP(

\`wss://connect.browserbase.com?apiKey=${browserbaseApiKey}\`,

);

const defaultContext = browser.contexts()\[0\];

const page = defaultContext.pages()\[0\];

await page.goto(targetUrl);

let pageHTML = "";

pageHTML = await page.evaluate(() \=> {

return document.documentElement.outerHTML;

});

if (!pageHTML) {

pageHTML = await page.content();

}

return {

pageHTML,

pageUrl: page.url(),

};

} catch (err: unknown) {

console.error(err);

throw new Error("Failed to connect to session");

}

}

The `getBrowserbasePage` action will be called from our client component to connect to a new Browserbase session, then get the page URL and the current DOM state for the target page ready to send to Claude for inference.

The `handleExecute` function in `page.tsx` is looking a little empty. We should add some code to the function that calls our new server action.

// app/page.tsx

  

// ...existing code

  

const handleExecute = async () \=> {

if (!websiteUrl) {

toast({

title: "Empty Browserbase URL",

description: "Please enter a Browserbase URL",

});

return;

}

try {

setState("connecting");

const page = await getBrowserbasePage(websiteUrl);

if (!page) {

toast({

title: "Failed to connect to Browserbase page",

description:

'Ensure you have added your "BROWSERBASE\_API\_KEY" to the .env file',

});

return;

}

  

// To implement: Codegen...

} catch (err: unknown)

console.error(err);

toast({

title: "Error",

description: "Failed to execute the action (see console)",

});

setState("ready");

} finally {

setState("ready");

}

}

  

While we’re in `page.tsx`, let’s add some code to the empty `useEffect` that provides user feedback based on the current state:

// app/page.tsx

// Handle different loading states

useEffect(() \=> {

let t;

switch (state) {

case "ready": {

if (staticToast.current) {

staticToast.current?.dismiss();

staticToast.current = null;

}

break;

}

case "connecting": {

t = {

description: (

<div className\="flex gap-x-2"\>

<MoonLoader color\="#000000" size\={16} /> Connecting to session...

</div\>

),

};

break;

}

case "generating": {

t = {

description: (

<div className\="flex gap-x-2"\>

<MoonLoader color\="#000000" size\={16} /> Generating code...

</div\>

),

};

break;

}

}

if (!t) {

return;

}

## 3\. Code Generation

In the final step we’ll generate Playwright code based on the user’s input prompt and page context pulled from the running Browserbase session. To do this, we need to add a new function to `app/actions.ts` with the full prompt we send to Claude to generate code.

We must include all the relevant context (current code state, application state, etc) with the prompt to ensure the LLM has all the information it needs. Finally, we should format the response so that we have the output displayed correctly alongside the constraints we’ve put aside.

Let’s update the `app/actions.ts` file to look like this:

// app/actions.ts

"use server";

  

import Anthropic from "@anthropic-ai/sdk";

import playwright from "playwright";

  

// Automatically sets apiKey using process.env.ANTHROPIC\_API\_KEY

const anthropic = new Anthropic();

  

const browserbaseApiKey = process.env.BROWSERBASE\_API\_KEY;

if (!browserbaseApiKey) {

throw new Error("BROWSERBASE\_API\_KEY is required");

}

  

export async function getBrowserbasePage(targetUrl: string) { ... }

  

export async function codegenAction(

cmd: string,

script: string,

pageHTML: string,

) {

let pageHTMLPrompt = "";

  

if (pageHTML) {

pageHTMLPrompt = \`\\n\*\*Page HTML:\*\*\\n\\\`\\\`\\\`html\\n${pageHTML}\\n\\\`\\\`\\\`\`;

}

  

const prompt = \`

You are an AI that produces snippets of Playwright JS code.

  

Your task is to extend a Playwright JS script according to an instruction. You will be provided with a Playwright script and the associated HTML page source. You must respond with new lines of Playwright JS code to be evaluated and appended the script.

${pageHTMLPrompt}

  

\*\*Playwright JS script to extend:\*\*

\\\`\\\`\\\`js

${script}

The key details in the completed prompt are the current script, the current page HTML, and the input command. Note that we need to provide clear instructions and constraints for Claude to generate valid Playwright code.

You may have noticed that `codegenAction` returns a console statement instead of throwing an error. This is the case because `codegenAction` must always return valid Javascript to be interpreted later.

As a final step, let’s append some code to our `handleExecute` function in `app/page.tsx`. We need to call the server action we just created and append the generated Playwright code to the textarea. Your `handleExecute` function should now look like this:

// app/page.tsx

const handleExecute = async () \=> {

if (!websiteUrl) {

toast({

title: "Empty Browserbase URL",

description: "Please enter a Browserbase URL",

});

return;

}

if (!prompt) {

toast({

title: "Empty prompt",

description: "Please write a prompt and hit execute",

});

return;

}

try {

setState("connecting");

const page = await getBrowserbasePage(websiteUrl);

if (!page) {

toast({

title: "Failed to connect to Browserbase page",

description:

'Ensure you have added your "BROWSERBASE\_API\_KEY" to the .env file',

});

return;

}

  

// Make the codegen request

setState("generating");

const response = await codegenAction(prompt, script, page.pageHTML);

  

if (!response) {

toast({

title: "Codegen error 😢",

description: "Failed to generate code.",

## Final Tips

This guide helps you create a codegen app that connects to a Browserbase session, pulls the DOM for a live page, and generates valid Playwright code to perform actions on the page. If you’re building a web agent, this is a great starting point.

This project can be extended to include the Browserbase live view to watch what’s happening on the page, a feedback loop that executes the generated code in the live session, and more tailored prompts for specific use cases. For more advanced use cases, you can explore our open-source AI SDK, Stagehand, which offers additional flexibility and functionality. If you’d like to see these features in action, check out our playground.

We share a framework for building a natural language to Playwright code generator for any website

How to build your own AI Codegen

Sophie Chance

Parcha builds enterprise-grade AI Agents that transform how banks and fintech companies handle compliance and operations workflows. Their innovative platform tackles one of the most pressing challenges in the financial sector: the time-consuming nature of regulatory compliance.

> "Using AI, we enable banks and fintechs to onboard more customers faster while remaining compliant."
> 
> \- Miguel Rios Berrios, CTO, Parcha

By automating manual processes like customer onboarding and due diligence, they help financial institutions scale efficiently while maintaining strict compliance standards. This automation represents a significant shift from traditional manual review processes that often create bottlenecks in customer acquisition and risk assessment.

The Pain of Browser Automation at Scale
---------------------------------------

For Parcha's small engineering team, managing browser automation infrastructure was a significant challenge that threatened to derail their core mission of building powerful AI solutions. The complexity of maintaining reliable browser automation at scale became a major pain point that consumed valuable development resources and slowed down their ability to innovate.

> "The problem we were trying to solve was 'How can we do browser automation at scale?' Individually it seems simple, like going through a website and scraping it. But we needed more complex scenarios of automating flows to gather information or perform actions."

Before Browserbase, Parcha struggled with technical and operational challenges such as:

*   Managing homegrown Python code and Playwright implementations that required constant maintenance and updates
    
*   Running their own browser infrastructure, which proved to be both costly and time-consuming
    
*   Diverting engineering resources from core AI development, limiting their ability to enhance their primary product offerings
    
*   Scaling automation reliably for complex workflows while maintaining performance and stability
    

Turning Engineering Hours into Development Minutes
--------------------------------------------------

Browserbase transformed how Parcha's engineering team operates by providing a robust, scalable solution that eliminated their infrastructure headaches.

This transformation allowed them to redirect their focus to developing and improving their core AI capabilities, resulting in better outcomes for their financial institution clients.

> "We're a very small team, we only have four engineers. So every time that I don't need to maintain my own pool of browsers and playwright… **it's time that we can spend doing AI stuff, which is what we want to do**."

The impact was immediate and significant across several key areas:

**Lightning-Fast Analysis** The implementation of browser pooling dramatically accelerated their ability to gather and process business information, transforming what was previously a lengthy manual process into an almost instantaneous operation.

> "Since we're using browser pooling, for example, we can run all our browsers at once… In like 10 seconds I have a very comprehensive view of the entire business that would have taken close to an hour for a human to do."

**Comprehensive Due Diligence** The enhanced automation capabilities enabled Parcha to perform thorough due diligence at unprecedented speeds, maintaining the depth of analysis while dramatically reducing the time required.

> "We're able to construct a very complex profile of a business just with their website in less than three or four minutes, which normally would take hours."

**Unified Automation Platform** By consolidating their automation needs into a single platform, Parcha eliminated the complexity of managing multiple tools and systems, creating a more streamlined and efficient operation.

> "I think the most important thing with Browserbase is just consolidating all into one. It's typically more reliable, and since we have the browser automation piece, we can do more complex things that we could not do before."

Responsive Support Drives Continuous Innovation
-----------------------------------------------

The partnership with Browserbase extends beyond just technology, encompassing a collaborative relationship that ensures Parcha's needs are met and their feedback is quickly incorporated into product improvements. This responsive approach to customer support has been crucial in helping Parcha maintain their competitive edge in the fast-moving fintech space.

> "What I love about you guys… like hey, this is not working well. And then someone gets on the call and helps us fix it. A couple of weeks later, we're like, hey, we have browser pooling—exactly what we needed on our side."

A Platform That Evolves With Customer Needs
-------------------------------------------

Parcha's experience with Browserbase demonstrates the value of a technology partner that prioritizes continuous improvement and customer feedback. The platform's constant evolution ensures that it stays ahead of emerging challenges and requirements in the financial compliance sector.

> "The offering is great, but it's just the fact that it keeps getting better with rapid iteration based on feedback. Definitely would recommend it, particularly for how responsive and proactive you guys are."

By implementing Browserbase, Parcha has revolutionized the due diligence process for financial institutions. Their solution has fundamentally changed how banks and fintechs approach compliance and customer onboarding. What once took hours of manual review can now be completed in minutes, enabling their clients to scale operations while maintaining compliance standards. This transformation has positioned Parcha at the forefront of automated compliance solutions, helping financial institutions navigate the complex landscape of regulatory requirements with greater efficiency and confidence.

Parcha transformed lengthy onboarding and due diligence processes into minutes using Browserbase

The Automation Advantage: How Browserbase Powers Parcha’s Compliance Solutions

Aomni is an AI-powered sales intelligence platform that helps Account Executives work deals like experts by automating research and personalizing sales materials. Their platform analyzes over 1,000 data points per account and saves sales teams up to 3 hours of research per prospect, requiring robust and reliable web browsing infrastructure to deliver real-time insights to their clients.

> "I make a request and get connected to the Playwright instance really quickly. I can just start doing stuff really quickly."
> 
> \- David Zhang, CEO, Aomni

The Challenge of Web Infrastructure at Scale
--------------------------------------------

For Aomni, managing web browsing infrastructure presented multiple challenges that impacted their ability to deliver a seamless experience. The combination of high latency and complex infrastructure management created significant obstacles in their development process.

> ”I tried a bunch of these before but I think none of them really had the same level of usability and performance that Browserbase offers. There were always some key metrics that were missing with all these approaches. With a lot of existing infrastructure, the latency is just really high… But with Browserbase, it's extremely fast."

Before Browserbase, Aomni faced several technical hurdles that affected their development velocity:

*   Managing separate proxy providers and browsing infrastructure
    
*   Dealing with high latency in existing solutions
    
*   Maintaining complex browsing pipelines
    
*   Juggling multiple tools and services
    

From Complex to Simple: A Streamlined Solution
----------------------------------------------

Browserbase transformed Aomni's infrastructure by providing a unified solution that addressed both their proxy and browsing needs. This consolidation dramatically simplified their development workflow while improving performance.

> "Browserbase is the first I've seen that has a really good reverse proxy infrastructure and really good browsing infrastructure."

The impact was significant across several key areas:

**Unified Infrastructure** By combining proxy and browsing capabilities, Browserbase eliminated the need for multiple services and complex integrations.

> "Now that we have Browserbase, I basically get the best of both worlds. I can always use Browserbase to render every single website… Reliability just goes way up and my stack is a lot simpler."

**Enhanced Developer Experience** The simplified stack reduced complexity and improved the development process, allowing the team to focus on core features.

> "Honestly, the biggest thing for me is the developer experience… The whole stack is just simplified, and I don't have to worry about juggling proxy providers or maintaining a complex browsing pipeline."

**Superior Performance** The platform's speed and reliability became a crucial advantage for Aomni's operations.

> "The main reason why I am using \[Browserbase\] is purely for performance… This eliminated need for complex fallback pipeline"

A Trusted Solution for Web Data Collection
------------------------------------------

Aomni's experience with Browserbase has made them confident in recommending the platform to other developers facing similar challenges in web data collection.

> "I definitely recommend it to others. Whenever I meet developers who want to ingest data from the web, I point them to you guys. It's an easy recommendation."

By implementing Browserbase, Aomni has significantly simplified their web data collection infrastructure while improving performance and reliability. This transformation has enabled them to focus on their core mission of building advanced AI solutions, solidifying their position as a leading AI startup.


Aomni drastically reduced connection latency and simplified its infrastructure using Browserbase

The Browser Blog

Building the future of web automation

Building the future of web automation

Read Article

Browserbase named #1 on the Enterprise Tech 30 list

Read Article

What is a headless browser?

Read Article

The Browserbase Free Plan (Finally!)

Read Article

Choosing between Playwright, Puppeteer, or Selenium? We recommend Playwright

Read Article

How we achieved SOC2 and HIPAA compliance in just two months

Read Article

Becoming Multi-Region

Read Article

How to build your own AI Codegen

Read Article

The Automation Advantage: How Browserbase Powers Parcha’s Compliance Solutions

Read Article

Aomni’s Edge in Sales Intelligence: Simplified, High-Speed Browsing with Browserbase

Read Article

Browserbase

Stagehand

Director

MCP

The Browser Blog

Building the future of web automation

Building the future of web automation

Read Article

Browserbase named #1 on the Enterprise Tech 30 list

Read Article

What is a headless browser?

Read Article

The Browserbase Free Plan (Finally!)

Read Article

Choosing between Playwright, Puppeteer, or Selenium? We recommend Playwright

Read Article

How we achieved SOC2 and HIPAA compliance in just two months

Read Article

Becoming Multi-Region

Read Article

How to build your own AI Codegen

Read Article

The Automation Advantage: How Browserbase Powers Parcha’s Compliance Solutions

Read Article

Aomni’s Edge in Sales Intelligence: Simplified, High-Speed Browsing with Browserbase

Read Article