> ## Documentation Index
> Fetch the complete documentation index at: https://stagehand-stg-1784.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# LangChain JS Configuration

> Set up Stagehand with LangChain JS to create intelligent web automation agents

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:

```bash theme={null}
npm install @langchain/langgraph @langchain/community @langchain/core @browserbasehq/stagehand
```

## Step 2: Configure Environment Variables

For remote browser automation, set up your Browserbase credentials:

```bash theme={null}
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:

```typescript theme={null}
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:

```typescript theme={null}
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

```typescript theme={null}
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:

```typescript theme={null}
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

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

### Error Handling

```typescript theme={null}
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

<Tabs>
  <Tab title="Data Extraction" value="data-extraction" label="TypeScript">
    ```typescript theme={null}
    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
            `
        }]
    });
    ```
  </Tab>

  <Tab title="Form Automation" value="form-automation" label="TypeScript">
    ```typescript theme={null}
    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
            `
        }]
    });
    ```
  </Tab>

  <Tab title="Multi-site Research" value="multi-site-research" label="TypeScript">
    ```typescript theme={null}
    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
            `
        }]
    });
    ```
  </Tab>
</Tabs>

<CardGroup cols={1}>
  <Card title="LangChain JS Documentation" icon="book" href="https://js.langchain.com/docs/integrations/tools/stagehand/">
    Official LangChain JS documentation for the Stagehand integration
  </Card>
</CardGroup>