Web Content MCP

Web Content MCP Server

インテリジェントなウェブ検索とコンテンツ抽出機能を提供する強力なModel Context Protocol（MCP）サーバーです。このサーバーにより、AI アシスタントは Google で検索し、ウェブページのコンテンツを取得できます。すべてのコンテンツは、自動的に読みやすく整った Markdown 形式に変換されます。

🚀 機能

• Google 検索連携：検索結果数をカスタマイズして Google 検索を実行します
• コンテンツ抽出：ウェブページからメインコンテンツを自動的に抽出します
• Markdown 変換：HTML コンテンツを読みやすく整った Markdown に変換します
• スマートなコンテンツフィルタリング：広告、ナビゲーション、無関係な要素を削除します
• 複数のコンテンツ抽出方法：インテリジェントなセレクターを使用してメインコンテンツを見つけます
• エラー処理：フォールバック機構を備えた堅牢なエラー処理を行います
• 型安全性：TypeScript と Zod によるバリデーションを使用して構築されています

🛠️ 利用可能なツール

1. Web Search（web_search）

Google で検索し、抽出したコンテンツを整形して結果を返します。

パラメーター：

• query（string、必須）：実行する検索クエリ
• numResults（number、任意）：返す検索結果の数（1～20、デフォルト：5）

例：

{
  "name": "web_search",
  "arguments": {
    "query": "TypeScript best practices",
    "numResults": 3
  }
}

2. Fetch Webpage（fetch_webpage）

指定したウェブページの URL からコンテンツを取得して抽出します。

パラメーター：

• url（string、必須）：取得するウェブページの URL

例：

{
  "name": "fetch_webpage",
  "arguments": {
    "url": "https://example.com/article"
  }
}

📋 前提条件

• Node.js 18 以降
• SerpAPI Key（Google 検索機能に必要）

🔧 インストール

1. リポジトリをクローンします：

   git clone <repository-url>
   cd web-content-mcp
   

2. 依存関係をインストールします：

   npm install
   

3. 環境変数を設定します： ルートディレクトリに .env ファイルを作成します：

   SERPAPI_KEY=your_serpapi_key_here
   

   SerpAPI キーは https://serpapi.com/ から取得してください。

🚀 使用方法

サーバーの実行

npx tsx を直接使用して、サーバーを実行します：

npx tsx --env-file=.env src/index.ts

このコマンドは、次の処理を行います。

• tsx を使用して、コンパイルせずに TypeScript を直接実行します
• .env ファイルから環境変数を読み込みます
• MCP サーバーをすぐに起動します

MCP サーバーとして使用する

このサーバーは、MCP 対応クライアントでの使用を想定しています。stdio トランスポート経由でこのサーバーに接続するよう、MCP クライアントを設定してください。

MCP クライアント設定の例：

{
  "mcpServers": {
    "web-content": {
      "command": "npx",
      "args": [
        "tsx",
        "--env-file=/path/to/web-content-mcp/.env",
        "/path/to/web-content-mcp/src/index.ts"
      ],
      "env": {
        "SERPAPI_KEY": "your_api_key"
      }
    }
  }
}

🏗️ アーキテクチャ

このサーバーは、すっきりとしたモジュール式アーキテクチャを採用しています。

src/
├── index.ts      # Main server setup and request handling
├── tools.ts      # Tool implementations (WebSearch, FetchWebpage)
├── types.ts      # TypeScript types and Zod schemas
└── env.ts        # Environment variable configuration

主なコンポーネント

• サーバー：stdio トランスポートを使用する MCP サーバーのメインインスタンス
• ツール：抽象基底クラスを備えたモジュール式のツールクラス
• コンテンツ抽出：スマートな HTML から Markdown への変換
• 型安全性：包括的な Zod バリデーションスキーマ
• エラー処理：わかりやすいメッセージによる適切なエラー処理

🔍 コンテンツ抽出方法

このサーバーは、インテリジェントなコンテンツ抽出方法を使用します。

1. コンテンツセレクター：複数のセレクターを試し、メインコンテンツを探します。

   • main、article、.content、.main-content
   • .post-content、.entry-content、#content
   • .container（フォールバックとして使用）

2. コンテンツのクリーンアップ：不要な要素を削除します。

   • スクリプト、スタイル、ナビゲーション
   • ヘッダー、フッター、サイドバー
   • 広告や宣伝コンテンツ

3. Markdown 変換：

   • HTML を読みやすく整った Markdown に変換します
   • 代替テキスト付きの画像を保持します
   • 適切な見出し構造を維持します
   • コンテンツが長くなりすぎないよう、長さを制限します

⚙️ 設定

サーバーには、tools.ts で設定可能なオプションがいくつか用意されています。

const config = {
  serpApiKey: env.SERPAPI_KEY,
  timeout: 10000, // Request timeout (ms)
  maxContentLength: 5000, // Max content length per page
  userAgent: "Mozilla/5.0 (compatible; WebContentMCP/1.0)",
};

🔒 環境変数

変数	説明	必須
SERPAPI_KEY	Google 検索用の SerpAPI キー	はい

📄 出力形式

どちらのツールも、Markdown 形式でコンテンツを返します。

Web Search の結果

# Web Search Results for: "query"

Found X results:

## 1. Page Title

**URL:** https://example.com
**Snippet:** Brief description...
**Content:**
Main page content in markdown...

---

ウェブページのコンテンツ

# Webpage Content

**URL:** https://example.com
**Content:**
Extracted page content in markdown...

🛡️ エラー処理

サーバーには、包括的なエラー処理が組み込まれています。

• ネットワークエラー：タイムアウトや接続失敗
• API エラー：SerpAPI のレート制限や認証
• コンテンツエラー：無効な URL や解析の失敗
• 検証エラー：無効な入力パラメーター

📞 サポート

問題が発生した場合や質問がある場合は、以下をご確認ください。

1. Issues ページを確認します
2. 詳細情報を添えて新しい Issue を作成します
3. エラーメッセージと環境の詳細を記載します

---

TypeScript と Model Context Protocol を使用して ❤️ を込めて構築