Apidog

オールインワン協働API開発プラットフォーム

API設計

APIドキュメント

APIデバッグ

APIモック

API自動テスト

SiteMCPの使い方とあらゆるウェブサイトをMCPサーバーに変える方法

中村 拓也

中村 拓也

Updated on 4月 10, 2025

現代のAI主導の世界では、大規模言語モデル(LLMs)に外部知識を供給する能力がますます重要になっています。あなたが開発者であろうと、コンテンツクリエイターであろうと、AI愛好者であろうと、モデルに特定の情報にアクセスさせることができれば、その応答は劇的に改善されます。そこで登場するのがSiteMCPという革新的なツールです。SiteMCPは、ほぼすべてのウェブサイトをモデルコンテキストプロトコル(MCP)サーバーに変換することを可能にし、ClaudeのようなAIアシスタントがウェブコンテンツに直接アクセスして参照できるようになります。

SiteMCPとは何ですか?

SiteMCPは、ウェブサイト全体を取得し、MCPサーバーに変換する強力なユーティリティです。ryoppippiによって開発されたこのツールは、ウェブコンテンツとAIモデルの間のギャップを埋め、ウェブサイトをモデルコンテキストプロトコルフレームワークを通じて利用可能にします。本質的には、LLMsがMCPをネイティブにサポートしないウェブサイトや、特定の統合方法を提供していないウェブサイトを読み取り、参照することを可能にするソリューションです。

クレジット: SiteMCPはryoppippiによって作成されました。彼の仕事をサポートし、最新の機能や開発を把握するために、https://github.com/ryoppippi/sitemcpで彼のGitHubプロジェクトをチェックすることをお勧めします

ぜひSiteMCPのGitHubリポジトリをご覧ください

モデルコンテキストプロトコル(MCP)とは何ですか?

SiteMCPについてもっと深く理解する前に、MCPが実際に何であるかを理解しましょう。MCPは「モデルコンテキストプロトコル」の略で、AIアシスタントが外部データソースにアクセスすることを可能にするシステムです。簡単に言えば、AIに「このウェブサイトを読んでください」や「このファイルをチェックしてください」ということを伝え、AIが実際にその情報を取得して処理することを可能にするプロトコルです。

MCPはAIモデルと外部知識ソースの間の架け橋として機能し、インタラクションをより情報に基づいたものにし、コンテクストに関連したものにします。MCPがなければ、AIアシスタントは訓練された情報に制限されてしまい、最新の発展や参照してほしい特定のコンテンツを見逃してしまう可能性があります。

なぜSiteMCPが重要なのか

SiteMCPは、いくつかの重要な課題を解決します:

  1. 提供されていない情報へのアクセス: 多くのウェブサイトはMCPサーバーやAIツールとの互換性を提供していません。SiteMCPはこの制限を回避します。
  2. トークン消費の削減: ウェブサイト全体をプロンプトにフィードするのではなく(これには貴重なトークンが消費されます)、SiteMCPはAIが必要なときに必要な情報にのみアクセスできるようにします。
  3. 最新の情報: 特に急速に変化する技術やライブラリのために、最新のドキュメントにアクセスできます。
  4. カスタマイズされた知識ベース: 自分の個人ウェブサイト、ドキュメント、または知識ベースをAIアシスタントにアクセス可能にします。

SiteMCPの始め方

インストールオプション

SiteMCPは、好みに応じて柔軟なインストールオプションを提供しています:

一度きりの使用のために:

# 次のいずれかを選択してください:
bunx sitemcp
npx sitemcp
pnpx sitemcp

グローバルインストールのために:

# 次のいずれかを選択してください:
bun i -g sitemcp
npm i -g sitemcp
pnpm i -g sitemcp

基本的な使用法

SiteMCPの使用は非常に簡単です。最もシンプルなコマンドは次のパターンに従います:

sitemcp https://example.com

これにより、example.comの全体のウェブサイトが取得され、それに対してMCPサーバーが作成されます。大規模なサイトでの性能を向上させるために、同時実行数を調整することができます:

sitemcp https://example.com --concurrency 10

高度な設定オプション

SiteMCPは、ウェブサイトがどのように処理され、提供されるかを微調整するためのいくつかのカスタマイズオプションを提供しています:

ツール名戦略

ツール名戦略は、MCPサーバー名の生成方法を決定します。これは、-tまたは--tool-name-strategyフラグを使用して設定します:

# ドメインをツール名として使用
sitemcp https://vite.dev -t domain

# サブドメインをツール名として使用
sitemcp https://react-tweet.vercel.app/ -t subdomain

# パス名をツール名として使用(デフォルト)
sitemcp https://ryoppippi.github.io/vite-plugin-favicons/ -t pathname
# 結果: indexOfVitePluginFavicons / getDocumentOfVitePluginFavicons

特定のページのマッチング

大規模なウェブサイトでは、取得するページを制限したいかもしれません。-mまたは--matchフラグを使用して、パターンを指定できます:

sitemcp https://vite.dev -m "/guide/**" "/blog/**"

これにより、指定したパターンに一致するページのみを取得し、処理時間とリソースを節約できます。マッチングはmicromatchによって強化されており、強力なパターンマッチング機能を提供します。

コンテンツセレクタ

SiteMCPは、Mozillaのreadabilityを使用してウェブページから有意義なコンテンツを抽出します。しかし、時々この自動抽出が正しいコンテンツをキャプチャしないことがあります。そのような場合、CSSセレクタを指定できます:

sitemcp https://vite.dev --content-selector ".content"

キャッシングメカニズム

SiteMCPは、デフォルトで~/.cache/sitemcpに取得したページをキャッシュし、次回以降の実行を高速化します。毎回新しいコンテンツが必要な場合、キャッシングを無効にできます:

sitemcp https://example.com --no-cache

SiteMCPをMCPクライアントと統合する

SiteMCPの真の力は、MCP互換のAIクライアントと統合されたときに発揮されます。人気のAIアシスタントであるClaude Desktopとの設定方法を見てみましょう:

Claude Desktopの設定

Claude DesktopでSiteMCPサーバーを使用するために、構成ファイルに次の設定を追加します:

{
  "mcpServers": {
    "daisy-ui": {
      "command": "npx",
      "args": [
        "-y",
        "sitemcp",
        "https://daisyui.com",
        "-m",
        "/components/**"
      ]
    }
  }
}

この設定は、Claude Desktopに「daisy-ui」という名前のMCPサーバーを構築し、DaisyUIコンポーネントのドキュメントへのアクセスを提供するよう指示します。Claude Desktopを再起動すると、必要に応じて自動的にSiteMCPサーバーが起動します。

実用的な使用例

ライブラリのドキュメントへのアクセス

SiteMCPの最も強力な使用方法の1つは、AIアシスタントにライブラリのドキュメントへのアクセスを提供することです:

{
  "mcpServers": {
    "svelte": {
      "command": "npx",
      "args": [
        "-y",
        "sitemcp@latest",
        "https://svelte.dev",
        "-m",
        "/docs/**"
      ]
    }
  }
}

この設定により、AIは最新のSvelteドキュメントを参照できるようになり、コード提案や説明が最新のベストプラクティスを反映し、AIがトレーニング中に学んだ古い情報に基づくことはありません。

個人ウェブサイトの統合

個人のウェブサイトをAIに提供することもできます:

{
  "mcpServers": {
    "my-blog": {
      "command": "npx",
      "args": [
        "-y",
        "sitemcp@latest",
        "https://yourblog.com"
      ]
    }
  }
}

これにより、AIはあなたの文体や過去の記事や個人的なドキュメントを参照でき、応答をあなたの特定のコンテキストにより合ったものにできます。

SiteMCPの仕組みを理解する

SiteMCPは巧妙な二重サーバーアーキテクチャを通じて機能します:

  1. インデックスサーバー: 利用可能なページのリストをタイトルとURLとともに提供します。
  2. ドキュメントサーバー: 要求されたときに特定のページの実際の内容を取得します。

このアプローチにより、AIは最初にどの情報が利用可能かを理解し、その後、必要なもののみを選択的に取得することができ、全ての情報を一度に提供するのに比べてトークンの使用量を大幅に削減できます。

ページが特に長い場合、SiteMCPはページネーションを実装して信頼性のあるアクセスを確保します。一部のAIモデルは非常に大きなドキュメントに苦労するかもしれません。

一般的な問題のトラブルシューティング

長いツール名

一部のユーザーは、特定のMCPクライアントでツール名が64文字の制限を超える問題に遭遇しています。最新のバージョン(v0.3.0以上)ではこの問題が解決されていますが、同様の問題が発生する場合は、最新のバージョンに更新することをお勧めします。

サーバー通信エラー

JSONRPCエラー(例:{"jsonrpc":"2.0","id":XX,"error":{"code":-32601,"message":"Method not found"}})が発生した場合、さまざまなMCPクライアントとの互換性に関する修正を含む最新のSiteMCPを使用していることを確認してください。

パフォーマンスの考慮事項

非常に大きなウェブサイトの場合、どのページを取得するかを制限するためにマッチパラメータを使用することを検討してください:

sitemcp https://large-documentation-site.com -m "/get-started/**" "/api/**"

これにより、パフォーマンスが大幅に改善され、リソースの使用量が削減される可能性があります。

高度なSiteMCPのアプリケーション

カスタム知識ベースの作成

既存のウェブサイト以上に、SiteMCPを使用してローカルで提供されているコンテンツを指し示すことでカスタム知識ベースを作成できます:

# まずローカルのドキュメントを提供します
npx serve ./my-docs

# 次に、別のターミナルでそれからMCPサーバーを作成します
sitemcp http://localhost:3000

複数の知識ソースの組み合わせ

AIに多様な情報源へのアクセスを提供するために、MCPクライアントに複数のSiteMCPサーバーを設定できます:

{
  "mcpServers": {
    "technical-docs": {
      "command": "npx",
      "args": ["-y", "sitemcp@latest", "https://docs.example.com"]
    },
    "company-blog": {
      "command": "npx",
      "args": ["-y", "sitemcp@latest", "https://blog.example.com"]
    }
  }
}

結論

SiteMCPはAIインタラクションの最も一般的な課題の1つ、すなわち特定の外部知識をAIモデルに提供するための優れたソリューションを提供します。任意のウェブサイトをMCPサーバーに変換することで、ウェブコンテンツとAIの能力とのギャップを埋め、より情報に基づいた、正確でコンテキストに関連したAI応答を実現します。

あなたが特定のドキュメントへのアクセスをAIに提供したい開発者であっても、あなたの作品をAIに参照させたいコンテンツクリエイターであっても、単にAI愛好者としてアシスタントできることを拡張したいと思うのであれば、SiteMCPはAIと人間の協力を強化するための簡潔な方法を提供します。

AIの風景が進化を続ける中で、ウェブリソースとAIモデル間の情報の流れを促進するツールであるSiteMCPはますます貴重になります。SiteMCPをマスターすることで、単なるツールを学ぶのではなく、AIインタラクションの新しいパラダイムを受け入れ、ウェブの膨大な知識を活用してAIアシスタントをより役立つ、正確で、コンテキストを意識したものにすることができます。