SupportDashboard

Browser Use

Browser Use is an open-source tool designed to make websites accessible for AI agents by enabling them to interact with web pages as a human user would. It provides a framework that allows AI systems to navigate, interpret, and manipulate web content, facilitating tasks such as data extraction, web automation, and testing.

Hyperbrowser's browser-use agent allows you to easily execute agent tasks on the web utilizing browser-use with just a simple call. Hyperbrowser exposes endpoints for starting/stopping a browser-use task and for getting it's status and results.

By default, browser-use tasks are handled in an asynchronous manner of first starting the task and then checking it's status until it is completed. However, if you don't want to handle the monitoring yourself, our SDKs provide a simple function that handles the whole flow and returns the data once the task is completed.

Installation

npm install @hyperbrowser/sdk

or

yarn add @hyperbrowser/sdk

Usage

import { Hyperbrowser } from "@hyperbrowser/sdk";
import { config } from "dotenv";

config();

const hbClient = new Hyperbrowser({
  apiKey: process.env.HYPERBROWSER_API_KEY,
});

const main = async () => {
  const result = await hbClient.agents.browserUse.startAndWait({
    task: "What is the title of the first post on Hacker News today?",
  });

  console.log(`Output:\n\n${result.data?.finalResult}`);
};

main().catch((err) => {
  console.error(`Error: ${err.message}`);
});

Browser use tasks can be configured with a number of parameters. Some of them are described briefly here, but a list can be found in our Browser Use API Reference.

Browser-Use Task parameters

  • llm - The language model (LLM) instance to use for generating actions. By default, Hyperbrowser will use Gemini-2 Flash. A complete list is available in the Browser Use API Reference

  • sessionId - An optional existing browser session ID to connect to instead of creating a new one.

  • validateOutput - When enabled, validates the agent's output format to ensure proper structure.

  • useVision - When enabled, allows the agent to analyze screenshots of the webpage for better context understanding.

  • useVisionForPlanner - When enabled, provides screenshots to the planning component of the agent.

  • maxActionsPerStep - The maximum number of actions the agent can perform in a single step before reassessing.

  • maxInputTokens - Maximum token limit for inputs sent to the language model, preventing oversized contexts.

  • plannerLlm - The language model to use specifically for planning future actions, can differ from the main LLM. By default, Hyperbrowser will use Gemini-2 Flash

  • pageExtractionLlm - The language model to use for extracting structured data from webpages. By default, Hyperbrowser will use Gemini-2 Flash

  • plannerInterval - How often the planner runs (measured in agent steps) to reassess the overall strategy.

  • maxSteps - The maximum number of steps the agent can take before concluding the task.

  • maxFailures - The maximum number of failures allowed before the task is aborted.

  • initialActions - List of initial actions to run before the main task.

  • keepBrowserOpen - When enabled, keeps the browser session open after task completion.

  • sessionOptions - Options for the session.

  • useCustomApiKeys - When enabled, the API Keys provided by the user will be used to execute the agent task. No credits will be used for the Agent task itself if user provided keys are used, but the browser usage credits will still be charged for browser hours and proxy data.

  • apiKeys - Object with optional API Keys for openai, anthropic, and google.

For detailed usage/schema, check out the Browser Use API Reference.

The agent may not complete the task within the specified maxSteps. If that happens, try increasing the maxSteps parameter.

Additionally, the browser session used by the AI Agent will time out based on your team's default Session Timeout settings or the session's timeoutMinutes parameter if provided. You can adjust the default Session Timeout in the Settings page.

Reuse Browser Session

You can pass in an existing sessionId to the Browser Use task so that it can execute the task on an existing session. Also, if you want to keep the session open after executing the task, you can supply the keepBrowserOpen param.

In the examples below, the keepBrowserOpen field is not set to true in the second call to the AI Agent so it will close the browser session after execution, and the session is being closed at the end with the stop function to make sure it gets closed.

import { Hyperbrowser } from "@hyperbrowser/sdk";
import { config } from "dotenv";

config();

const hbClient = new Hyperbrowser({
  apiKey: process.env.HYPERBROWSER_API_KEY,
});

const main = async () => {
  const session = await hbClient.sessions.create();

  try {
    const result = await hbClient.agents.browserUse.startAndWait({
      task: "What is the title of the first post on Hacker News today?",
      sessionId: session.id,
      keepBrowserOpen: true,
    });

    console.log(`Output:\n${result.data?.finalResult}`);

    const result2 = await hbClient.agents.browserUse.startAndWait({
      task: "Tell me how many upvotes the first post has.",
      sessionId: session.id,
    });

    console.log(`\nOutput:\n${result2.data?.finalResult}`);
  } catch (err) {
    console.error(`Error: ${err}`);
  } finally {
    await hbClient.sessions.stop(session.id);
  }
};

main().catch((err) => {
  console.error(`Error: ${err.message}`);
});

Use Your Own API Keys

You can provide your own API Keys to the Browser Use task so that it doesn't charge credits to your Hyperbrowser account for the steps it takes during execution. Only the credits for the usage of the browser itself will be charged. Depending on which model you select for the llm, plannerLlm, and pageExtractionLlm, the API keys from those providers will need to be provided when useCustomApiKeys is set to true.

import { Hyperbrowser } from "@hyperbrowser/sdk";
import { config } from "dotenv";

config();

const hbClient = new Hyperbrowser({
  apiKey: process.env.HYPERBROWSER_API_KEY,
});

const main = async () => {
  const result = await hbClient.agents.browserUse.startAndWait({
    task: "What is the title of the first post on Hacker News today?",
    llm: "gpt-4o",
    plannerLlm: "gpt-4o",
    pageExtractionLlm: "gpt-4o",
    useCustomApiKeys: true,
    apiKeys: {
      openai: "<OPENAI_API_KEY>"
    },
  });

  console.log(`Output:\n\n${result.data?.finalResult}`);
};

main().catch((err) => {
  console.error(`Error: ${err.message}`);
});

Session Configurations

You can also provide configurations for the session that will be used to execute the browser-use task just as you would when creating a new session itself. These could include using a proxy or solving CAPTCHAs. To see the full list of session configurations, checkout the Session API Reference.

The sessionOptions will only apply if creating a new session when no sessionId is provided.

import { Hyperbrowser } from "@hyperbrowser/sdk";
import { config } from "dotenv";

config();

const hbClient = new Hyperbrowser({
  apiKey: process.env.HYPERBROWSER_API_KEY,
});

const main = async () => {
  const result = await hbClient.agents.browserUse.startAndWait({
    task: "go to Hacker News and summarize the top 5 posts of the day",
    sessionOptions: {
      acceptCookies: true,
    }
  });

  console.log(`Output:\n\n${result.data?.finalResult}`);
};

main().catch((err) => {
  console.error(`Error: ${err.message}`);
});

Hyperbrowser's CAPTCHA solving and proxy usage features require being on a PAID plan.

Using proxy and solving CAPTCHAs will slow down the web navigation in the browser-use task so use it only if necessary.

PreviousSeleniumNextClaude Computer Use

Last updated