MIT License
ヒロイコンズ-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:
{
"mcpServers": {
"heroicons": {
"command": "npx",
"args": ["heroicons-mcp", "--stdio"]
}
}
}
オプション B: ビルド出力を直接ポイントする (
{
"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 モードで
利用可能なツール（MCP）
この MCP サーバーは、AI コーディング アシスタントに次のツールを公開します。
すべてのアイコンをリストする
説明: 使用可能なすべての Heroicons を一覧表示します。オプションでスタイル (アウトライン、ソリッド) 別にフィルター処理されます。
パラメータ:
style(オプション: "outline" | "solid")
検索アイコン
説明: すべてのスタイルで、名前またはキーワードで Heroicons を検索します。
パラメータ:
query(文字列)、style(オプション: "outline" | "solid")
アイコンの使用例を取得する
説明: 特定のアイコンの JSX 使用例を取得します。
パラメータ:
name(文字列)、style(文字列: "outline" | "solid")
使用例
AI ツールがこの MCP サーバーをどのように使用するかを以下に示します。
ユーザーが AI ツールに質問します:「Heroicons から「ユーザー」アイコンを見つけてください。できればソリッド スタイルが望ましいです。」
AIツールは:
query：「ユーザー」style：「ソリッド」
**MCP サーバーは、**一致するソリッド Heroicons (例:
UserIcon、UserCircleIcon、UserPlusIcon) のリストで応答します。ユーザーがツールに「UserIcon の使用例を表示してください」と要求します。
AIツールは:
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 を使用してコードベースをリントします。
リソース
ライセンス
hybrid server
The server is able to function both locally and remotely, depending on the configuration or use case.
ヒロイコンズ-MCP
Related MCP Servers
- MIT License
- MIT License