MCPを使って、指定したWebコンテンツの分析ができるfetchを試してみました

さらに引き続き、MCPについて調べています。

今回はMCPをつかって、任意のWebページの情報を取得する機能を試してみます。公式サイトのMCP Serverの説明ページでは、Webページを取得するためのプログラムとして、mcp-server-fetchが公開されています。今回はこちらを使って、任意のページを取得してClaudeで要約する手順を紹介します。

参考：前回までの記事

www.crossroad-tech.com

1. mcp-server-fetchは指定したページの情報を取得できる
2. mcp-server-fetchの環境構築
3. おわりに

使用した環境・Mac OS 14.7
・Node.js 22.14
・Claude Desktop 0.92

1. mcp-server-fetchは指定したページの情報を取得できる

まず、mcp-server-fetchは指定したページの情報を取得する機能です。そのため、以下のようなプロンプトには回答してくれます。

以下のサイトの情報を要約してください。
https://www.crossroad-tech.com/entry/babylonjs-playcanvas-joint-meetup2024

"▶︎上記の回答"をクリックすると、詳細を確認できます。

▶︎上記の回答

Babylon.js と PlayCanvas 合同ミートアップ2024のまとめ

このブログは、WebブラウザベースのリアルタイムCGエンジンである「Babylon.js」と「PlayCanvas」のコミュニティが共同で開催したLT（ライトニングトーク）会の報告です。

イベント概要

両ライブラリの概要、使い方、思想の比較と学習を目的としたイベント

両コミュニティのメンバーが集まり、それぞれのツールについて発表

主な発表内容

PlayCanvasの紹介 (はがさん)

イギリスのPlayCanvas社が2010年から開発

エンジン(MITライセンス)とエディタで構成

プロジェクト開発から公開までをサポート

チーム開発が可能（最大64人）

Babylon.jsの紹介 (limesさん)

Babylon.jsの基本概要を初心者向けに説明

Babylon.jsでのゲーム開発支援 (やまゆさん)

babylon-vrm-loaderの開発者

3Dブラウザゲーム開発の課題

日本語情報不足の問題を解決するため：

Zennでの技術書籍執筆中

Babylon.js日本語サイトを開発中

GitHub Discussionを活用したコミュニケーション場の検討

PlayCanvasでの制作事例 (vircre01さん)

アパレル業界出身の開発者による事例紹介

PlayCanvasを使った様々な開発作品

PlayCanvasの利点について紹介

絵文字デコーディング機能付きBabylon.js (Okaさん)

Apple Vision ProでのBabylon.js使用を知り学習開始

コード内の絵文字を3Dオブジェクト（球体）に変換する機能の紹介

デコーディングアルゴリズムの説明

PlayCanvas本執筆体験 (かーでぃさん)

技術書典でのPlayCanvasについての書籍執筆経験

ハンズオン参加による学習体験

PlayCanvasエディタの使用例

まとめ両コミュニティが交流することで互いに学び合う機会となり、Babylon.js勉強会のDiscordにはPlayCanvasに関するチャンネルも開設されています。興味のある方は参加を歓迎とのことです。

サイトの中に別のサイトリンクがある場合も、回答してくれました。

このサイトに書かれている記事を5個確認し、どのような内容が書かれているかを要約してください。  
https://www.crossroad-tech.com/archive/category/%E3%82%A4%E3%83%99%E3%83%B3%E3%83%88%E3%83%AC%E3%83%9D%E3%83%BC%E3%83%88%E3%81%AA%E3%81%A9

"▶︎上記の回答"をクリックすると、詳細を確認できます。

▶︎上記の回答

クロスロードテックのウェブサイトから記事を確認してみます。fetch（ローカル）からの fetch の結果を表示

クロスロードテックのウェブサイトから5つの記事を選んで要約します：

visionOS Engineer Meetup vol.7 参加レポート
この記事では、著者がvisionOS Engineer Meetup vol.7に参加し、LT（ライトニングトーク）を行った経験を共有しています。イベントではマルチウインドウでアプリケーションの表現を拡張する方法、VisionOS 2.0を使った新一万円札ARアプリの開発、visionOSデベロッパーデーについての発表がありました。visionOSは、Appleの空間コンピューティング向けオペレーティングシステムで、AR/VR関連の開発者が集まるコミュニティイベントとなっています。
Babylon.js × PlayCanvas コミュニティ合同LT会まとめ
この記事では、ブラウザで動作する3DCGを作成するためのフレームワークであるBabylon.jsとPlayCanvasのコミュニティが合同で開催したLT会の内容がまとめられています。両方のフレームワークはJavaScriptベースのWebGL技術を使用しており、それぞれの特徴や活用事例、最新の機能などが共有されました。開発者同士の交流や知見の共有を目的としたイベントです。
Presence Platform Hackathon | Japan 2024 優勝報告
著者がMeta Officeで開催されたPresence Platform Hackathon | Japan 2024に参加し、ユーティリティ部門で優勝したことを報告しています。イベントは2024年7月9日から12日にかけて行われ、Metaの空間コンピューティングプラットフォームを使った様々なアプリケーションが開発されました。著者のチームが開発したソリューションやハッカソンの様子、審査結果などが記載されています。
PLATEAU LT06の概要まとめ
この記事では、国土交通省が推進する3D都市モデル「PLATEAU（プラトー）」に関するLightning Talkイベントの内容がまとめられています。PLATEAUは日本の都市をデジタル化するプロジェクトで、建設設計用途での属性データ活用、都市プラットフォーム「Machi Plus」の今後の開発計画など、様々な活用事例や開発状況が発表されました。著者自身もこのイベントで発表を行っています。
技術書典14の参加レポート「物理本と電子本を一緒に作成したときのTipsあれこれ」技術書典14というイベントで、著者が所属するBabylon.js勉強会が「Babylon.jsレシピ集 Vol.2」を頒布した経験について書かれています。前回の技術書典13との違いとして、今回は物理本の作成と現地会場での販売に挑戦したとのこと。本の制作過程や販売のノウハウ、電子書籍と物理書籍を同時に作成する際のヒントなどが共有されています。これらの記事は全体的に、技術コミュニティのイベント参加レポートや勉強会の内容をまとめたものであり、特にAR/VR、3DCG、Web技術、都市のデジタル化などのテーマに焦点を当てています。著者はこれらの技術コミュニティに積極的に参加し、時には発表者としても活動していることがわかります。

しかし、インターネット上から情報を集めて要約する、のようなことはできません。たとえば、このようなプロンプトを書いても失敗します。

これに対応するには、Brave Search API、perplexity mcpなどを使って、API経由でインターネット情報を取得できるようにMCP Serverを準備する必要があります。

参考
Brave Search API
brave.com

Perplexity MCP
Perplexityの公式MCPサーバがリリースされてたので試してみた | DevelopersIO

2. mcp-server-fetchの環境構築

以下のフォルダの範囲を全部ダウンロードして、PC内の任意の場所に展開します。
github.com

ただ、この状態からは個別ファイルしかダウンロードできないため、このリポジトリのトップディレクトリから全部ダウンロードしてからsrc/fetchフォルダを取得する方が早いです。

using uvx と書いてある通り、uvxを使う場合は上記のファイルを展開してこのコマンドを実行すればMCP Serverが起動します。これだけです。

$ uvx mcp-server-fetch

uvxとはpython向けのパッケージ管理ツールです。uvをインストールすればuvxも入るようです。この辺りがわかりやすかったです。

uv （pythonパッケージマネージャー）の使い方詳細版

【Python】俺的モダン開発環境の共有(2024年版) #tips - Qiita

claude_desktop_config.jsonへの記載手順も同じです。Claude Desktopの設定 > 開発者 > 構成を編集を選択して、claude_desktop_config.jsonのパスを確認、その上でclaude_desktop_config.jsonを直接編集します。

私はこのように書きました。Blender MCPとweatherの内容が残っているので合計３つになりました。

{
    "mcpServers": {
        "blender": {
            "command": "uvx",
            "args": [
                "blender-mcp"
            ]
        },

        "weather": {
            "command": "node",
            "args": [
                "/Users/limes/Documents/MCP/WebSearch/build/index.js"
            ]
        }
,
       "fetch": {
            "command": "uvx",
            "args": [
                "mcp-server-fetch"
            ]
        }

    }
}

あとはClaudeを再起動すると、fetchが使えるようになっています。

3. おわりに

こちらの記事には、それぞれのWeb系プラグインの特徴が細かく書かれており、大変勉強になります。

【MCPのトリセツ資料】ウェブ情報を取得するMCPの比較 (Fetch、Firecrawl、Markdownify、Perplexity)

次回以降、この辺もさらに調べてみます。

CrossRoad

XRを中心とした技術ブログ。 Check also "English" category.

MCPを使って、指定したWebコンテンツの分析ができるfetchを試してみました

1. mcp-server-fetchは指定したページの情報を取得できる

2. mcp-server-fetchの環境構築

3. おわりに