Skip to main content

​
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: [email protected]
         - 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

Build docs developers (and LLMs) love

Get started for freeTalk to us