Lucide Icons MCP

🚀 lucide-icons-mcp

このプロジェクトは、Model Context Protocol (MCP) サーバーで、Lucide React のアイコンをLLMやエージェントアプリケーションのリソースおよびツールとして公開します。BunとMCP TypeScript SDKを使用して構築されています。

🚀 クイックスタート

このMCPサーバーを使って、AIコーディングアシスタントやその他のエージェントアプリケーションがLucide Reactアイコンに関する情報にアクセスできるようになり、アイコンの検索、発見、実装をサポートします。

前提条件

• Git
• Bun または Node.js

開発環境のセットアップ

1. リポジトリをクローン

git clone https://github.com/SeeYangZhi/lucide-icons-mcp.git
cd lucide-icons-mcp

2. Bunをインストール（未インストールの場合）

公式の Bunインストールガイド を参照してください。インストール後、ターミナルを再起動して確認します。

bun --version

3. 依存関係をインストール

bun install

4. プロジェクトをビルド

これにより、TypeScriptソースが build ディレクトリにJavaScriptにコンパイルされます。

bun run build

使用方法

HTTPモード

npx を使用してHTTPサーバーを起動できます。

npx lucide-icons-mcp

これにより、HTTPサーバーが起動します（デフォルトのポートは3000）。 または、グローバルにインストールすることもできます。

npm install -g lucide-icons-mcp

その後、以下のコマンドでサーバーを起動します。

lucide-icons-mcp

Stdioモード

npx lucide-icons-mcp --stdio
# またはグローバルにインストールした場合
lucide-icons-mcp --stdio

ローカル開発

MCPサーバーを実行する主な方法は2つあります。

1. HTTPモード

HTTPを介した通信をサポートするクライアントに適しています。 開発用（Bunを使用）

bun run start
# または直接
bun run src/entry.ts

2. Stdioモード

Claude DesktopやMCP Inspectorのようなツールとの直接統合によく使用されます。 開発用（Bunを使用）

bun run src/entry.ts --stdio

AIツールとの設定

例: Claude Desktop

このMCPサーバーを Claude Desktop で使用するには、以下の手順を実行します。

1. Claude Desktopの設定ファイルを開きます。

code ~/Library/Application\ Support/Claude/claude_desktop_config.json

2. mcpServers セクションにサーバーを追加します。

オプションA: npx を使用（推奨）

{
  "mcpServers": {
    "lucide-icons": {
      "command": "npx",
      "args": ["lucide-icons-mcp", "--stdio"]
    }
  }
}

オプションB: ビルド出力に直接ポイント

{
  "mcpServers": {
    "lucide-icons": {
      "command": "node",
      "args": ["/ABSOLUTE/PATH/TO/lucide-icons-mcp/build/entry.js", "--stdio"]
    }
  }
}

3. ファイルを保存し、Claude Desktopを再起動します。
4. Claudeのツールパネルに "lucide-icons" サーバーが表示されるはずです。

✨ 主な機能

• 🔍 アイコン検索: 1,500以上のLucideアイコンを名前またはカテゴリで検索できます。
• 📂 カテゴリブラウジング: カテゴリ（デザイン、通信、メディアなど）でアイコンを一覧表示できます。
• 💡 使用例: 任意のアイコンのReact/JSXコード例を取得できます。
• 🔧 アイコン情報: 各アイコンの詳細情報を提供します。
• 🚀 MCP統合: Claude Desktopや他のMCPクライアントに対応しています。
• 🌐 デュアルモード: HTTPサーバーまたはstdioベースのMCPサーバーを選択できます。
• 📊 包括的なカバレッジ: すべてのLucideアイコンと適切なJSXの使用方法を提供します。

📚 ドキュメント

利用可能なツール（MCP）

このMCPサーバーは、AIコーディングアシスタントに以下のツールを公開します。各アイコンは複数のカテゴリに属することができ、柔軟な検索と発見機能を提供します。

1. search_icons

• 説明: Lucideアイコンを名前またはカテゴリで検索します。完全なカテゴリ配列を持つアイコンを返します。
• パラメーター:
  • query (文字列): アイコン名またはカテゴリの検索用語
  • category (オプションの文字列): 特定のカテゴリでフィルタリング
  • limit (オプションの数値): 返す最大結果数
• 戻り値: name と categories（文字列配列）を持つアイコンの配列

2. search_categories

• 説明: 部分一致を使用してカテゴリ名でアイコンカテゴリを検索します。
• パラメーター:
  • query (文字列): カテゴリ名の検索用語
  • limit (オプションの数値): 返す最大結果数
• 戻り値: name と iconCount を持つカテゴリの配列

3. fuzzy_search_icons

• 説明: アイコン名でLucideのアイコンを曖昧検索します。
• パラメーター:
  • query (文字列): アイコンの検索用語
  • limit (オプションの数値): 返す最大結果数
• 戻り値: name と categories（文字列配列）を持つアイコンの配列

4. fuzzy_search_categories

• 説明: カテゴリ名でアイコンカテゴリを曖昧検索します。
• パラメーター:
  • query (文字列): カテゴリ名の検索用語
  • limit (オプションの数値): 返す最大結果数
• 戻り値: name と iconCount（文字列配列）を持つカテゴリの配列

5. get_icon_usage_examples

• 説明: 正確な名前でLucide Reactアイコンの使用例を取得します。
• パラメーター:
  • name (文字列): アイコンの検索用語
• 戻り値: 特定のLucideアイコンのReact/JSX使用例

6. list_all_icons_by_category

• 説明: 特定のカテゴリのすべてのアイコンを一覧表示します。
• パラメーター:
  • category (文字列): アイコンを一覧表示するカテゴリ名
  • limit (オプションの数値): 返す最大結果数

7. list_all_categories

• 説明: アイコン数を含むすべての利用可能なアイコンカテゴリを一覧表示します。

アイコンカテゴリ

Lucideアイコンは以下のようなカテゴリに分類されています。

• アクセシビリティ
• アカウントとアクセス
• 動物
• 矢印
• ブランド
• 建物
• チャート
• 通信
• 接続性
• カーソル
• デザイン
• コーディングと開発
• デバイス
• 絵文字
• ファイルアイコン
• 金融
• 食品と飲料
• ゲーム
• ホーム
• レイアウト
• メール
• 数学
• 医療
• マルチメディア
• 自然
• ナビゲーション
• 通知
• 人物
• 写真撮影
• 科学
• 季節
• セキュリティ
• 形状
• ショッピング
• ソーシャル
• スポーツ
• 持続可能性
• テキスト整形
• 時間とカレンダー
• ツール
• 交通機関
• 旅行
• 天気

使用例

以下は、AIツールがこのMCPサーバーを使用する方法の例です。

例1: アイコンの検索

ユーザー: "ArrowRightに関連するアイコンを探してください" AIツールが search_icons を呼び出す

{
  "query": "ArrowRight",
  "limit": 5
}

レスポンス: ArrowRight などのアイコンが一覧表示されます。

例2: 使用例の取得

ユーザー: "ArrowRightアイコンの使用方法を教えてください" AIツールが get_icon_usage_examples を呼び出す

{
  "name": "ArrowRight"
}

レスポンス

import { ArrowRight } from "lucide-react";

function Example() {
  return (
    <div>
      <ArrowRight />
    </div>
  );
}

例3: カテゴリのブラウジング

ユーザー: "利用可能なデザイン関連のアイコンは何ですか？" AIツールが search_categories を呼び出す

{
  "query": "design"
}

その後、list_icons_by_category を呼び出す

{
  "category": "Design",
  "limit": 10
}

🔧 技術詳細

このプロジェクトには、Lucideウェブサイトからアイコン情報を自動的に抽出するウェブクローラーが含まれており、最新のアイコンデータとカテゴリを保証します。

開発スクリプト

• bun run dev: 開発用にHTTPモードでサーバーを起動します。
• bun run dev:stdio: 開発用にstdio MCPサーバーを起動します。
• bun run build: TypeScriptをJavaScriptにコンパイルします（出力先は build/）。
• bun run lint: ESLintを使用してコードベースを検査します。
• bun run lint:fix: 検査問題を自動的に修正します。
• bun run crawl: Lucideウェブサイトをクロールしてアイコンデータを更新します。
• bun run pre-build: データをクロールし、アイコンメタデータを構築し、検査問題を修正します。

リソース

• Lucide - アイコンライブラリ
• Lucide React - React実装
• Model Context Protocol - MCP仕様
• MCP TypeScript SDK - 使用されるSDK
• MCP Inspector - テストツール
• Bun - JavaScriptランタイム

📄 ライセンス

このプロジェクトはMITライセンスの下でライセンスされています。詳細については LICENSE を参照してください。

このプロジェクトは、Lucide (https://lucide.dev/) のアイコンを参照しており、これらは ISCライセンス の下でライセンスされています。

ISCライセンス

Lucideの一部の著作権は、2013 - 2022年にCole BemisがFeather (MIT) の一部として保有しています。Lucideのその他のすべての著作権は、2022年にLucide Contributorsによって保有されています。

料金の有無に関係なく、このソフトウェアを任意の目的で使用、コピー、変更、および/または配布する許可がここに与えられます。ただし、上記の著作権表示とこの許可通知がすべてのコピーに表示されることを条件とします。

ソフトウェアは「現状のまま」提供され、著者はこのソフトウェアに関するすべての保証を放棄します。これには、商品性および特定の目的への適合性のすべての暗黙の保証が含まれます。いかなる場合も、著者は、使用、データまたは利益の喪失から生じる特別、直接、間接、または結果的な損害、または契約、過失またはその他の不法行為の訴訟において、このソフトウェアの使用または実行に関連して生じるいかなる損害に対しても責任を負いません。

ローカルでのMCPのテスト

MCP Inspector を使用して、MCPサーバーをローカルでテストできます。

まず、プロジェクトがビルドされていることを確認します。

bun run build

次に、Inspectorを起動します。

npx @modelcontextprotocol/inspector node ./build/entry.js --stdio

これにより、MCPサーバーの対話型テスト用のInspectorインターフェイスが開きます。