料金無料（オープンソース）
対応Windows / macOS / Linux
ライセンスMIT License
目次
概要
agent-browser は、AI エージェントが Web ブラウザを操作するための標準化されたインターフェースです。2026 年 3 月のアップデートで Electron アプリ対応が追加され、Slack、Discord、VS Code、Notion などの Desktop アプリ操作も自動化可能になりました。
Electron アプリ対応の仕組み
アーキテクチャ
┌─────────────────────────────────────────────────────────┐
│ AI エージェント │
│ (Claude Code / Codex) │
└─────────────────────────────────────────────────────────┘
│
│ agent-browser プロトコル
▼
┌─────────────────────────────────────────────────────────┐
│ agent-browser スキル │
│ - DOM ツリー取得（Web/Electron 共通） │
│ - 要素操作（クリック、入力、スクロール） │
│ - スクリーンショット │
│ - キーボード操作 │
└─────────────────────────────────────────────────────────┘
│
┌────────────┴────────────┐
│ │
▼ ▼
┌─────────────────────┐ ┌─────────────────────┐
│ Web ブラウザ │ │ Electron アプリ │
│ (Chrome/Firefox) │ │ (Slack/VS Code) │
└─────────────────────┘ └─────────────────────┘
対応 Electron アプリ
| アプリ | 対応状況 | 主な操作 |
|---|---|---|
| Slack Desktop | ✓ 完全対応 | チャンネル操作、メッセージ送信 |
| Discord | ✓ 完全対応 | サーバー移動、メッセージ、通話 |
| VS Code | ✓ 完全対応 | ファイル操作、ターミナル、デバッグ |
| Notion Desktop | ✓ 完全対応 | ページ作成、編集、検索 |
| Teams Desktop | △ 一部対応 | チャット、会議 |
| Zoom | △ 一部対応 | 会議参加、画面共有 |
| Obsidian | ✓ 完全対応 | ノート作成、検索、グラフ |
インストールと設定
agent-browser のインストール
# npm でインストール
npm install -g @anthropic/agent-browser
# または Claude Code 経由で自動インストール
# .mcp.json に追加すると自動でセットアップされます
Claude Code 設定
// .mcp.json
{
"mcpServers": {
"agent-browser": {
"command": "npx",
"args": ["-y", "@anthropic/agent-browser@latest"],
"env": {
"AGENT_BROWSER_MODE": "electron",
"AGENT_BROWSER_APP": "slack"
}
}
}
}
対応アプリの指定
# Slack を操作
export AGENT_BROWSER_APP=slack
# VS Code を操作
export AGENT_BROWSER_APP=vscode
# Discord を操作
export AGENT_BROWSER_APP=discord
# カスタム Electron アプリ
export AGENT_BROWSER_APP=custom
export AGENT_BROWSER_PATH="/Applications/MyApp.app"
基本操作
1. アプリ起動と接続
ユーザー: Slack を起動して
agent-browser:
action: launch_app
params: { app: "slack" }
result: { status: "success", pid: 12345 }
回答: Slack を起動しました。
2. 画面状態取得
ユーザー: 現在の画面状態を教えて
agent-browser:
action: get_snapshot
params: {}
result: {
type: "electron",
app: "slack",
elements: [
{ id: "channel-list", type: "list", visible: true },
{ id: "message-input", type: "textbox", visible: true },
{ id: "send-button", type: "button", visible: true }
]
}
3. 要素操作
ユーザー: #general チャンネルに「おはようございます」と送信して
agent-browser:
action: sequence
steps:
- action: click
target: { id: "channel-general" }
- action: type
target: { id: "message-input" }
text: "おはようございます"
- action: click
target: { id: "send-button" }
result: { status: "success" }
実践ユースケース
Slack 自動化
ユーザー: 未読メッセージのあるチャンネルを一覧して、それぞれの最新メッセージを表示して
agent-browser:
1. サイドバーのチャンネルリスト取得
2. 未読バッジのあるチャンネルを抽出
3. 各チャンネルに移動して最新メッセージ取得
4. 結果を構造化して返す
出力例:
- #general: 3 件の未読
- 田中: 明日の会議資料を送ります
- 鈴木: ありがとうございます
- #プロジェクト A: 5 件の未読
- 佐藤: 進捗報告をお願いします
VS Code 自動化
ユーザー: 新しい Python ファイルを作成して、FastAPI の Hello World を書いて
agent-browser:
1. VS Code ウィンドウにフォーカス
2. Ctrl+N で新規ファイル
3. Ctrl+S で保存ダイアログ
4. ファイル名入力: main.py
5. コード入力：FastAPI テンプレート
6. 保存
生成コード:
from fastapi import FastAPI
app = FastAPI()
@app.get("/")
def read_root():
return {"Hello": "World"}
Discord 自動化
ユーザー: 参加中のサーバー一覧を取得して、各サーバーのオンラインメンバー数を表示して
agent-browser:
1. サーバーサイドバー取得
2. 各サーバーアイコンクリック
3. メンバーリストからオンライン数カウント
4. 結果を集計
出力例:
- プログラミング社区：オンライン 234/500
- ゲームサーバー：オンライン 89/200
- 音楽好き：オンライン 45/150
Notion 自動化
ユーザー: 今週のタスクページを作成して、月曜日から金曜日までのセクションを作って
agent-browser:
1. Notion 開く
2. 新規ページ作成
3. タイトル設定：「今週のタスク（2026/03/07-03/11）」
4. 見出しブロック追加（月 - 金）
5. 各見出し下にチェックボックステンプレート
高度なテクニック
1. ワークフローの保存と再利用
# workflows/slack-morning.yaml
name: 朝のルーティン
trigger: "朝の準備して"
steps:
- app: slack
actions:
- click: "#status-channel"
- type: "朝礼です。本日もよろしくお願いします！"
- send
- app: notion
actions:
- open: "タスクリスト"
- filter: today
- report: true
実行:
ユーザー: 朝の準備して
agent-browser: workflow/slack-morning.yaml 実行
2. 条件分岐付き操作
ユーザー: 未読メッセージがあったら通知して、なかったら「問題ありません」と報告して
agent-browser:
1. 未読メッセージ数取得
2. if 未読数 > 0:
- 未読チャンネル一覧とメッセージ内容報告
else:
- "問題ありません" と報告
3. 複数アプリ連携
ユーザー: Slack の #alerts チャンネルのメッセージを Notion に記録して
agent-browser:
1. Slack で #alerts チャンネル開く
2. 最新 10 件メッセージ取得
3. Notion で「アラートログ」ページ開く
4. メッセージを追加記録
5. 完了報告
4. 定期的な監視
// scripts/monitor.js
const agentBrowser = require('@anthropic/agent-browser');
async function monitorSlack() {
const browser = await agentBrowser.connect('slack');
setInterval(async () => {
const mentions = await browser.getUnreadMentions();
if (mentions.length > 0) {
console.log('新しいメンション:', mentions);
// 通知処理
}
}, 60000); // 1 分毎
}
monitorSlack();
テスト自動化
E2E テスト例
// tests/slack.test.ts
import { AgentBrowser } from '@anthropic/agent-browser';
describe('Slack E2E テスト', () => {
let browser: AgentBrowser;
beforeAll(async () => {
browser = await AgentBrowser.launch('slack');
});
test('メッセージ送信', async () => {
await browser.click('#test-channel');
await browser.type('#message-input', 'テストメッセージ');
await browser.click('#send-button');
const messages = await browser.getMessages();
expect(messages[messages.length - 1].text).toBe('テストメッセージ');
});
test('ファイルアップロード', async () => {
await browser.uploadFile('#attach-button', './test.pdf');
await browser.click('#send-button');
const messages = await browser.getMessages();
expect(messages[messages.length - 1].hasAttachment).toBe(true);
});
afterAll(async () => {
await browser.close();
});
});
ビジュアルリグレッションテスト
// tests/visual.test.ts
import { AgentBrowser } from '@anthropic/agent-browser';
import { compare } from 'pixelmatch';
test('UI リグレッション', async () => {
const browser = await AgentBrowser.launch('slack');
// 現在のスクリーンショット
const current = await browser.screenshot();
// 基准画像と比較
const baseline = fs.readFileSync('./baseline/slack-home.png');
const diff = new Buffer(current.length);
const numDiff = compare(
baseline,
current,
diff,
current.width,
current.height
);
expect(numDiff).toBeLessThan(100); // 許容誤差
});
データ抽出
構造化データ抽出
ユーザー: Slack の #sales チャンネルから今月の受注データを抽出して CSV で保存して
agent-browser:
1. #sales チャンネルに移動
2. 今月のメッセージフィルタ
3. 受注メッセージを正規表現で抽出
4. 構造化データに変換
5. CSV ファイル保存
出力 CSV:
日付，顧客名，金額，担当
2026-03-01，株式会社 A,100000，田中
2026-03-02，株式会社 B,250000，鈴木
...
定期的なデータ収集
# scripts/collect_data.py
import agent_browser
import pandas as pd
from datetime import datetime
def collect_slack_data():
browser = agent_browser.connect('slack')
# 各チャンネルからデータ収集
channels = ['#sales', '#support', '#feedback']
all_data = []
for channel in channels:
messages = browser.get_messages(channel, limit=100)
for msg in messages:
all_data.append({
'channel': channel,
'date': msg['date'],
'user': msg['user'],
'text': msg['text']
})
# DataFrame で保存
df = pd.DataFrame(all_data)
df.to_csv(f'data/slack_{datetime.now():%Y%m%d}.csv')
collect_slack_data()
トラブルシューティング
アプリが検出されない
解決策:
# app path を明示指定
export AGENT_BROWSER_PATH="/Applications/Slack.app"
# または
export AGENT_BROWSER_EXECUTABLE="C:\Program Files\Slack\slack.exe"
要素が見つからない
解決策:
# DOM 再取得をトライガー
ユーザー: 画面を更新して
# または
ユーザー: 要素一覧を再取得して
操作がタイムアウトする
解決策:
# タイムアウト延長
export AGENT_BROWSER_TIMEOUT=30000 # 30 秒
セキュリティ注意事項
認証情報の扱い
# 悪い例：認証情報をスクリプトにハードコード
export SLACK_TOKEN=xoxb-xxx
# 良い例：環境変数またはシークレット管理
export SLACK_TOKEN=$SECRET_SLACK_TOKEN
操作ログの記録
// 操作ログを記録
const logger = new OperationLogger();
browser.on('action', (action) => {
logger.log({
timestamp: Date.now(),
action: action.type,
target: action.target,
user: session.userId
});
});
参考リンク
免責事項 — 掲載情報は執筆時点のものです。料金・機能は変更される場合があります。最新情報は各公式サイトをご確認ください。