Teamday
1万8000トークンから300へ：MCPを超える軽量ブラウザスキルの作り方
← Back
Claude & Jozo· 8 min read· 2026/01/22
エージェントスキルブラウザ自動化MCPClaude Code開発ツール

1万8000トークンから300へ：MCPを超える軽量ブラウザスキルの作り方

1万8000トークンから300へ：軽量ブラウザスキルの作り方

2025年12月。TeamDayのエージェントランタイムにブラウザ自動化が必要になりました。

明らかな選択肢：MCPサーバー。Playwright MCP（約1万3700トークン）、Chrome DevTools MCP（約1万8000トークン）。どちらも実績があり、よく文書化され、広く採用されています。

その後、Mario Zechnerの記事を読みました。そして、別のものを作りました。

誰も語らないトークン税

MCPサーバーをClaudeに接続すると、すべてのツール説明が即座にコンテキストに読み込まれます。Chrome DevTools MCPは26のツール定義だけで1万8000トークンを消費します — 何も始める前から、Claudeのコンテキストウィンドウの9%を占めてしまいます。

Playwright MCPは1万3700トークン（21ツール）とやや少ないですが、それでも予算の6.8%を使います。

問題は積み重なります：

  • MCPサーバーを追加するたびに数千トークンが消費される
  • 使用しているかどうかに関わらず、ツールの説明は読み込まれたまま
  • 複雑なツールほど詳細な文書が必要で、コストが高い
  • 選択肢が多すぎてエージェントが混乱する

計算は厳しいです。 3〜4つのMCPサーバーを接続すると、ツール定義だけで3〜4万トークンを消費します。実際の作業に使えるコンテキストが失われます。

MCPがまったく不要だとしたら？

Mario Zechnerはこの問いを立て、答えを示しました：Puppeteer Coreを使ったシンプルなbashスクリプトを約225トークンで文書化する方法です。

彼の洞察： 現代のLLMはすでにコーディングができます。26の専門ツールの代わりに、いくつかのプリミティブを与えてソリューションを組み合わせさせましょう。

主な利点：

  • トークン効率：約300トークン対約1万8000トークン
  • 真の構成可能性：ファイルへの出力、他のツールとの連携
  • 簡単な拡張：数分で新機能を追加
  • プロファイルサポート：ログイン済みのブラウザに接続
  • プログレッシブディスクロージャー：必要な時だけスキルを読み込む

このアプローチを採用して、Claude Code向けの軽量スキル /browser を構築しました。

構築したもの：7つのスクリプト、無限の可能性

コアプリミティブ

# ブラウザを一度起動（認証済みセッション用のChromeプロファイルで）
bun browser-start.ts --profile

# どこへでもナビゲート
bun browser-navigate.ts https://example.com

# ページコンテキストでJavaScriptを実行
bun browser-eval.ts 'document.title'

# ファイルへの高速スクリーンショット
bun browser-screenshot.ts page.webp

# インタラクティブな要素ピッカー（ユーザーがクリック、エージェントがセレクターを取得）
bun browser-pick.ts --multi

# HTTP-onlyクッキーの抽出
bun browser-cookies.ts --domain=example.com

# クリーンシャットダウン
bun browser-stop.ts

以上です。 7つのシンプルなスクリプト。それぞれが1つのことを得意とします。エージェントがこれらを組み合わせて複雑なワークフローを実現します。

機能する理由

新しいインスタンスを起動する代わりに、実行中のブラウザに接続：

  • 即時起動（ブラウザ起動のオーバーヘッドなし）
  • 認証を保持（Google、GitHub、LinkedInなど）
  • ユーザーが操作可能（要素のクリック、手動ログインなど）
  • コマンド間のクリーンアップ不要で素早い反復

プログレッシブディスクロージャー：

  • スキルのメタデータ：約50トークン（「ブラウザスキルがあります」）
  • スキルのドキュメント：約300トークン（必要時に読み込み）
  • 合計オーバーヘッド：Chrome DevTools MCPの60分の1

真の構成可能性：

# データをファイルに抽出
bun browser-eval.ts 'data' > output.json

# スクリーンショットと処理
bun browser-screenshot.ts page.webp && magick page.webp page.jpg

# ナビゲーションと抽出の連鎖
bun browser-navigate.ts https://site.com && bun browser-eval.ts 'scrape()'

本番テスト：548人のスロバキア人プロフェッショナル

Leaf NGOは、メンター制度のために海外で働くスロバキア人シニアプロフェッショナルを必要としていました。データはClay.comの認証とAPIの制限の背後にありました。

課題：

  • Clay.comへの認証が必要
  • APIは文書化されておらず（ネットワークからのリバースエンジニアリング）
  • プレビューはリクエストあたり100件に制限
  • 制限を回避するために国別のセグメント化が必要
  • LinkedIn URL、役職、企業名、場所を含む500件以上のプロファイルの抽出

従来のアプローチ： 本格的なスクレイパーの構築、セッション管理、ページング処理、データエクスポート。数時間の作業。

/browserスキルを使用： 開始から548人のエクスポートまで45分。

実施方法

1. プロファイルでブラウザを起動（Clayのログインを保持）：

bun browser-start.ts --profile
bun browser-navigate.ts https://app.clay.com

2. ネットワークトラフィックを検査してAPIを発見：

bun browser-eval.ts 'performance.getEntriesByType("resource").map(r => r.name)'

発見：https://api.clay.com/v3/actions/run-enrichment

3. 認証クッキーを抽出：

bun browser-cookies.ts --domain=clay.com

4. 国別セグメント化の抽出スクリプトを構築：

エージェントは専門のスクリプト（clay-slovak-experts.ts）を作成しました：

  • ブラウザの認証済みセッションを使用
  • スロバキア国外のスロバキア語話者を検索
  • 役職レベルでフィルタリング（シニア、ディレクター、VP、C-level）
  • 100件制限を回避するために国別にセグメント化
  • 11か国から抽出：米国、英国、ドイツ、オーストリア、チェコ、オランダ、スイス、アイルランド、カナダ、オーストラリア、フランス
  • ページングとレートリミットを処理
  • LinkedIn URLで重複排除

5. 抽出を実行：

bun clay-slovak-experts.ts --count=500 --seniority=senior,director,vp

出力：

🇸🇰 Slovak Experts Extractor for Leaf NGO
=========================================
Target: 500 senior Slovak professionals working abroad
Seniority levels: senior, director, vp

🔐 Getting authentication cookies...
📊 Checking total available records...
   Found 1,247 Slovak experts abroad with selected seniority

📥 Extracting 500 records in 5 batches...
   Batch 1/5 (offset 0)... ✅ Got 100 records
   ⏳ Waiting 3s before next batch...
   Batch 2/5 (offset 100)... ✅ Got 100 records
   ...
   Batch 5/5 (offset 400)... ✅ Got 100 records

✅ Extracted 500 Slovak experts
   After deduplication: 548 unique profiles
💾 Saved to: slovak-experts.json
📄 CSV saved to: slovak-experts.csv

📈 Summary:
   Top locations:
   - United States: 198
   - United Kingdom: 142
   - Germany: 87
   - Netherlands: 34
   - Switzerland: 28
   - Austria: 21
   - Czech Republic: 18
   - Canada: 11
   - Ireland: 5
   - Australia: 3
   - France: 1

所要時間： 45分（API発見、スクリプト作成、抽出を含む）

力の源： エージェントはブラウザ自動化を構成可能なプリミティブとして使用しました。ナビゲート、検査、認証、抽出 — 各ステップがクリーンでシンプルです。

なぜ重要なのか

複利効果のあるトークン効率

アプローチトークンオーバーヘッドコンテキストの%
Chrome DevTools MCP約1万8000トークン9.0%
Playwright MCP約1万3700トークン6.8%
ブラウザスキル約300トークン0.15%

節約：コンテキスト消費60倍削減。

1万7700トークンを実際の作業 — 文書、コード、推論 — に使えます。

シンプルさによる速度

MCPアプローチ：

  • セッションごとに新しいブラウザを起動
  • 初期化を待つ
  • MCPプロトコルを通じてツールを実行
  • 構造化されたレスポンスを解析

スキルアプローチ：

  • 実行中のブラウザに接続（即時）
  • スクリプトを直接実行（プロトコルオーバーヘッドなし）
  • ファイルへの出力（標準ツールと連携）
  • コマンド間でブラウザをアクティブに保持

実際の差： カスタム統合に数時間かかるところを、45分で548人のプロフェッショナルを抽出。

設計による拡張性

新しい機能が必要ですか？50行のスクリプトを書きましょう。

例：インタラクティブな要素ピッカー（15分で構築）：

// browser-pick.ts
// ユーザーがブラウザで要素をクリックすると、エージェントがセレクターを取得

import puppeteer from 'puppeteer-core';

async function pick() {
    const browser = await puppeteer.connect({...});
    const page = await browser.pages()[0];

    // クリックリスナーを注入
    await page.evaluate(() => {
        document.addEventListener('click', (e) => {
            const el = e.target;
            // セレクター、テキスト、属性などを返す
            console.log({
                tag: el.tagName,
                selector: getSelector(el),
                text: el.textContent,
                ...
            });
        });
    });
}

これをMCPツールとして構築してみてください。そして特定のユースケース向けに修正してみてください。

プロファイルサポートがすべてを変える

Chromeプロファイルを使用すると：

  • Google、GitHub、LinkedIn、Clayなどに既にログイン済み
  • 認証情報の管理不要
  • OAuthフロー不要
  • セッション処理不要
  • ナビゲートして作業するだけ

Clayの抽出では： 認証コードを書きませんでした。ブラウザにはすでにセッションがありました。エージェントはそれを利用しただけです。

アーキテクチャ：スキル > ツール

Anthropicはエージェントスキルの講演でこう述べています：

「コードは単なるユースケースではなく、デジタル世界への普遍的なインターフェースです。」

スキルは手続き的知識を持つ整理されたフォルダです。 プログレッシブディスクロージャーにより、コンテキストを溢れさせることなく数百のスキルをエージェントに与えられます。

MCPは接続性を提供します。 スキルは専門知識を提供します。

ブラウザスキルはこれを実証しています：

  • メタデータ：「ブラウザ自動化能力を持っています」
  • ドキュメント：6,131文字（読み込み時約300トークン）
  • スクリプト：必要時のみ実行され、コンテキストに読み込まれない
  • 構成可能：ファイルを出力し、他のスキルと連携

MCPとスキルの使い分け

MCPサーバーを使用する場合：

  • リアルタイムのデータストリーミングが必要な時（データベース、API）
  • 外部サービスが公式MCP統合を提供している時
  • ツールの状態がリクエスト間で持続する必要がある時
  • 複数のエージェントが共有アクセスを必要とする時

スキルを使用する場合：

  • トークンオーバーヘッドを最小化したい時
  • bashやファイルとの構成可能性が重要な時
  • 動作を頻繁にカスタマイズする必要がある時
  • 反復速度 > 標準化されたプロトコル

両方を使う： 接続性にはMCP（データベース、Slack、Notion）、専門知識にはスキル（ブラウザ自動化、データ処理、ワークフロー）。

試してみましょう

ブラウザスキルはTeamDayで利用できます。エージェントに頼んでみましょう：

「example.comに移動してすべての記事タイトルを抽出して」
「ホームページのライトモードとダークモードのスクリーンショットを撮って」
「このページの検索ボタンのセレクターを見つけて」
「スコア100以上のHacker Newsのトップ50投稿を抽出して」

エージェントは自動的にブラウザスキルを使用します — 接続、ナビゲート、抽出、結果を出力。

トークンオーバーヘッド： 読み込み時約300トークン。Chrome DevTools MCPの60分の1。

核心的な洞察

現代のLLMはコーディングが得意なため、シンプルなスクリプト + ドキュメントが複雑なツールを超えます。

26の専門ブラウザツールは必要ありません。7つのプリミティブと、それらを組み合わせる方法を知るエージェントで十分です。

結果： コンテキストオーバーヘッドの削減。実行の高速化。カスタマイズの簡便化。時間ではなく分単位で実際の作業を完了。

548人のスロバキア人プロフェッショナルをLeaf NGO向けに。 300トークンのオーバーヘッドで45分で抽出しました。

これが軽量スキルの力です。

Mario Zechnerの洞察に基づいています。TeamDayエージェント向けに構築されました。実際のNGOの業務に本番環境で使用されています。

Turn the best models into shipped work

Teamday installs AI employees with the right model, harness, MCP servers, workspace files, review path, and recurring mission. Stop comparing tools in isolation and put them to work.

Browse AI jobs →Open model map →