How to Give an LLM Agent a Browser

如何让LLM代理使用浏览器 | Towards Data Science

LLM应用

如何让LLM代理使用浏览器

使用OpenAI Agents SDK和Playwright MCP构建浏览器使用代理

Shuai Guo

2026年7月26日

7分钟阅读

分享

由GPT-Image 2生成

大量有用的工作仍然在网页界面中进行。

为了解决工单，支持团队需要使用管理员控制台。运维团队依赖仪表板来跟踪警报。在与客户交谈之前，销售代表可能会先查看CRM系统。

为了让LLM代理在这些工作流程中发挥作用，它们需要直接通过浏览器进行操作。

在本文中，我们将使用OpenAI Agents SDK和Playwright MCP构建一个使用浏览器的代理。我们将首先了解浏览器使用的背后循环机制，然后通过具体案例研究将其付诸实践。

1. 心智模型

从高层次来看，使用浏览器的代理最好理解为一个LLM，它与浏览器处于一个交互循环中。

该循环的运作方式如下：代理从任务和浏览器的当前状态开始。然后代理解释该状态，决定下一步该做什么，并将操作发送回浏览器。该操作会产生新的浏览器状态，成为下一个决策的输入。

这个循环持续进行，直到代理认为任务已经完成。

为了让这个循环正常工作，代理和浏览器之间需要建立两个连接：

• 一个观察通道，让代理能够接收当前的浏览器状态。

• 一个操作通道，让代理能够与浏览器进行交互。

对于观察通道，常见选择包括截图、结构化页面信息（例如文档对象模型或无障碍树）或两者的结合。

对于操作通道，代理可以使用鼠标和键盘控制，或针对特定页面元素，或发出更高层次的浏览器命令。

观察和操作的选择通常是独立的，但在实践中，两种常见组合是：

• 截图 + 基于坐标的鼠标和键盘操作

• 结构化页面状态 + 针对页面元素的浏览器操作

第一种组合更偏向于通用的计算机使用，其应用范围不仅限于浏览器，还扩展到其他桌面应用程序。第二种组合则更具体地针对浏览器使用，因为它利用了网页内部已有的结构。

在本文中，我们将专注于结构化页面观察与针对页面元素的浏览器操作的组合。

控制台左侧的工作方式类似于一个支持收件箱。一旦选中某个案例，控制台其余部分将显示相关订单、客户上下文和解决策略。从那里，可以通过内部备注解决该案例。控制台还有一个审计日志，用于跟踪更新记录。

代理的任务很简单：调查一个传入的支持案例，并通过此控制台界面将其完全处理到解决。

2.2 定义使用浏览器的代理

接下来，我们配置使用浏览器的代理。

在技术栈方面，这里我们将使用 OpenAI Agents SDK 来驱动代理运行时，并使用 Playwright MCP 将代理连接到浏览器。

我们最终配置的代理如下：

# pip install openai-agents
from agents import Agent, ModelSettings
from openai.types.shared import Reasoning

agent = Agent(
    name="Support Console Browser Agent",
    model="gpt-5.4",
    model_settings=ModelSettings(
        reasoning=Reasoning(effort="medium"),
    ),
    instructions=AGENT_INSTRUCTIONS,
    mcp_servers=[playwright_server],
)

这里需要解释三个部分，即 LLM 客户端、代理指令和浏览器工具。

首先，我们将 Agents SDK 连接到 Azure OpenAI：

import os
from openai import AsyncAzureOpenAI
from agents import (
    set_default_openai_api,
    set_default_openai_client,
)

azure_client = AsyncAzureOpenAI(
    api_key=os.environ["OPENAI_API_KEY"],
    api_version=os.environ["OPENAI_API_VERSION"],
    azure_endpoint=os.environ["OPENAI_API_BASE"],
)

set_default_openai_client(azure_client)
set_default_openai_api("responses")

我们向 Agents SDK 注册客户端并配置其使用 Responses API。

然后，我们有以下指令，该指令故意保持简洁：

AGENT_INSTRUCTIONS = """
You are an agent that can interact with a web browser.
""".strip()

我们仅设置了代理的角色。实际任务将在稍后发送给代理的提示中出现。

接下来，我们需要设置 Playwright MCP。

什么是 Playwright MCP？Playwright 是一个浏览器自动化库。它代表您驱动真正的浏览器，执行点击、输入、导航以及读取页面上的任何内容。MCP（模型上下文协议）是向 LLM 暴露工具的标准方式，因此代理可以直接调用它们。Playwright MCP 是将两者结合后的结果，即 Playwright 的浏览器功能以工具形式暴露给代理使用。有趣的是它向代理展示页面的方式。与截图不同，Playwright MCP 默认使用可访问性快照，这基本上是对页面内容的结构化读取。链接、按钮和输入字段等交互元素都会获得代理可以直接定位的引用 ID。这正是我们之前讨论的结构化观察与元素定位操作的配对。

Playwright MCP 通过 Node.js 运行。要安装 Node.js，在 Windows 上：

winget install OpenJS.NodeJS.LTS

在 macOS 上：

brew install node

在 Linux 上：

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.40.5/install.sh | bash
\. "$HOME/.nvm/nvm.sh"
nvm install --lts

然后验证安装：

node --version
npx --version

我们可以配置 Agents SDK 通过以下 npx 命令启动 MCP 服务器：

from agents.mcp import MCPServerStdio

playwright_server = MCPServerStdio(
    name="Playwright MCP",
    params={
        "command": "npx",
        "args": [
            "-y",
            "@playwright/mcp@latest",
            "--browser",
            "chrome",
        ],
    },
)

此处，npx 会检索并运行最新的 Playwright MCP 包。-y 参数会自动接受 npx 的确认提示，而 --browser chrome 告诉 Playwright 要启动哪个浏览器。Chrome 也是 Playwright MCP 的默认浏览器，如果已安装，无需单独安装浏览器。

MCPServerStdio 配置 Agents SDK 以将 Playwright MCP 作为本地进程启动。当代理首次调用浏览器工具时，Playwright MCP 会打开一个可见的 Chrome 窗口并执行请求的浏览器操作。

2.3 运行代理

现在我们可以给代理分配一个具体任务：

APP_URL = "http://127.0.0.1:8000"

TASK = f"""
打开 {APP_URL} 并解决订单 ORD-1042 的支持案例。

客户表示他们收到了错误的商品。使用应用程序中的信息确定并应用适当的解决方案。添加一个简洁的内部
备注，并确保解决方案已成功记录。

任务完成后报告你做了什么。
""".strip()

在任务提示中，我们描述了如何访问应用程序以及期望的结果。

然后我们通过以下方式运行代理：

from agents import Runner

async with playwright_server:
    result = await Runner.run(
        agent,
        TASK,
        max_turns=20,
    )

print(result.final_output)

async with 代码块会启动 Playwright MCP 进程并在代理运行期间保持连接。我们使用 max_turns 来设置代理可以采取的回合数上限。

启动后，Chrome 会打开，我们可以观察代理通过支持控制台完成任务的过程。

最终响应正确总结了结果：

为订单 ORD-1042 的案例 CASE-4107 解决方案为更换商品。

该案例现在显示为已解决，记录的操作是更换商品，
审计日志中包含相应的解决方案条目。

如果你想，也可以通过以下方式检查浏览器工具调用及其输出：

for item in result.new_items:
    print(type(item).__name__, item)

在我的运行中，代理找到了与 ORD-1042 相关联的案例，并检查了订单、客户请求、库存状态和相关解决方案政策。然后它得出更换商品是合适的结论，添加了内部备注并提交了解决方案。最后，它检查了更新后的案例和审计日志，确认操作已被记录。

这正是我们想要的代理行为。

3. 从浏览器使用到计算机使用

在这个案例研究中，我们构建的是一个使用浏览器的代理。然而，其底层模式，即观察、决策、行动和重复的循环，自然可以扩展到一般的计算机使用场景。

变化的是观察和行动的通道。

在我们的案例中，Playwright MCP 为代理提供结构化的页面信息，并允许其定位单个网页元素。一个更通用的计算机使用代理可能通过截图进行观察，并通过坐标控制鼠标和键盘。

你可以在 此处 找到我们案例研究的代码库

撰写者

查看 Shuai Guo 的所有文章

AI 代理

,

浏览器

LLM

LLM 代理

OpenAI 代理 SDK

分享本文

• 在 Facebook 上分享

• 在 LinkedIn 上分享

• 在 X 上分享

Towards Data Science 是一份社区出版物。提交您的见解，以触达全球受众，并通过 TDS 作者支付计划获得收益。

将 href 更新为您的实际投稿 URL

为 TDS 撰写文章

✦ end CTA ✦