7月26日、Towards Data Scienceが「How to Give an LLM Agent a Browser」と題した記事を公開した。この記事では、OpenAI Agents SDKとPlaywright MCPを組み合わせてブラウザを操作するLLMエージェントを構築する手順について詳しく紹介されている。
エージェントがサポートケースを自動で解決した
エージェントはカスタマーサポートコンソールを開き、注文情報・顧客リクエスト・在庫状況・解決ポリシーを順に確認した上で「交換対応が適切」と自律的に判断。内部メモを追加して解決を登録し、最後に監査ログを確認して処理の記録を確かめた。その最終出力は以下のとおりだ：
Resolved CASE-4107 for order ORD-1042 with Replacement.
The case now shows Resolved, the recorded action is Replacement,
and the audit log contains the corresponding resolution entry.
人間がコンソールを操作することなく、一連の業務フローが完結した。本記事では、このエージェントをどう構築するかを解説する。
ブラウザ操作エージェントが必要な理由
業務の多くはWebインターフェース上で完結する。サポートチームは管理コンソールを使い、オペレーションチームはダッシュボードでアラームを監視し、営業担当者はCRMを確認してから顧客と話す。LLMエージェントがこうしたワークフローで機能するには、ブラウザを直接操作できなければならない。
本記事では、**OpenAI Agents SDK** と Playwright MCP を用いてブラウザ操作エージェントを構築するチュートリアルが示されている。OpenAI Agents SDKは2025年3月にOpenAIが公開したPython向けSDKで、ツール呼び出し・マルチエージェント連携・MCPサーバーとの接続といった機能を標準で備えており、エージェント開発者を主な対象としている。
エージェントの動作ループ
ブラウザ操作エージェントの核心は、「観察 → 判断 → 操作 → 繰り返し」 というループだ。
エージェントはタスクとブラウザの現在状態を受け取り、次に何をすべきかを判断してアクションをブラウザに送る。そのアクションが新たな画面状態を生み出し、それが次の判断の入力となる。タスク完了とみなすまでこのループが続く。
このループを成立させるには、エージェントとブラウザの間に2つの接続が必要だ：
- 観察チャネル：ブラウザの現在状態をエージェントが受け取る
- アクションチャネル：エージェントがブラウザを操作する
観察方法としては、スクリーンショット、DOM/アクセシビリティツリーなどの構造化ページ情報、またはその両方が選択肢として挙げられている。アクション方法としては、マウス・キーボード操作や特定要素へのターゲット指定などがある。
実用上よく使われる組み合わせは2つだ：
- スクリーンショット + 座標ベースのマウス・キーボード操作（デスクトップアプリを含む汎用的なコンピュータ操作向け）
- 構造化ページ情報 + 要素ターゲット指定（ブラウザ特化型）
本記事では後者のアプローチを採用している。
Playwright MCPとは何か
**PlaywrightはMicrosoftが開発したブラウザ自動化ライブラリで、クリック、タイピング、ページ遷移、コンテンツ読み取りをプログラムから実行できる。MCP（Model Context Protocol）**はAnthropicが提唱しツール呼び出しの標準化を目的としたオープンプロトコルで、LLMにツールを公開するための共通インターフェースを定義している。
Playwright MCPはこの2つを組み合わせたもので、エージェントがPlaywrightのブラウザ操作機能をツールとして直接呼び出せるようになる。
特筆すべきは、エージェントへのページ提示方法だ。スクリーンショットではなく、デフォルトでアクセシビリティスナップショットを使用する。これはページの構造化された読み取り結果で、リンク・ボタン・入力フィールドなどの操作可能な要素にはそれぞれ参照IDが付与される。エージェントはその参照IDで要素を直接ターゲット指定できる。スクリーンショットと比べてトークン消費が少なく、座標のずれによる誤操作も起きにくいという利点がある。
実装：カスタマーサポートコンソールの自動操作
環境構成
Node.jsをインストールした後、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-4o",
model_settings=ModelSettings(
reasoning=Reasoning(effort="medium"),
),
instructions=AGENT_INSTRUCTIONS,
mcp_servers=[playwright_server],
)
Playwright MCPサーバーの起動設定はMCPServerStdioで行う：
from agents.mcp import MCPServerStdio
playwright_server = MCPServerStdio(
name="Playwright MCP",
params={
"command": "npx",
"args": [
"-y",
"@playwright/mcp@latest",
"--browser",
"chrome",
],
},
)
npxが最新のPlaywright MCPパッケージを取得・実行する。Chromeがすでにインストール済みであれば、追加のブラウザインストールは不要だ。
エージェントへのタスク指定と実行
カスタマーサポートコンソール（静的HTMLアプリ）をローカルで起動し、エージェントに以下のタスクを与える：
APP_URL = "http://127.0.0.1:8000"
TASK = f"""
Open {APP_URL} and resolve the support case for order ORD-1042.
The customer says they received the wrong item. Use the information available in the
application to determine and apply the appropriate resolution. Add a concise internal
note and make sure the resolution was successfully recorded.
Report what you did when the task is complete.
""".strip()
実行はRunner.run()で行い、max_turns=20でエージェントが取れる最大ターン数を制限する：
from agents import Runner
async with playwright_server:
result = await Runner.run(
agent,
TASK,
max_turns=20,
)
print(result.final_output)
実行するとChromeが起動し、エージェントがコンソールを操作する様子をリアルタイムで確認できる。
エージェントの実行結果
エージェントは注文情報、顧客リクエスト、在庫状況、解決ポリシーを順に確認した上で「交換対応が適切」と判断し、内部メモを追加して解決を登録。最後に更新後のケースと監査ログを確認して処理が記録されたことを確かめた。最終出力は冒頭に示したとおりで、人間の介入なしにサポートケースのトリアージから解決登録まで一連の業務フローが完結した。
コンピュータ操作への拡張
本記事で構築したのはブラウザ限定のエージェントだが、「観察 → 判断 → 操作 → 繰り返し」というループの構造は、デスクトップアプリを含む汎用的なコンピュータ操作にも自然に拡張できる。変わるのは観察チャネルとアクションチャネルの実装のみだ。スクリーンショットと座標ベースの操作に切り替えれば、ブラウザ外の操作にも対応できる。
記事中のサンプルコードはGitHubリポジトリで公開されている。OpenAI Agents SDKの詳細は公式ドキュメント、MCPの仕様についてはModel Context Protocol公式サイト、Playwrightの操作APIについてはPlaywright公式ドキュメントも合わせて参照されたい。
詳細はHow to Give an LLM Agent a Browserを参照していただきたい。
