LangChain JS 配置

文档索引

可在此获取完整文档索引：https://docs.stagehand.dev/llms.txt

在进一步浏览前，可使用该文件发现所有可用页面。

LangChain JS 配置

使用 Stagehand 与 LangChain JS 构建智能网页自动化代理

本指南将逐步介绍如何将 Stagehand 集成到 LangChain JS 中，以便使用自然语言指令构建强大的网页自动化工作流。

第 1 步：安装依赖

安装 LangChain JS 与 Stagehand 集成所需的软件包：

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

第 2 步：配置环境变量

如果你要进行远程浏览器自动化，请先配置 Browserbase 凭据：

BROWSERBASE_API_KEY="your-browserbase-api-key"

第 3 步：创建 Stagehand 实例

使用你偏好的配置初始化 Stagehand：

import { Stagehand } from '@browserbasehq/stagehand';

// 本地开发
const stagehand = new Stagehand({
    env: 'LOCAL',
    verbose: 2,
    enableCaching: false,
});

// 生产环境 + Browserbase
const stagehand = new Stagehand({
    env: 'BROWSERBASE',
    verbose: 1,
    enableCaching: true,
});

第 4 步：生成 StagehandToolkit

创建可供 LangChain 使用的工具包：

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

const stagehandToolkit = await StagehandToolkit.fromStagehand(stagehand);

第 5 步：使用单个工具

该工具包为网页自动化提供了四个专用工具：

可用工具

• stagehand_navigate：导航到指定 URL
• stagehand_act：执行浏览器操作（点击、输入等）
• stagehand_extract：按 schema 提取结构化数据
• stagehand_observe：分析页面元素与可执行操作

基础工具用法

import { z } from 'zod';

// 访问网站
const navigateTool = stagehandToolkit.tools.find(
    (t) => t.name === 'stagehand_navigate'
);
await navigateTool.invoke('https://www.google.com');

// 执行动作
const actionTool = stagehandToolkit.tools.find(
    (t) => t.name === 'stagehand_act'
);
await actionTool.invoke('Search for "OpenAI"');

// 观察页面
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));

// 提取结构化数据
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);

第 6 步：构建 LangGraph 代理

将 Stagehand 与 LangGraph 结合，用于复杂自动化工作流：

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

// 创建 LLM
const llm = new ChatOpenAI({
    model: 'gpt-4',
    temperature: 0,
});

// 使用 Stagehand 工具创建代理
const agent = createReactAgent({
    llm,
    tools: stagehandToolkit.tools,
});

// 执行复杂工作流
const result = await agent.invoke({
    messages: [
        {
            role: 'user',
            content: 'Go to example.com, find the contact form, and extract all the form fields',
        },
    ],
});

高级配置

自定义 Stagehand 配置

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

错误处理

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

示例工作流

数据提取

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 文档

查看 Stagehand 集成的官方 LangChain JS 文档。