Heroicons MCP

🚀 heroicons - mcp

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

🚀 クイックスタート

前提条件

• Git
• Bun

開発用の開始方法

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

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

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

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

bun --version

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

bun install

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

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

bun run build

使用方法

HTTPモード

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

npx heroicons-mcp

これにより、HTTPサーバーが起動します（デフォルトはポート3000、src/http.ts で定義されています）。

または、グローバルにインストールすることもできます。

npm install -g heroicons-mcp

その後、以下を実行します。

heroicons-mcp

Stdioモード

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

ローカル開発

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

1. HTTPモード

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

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

これにより、src/entry.ts で定義されたサーバーがデフォルトのHTTPモードで実行されます。

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": {
    "heroicons": {
      "command": "npx",
      "args": ["heroicons-mcp", "--stdio"]
    }
  }
}

オプションB：ビルド出力に直接ポイントする（bun run build でプロジェクトをビルドしていることを確認）

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

/ABSOLUTE/PATH/TO/heroicons-mcp/build/entry.js を実際のビルドされた entry.js ファイルの絶対パスに置き換えてください。 3. ファイルを保存し、Claude Desktopを再起動します。 4. Claudeのツールパネルに "heroicons" サーバーが表示されるはずです。

⚠️ 重要提示

npx heroicons-mcp --stdio コマンドは、stdioモードでの推奨方法です。

✨ 主な機能

• HeroiconsをMCPリソースとして公開します（アウトラインとソリッドスタイル）
• 名前またはキーワードでアイコンを検索するツールを提供します
• すべてのアイコンまたは特定のスタイル内のアイコンをリストすることができます
• Claude Desktopや他のMCPクライアントとの統合が可能です
• HTTPサーバーまたはstdioベースのMCPサーバーとして実行できます

📚 ドキュメント

何はHeroiconsですか？

Heroicons は、Tailwind CSSの開発者によって設計された、手作りのSVGアイコンの人気のあるライブラリです。アイコンは複数のスタイル（アウトライン、ソリッド）で利用可能で、Webプロジェクトに簡単に統合できます。

何はMCPですか？

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

このMCPサーバーにより、AIコーディングアシスタントや他のエージェントアプリケーションは、Heroiconsに関する情報にアクセスでき、より良いアシスタント機能とアイコン検索機能が可能になります。

利用可能なツール（MCP）

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

1. list_all_icons

   • 説明: 利用可能なすべてのHeroiconsをリストします。必要に応じてスタイル（アウトライン、ソリッド）でフィルタリングできます。
   • パラメータ: style（オプション: "outline" | "solid"）

2. search_icons

   • 説明: すべてのスタイルで名前またはキーワードでHeroiconsを検索します。
   • パラメータ: query（文字列）、style（オプション: "outline" | "solid"）

3. get_icon_usage_examples

   • 説明: 特定のアイコンのJSXの使用例を取得します。
   • パラメータ: name（文字列）、style（文字列: "outline" | "solid"）

例の使用法

AIツールがこのMCPサーバーを使用する方法を以下に示します。

1. ユーザーがAIツールに尋ねる: "Heroiconsから 'user' アイコンを見つけてください。できればソリッドスタイルのもの。"
2. AIツールが search_icons を呼び出す:
   • query: "user"
   • style: "solid"
3. MCPサーバーが応答する 一致するソリッドHeroiconsのリスト（例: UserIcon, UserCircleIcon, UserPlusIcon）。
4. ユーザーがツールに尋ねる: "UserIconの使用例を表示してください。"
5. AIツールが get_icon_usage_examples を呼び出す:
   • name: "UserIcon"
   • style: "solid"
6. MCPサーバーが応答する JSXコード例:

import { UserIcon } from "@heroicons/react/24/solid";

function Example() {
  return (
    <div>
      <UserIcon className="w-6 h-6 text-blue-500" />
    </div>
  );
}

ローカルでのMCPのテスト

MCP Inspector を使用して、ローカルでMCPサーバー（stdioモード）をテストできます。 まず、プロジェクトがビルドされていることを確認します。

bun run build

次に、Inspectorを起動し、--stdio フラグ付きの node ./build/entry.js コマンドを使用してサーバーに接続します。

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

これにより、Inspectorインターフェースが開き、MCPサーバーが公開するリソースとツールを対話的にテストできます。

開発用スクリプト

• bun run dev: 開発用にHTTPモードでサーバーを起動します（src/entry.ts を使用）。
• bun run dev:stdio: 開発用にstdio MCPサーバーを起動します（src/entry.ts --stdio を使用）。
• bun run build: TypeScriptをJavaScriptにコンパイルします（出力先は build/）。
• bun run lint: ESLintを使用してコードベースを検査します。

📄 ライセンス

MIT

リソース

• Heroicons
• Model Context Protocol
• MCP Inspector
• MCP TypeScript SDK
• Bun