Stagehand：打造简洁易用且功能强大的AI驱动网页浏览框架

---

引言

在数字化时代，网页自动化已成为提升工作效率、优化用户体验的重要手段。从简单的数据抓取到复杂的自动化测试，自动化工具在各个领域扮演着不可或缺的角色。Stagehand，作为一个新兴的人工智能网页浏览框架，以其简单性和可扩展性脱颖而出，成为开发者的新宠。本文将深入探讨Stagehand的设计理念、技术特点、应用场景以及如何实际应用，为大家提供一个全面的技术指南。

一、概述

Stagehand是由Browserbase团队维护的人工智能驱动的网页浏览框架，旨在成为Playwright的后继者。`不仅继承了Playwright的强大功能，还引入了创新的设计理念，以满足现代网页自动化的需求。Stagehand的核心在于其简洁而强大的API设计，包括act、extract和observe，这三个API共同构成了构建自然语言驱动的网页自动化操作的基石。

二、Stagehand核心功能

1、自然语言驱动的自动化
Stagehand最大的特点是其自然语言驱动的自动化能力。开发者可以使用简单的自然语言指令来控制网页操作和数据提取，如“点击登录按钮”或“找到红色的鞋子”。这种以自然语言为核心的操作指令方式，极大地简化了自动化脚本的编写过程，使得即使是非专业的开发者也能轻松上手。

2、原子化指令执行
每个Stagehand函数接受一个原子指令，生成相应的Playwright代码来完成该指令，并执行它。这种原子化指令执行提高了自动化任务的可靠性，因为它确保了每个操作都是独立且明确的，从而减少了错误和冲突的可能性。

3、模型和提供商支持
Stagehand支持多种语言模型和模型提供商，包括OpenAI和Anthropic，允许开发者根据需求选择最合适的模型。这种灵活性使得Stagehand能够适应不同的自动化任务和场景。

4、观察和建议行动
使用observe()函数，开发者可以获取当前页面上可执行的操作列表，辅助规划和执行自动化步骤。这一功能在自动化测试和监控网页内容变化时非常有用，它可以帮助开发者了解当前网页的状态，并据此做出相应的自动化决策。

三、Stagehand技术原理

1、自然语言处理（NLP）
Stagehand基于自然语言处理技术解析和理解用户提供的自然语言指令。这些指令被转换成具体的网页操作，如点击、填写表单、提取数据等。

2、指令到代码的转换
Stagehand将自然语言指令转换成可执行的代码，通常是Playwright的API调用。这一过程涉及解析指令、确定操作的具体步骤，生成相应的代码。

3、原子化操作
每个指令都是原子化的，是不可分割的最小操作单元。原子化操作有助于提高自动化流程的稳定性和可靠性。

4、上下文感知
Stagehand基于observe()函数理解当前网页的上下文，有助于确定可执行的操作。上下文感知能力让Stagehand提供更智能的自动化建议。

5、模块化支持
Stagehand设计为模块化，支持不同的AI模型和模型提供商。这种设计使得Stagehand能够灵活地集成和切换不同的AI能力，适应不同的自动化需求。

四、Stagehand应用场景

Stagehand作为一个简单和可扩展的人工智能网页浏览框架，其应用场景广泛，覆盖了从基本的网页测试到复杂的数据抓取和电子商务等多个领域。以下是Stagehand的一些主要应用场景：

1、网页测试

自动化测试网页功能，确保网站在不同浏览器和设备上正常工作。这包括测试网页的响应性、兼容性以及用户体验。通过Stagehand，开发者可以模拟用户行为，如点击、滚动和表单提交，以验证网页的交互功能是否按预期工作。

2、数据抓取

从网页中提取大量数据，用于数据分析、研究或内容聚合。Stagehand的自然语言驱动的自动化能力使得数据抓取变得更加简单和高效，开发者可以用自然语言指令来指定需要抓取的数据，Stagehand会自动执行相应的操作并提取数据。

3、表单填写与提交

自动化填写在线表单，如注册、登录、问卷调查等。这可以显著提高数据收集的效率，减少手动输入的工作量，并降低出错率。Stagehand可以识别表单字段并自动填写所需信息，然后提交表单。

4、网页内容监控

监控网页内容变化，如价格更新、新闻发布等，及时获取信息。这对于需要实时跟踪网页更新的业务至关重要，例如股票价格监控或新闻聚合服务。Stagehand可以定期检查网页内容，并在检测到变化时触发相应的操作。

5、自动化办公

自动化执行日常的网页相关任务，提高工作效率。这可能包括自动登录到Web应用、自动处理电子邮件、日程安排等。Stagehand的自动化能力可以帮助办公室工作人员减少重复性工作，提高生产力。

Stagehand的灵活性和可扩展性使其成为一个多功能的工具，适用于各种不同的自动化需求。随着技术的不断发展，Stagehand的应用场景将进一步扩展，为更多的业务问题提供解决方案。

五、如何运行Stagehand

1、安装 Stagehand 包

npm install @browserbasehq/stagehand zod

2、配置模型提供程序
您需要为要使用的模型提供商提供 API 密钥。默认模型提供商是 OpenAI，但您也可以使用 Anthropic 或其他提供商。有关受支持模型的更多信息，请参阅API 参考。
确保您的本地环境中可以访问 OpenAI API 密钥或 Anthropic API 密钥。

export OPENAI_API_KEY=sk-...
export ANTHROPIC_API_KEY=sk-...

3、创建 Stagehand 实例
如果您计划在本地运行浏览器，您还需要安装 Playwright 的浏览器依赖项。

npm exec playwright install

然后你可以像这样创建一个 Stagehand 实例：

import { Stagehand } from "@browserbasehq/stagehand";
import { z } from "zod";

const stagehand = new Stagehand({
  env: "LOCAL",
});

如果您计划远程运行浏览器，则需要设置 Browserbase API 密钥和项目 ID。

export BROWSERBASE_API_KEY=...
export BROWSERBASE_PROJECT_ID=...
import { Stagehand } from "@browserbasehq/stagehand";
import { z } from "zod";

const stagehand = new Stagehand({
  env: "BROWSERBASE",
  enableCaching: true,
});

4、运行你的第一个自动化

await stagehand.init();
await stagehand.page.goto("https://github.com/browserbase/stagehand");
await stagehand.act({ action: "click on the contributors" });
const contributor = await stagehand.extract({
  instruction: "extract the top contributor",
  schema: z.object({
    username: z.string(),
    url: z.string(),
  }),
});
console.log(`Our favorite contributor is ${contributor.username}`);

这个简单的代码片段将打开一个浏览器，导航到 Stagehand 仓库，并记录顶级贡献者。

结语

Stagehand作为一个新兴的AI网页浏览框架，以其简单、可扩展和自然语言驱动的特点，为网页自动化操作提供了一个强大的工具。随着AI技术的不断发展，Stagehand有望在未来的网页自动化领域发挥更大的作用。想要了解更多关于Stagehand的信息，可以访问其GitHub仓库。

参考资料：

• Stagehand GitHub 仓库：https://github.com/browserbase/stagehand

🎯🔖更多专栏系列文章：AI大模型提示工程完全指南、AI大模型探索之路（零基础入门）、AI大模型预训练微调进阶、AI大模型开源精选实践、AI大模型RAG应用探索实践🔥🔥🔥 其他专栏可以查看博客主页📑

😎 作者介绍：我是寻道AI小兵，资深程序老猿，从业10年+、互联网系统架构师，目前专注于AIGC的探索。
📖 技术交流：欢迎关注【小兵的AI视界】公众号或扫描下方👇二维码，加入技术交流群，开启编程探索之旅。
💘精心准备📚500本编程经典书籍、💎AI专业教程，以及高效AI工具。等你加入，与我们一同成长，共铸辉煌未来。
如果文章内容对您有所触动，别忘了点赞、⭐关注，收藏！加入我，让我们携手同行AI的探索之旅，一起开启智能时代的大门！