Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/browserbase/stagehand/llms.txt

Use this file to discover all available pages before exploring further.

​
Overview

The LangChain JS integration enables you to use Stagehand with LangChain to create intelligent agents that can automate web interactions. This integration provides:
  • StagehandToolkit with LangChain-compatible tools
  • AI-driven research and data extraction workflows
  • Dynamic form filling based on contextual requirements
  • Multi-step web processes with decision-making capabilities

​
Installation

Install the required packages for LangChain JS and Stagehand integration: 
npm install @langchain/langgraph @langchain/community @langchain/core @browserbasehq/stagehand

​
Quick Start

​
1. Configure Environment Variables

For remote browser automation, set up your Browserbase credentials: 
BROWSERBASE_API_KEY="your-browserbase-api-key"
BROWSERBASE_PROJECT_ID="your-browserbase-project-id"

​
2. Initialize Stagehand

Create a Stagehand instance with your preferred configuration: 
import { Stagehand } from "@browserbasehq/stagehand";

// For local development
const stagehand = new Stagehand({
  env: "LOCAL",
  verbose: 2,
  enableCaching: false,
});

// For production with Browserbase
const stagehand = new Stagehand({
  env: "BROWSERBASE",
  verbose: 1,
  enableCaching: true,
});

​
3. Create the StagehandToolkit

Generate the toolkit that provides LangChain-compatible tools: 
import { StagehandToolkit } from '@langchain/community/agents/toolkits/stagehand';

const stagehandToolkit = await StagehandToolkit.fromStagehand(stagehand);

​
4. Available Tools

The toolkit provides four specialized tools for web automation:
  • stagehand_navigate: Navigate to specific URLs
  • stagehand_act: Perform browser actions (clicking, typing, etc.)
  • stagehand_extract: Extract structured data using schemas
  • stagehand_observe: Analyze page elements and possible actions

​
Basic Usage

​
Individual Tool Usage

import { z } from "zod";

// Navigate to a website
const navigateTool = stagehandToolkit.tools.find(
  (t) => t.name === "stagehand_navigate"
);
await navigateTool.invoke("https://www.google.com");

// Perform an action
const actionTool = stagehandToolkit.tools.find(
  (t) => t.name === "stagehand_act"
);
await actionTool.invoke('Search for "OpenAI"');

// Observe the page
const observeTool = stagehandToolkit.tools.find(
  (t) => t.name === "stagehand_observe"
);
const result = await observeTool.invoke(
  "What actions can be performed on the current page?"
);
console.log(JSON.parse(result));

// Extract structured data
const extractTool = stagehandToolkit.tools.find(
  (t) => t.name === "stagehand_extract"
);
const extractResult = await extractTool.invoke({
  instruction: "Extract the main heading and description",
  schema: z.object({
    heading: z.string(),
    description: z.string(),
  }),
});
console.log(extractResult);

​
LangGraph Integration

Integrate with LangGraph for complex automation workflows: 
import { createReactAgent } from "@langchain/langgraph/prebuilt";
import { ChatOpenAI } from "@langchain/openai";

// Create an LLM
const llm = new ChatOpenAI({
  model: "gpt-4",
  temperature: 0,
});

// Create an agent with Stagehand tools
const agent = createReactAgent({
  llm,
  tools: stagehandToolkit.tools,
});

// Execute a complex workflow
const result = await agent.invoke({
  messages: [
    {
      role: "user", 
      content: "Go to example.com, find the contact form, and extract all the form fields"
    }
  ]
});

​
Using Custom LLM Clients

Stagehand supports using LangChain models as LLM clients: 
import { LangchainClient } from "@browserbasehq/stagehand";
import { ChatOpenAI } from "@langchain/openai";
import { BaseChatModel } from "@langchain/core/language_models/chat_models";

const model: BaseChatModel = new ChatOpenAI({
  model: "gpt-4",
  temperature: 0,
});

const stagehand = new Stagehand({
  env: "BROWSERBASE",
  llmClient: new LangchainClient(model),
});

await stagehand.init();

// Use Stagehand with your custom LangChain model
const page = stagehand.context.pages()[0];
await page.goto("https://example.com");

const data = await stagehand.extract(
  "extract the page title",
  z.object({ title: z.string() })
);

​
Example Workflows

​
Data Extraction Workflow

const extractionAgent = createReactAgent({
  llm,
  tools: stagehandToolkit.tools,
});

const result = await extractionAgent.invoke({
  messages: [{
    role: "user",
    content: `
      Go to news-website.com and extract:
      1. All article headlines
      2. Publication dates  
      3. Author names
      Format as structured JSON
    `
  }]
});

​
Form Automation Workflow

const formAgent = createReactAgent({
  llm,
  tools: stagehandToolkit.tools,
});

const result = await formAgent.invoke({
  messages: [{
    role: "user", 
    content: `
      Navigate to contact-form.com and:
      1. Fill out the contact form with:
         - Name: John Doe
         - Email: john@example.com
         - Message: Inquiry about services
      2. Submit the form
      3. Confirm submission success
    `
  }]
});

​
Multi-Site Research Workflow

const researchAgent = createReactAgent({
  llm,
  tools: stagehandToolkit.tools,
});

const result = await researchAgent.invoke({
  messages: [{
    role: "user",
    content: `
      Research product pricing by:
      1. Visit competitor1.com and extract pricing info
      2. Visit competitor2.com and extract pricing info  
      3. Compare features and prices
      4. Provide summary analysis
    `
  }]
});

​
Error Handling

try {
  const result = await agent.invoke({
    messages: [{ role: "user", content: "Navigate to invalid-url.com" }]
  });
} catch (error) {
  console.error("Automation failed:", error);
} finally {
  // Clean up resources
  await stagehand.close();
}

​
Advanced Configuration

const stagehand = new Stagehand({
  env: "BROWSERBASE",
  verbose: 2,
  enableCaching: true,
  headless: true,
  domSettleTimeoutMs: 5000,
});

​
When to Use This Integration

The LangChain JS integration is perfect for:
  • AI-driven research: Create agents that research information across multiple websites
  • Dynamic form filling: Automatically fill complex forms based on context
  • Data extraction workflows: Extract and transform data from multiple sources
  • Multi-step web processes: Execute complex workflows requiring decision-making

​
Resources

LangChain JS Documentation

Official LangChain JS documentation for Stagehand

Agent Reference

Learn about Stagehand’s Agent API

Extract Reference

Learn about data extraction

Act Reference

Learn about browser actions