ヒロイコンズ-MCP

Heroicons をLLM およびエージェントアプリケーションのリソースおよびツールとして公開するModel Context Protocol (MCP)サーバー。Bun と MCP TypeScript SDK を使用して構築されています。

Heroicons とは何ですか?

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

MCPとは何ですか?

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

この MCP サーバーにより、AI コーディングアシスタントやその他のエージェントアプリケーションが Heroicons に関する情報にアクセスできるようになり、より優れた支援機能とアイコン検索機能が実現します。

特徴

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

前提条件

はじめに（開発）

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 サーバーが起動します (デフォルトでは、 src/http.tsで定義されているポート 3000 になります)。

またはグローバルにインストールします:

npm install -g heroicons-mcp

次に以下を実行します:

heroicons-mcp

標準モード

npx heroicons-mcp --stdio
# or if installed globally
heroicons-mcp --stdio

地域開発

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

1. HTTPモード

HTTP 経由の通信をサポートするクライアントに適しています。

開発の場合（Bunを使用）：

bun run start
# or directly
bun run src/entry.ts

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

2. 標準モード

多くの場合、標準入出力を介して通信し、Claude Desktop や MCP Inspector などのツールと直接統合するために使用されます。

開発の場合（Bunを使用）：

bun run src/entry.ts --stdio

AIツールによる構成

例: クロードデスクトップ

Claude Desktopでこの MCP サーバーを使用するには:

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ファイルへの実際の絶対パスに置き換えます。

ファイルを保存し、Claude Desktop を再起動します。
これで、Claude のツールパネルに「heroicons」サーバーが表示されるはずです。

注: stdio モードでnpx heroicons-mcp --stdioコマンドの使用が推奨されます。

利用可能なツール（MCP）

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

すべてのアイコンをリストする

説明: 使用可能なすべての Heroicons を一覧表示します。オプションでスタイル (アウトライン、ソリッド) 別にフィルター処理されます。
パラメータ: style (オプション: "outline" | "solid")

検索アイコン

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

アイコンの使用例を取得する

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

使用例

AI ツールがこの MCP サーバーをどのように使用するかを以下に示します。

ユーザーが AI ツールに質問します:「Heroicons から「ユーザー」アイコンを見つけてください。できればソリッドスタイルが望ましいです。」
AIツールはsearch_iconsを呼び出します:

query ：「ユーザー」
style ：「ソリッド」

**MCP サーバーは、**一致するソリッド Heroicons (例: UserIcon 、 UserCircleIcon 、 UserPlusIcon ) のリストで応答します。
ユーザーがツールに「UserIcon の使用例を表示してください」と要求します。
AIツールはget_icon_usage_examplesを呼び出します:

name : "UserIcon"
style ：「ソリッド」

MCP サーバーは次の JSX コード例で応答します。

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

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

Inspector を使用したローカルでの 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 を使用してコードベースをリントします。

リソース

ライセンス

マサチューセッツ工科大学

heroicons-mcp