React Icons MCP Server

React Icons MCP サーバー

React Icons 統合用の Model Context Protocol（MCP）サーバーです。このサーバーを使用すると、Cursor、Windsurf、Cline などの AI を活用したコーディングアシスタントが、React Icons ライブラリにアクセスして内容を理解できます。

React Icons とは？

React Icons は、Font Awesome、Material Design、Bootstrap など、複数のアイコンセットのアイコンを収録した人気のライブラリです。ES6 のインポートを使用して、React アプリケーションにアイコンを簡単に統合できます。

MCP とは？

Model Context Protocol は、AI ツールが主要なトレーニングデータ以外のソースから特定のコンテキストを要求するための標準規格です。この MCP サーバーを使用すると、AI コーディングアシスタントが React Icons に関する情報にアクセスし、より適切なコーディング支援を提供できます。

機能

• react-icons で利用できるすべてのアイコンライブラリに関する情報を取得
• すべてのライブラリまたは特定のライブラリ内から、名前でアイコンを検索
• 特定のライブラリのすべてのアイコンを取得
• 特定のアイコンに関する詳細情報を取得
• さまざまな React のコンテキストでのアイコンの使用例を取得

はじめに

インストール

npm install -g react-icons-mcp
# or
npx react-icons-mcp

設定

この MCP サーバーを AI コーディングツールで使用するには、ツールの MCP 設定に追加する必要があります。一般的な AI コーディングアシスタントの設定例を以下に示します。

MacOS / Linux

{
  "mcpServers": {
    "React Icons MCP": {
      "command": "npx",
      "args": ["-y", "react-icons-mcp", "--stdio"]
    }
  }
}

Windows

{
  "mcpServers": {
    "React Icons MCP": {
      "command": "cmd",
      "args": ["/c", "npx", "-y", "react-icons-mcp", "--stdio"]
    }
  }
}

ローカルでの実行

サーバーを直接実行することもできます。

# Run in HTTP mode (default port 3334)
npx react-icons-mcp

# Run in stdio mode for direct integration with AI tools
npx react-icons-mcp --stdio

# Run on a custom port
npx react-icons-mcp --port 3456

利用可能なツール

この MCP サーバーは、AI コーディングアシスタントに以下のツールを提供します。

1. get_icon_libraries - 利用可能なすべてのアイコンライブラリに関する情報を取得
2. search_icons - 名前またはカテゴリでアイコンを検索
3. get_library_icons - 特定のライブラリのすべてのアイコンを取得
4. get_icon_details - 特定のアイコンに関する詳細情報を取得
5. get_icon_usage_examples - React Icons の使用例を示すコードを取得

使用例

AI ツールが開発者を支援するために、この MCP サーバーをどのように使うかを以下に示します。

1. ユーザーが「React アプリ用のユーザーアイコンが必要です」と質問する
2. AI ツールがクエリ「user」を指定して search_icons を呼び出す
3. AI ツールがさまざまなライブラリからユーザー関連のアイコン一覧を取得する
4. AI ツールが「次のコードスニペットを使って、Font Awesome の FaUser アイコンを使用できます」と提案する

import { FaUser } from 'react-icons/fa';

function UserProfile() {
  return (
    <div>
      <FaUser size={24} />
      <span>User Profile</span>
    </div>
  );
}

開発

# Clone the repository
git clone https://github.com/yourusername/react-icons-mcp.git
cd react-icons-mcp

# Install dependencies
npm install

# Build the project
npm run build

# Run in development mode with hot reloading
npm run dev

ライセンス

MIT