LangChain JS Configuration

This guide walks you through integrating Stagehand with LangChain JS to build powerful web automation workflows using natural language instructions.

Step 1: Install Dependencies

Install the required packages for LangChain JS and Stagehand integration:

npm install @langchain/langgraph @langchain/community @langchain/core @browserbasehq/stagehand

Step 2: 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"

Step 3: Create a Stagehand Instance

Initialize Stagehand 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,
});

Step 4: Generate the StagehandToolkit

Create the toolkit that provides LangChain-compatible tools:

import { StagehandToolkit } from '@langchain/community/agents/toolkits/stagehand';

const stagehandToolkit = await StagehandToolkit.fromStagehand(stagehand);

Step 5: Use Individual Tools

The toolkit provides four specialized tools for web automation:

Available Tools

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 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);

Step 6: Build LangGraph Agents

Integrate with LangGraph for complex automation workflows:

import { createReactAgent } from "@langchain/langgraph/prebuilt";

// 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"
        }
    ]
});

Advanced Configuration

Custom Stagehand Configuration

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

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();
}

Example Workflows

Data Extraction
Form Automation
Multi-site Research

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
        `
    }]
});

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
        `
    }]
});

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
        `
    }]
});

LangChain JS Documentation

Official LangChain JS documentation for the Stagehand integration

First Steps

The Basics

Configuration

Best Practices

Integrations

Reference

LangChain JS Configuration

Step 1: Install Dependencies

Step 2: Configure Environment Variables

Step 3: Create a Stagehand Instance

Step 4: Generate the StagehandToolkit

Step 5: Use Individual Tools

Available Tools

Basic Tool Usage

Step 6: Build LangGraph Agents

Advanced Configuration

Custom Stagehand Configuration

Error Handling

Example Workflows

LangChain JS Documentation

​Step 1: Install Dependencies

​Step 2: Configure Environment Variables

​Step 3: Create a Stagehand Instance

​Step 4: Generate the StagehandToolkit

​Step 5: Use Individual Tools

​Available Tools

​Basic Tool Usage

​Step 6: Build LangGraph Agents

​Advanced Configuration

​Custom Stagehand Configuration

​Error Handling

​Example Workflows

LangChain JS Documentation

Step 1: Install Dependencies

Step 2: Configure Environment Variables

Step 3: Create a Stagehand Instance

Step 4: Generate the StagehandToolkit

Step 5: Use Individual Tools

Available Tools

Basic Tool Usage

Step 6: Build LangGraph Agents

Advanced Configuration

Custom Stagehand Configuration

Error Handling

Example Workflows