如何构建能操作各类网站的金融智能体｜Browserbase 的 Jay Sahnan 与 Arik Bird

简要描述Brief Description

Jay Sahnan 和 Arik Bird 介绍了用于财务工作流的浏览器代理，并以 Ramp 收集收据、Bill 支付供应商款项和 Stripe KYC 为例，讲解云浏览器、Stagehand 和并行执行。Jay Sahnan and Arik Bird describe browser agents for financial workflows, using Ramp receipt collection, Bill vendor payments and Stripe KYC to explain cloud browsers, Stagehand and parallel execution.

目录Table of Contents

• 简介
  Intro
• 什么是浏览器代理？
  What is a browser agent?
• Ramp、Bill 和 Stripe：关于最难触达网络的数据
  Ramp, Bill and Stripe: data on the hardest-to-reach web
• Ramp：大规模获取收据
  Ramp: fetching receipts at scale
• 为什么浏览器在数据中心会被阻止
  Why browsers get blocked in the data center
• 为云端分叉 Chromium
  Forking Chromium for the cloud
• 演示：同时运行 100 个浏览器
  Demo: 100 browsers at once
• Bill：一个智能体，数千个门户网站
  Bill: one agent, thousands of portals
• Stagehand vs Playwright
• Stripe：自动化 KYC 流程
  Stripe: automating KYC
• 行动、提取并观察
  Act, extract and observe
• 演示：并行调研 20 家公司
  Demo: researching 20 companies in parallel

简介Intro

Jay Sahnan：大家好。大家好，各位。我们今天要谈谈如何构建能够在整个网络上运行的金融智能体。希望大家今天在纽约过得愉快。Jay Sahnan: Hello. Hello everyone. We are here to talk about how to build financial agents that work across the entire web. I hope you've been having a great day so far in New York.

我是 Jay。I am Jay.

什么是浏览器代理？What is a browser agent?

Arik Bird：我是 Arik，我觉得我们应该先从一个问题开始：浏览器代理到底是什么，对吧？我们先回到上一张幻灯片，快速举手调查一下：今天在开发智能体的有谁？请举手。好，我们来对地方了。Arik Bird: I'm Arik and I think the place to start is what even is a browser agent, right? So if we think about it and first if we want to go back to the previous slide, quick show of hands, who is building agents today? Show of hands. Okay, we're in the right place.

Jay Sahnan：那谁负责财务运营之类的工作？我听说今天有个会议。有人做财务吗？好，还有几位工程师。Jay Sahnan: And who works on like finance operations? I heard about some conference going on today. Anyone in finance? Okay, couple more engineers.

如果您在过程中还有任何问题，也可以扫描此二维码，随时向我们提问。If you also want to ask us any questions throughout, you can scan this QR code and you'll be able to ask away.

阿里克·伯德：不错。回到节目。什么是浏览器代理？仔细想想，如果一个代理需要访问网络、与网络交互、从网络读取信息，或在网络上采取行动，它就需要一个浏览器。Arik Bird: Cool. Back to the show. So what is a browser agent? An a browser agent if you think about it, if an agent needs to access the web, interact with the web, read information from the web, take action on the web, it needs a browser.

无论是预订机票、预订航班、为你和妻子安排约会之夜，还是获取竞争对手的定价信息，通常都需要浏览器，才能访问那些最难触达、没有 API 或 MCP 的网站。简而言之，任何需要在网上完成的事情，你的智能体都应该配备名为 browser 的工具。Whether it is booking a plane ticket, booking a flight, planning a date night for you and your wife, getting some pricing information on a competitor, it typically needs a browser to be able to access those hardest to reach sites that don't have an API or don't have an MCP. And so in a nutshell, anything that you need to do on the web, your agent should have the tool called the browser.

Ramp、Bill 和 Stripe：关于最难触达网络的数据Ramp, Bill and Stripe: data on the hardest-to-reach web

举手示意一下，有谁知道这三家公司？Ramp、Bill、Stripe。大家对它们熟悉吗？好。Show of hands, who knows these three companies? Ramp, Bill, Stripe. They familiar with the crowd? Cool.

当你思考这三家公司有什么共同点时，首先，它们都是金融机构，处理着高度敏感的信息。但具体到 Ramp、Bill 和 Stripe，这些信息大多存在于网络上最难触及的地方：可能藏在需要登录才能访问的门户网站后，也可能位于受到严格反机器人保护的网站上。要获取这些信息极具挑战性，而解决办法就是使用浏览器智能体。When you think about what these three companies have in common, well first they're all financial institutions, they're dealing with highly sensitive information, but when you think about it for like Ramp, Bill, and Stripe, a lot of this information lives on the hardest to reach parts of the web, whether that is behind a portal where you need to log in, whether it's on a website that is heavily protected by antibot. It is extremely challenging to get access to this information, and the answer is using browser agents.

Ramp：规模化获取收据Ramp: fetching receipts at scale

那么，我们先从 Ramp 开始。我相信在座各位都很熟悉 Ramp。实际上，我们是 Ramp 的重度用户，也是它的粉丝。呃，他们让公司管理支出变得非常简单。So, if we want to start off, we'll go with Ramp first. So, Ramp, I'm sure everyone in this room is familiar with Ramp. We actually are big users and fans of Ramp. Uh they make it incredibly easy to for a company to manage spend.

随着他们不断发展壮大，开始不得不与那些最难访问的门户网站打交道，而且需要处理的门户网站也比以往任何时候都多。因此，问题或缺口在于：如何才能大规模、高效地获取这些收据？他们当时还不知道浏览器代理，于是就想，不如组建一支人工团队，让他们登录这些门户网站，去获取这些收据。When they were growing and scaling, they started having to interact with hardest to reach portals, and more portals than than ever before. And so, the problem or the gap was, how can we fetch these receipts efficiently at scale? They didn't know about the browser agent. So, instead, they're like, let's just put together a team of humans, and they will log onto these portals, and they'll go fetch these receipts.

嗯，这对于 A 轮、B 轮公司来说可能还不错，但当你开始发展壮大，扩展到 Ramp 这样的规模、面向大众时，就需要一种更高效的方式。你不能一直雇人，否则就会受限于规模扩展能力，陷入瓶颈。所以，浏览器代理应运而生了。Well, that can that can be good for a series A, series B company, but when you start growing and scaling to the to the masses that uh Ramp is at, you need a more efficient way. You can't continue to hire humans. You're just going to be bottlenecked by the limitation of scale. So, in comes browser agents.

现在再说一次，我们是 Ramp 的重度用户。我用 Ramp 卡预订了参加这次会议的机票。用 Ramp 卡订完机票后，Ramp 立即启动了一个浏览器代理。这个浏览器代理会打开达美航空的网站。And now, again, we are big users of Ramp. I booked my flight to this conference using my Ramp card. Immediately after booking my flight on that Ramp card, Ramp spins up a browser agent. That browser agent goes to Delta.

它会登录，抓取那张收据，并将其与交易匹配。嗯，他们这么做之后，一切都挺好的，但当你大规模操作时，就会遇到反机器人防护之类的问题。It logs in. It captures that receipt, and it matches it to the transaction. Um so, once they do that, that's that's all good and dandy, but when you're doing it at scale, you're going to run into things like antibot.

为什么浏览器会在数据中心被拦截Why browsers get blocked in the data center

那么，如何减少这种阻力？如何避免受阻？So, how do you reduce that friction? How do you eliminate getting blocked?

Jay Sahnan：为了理解这一点，我真的想回过头来谈谈浏览器在你的笔记本电脑上是如何工作的。想想 Chromium、Safari 或者 dear。Chromium 让你能够访问网络。它是一个可执行二进制文件。Jay Sahnan: And to understand this, I really want to go back to how does the browser work on your laptop? Think about Chromium or Safari or dear. Chromium allows you to access the web. It's an executable binary.

现在从这张幻灯片中，我们可以看到我们正在预订飞往纽约的航班。后台则是你的浏览器完整的指纹信息。它知道你的浏览器版本，呃，还有操作系统、字体、屏幕尺寸，甚至时区。网站也能识别出一位熟悉的访客。And right now from this slide we can see that we are booking a flight to New York. And in the background, your browser has an entire fingerprint. It knows your browser version, uh there's OS, there's fonts, there's screen size, and even time zone. The website also sees a familiar visitor.

也许你以前访问过这个网站，也许你有一些 cookie。你已经登录，或者用同一个账户预订了太多次行程。这里也有一种熟悉的模式。每个请求都会经过一个网络。你有网络信誉。Maybe you visit the site before, maybe you've got some cookies. You've logged in or you've booked too many trips on the same account. There's a familiar pattern as well. Each request will go through a net You've got a network reputation.

而且整个导航过程，你显然是个人类。现在，当你试图把同一个版本的 Chromium 部署到数据中心时，问题就来了。这时，我们就要扩展到笔记本电脑之外。我们需要复制它。And all the navigation, you are clearly a human. And now the problem comes when you try and put that same version of Chromium into a data center. And that's when we scale beyond the laptop. We need to replicate it.

对于 Ramp 这样的公司来说，他们不会让数千台笔记本电脑开着，运行由不同人类用户操作的 Chromium 实例。他们也不会只靠一个人用 cron 任务来运行这套东西。他们需要可扩展的基础设施，以便可靠地访问网站。不过，一旦把同样的 Chromium 放到数据中心里，问题就开始显现了。For companies like Ramp, they are not going to have thousands of laptops open running a different human version of Chromium. They're not going to have one person with a cron job running this either. They need scaled infra that lets them get to sites reliably. The problems start to appear though when you put that same Chromium in the data center.

嗯，假设我们这么做。假设我们已经把它放进去了。现在的问题是，当我们启动一个被调用的浏览器，也就是某个 EC2 实例上的无头浏览器时，每次启动它，它的指纹都会不一样。Um let's say we do this. Let's say we've put that in. The problem now is when we launch a called out browser, that headless browser in an EC2 instance somewhere. Every single time we launch it, it's going to have a different fingerprint.

它会有新的 cookie。你可能需要重新登录。还有代理。它会清除你来自数据中心而非住宅 IP 的明显标记。It's going to have fresh cookies. You may need to log in again. And proxies. It's going to clear indicator that you are coming from a data center instead of a residential IP.

当然，你可以通过使用代理服务并更换代理来欺骗网站。这样你可能就不会遇到那么多验证码，或者可以利用那个数据中心伪装自己的位置，但这仍然无法解决 Chromium 本身的问题。你在笔记本电脑上用的还是同一个 Chromium。And sure, you could trick the website by using a proxy service and changing your proxy. And that means is you might not be presented as many captures or you can fake your location from that data center, but that still doesn't change the underlying problems with Chromium. You're using that same Chromium on a laptop.

为云端创建 Chromium 分支Forking Chromium for the cloud

如果我们再往下走一步，深入一点思考 Chromium 为什么这么出色，可以看看浏览器进程，对吧？它内部有一个页面引擎。这是一个非常简化的版本。页面引擎负责渲染内容，并包含所有 HTML 和 JavaScript。And if we just step one step down and go a little bit deeper and think about what makes Chromium so good is if you look at the browser process, right? Inside you have a page engine. This is a very simplified version. And where it renders the content and it has all the HTML, JavaScript.

嗯，然后你会看到 Network（网络）选项卡。如果你以前检查过网页，就会知道可以打开 Network 选项卡，查看所有传入和传出的请求。还有设备和图形选项卡。这个引擎实在太棒了，他们每两周就能做一次改动，这对我们这样一家试图自动化网页操作的公司来说简直糟透了。所以我们 fork 了它。Um then you have your network and if you ever like inspected before you go on a network tab and you can see all the requests coming in and out. And you have your device and graphics. The engine is so great that they can make a change every 2 weeks, which makes it terrible for us as a company trying to automate the web. So we forked it.

关于我们对 Chromium 二进制文件做了多少改动，我可以没完没了地讲下去。嗯，不过我们 fork 了它，打造出一个经过验证、运行在数据中心里的浏览器。接下来我要分享三项改动。首先，我们移除了自动化标志。这很明显，对吧？And I could go on forever on how many changes we made to the Chromium binary. Um but we forked it and came up with a verified browser that we run in the data center. And what we did with three things I'm going to share now is we first removed the automation flag. An obvious one, right?

通过自动化驱动无头浏览器时，你会传入 webdriver=true，而我们只需要把它在所有地方都改成 false。然后我们统一了身份标识：现在不再称为 Headless Chrome，而是称为 Chrome。这些改动看起来可能很简单，但 Chromium 非常复杂，这些改动深入到了代码中，而且涉及许多不同的位置，需要我们逐一找到。When you're driving a headless browser um through an automation, you will pass this webdriver equals to true and we just swap that to false everywhere. Then we aligned on the identity. Instead of now being called headless Chrome, we're calling it Chrome. Now these may seem like simple fixes, but because how complicated Chromium is, this goes deep into the code and it's in so many different places that we need to find.

而且每两周就会有一次新的变化。这就是为什么我们有自己的版本。我们也会让这个流程持续运行。我的意思是，很多由开发者在本地或托管基础设施上运行的抓取任务、自动化任务或工作流，都会时而启动、时而停止。And every 2 weeks is a new change. That's why we have our own version. We also keep the process alive. What I mean by that is a lot of scraping jobs or automation jobs or workflows that people are doing as developers locally or even in the hosted infra will start and stop.

他们会在任务完成后立即终止浏览器和 Chromium。相反，我们让 Chromium 保持运行，只关闭窗口。They kill the browser and they kill a Chromium instantly as soon as the task is done. Instead, we leave chromium running and close the windows out.

演示：同时运行 100 个浏览器Demo: 100 browsers at once

那么，我们来测试一下吧。这里有一段代码，我要问问 Arik：我们能启动浏览器吗？好。要记住，今天的 Wi-Fi 一直很糟糕。So, why don't we put it to the test? We've got a snippet here and I'm going to ask Arik, can we launch a browser? Okay. And bear in mind the Wi-Fi has been terrible today.

所以，它启动后需要一点时间才能渲染出来。现在我们看到的是 Browserbase 上托管浏览器的实时视图 iframe。很好。我们可以前往罗马。好，没什么特别的。So, it's launch is going to take a second to render and we are now looking at an iframe of a live view of a hosted browser on Browserbase. That's great. We can go to Rome. Okay, nothing special.

我们先停下来。接下来看下一张幻灯片。我们何不启动 100 个浏览器？做完全相同的事情，只不过这次同时启动它们。Let's stop that. And let's go to the next slide. Why don't we launch 100 browsers? Do the exact same thing but we'll launch them concurrently.

好。然后看下一张幻灯片。嗯，接下来后台会发生的是，我会用一堆不同的网站调用同一个东西，然后你就可以，Aric，滚动浏览其中一些网站。我们现在还没有自动化，只是让 100 个浏览器去访问这些网站。Okay. And to the next slide. Um now what's going to happen in the background is I'm calling the same thing with a bunch of different websites and you will be able to Aric scroll through the um some of the sites and we're not automating at the moment. We're just going and visiting the sites as 100 browsers.

现在接下来一分钟，我想试点东西。嗯，我刚刚很快地搭好了这个，而且 Wi-Fi 有点不太给力。整个过程都是通过我笔记本电脑上的 ngrok 门户进行的。所以，如果不行的话，呃，我们就继续往下。Now I'm going to try something for the next minute. Um I set this up very quickly and the Wi-Fi is a little sucks a little bit. And it's all through an ngrok portal on my laptop. So, if it doesn't work, uh we'll move on.

嗯，我想让大家都扫描这个二维码，然后你们会从这 100 个网站中随机获得一个。嗯，有人告诉我他们能不能看到浏览器吗？我想向你们证明，这些浏览器在我们的云端，而且你们可以访问。加载完成后，谁来喊一声。Um I want everyone to scan this QR code and you will be given a random website out of one of these 100. Um someone tell me if they can see a browser. I'm trying to prove to you that these browsers in our cloud and you have access. Someone shout out when they're when it's loaded.

Arik Bird：希望演示时一切顺利。Arik Bird: Hopefully the demo gods are with us.

Jay Sahnan：对，你有浏览器吗？太棒了。嗯？还有另一个吗？Jay Sahnan: Yeah, you got a browser? Awesome. Yeah? Got another one?

太好了。酷。真棒。不错。Great. Cool. Sweet. Nice.

实际上你也可以与它进行交互。嗯，通过 iframe，你可以点击、控制、移动并执行各种操作。这也引出了下一件事。我现在要把它停掉了。You can actually interact with this as well. Um through the iframe you can click, control, move and do things. And that takes me on to the next thing. I'm going to uh stop that now.

谢谢你，Arik。嗯，嗯，带我进入下一个话题：控制。我们该如何控制这些浏览器？Thanks, Arik. Um Um let's take me on to the next thing is control. How do we control these browsers?

Arik Bird：简单总结一下，Ramp 现在可以部署数千个浏览器智能体。它们已在原本由人工完成、如今由智能体处理的数据录入工作中，节省了超过 3 万个工时，处理规模也提升了 5 倍。Arik Bird: And just to sum this up, Ramp now can deploy thousands of browser agents. They have saved north of 30,000 manual hours in data entry that is done that used to be done by humans that is now done by agents, and their scale has gone up 5x.

比尔：一个智能体，数千个门户Bill: one agent, thousands of portals

因此，仅仅通过从人工转向智能体，他们就加快了业务发展，节省了大量工时，如今可以将这些时间投入到 Ramp 的其他项目中。说到 Bill，Ramp 关注的是规模和访问权限；现在，重点则是控制。大家都熟悉 Bill。So, just by switching from humans to agents, they were able to accelerate their business and save a bunch of those hours, which now they can dedicate to other initiatives across Ramp. When we talk about Bill, so Ramp scale and access. Now, it's about control. Everyone's familiar with Bill.

嗯，Bill，你知道，它要通过数千家不同的供应商处理大量付款。说到用智能体来处理这些付款，最大的挑战在于——好吧，每个门户网站……请翻到下一页。每个门户网站都不一样，结账流程也各不相同。Um Bill, you know, processes a ton of payments across thousands of different vendors. When you think about using agents to do that, the biggest challenge is well, every portal Next slide, please. Every portal is different. The checkout flow is different.

填写付款信息的流程各不相同，用户界面也会变化。所以实际上，Bill认为这件事不可能通过智能体实现自动化。这就是为什么我们需要一支人工团队，代表客户逐一点击各个门户网站并完成这些操作。The process to fill out the payment is different. The UI changes. So, in reality, the way Bill thinks about this is it's impossible to automate with agents. That's why we need a team of humans to go click through portals and do this on behalf of our customers.

嗯，再强调一次，答案是一个能够使用浏览器的智能体。嗯，所以对比尔来说，问题在于：我们如何构建一个能够与成千上万个不同门户交互并执行操作的单一智能体？一个智能体，成千上万个不同的门户。Um and again, the answer to this is an agent that can use a browser. Um and so, for Bill, the notion was how can we build a single agent that can interact and act upon thousands of different portals. One agent, thousands of different portals.

Stagehand vs Playwright

Jay Sahnan：嗯，这就引出了 Stagehand。Stagehand 是我们的开源 SDK，可让你控制浏览器。可以把它理解为 Playwright，但它是在 Playwright 的基础上大幅扩展而成的。Jay Sahnan: Um that brings us to Stagehand. Stagehand is our open-source SDK that lets you control a browser. Think about Playwright, but built way on top of it.

你的代理会坐下来使用 Stagehand 控制浏览器。我来简单演示一下具体怎么做。翻到下一张幻灯片。我想再次从了解 Playwright 有什么问题开始。Your agent will sit and use Stagehand to control the browser. I'm going to show you a little bit how. Go to the next slide. I want to start with understanding again what is wrong with Playwright.

Playwright 真不错。我最初是通过使用 Selenium 和 Beautiful Soup，以及手动编写 Playwright 脚本学会编程的。那还是 AI 出现之前。现在，我都不记得上次写代码是什么时候了。Playwright's great. I first learned how to code by using Selenium and beautiful soup and writing Playwright scripts by hand. This was before AI. Now, I can't remember last time I coded.

所以，使用 Playwright 时，问题在于网站一旦发生变化，比如按钮移动了，文本框从“名字”变成了“姓名”，那么在幕后，当你用 Playwright 查找 XPath、尝试点击某个元素或选择器时，脚本也会出错。做一次性任务、所有操作都在本地运行时，这倒没什么问题；但如果你想像 Ramp 或 Bill 这样的公司一样扩大规模，就需要每次都可靠运行。我们喜欢用 Stagehand 构建工具，正是因为我们想让智能体能够浏览网页并对其进行控制。And so, with Playwright, what the problem is as soon as that website changes, the button moves, the text box changes like from first name to just name. In the in the back, like when you're looking for that XPath in Playwright or you're trying to click on an element or a selector, your script's also going to break. And now, that's fine if you're doing one-off tasks and you're running everything locally, but when you try to scale like a company like Ramp or Bill, you need reliability every single time. The reason we like built Stagehand was because we wanted to give the ability to agents to navigate the web and control them.

下一张幻灯片。那么，它究竟是怎么知道的？有什么不同？嗯，如果你玩玩《Sorry》这款游戏。Next slide. So, how does it actually know? What's different? Well, if you play play Sorry.

有什么不同？从某种意义上说，Stagehand 的工作方式其实有点像 Playwright。你可以使用确定性规则，比如 page.click，或者使用 Playwright 脚本中能看到的任何操作。但当任务稍微复杂一些时，你也可以发送自然语言提示，让它在网站上执行操作。What's different? So, Stagehand actually works a little bit like Playwright in some sense. You can use deterministic rules and go page.click or everything you'd see in a Playwright script. But, when it gets a little bit more complex, you can actually send natural language prompts to go and do actions on the site.

调用 page.click 或 page.act，让它去填写这个表单，或者输入我的姓名，或者输入密码，找到红色按钮。这样，Stagehand 就能获取 DOM、无障碍树以及它在网站上看到的一切，将这些内容传给 LM，再传给智能体，从而理解该点击哪里、该怎么操作，并执行点击。你可能会想，这样做成本会不会很高？这正是 Stagehand 背后优秀的工程师团队大显身手的地方。为了快速演示一下，Arik，麻烦你点击那个比较按钮。Pay page.click or page.act, go fill out this form, or enter my name, or enter password, find the red button. Stagehand will then be able to take the DOM and accessibility tree and everything it sees on the website, pass it to an LM, pass it to an agent, and understand where to click and go and click it. Now, you may be thinking it might get expensive, but that's where we have our excellent engineers behind Stagehand. And to demonstrate this quickly, Arik, if you could hit that compare button.

如果你使用一个配备 Playwright 的智能体，就会把左侧的所有内容都发过去。呃，那可是 12.2 万个 token。而且那还是原始 HTML。然后你问智能体：“我该点哪里？”If you were to use an agent with playwright, you'd be sending everything on the left. Uh, that's 122k tokens. And that's a raw HTML. And you ask your agent, "Where do I click?

“我该去哪里？”在 Stagehand 把请求交给那个 agent 之前，它会先把 DOM 缩减成一个非常酷的无障碍树。在同一个例子中，我们只需要发送大约 4,000 个 token。它还会提供直接的选择器。所以 Stagehand 会说：“点击那个。”这样既能大幅节省你发送的 token 数量，也能减少上下文，让结果更快出来。接下来，还有一个我们使用 Stagehand 和 Browserbase 的原因：网络往返次数更少，往返次数更少。Where do I go to?" What Stagehand does before it hits that agent is it shrinks the DOM to a really cool accessibility tree, where we're only sending like 4,000 tokens for this same example. And it'll give direct selectors. So, Stagehand will go, "Click that." Save a lot of money on um the amount of tokens that you're sending, but also reduce the context and get quicker results. And if we go next, another reason why we use um Stagehand and with Browserbase is because there's fewer net There's fewer round trips.

假设我们现在正在控制数据中心里的一个浏览器。我们需要来回通信，每次都要把 HTML 传来传去。我们在 Browserbase 的做法是把 Stagehand 放在浏览器旁边。Let's say we are currently controlling a browser in a data center. We've got to talk back. We send the HTML back and forth every single time. What we do at Browserbase is we put Stagehand next to the browser.

这意味着，Stagehand 是托管浏览器上的 Chrome 扩展。因此，这些操作会快得多，而且这些操作以及代理指示点击哪里、接下来去哪里的指令，都不需要经历往返延迟。把这两者结合起来，你就能获得浏览器带来的规模化能力，而 Stagehand 则提供控制能力。接下来我们会展示一个同时用到两者的示例。And that What that means is Stagehand is a Chrome extension on a hosted browser. So, those actions become a whole lot quicker, and there's no round trip latency from those actions and those like instructions from the agent of where to click and where to go next. And so, when you bring these two things together, you need scale from the browsers, Stagehand gives you the control, and we're going to show you an example that use both.

Stripe：自动化 KYC流程Stripe: automating KYC

Arik Bird：这是我们的最后一个例子。通过 Ramp，我们看到浏览器智能体解决了规模化和访问受到严密保护的网站的问题。通过 Bill，我们看到的是自适应自动化。浏览器智能体如何让你能够与成千上万个不同的门户网站交互，而不必管——管理成千上万个不同的 Playwright 脚本。Arik Bird: This is our last example. So, with Ramp, we saw that browser agents solve the issue of scale and access to heavily protected sites. With Bill, it was adaptive automation. How can browser agents enable you to interact with thousands of different portals with ha- without having to manage thousands of different playwright scripts.

现在说说 Stripe，在座各位都很熟悉 Stripe。Stripe 每月、每季度、每季度、每年都会帮助成千上万、数万名商户入驻。再说一次，他们知道，要获取信息来核实这些企业确实存在，并且是合适的合作对象，唯一的途径就是通过浏览器。而那时还没有浏览器代理。Now, with Stripe, everyone's familiar with Stripe in this room. Stripe onboards thousands, tens of thousands of merchants on a monthly, quarterly, quarterly, yearly basis. And again, they knew that the only way to access the information to verify that these businesses were real and they were the right business to work with is through a browser. And this was before the age of browser agents.

所以，他们之前有一支人工团队逐一访问各州州务卿的网站，并通过浏览器获取这些信息。现在可以快速转向使用浏览器代理来自动完成这项 KYC 验证。So, they had a team of humans going on and going to Secretary of State portals and using the browser to get that information. So, a quick switch is being able to use the browser agent to go and automate this KYC verification.

行动、提取并观察Act, extract and observe

Jay Sahnan：嗯，我们来进一步聊聊 Stagehand。嗯，所以，我们不必使用像 Bill 这样的直接代理，而是可以使用 act、extract 和 observe。这是 Stagehand 提供给开发者的三个关键基础操作。嗯，比如 observe，用来查找“了解更多”按钮。Jay Sahnan: Um let's dig a bit more into Stagehand here. Um so, we have instead of using a direct agent like Bill, you could use act, extract, and observe. Those are three key primitives that Stagehand we give we expose to you as developer. Um one is observe, find the learn more button.

嗯，这是在采取行动。下一张幻灯片。执行操作，点击登录按钮。下一张幻灯片。Um this is taking action. Next slide. Act, click the login button. Next slide.

接下来是提取功能。这是我最喜欢的一项，因为你可以将任何内容提取到 Zod schema 中。这对工程师来说很棒，因为我们可以把网络上非常杂乱、非结构化的数据，转换成易于使用、易于阅读的数据，再发送给智能体。下一张幻灯片。And then the extract. Now, this is my favorite one because you can extract anything into a Zod schema, which is great for engineers because we're taking really messy unstructured data on the web and converting it to a really easy-to-use data and readable and send it to an agent. Next slide.

演示：并行研究 20 家公司Demo: researching 20 companies in parallel

接下来我再展示几个演示。我们先从一家公司的官网开始，访问 Chipotle 网站，用 Stagehand 查查看它卖什么。嗯，接下来是下一张幻灯片。好。Now, I'm going to show a couple more demos. We're going to start with one company website and we're going to go to Chipotle and find out what it sells using Stagehand. Um and next slide then. Okay.

那么，这个浏览器现在会在托管的浏览器中启动并浏览页面，然后使用 Stagehand 的 extract 来提取内容。好了，完成了。我们找到了 Chipotle Mexican Grill。嗯，它在卖一些青柠味薯片。So, this browser will now spin up on a hosted browser and browse page and it's going to use Stagehand um extract to extract it. And there we go. We've got Chipotle Mexican Grill. Um it's selling some lime chips.

好。呃，如果我们按下停止按钮。现在，接下来就有意思了。我们来看下一个。Cool. Uh if we press stop. Now, this is where it's going to get fun. Let's go for the next one.

现在我们要从四个不同来源调查 Chipotle：访问他们的网站、投资者关系页面、SEC 文件以及纽约证券交易所的上市信息。好吗？我们现在正在运行；好了，页面加载后，你也可以向下滚动。And now we're going to research four different sources for Chipotle. We're going to go to their website, investor page, SEC filing, and New York Stock Exchange listing. Okay? So, we're running and all right, you can also scroll once they load.

好的，很棒。我们在底部放了 SEC 文件，还有纽约证券交易所；我想顶部还有网站，它马上就会显示出来。看，它们也有投资者关系页面。所以，实际上这些内容出现得比屏幕上显示的还要快。Okay, great. So, we've got the SEC filing down at the bottom, and we've got New York Stock Exchange, and up top I think we've got the website that will appear in a second. But, there we go, they got investor relations, as well. So, these are actually happening quicker than they are on the screen.

这已经在后台运行了。只是实时视图会流传回我们这边。显然，当你大规模运行这么多浏览器时，不可能总是查看实时视图。这主要是用于开发。This is already being happened in the back. It's just the live view that's streaming back to us. And obviously, when you're running so many browsers at scale, you're not always going to be checking the live view. This is more for development.

好的，没问题。我们就到此为止吧。接下来进入下一个。现在，我们要针对同样的三个来源处理 20 家公司。Okay, cool. Let's stop that. And let's go to the next one. Now, we're going to do 20 companies for the same three sources.

接下来我们点击运行。请记住，这段代码在每一个网站上运行的都是同一份。然后，我们翻到下一张幻灯片，就能看到 Chipotle 会出现在顶部。And we're going to hit run. And bear in mind, this is the same code that's running on every single website. Then, we go to the next slide. And we can see Chipotle will come up at the top.

我现在有点饿了。嗯，摩根大通。嗯，这就对了。好了，继续往下滚动。I'm getting hungry now. Um JP Morgan. Um there we go. All right, keep on scrolling.

再看看还有什么。高盛。它能在每个网站上执行相同的任务，整个过程不会中断，也不会被拦截，而且全程都使用 Stagehand。这真的很酷，因为它是我一开始提到的经过验证的浏览器，这意味着你遇到验证码的次数会少很多。Let's see what else is there. Goldman Sachs. Going and doing the same tasks across every single site without interruption, unblocked, all using Stagehand as well. And it's really cool cuz it's a verified browser that I mentioned at the very start, which means that you don't get hit with as many CAPTCHAs.

如果你这么做，我们就能解决它们。Stagehand 可以让我们在没人查看这个的情况下进行导航。好吗？我们可以就此打住。And if you do, we solve them. And the Stagehand allows us to navigate without anyone looking at this. Okay? And we can stop there.

我想我们可以在右侧看到一些结果。嗯，下一张幻灯片。好的，不错。这里有一些结果。And I think we can see some results on the right-hand side. Um next slide. Okay, cool. We've got some of the results here.

嗯，SEC 文件数据。继续往下滚吧。说实话，我完全不知道 SEC 那些东西是什么意思。我又不是搞金融的。Um SEC filing data. Keep on scrolling. I honestly have no idea what the SEC stuff means. I'm not a finance guy.

不过，希望它有用。好。嗯，我们来看下一张幻灯片。那个 SEC 模板是我很久以前做的。But, hopefully it's useful. Cool. Um let's go to the next slide. And so, that SEC template I was something I built a while ago.

如果你想访问那个特定的——就是 SEC 那个，你可以这么做。嗯，不过如果你想开始使用任何基于浏览器的东西，或者我刚才演示的内容，我们也有相应的资源。你可以访问我们的网站，那里有一段可复制的提示词，你只要把它发给你的智能体，它也能帮你完成很多工作。呃，下一张幻灯片。好的。If you want access to that particular, just the SEC one, you can do. Um, but we also have if you want to get started with anything browser-based or anything I showed, we have if you go to our website, we have a copy prompt which you just send it to your agent and that'll do a lot of the work as well. Uh, next slide. Okay.

非常感谢。这就是我们的演讲。Thank you so much. That's our talk.