Zenn
👻

SiteMCP: 任意のサイトを丸ごとMCPサーバー化

に公開
5件
119
TypeScript
Model Context Protocol
tech

screenshot
https://ryoppippi.com を MCP サーバーとしてClaudeから参照している様子

ウェブサイトの内容をまるごとAIに参照させたい、そんな願いを叶えるツールがあります。
その名も sitemcp です。

このツールを使うと、任意のサイトのページをfetchして、MCPサーバーとして立ち上げることができます。

https://github.com/ryoppippi/sitemcp

MCP サーバーとは

MCPは「Model Context Protocol」の略で、AIアシスタントが外部データにアクセスするための仕組みです。要するに、AIに「このウェブサイト読んでね」とか「このファイル見てね」と渡せるようにするプロトコルです。

使い方

詳しいインストールの仕方は GitHub の README を見てください。
ここではClaude Desktopから使う方法を紹介します。

...と言ってもそんなに難しいことはありません。

例えば、DaisyUIについてClaudeに聞きたいときは、Claude Desktop の設定ファイルに

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

と書いておきます。
あとは、Claude Desktopを再起動するだけです。

https://x.com/ryoppippi/status/1909369320078999673

これにより、MCPサーバーや llms.txt を提供していない任意のサイトでも、LLM から情報を取得できるようになります。

何が嬉しいか

トークン数を削減できる可能性がある

sitemcp は各ページのURLをMCPのtool nameとして、ページのタイトルをdescriptionとして登録します。 -> 実装方法を変更しました。現在はタイトルとURLの一覧を返すサーバーと、URLをキーとしてページの内容を返すサーバーの2段構えです。
LLM はこれらの情報を元に、ページの内容を取得することができます。
これは従来の llms.txt を使った手法と比べて、トークン数が減る可能性があります。なぜなら、全体のページの内容を一気に渡す必要がなくなり、LLMが能動的に必要な分だけ情報を取得することができるからです。

LLMでの情報の少ないライブラリの使用を強化

例えば、shadcn/uiなどのUIライブラリはよく使われているので Claude でもよくおすすめされ、精度良くコンポーネントの生成が可能ですが、少しマイナーなものだと、情報が乏しくなります。
また、自分の経験では Svelte 5 のコードが欲しいのにもかかわらず、Svelte 4 のコードを生成されてしまったり、React のコードを生成されたりしていました。
このような場合に、sitemcpを使うことで、LLMの持ち合わせていない最新の情報を踏まえた回答を得ることができます。

最新のSvelte5を使ったコードを生成して欲しいときは、Claude DesktopやCursor、Codecompanionの設定ファイルに

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

と記述するだけです！なんて簡単なんでしょう。

使用しているライブラリのドキュメントがMCPサーバーを提供しているか、llms.txt を提供しているか、そんなものはもはや関係ありません。
自分の好きなライブラリをMCPサーバー化して、LLMに情報を取得させることができます。

自分のサイトをMCPサーバー化

自分のサイトをMCPサーバー化することで、AIに自分のサイトを参照させることができます。
履歴書を作成したり、自分の文体を真似たブログを書かせたりすることができます。
妄想が広がりますね。

終わりに

  • sitemcpは、任意のサイトをMCPサーバー化するためのツールです。
  • MCPサーバーを使うことで、AIに特定のサイトを参照させることができます。
  • LLM に情報を効率的に提供する手段として、MCP、そして sitemcpを活用してみてください！

追記

0.2.0に更新しました！
インターフェースに変更はないですが、実装方法が大きく変わりました。

  • ひとつのドキュメントにつき立ち上がるサーバーを2つに減らしました(前の実装ではページの数だけサーバーが立ち上がっていた)
  • ドキュメントが長すぎるとclaudeがアクセスに失敗するので、paginationを入れました

これに伴いよりAgentっぽくなりました！ぜひお試しください！

https://x.com/ryoppippi/status/1909703257917698295

また、自分のOSS史上一番と言っていいほどStarをもらっています。
24時間で100以上のStarをもらうのは初めてです！
ありがとうございます！
(もちろんXでも多くの方に拡散していただきました。正直２時間で作ったものなのでここまで話題にしていただけるとは思ってませんでした。とてもうれしいです。)

Star History

119

Discussion

high-ghigh-g

sitemcpありがとうございます。
macのClaude Desktopで利用させていただきましたが、Claude Desktopのログファイルに

以下の様なログが出力されており、

{"jsonrpc":"2.0","id":XX,"error":{"code":-32601,"message":"Method not found"}}

Caludeに聞いたところ下記のような原因があるかもしれないと言われました。

sitemcpツールが、Claude Desktopが期待するJSONRPCメソッドをサポートしていない可能性があります。Claude Desktopは特定のAPIメソッドを持つサーバーを期待していますが、sitemcpはそれらをサポートしていません。
サーバーの設定が適切でないか、追加の設定が必要な可能性があります。

そのせいか、Claude Desktopでの検索時に、tools.1.ToolDefinition.name: String should have at most 64 character のエラーが表示されてしまい、どうもClaude Desktopの利用ができない状態になってしまいました。

↓自分のclaude_desktop_config.json の内容です。

{
  "mcpServers": {
    "FSD": {
      "command": "/Users/ユーザー名/.nodenv/shims/npx", // nodenvを利用の為、npxをパス指定
      "args": [
        "-y",
        "sitemcp@latest",
        "https://feature-sliced.github.io/documentation/"
      ],
      "logLevel": "warn"
    }
  }
}
ryoppippiryoppippi

ありがとうございます！ GitHub Issueに英語で起票いただけますか?そちらで議論を進めましょう。

ryoppippiryoppippi

ありがとうございます！確認しますね！
めちゃくちゃ詳しく再現手順書いていただいてるじゃないですか！感謝です