lucide-icons-mcp

lucide-icons-mcp

Model Context Protocol (MCP) サーバーです。Lucide React のアイコンを、LLM やエージェント型アプリケーション向けのリソースやツールとして提供します。Bun と MCP TypeScript SDK を使用して構築されています。

Lucide とは？

Lucide は、コミュニティによって作られた、美しく一貫性のあるアイコンツールキットです。オープンソースのアイコンライブラリであり、統一されたスタイルで丁寧に作られた 1,500 種類以上のアイコンを提供します。Feather Icons からフォークされた Lucide は、現代のウェブ開発で最も人気のあるアイコンライブラリのひとつに成長しました。

MCP とは？

Model Context Protocol (MCP) は、AI ツールがメインのトレーニングデータ以外のソースから、特定のコンテキストを要求するための標準です。

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

特徴

• 🔍 アイコン検索：名前やカテゴリを指定して、1,500 種類以上の Lucide アイコンを検索できます
• 📂 カテゴリの閲覧：カテゴリ（デザイン、コミュニケーション、メディアなど）別にアイコンを一覧表示します
• 💡 使用例：任意のアイコンの React／JSX コード例を取得できます
• 🔧 アイコン情報：各アイコンの詳細情報を確認できます
• 🚀 MCP 統合：Claude Desktop やその他の MCP クライアントですぐに使用できます
• 🌐 デュアルモード：HTTP サーバーまたは stdio ベースの MCP サーバーとして動作します
• 📊 包括的な対応：すべての Lucide アイコンに対応し、適切な JSX の使用方法を提供します

前提条件

• 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
# or if installed globally
lucide-icons-mcp --stdio

ローカル開発

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

1. HTTP モード

HTTP 経由の通信に対応するクライアントに適しています。

開発用（Bun を使用）：

bun run start
# or directly
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」サーバーが表示されます。

使用可能なツール（MCP）

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

1. search_icons

• 説明：名前またはカテゴリで Lucide アイコンを検索します。カテゴリ配列をすべて含むアイコンを返します。
• パラメーター：
  • query（string）：アイコンの名前またはカテゴリの検索語句
  • category（省略可能な string）：特定のカテゴリで絞り込みます
  • limit（省略可能な number）：返す結果の最大数
• 戻り値：name と categories（string 配列）を含むアイコンの配列

2. search_categories

• 説明：部分一致で、カテゴリー名からアイコンカテゴリーを検索します
• パラメーター：
  • query（string）：カテゴリー名の検索語
  • limit（省略可能な number）：返す結果の最大数
• 戻り値：name と iconCount を含むカテゴリーの配列

3. fuzzy_search_icons

• 説明：アイコン名から lucide のアイコンをあいまい検索します
• パラメーター：
  • query（string）：アイコンの検索語
  • limit（省略可能な number）：返す結果の最大数
• 戻り値：name と categories（string の配列）を含むアイコンの配列

4. fuzzy_search_categories

• 説明：カテゴリー名からアイコンカテゴリーをあいまい検索します
• パラメーター：
  • query（string）：カテゴリー名の検索語
  • limit（省略可能な number）：返す結果の最大数
• 戻り値：name と iconCount（string の配列）を含むカテゴリーの配列

5. get_icon_usage_examples

• 説明：正確な名前を指定して、Lucide React アイコンの使用例を取得します
• パラメーター：
  • name（string）：アイコンの検索語
• 戻り値：特定の Lucide アイコンの React/JSX 使用例

6. list_all_icons_by_category

• 説明：特定のカテゴリーに属するすべてのアイコンを一覧表示します
• パラメーター：
  • category（string）：アイコンを一覧表示するカテゴリー名
  • limit（省略可能な number）：返す結果の最大数

7. list_all_categories

• 説明：アイコン数とともに、利用可能なすべてのアイコンカテゴリーを一覧表示します

使用例

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 のアイコンは、次のようなカテゴリーに分類されています。

• アクセシビリティ
• アカウントとアクセス
• 動物
• 矢印
• ブランド
• 建物
• チャート
• コミュニケーション
• 接続
• カーソル
• デザイン
• コーディングと開発
• デバイス
• 絵文字
• ファイルアイコン
• 金融
• 食べ物と飲み物
• ゲーム
• ホーム
• レイアウト
• メール
• 数学
• 医療
• マルチメディア
• 自然
• ナビゲーション
• 通知
• 人物
• 写真
• 科学
• 季節
• セキュリティ
• 図形
• ショッピング
• ソーシャル
• スポーツ
• サステナビリティ
• テキスト書式
• 時間とカレンダー
• ツール
• 交通
• 旅行
• 天気

Inspector で MCP をローカルテストする

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

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

bun run build

次に、Inspector を起動します。

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

MCP サーバーを対話形式でテストするための Inspector インターフェースが開きます。

開発スクリプト

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

データソース

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

リソース

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

ライセンス

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

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

ISC ライセンス

Lucide の一部に関する著作権（c）は、Feather（MIT）の一部として Cole Bemis が 2013-2022 年に保有しています。Lucide のその他すべての著作権（c）は、Lucide Contributors が 2022 年に保有しています。

上記の著作権表示および本許諾表示がすべての複製に記載されている場合、本ソフトウェアを有償・無償を問わず、あらゆる目的で使用、複製、改変、および／または配布することを許可します。

本ソフトウェアは「現状のまま」提供され、作者は本ソフトウェアに関する一切の保証を否認します。これには、商品性および特定目的への適合性に関する黙示の保証も含まれます。作者は、契約、不法行為、過失、その他の行為に起因するかを問わず、本ソフトウェアの使用または性能に関連して発生した、使用、データまたは利益の損失によるものを含む、いかなる特別、直接、間接、または結果的損害についても責任を負いません。