ChatGPTエージェントに対抗！ブラウザ操作MCPを自作してみたら想像以上に大変だった件

YaroTech｜生成AIの傾奇者

2025年8月1日 21:51

こんにちは！YaroTechです。

Day21でChatGPTのエージェント機能を紹介した後、正直悔しさが込み上げてきました。

「ブラウザを勝手に操作して、情報集めて、資料まで作ってくれる...」

でも手放しでやってくれそうでβ版だし、まだ遠い存在な気が。。。Claudeは本格的に近くにいて作業してくれているのに。

そのモヤモヤを抱えて3日間。ついに決断しました。

「ないなら、作ればいいじゃん！」

そして今、あなたの前には完成したブラウザ操作MCPがあります。

でも、ここまでの道のりは...想像以上に大変でした。

🖥️ 動作確認環境

PC: Windows 11
Claude Desktop: v0.7.2以降
Node.js: v18以上

🎯 この記事で得られること

ブラウザ操作MCPができるまでの一部始終
TypeScriptエラー地獄からの脱出方法
Node.jsとブラウザ環境の違いの理解
MCPサーバーの仕組みと実装方法
ChatGPTエージェントとの実践的な比較

※スキの数など状況によってソースコードを公開したいと思います。

🛠️ Step1: 環境構築で心が折れかけた

最初の一歩でつまずく

mkdir browser-automation-mcp
cd browser-automation-mcp
npm init -y
npm install @modelcontextprotocol/sdk puppeteer

「よし、これでMCPサーバーを作るぞ！」

意気込んで`index.ts`を書き始めたものの...

import { Server } from '@modelcontextprotocol/sdk/server/index.js';
// エラー: Cannot find module...

「え？npmインストールしたのに...」

原因はpackage.jsonの1行

悩んだ末、ついに原因を発見：

{
  "type": "module"  // これを忘れてた！
}

ES Modulesを使うには、この1行が必要だったんです。

学び: 些細な設定ミスが大きな時間ロスに。ドキュメントは隅々まで読もう。

😭 Step2: TypeScriptエラー13個との戦い

赤い波線の嵐

やっとサーバーが起動できるようになったと思ったら...

npm run build

> tsc
src/index.ts:100:11 - error TS2322: Type '{}' is not assignable...
src/index.ts:100:21 - error TS18048: 'args' is possibly 'undefined'...
...
Found 13 errors

13個のエラー！？

画面が赤い波線だらけに。心が折れそうになりました。

型安全性との格闘

MCPのargumentsは`unknown`型。TypeScriptは厳格にチェックします：

// ❌ エラーが出るコード
const url = args.url;  // 'args' is possibly 'undefined'

// ✅ 修正後のコード
if (!args || typeof args !== 'object' || !('url' in args)) {
  throw new Error('URL is required');
}
const url = args.url as string;

1個ずつ、地道に修正。やっと全エラーを解決。

そして新たな敵が...

error TS2584: Cannot find name 'document'.

「document？それってブラウザのやつじゃ...」

💡 実行コンテキストの罠

Node.jsとブラウザは別世界

// page.evaluate()の中はブラウザで実行される
const content = await page.evaluate(() => {
  return document.body.innerText;  // Node.jsは知らない
});

MCPサーバーはNode.jsで動くけど、Puppeteerの`evaluate`内はブラウザで実行。

この違いを理解するのにまた悪戦苦闘。

解決策は2つ

`tsconfig.json`に`"DOM"`を追加
`@ts-ignore`で無視

結局、1の方法を採用：

{
  "lib": ["ES2022", "DOM"]
}

🎉 Step3: ついに動いた！

感動の瞬間

私: ブラウザを起動して

Claude: browser_launchを実行します...
[ブラウザが起動]
Browser launched successfully

私: https://google.com にアクセスして

Claude: navigate_toを実行します...
[Googleが表示される]
Navigated to https://google.com

動いた！本当に動いた！苦労が報われた瞬間でした。

※動画は操作画面のみです。縦長で撮ったため、ブラウザ画面がうまく見えないなど見づらい部分があります。

🚀 完成したMCPの機能

実装した8つのツール

browser_launch - ブラウザを起動
browser_close - ブラウザを終了
navigate_to - URLへ移動
click_element - 要素をクリック
type_text - テキストを入力
take_screenshot - スクショ撮影
get_page_content - ページ内容取得
wait_for_element - 要素を待機

実際の使用例

# Google検索を自動化
1. browser_launchでブラウザ起動
2. navigate_toでGoogleへ
3. type_textで"Claude MCP 開発"を入力
4. take_screenshotで結果を保存

わずか4ステップで検索が自動化できます！

プロンプト例（下記動画で指示して動かしています）

1. ブラウザを起動して
2. https://www.google.com にアクセスして
3. 検索ボックス（selector: textarea[name="q"]）に「Claude MCP 開発」と入力して
4. スクリーンショットを google_search.png として保存して

スクリーンショットも保存されてました！

操作動画で一連の流れを撮ってみましたので具体的なイメージを膨らませる一助になると幸いです。

プロンプトだけでブラウザ、フォルダ、ファイル操作できたら、RPAよりもっと手軽に自動化できるし、さらに進化してAIが自律的にいろいろやってくれそうですね！

📊 ChatGPTエージェントとの比較

| 項目　　　　　| ChatGPT エージェント | Claude ブラウザMCP |
|---------------------|-------------------------------|----------------------------|
| セットアップ　| ワンクリック　　　　| 30分　　　　　　　|
| 使いやすさ　　 | ★★★★★　　　　　 | ★★★☆☆ 　　　　|
| カスタマイズ性 | ★★☆☆☆　　　　　 | ★★★★★　　　　 |
| 速度　　　　　 | ★★★★☆　　　　　 | ★★★★☆ 　　　　|
| プライバシー　 | ★★★☆☆　　　　　| ★★★★★ 　　　　|
| 料金　　　　　 | 月$20　　　　　　　 | 無料　　　　　　　|
※ClaudeDesktopは無料でもMCPできますが制限があるためお試しレベルで考えてください。

それぞれの強み

ChatGPTエージェント

すぐに使える
初心者に優しい
安定している

Claude ブラウザMCP

完全にカスタマイズ可能
ローカルで動作（プライバシー◎）
無料で使い放題（チャット文字数制限あり）
コードを理解すれば無限の可能性

💻 実際のコード（主要部分）

// ツールの実行処理
server.setRequestHandler(CallToolRequestSchema, async (request) => {
  const { name, arguments: args } = request.params;

  switch (name) {
    case 'browser_launch': {
      browser = await puppeteer.launch({
        headless: false,  // ブラウザを表示
        args: ['--no-sandbox']
      });
      page = await browser.newPage();
      return {
        content: [{ type: 'text', text: 'Browser launched' }]
      };
    }
    
    case 'navigate_to': {
      if (!page) throw new Error('Browser not launched');
      
      const url = args.url as string;
      await page.goto(url, { waitUntil: 'networkidle2' });
      
      return {
        content: [{ type: 'text', text: `Navigated to ${url}` }]
      };
    }
    // ... 他のツール
  }
});

🔧 セットアップ方法

1. プロジェクトをクローン

git clone https://github.com/YaroTech/browser-automation-mcp
cd browser-automation-mcp
npm install
npm run build

2. Claude Desktopの設定

`%APPDATA%\Claude\claude_desktop_config.json`に追加：

{
  "mcpServers": {
    "browser-automation": {
      "command": "node",
      "args": ["C:\\path\\to\\dist\\index.js"]
    }
  }
}

3. Claude Desktop再起動

これで使えるようになります！

🎯 学んだこと

技術的な学び

TypeScriptの型安全性は友達
- 最初は敵に見えたけど、バグを防いでくれる
- 型ガードの重要性を痛感
実行コンテキストの理解
- Node.jsとブラウザは別世界
- どこでコードが実行されるか常に意識
エラーメッセージを読む力
- 13個のエラーも1つずつ解決すれば怖くない
- エラーは成長のチャンス

開発の心構え

完璧を求めない
- まず動くものを作る
- 改善は後からでもできる
失敗を楽しむ
- エラーとの格闘も良い思い出
- 解決した時の達成感は格別
コミュニティの力
- 詰まったら聞く
- 自分の経験を共有する

🚀 今後の展望

改善したい点

エラーハンドリングの強化
複数タブ対応
ファイルダウンロード機能
より使いやすいAPI設計

あなたのアイデアが、このMCPをもっと素晴らしいものにします！

💬 まとめ

ブラウザ操作自作MCP開発で学んだ最も大切なこと。

それは「作ってみる」ことの価値です。

ChatGPTのエージェント機能を見て「すごいな」で終わることもできました。

でも、「自分でも作れるかも」と思って挑戦したことで：

TypeScriptへの理解が深まった
MCPの仕組みが分かった
エラーと友達になれた
何より、動くものが作れた

完璧じゃなくていい。ChatGPTに勝てなくてもいい。

大切なのは、一歩踏み出すこと。

あなたも何か作ってみませんか？

おまけ

ちょっとClaudeDesktopの拡張機能を見てみたら、あります。。。コネクタ＞デスクトップ拡張機能＞Control Chromeが！
下記画像の下の方に「Control Chrome」ありますね。でも、これ、MacOSだけなので、Windowsでは使えないですし、機能も10個ほどなので自作MCPに機能は追加していきたいと思います！