Remix Icon MCP

RemixIcon MCP

English | 简体中文

アイコンに特化したキーワードを Remix Icon のメタデータに直接対応付ける、軽量な Model Context Protocol（MCP）サーバーです。簡潔なキーワード（最大 20 個）を指定すると、FlexSearch を利用したローカル検索により、一致度の高いアイコン名とメタデータを上位 5 件返します。クリーンアーキテクチャを採用しています。

機能

• スマートなキーワード入力 – 検索品質を最適化するため、自然言語の文章は受け付けず、カンマ区切りのキーワードを最大 20 個まで指定できます。
• 上位 5 件を固定で表示 – 意思決定に集中できるよう、関連性の高いアイコンを必ず 5 件返します。
• FlexSearch ベースのインデックス – FlexSearch v0.8 のドキュメントインデックスを使用し、ローカルの Remix Icon カタログからトークンを高速に検索します。
• クリーンアーキテクチャ – ドメインエンティティ、アプリケーションのユースケース、インフラストラクチャアダプター、MCP インターフェースを分離し、テストしやすくしています。
• CLI 対応 – npx remixicon-mcp を使ってスタンドアロンの CLI ツールとして実行することも、MCP クライアントに統合することもできます。
• LLM 向けレスポンス – 順位付けされた候補、一致したトークン、およびモデルにアイコンを必ず 1 つ選択するよう指示する明確なガイダンスを返します。

クイックスタート

インストール

# Install as CLI tool globally
npm install -g remixicon-mcp

# Or run directly with npx
npx remixicon-mcp

# For development
pnpm install
pnpm typecheck
pnpm test

使用方法

スタンドアロンの CLI ツールとして

テストまたは統合のため、stdio 経由で MCP サーバーを直接実行できます。

# Run with npx
npx remixicon-mcp

# Or if installed globally
remixicon-mcp

プラットフォームの設定

Claude Desktop

設定 次の内容を claude_desktop_config.json に追加します。

macOS: ~/Library/Application Support/Claude/claude_desktop_config.json
Windows: %APPDATA%\Claude\claude_desktop_config.json

{
  "mcpServers": {
    "remix-icon": {
      "command": "npx",
      "args": ["-y", "remixicon-mcp"]
    }
  }
}

セットアップ手順

1. 設定ファイルを保存します
2. Claude Desktop を完全に終了してから再起動します
3. 会話で search_icons ツールを利用できるようになります

Claude Code

方法 1：マーケットプレイスプラグイン（推奨）

# In Claude Code, add the marketplace plugin
/plugin marketplace add Remix-Design/remixicon-mcp

利点：

• インストールと更新が自動で行われます
• プラグインのメタデータとバージョン管理がすべて含まれています
• キーワードと分類による充実した検索機能を利用できます
• Claude Code のプラグインエコシステムと完全に統合されています

方法 2：手動設定

# Quick command-line setup
claude mcp add --transport stdio remixicon -- npx -y remixicon-mcp

または、プロジェクトの .claude/settings.json に手動で追加します。

{
  "mcp": {
    "servers": {
      "remix-icon": {
        "command": "npx",
        "args": ["-y", "remixicon-mcp"]
      }
    }
  }
}

セットアップ手順

1. 上記のインストール方法から 1 つ選びます
2. 変更を反映するために Claude Code を再起動します
3. セッションで search_icons ツールを利用できるようになります

Codex

設定

# Quick command-line setup
codex mcp add remixicon -- npx -y remixicon-mcp

セットアップ手順

1. 上記のインストールコマンドを実行します
2. 変更を反映するために Codex を再起動します
3. 会話で search_icons ツールを利用できるようになります

利用可能なツール

サーバーは公式の @modelcontextprotocol/sdk を介して JSON-RPC 2.0 を使用し、stdio 経由で通信します。公開するツールは 1 つです。

search_icons

入力：keywords 文字列（カンマ区切り、最大 20 個のキーワード）
出力：関連性の高いアイコン上位 5 件とメタデータ
形式：人が読みやすい概要と構造化されたメタデータ

使用例

JSON-RPC 呼び出し：

{
  "jsonrpc": "2.0",
  "id": 1,
  "method": "tools/call",
  "params": {
    "name": "search_icons",
    "arguments": {
      "keywords": "layout, grid, design"
    }
  }
}

レスポンス例： サーバーはキーワードに一致する上位 5 件のアイコンを、名前、カテゴリ、使用情報とともに返します。

プロジェクト構成

.
├── bin/
│   └── run.cjs                     # CLI entry point for npx execution
├── src/
│   ├── cli/                        # CLI runner implementation
│   ├── bootstrap/                  # Dependency wiring for Clean Architecture boundaries
│   ├── domain/                     # Icon entities and keyword parser
│   ├── application/                # Search use case orchestrating validation and ranking
│   ├── infrastructure/search/      # FlexSearch-backed repository implementation
│   ├── interface/mcp/              # MCP server built with @modelcontextprotocol/sdk
│   └── data/tags.json              # Remix Icon tags for search functionality
├── tests/                          # Vitest suites covering parser and use case behaviour
├── .claude-plugin/
│   └── marketplace.json            # Marketplace metadata for Claude Code plugin discovery
├── package.json                    # pnpm-friendly manifest and scripts
└── tsconfig.json                   # Strict TypeScript configuration with Node typings

実装上の注意点

• キーワードは Unicode 対応の境界で解析されます。カンマ区切りのキーワードは最大 20 個までサポートされますが、文章形式の入力は拒否されます。
• 検出機能を強化し、区切り文字を含むキーワードリストと、スペース区切りのフレーズからなる自然言語の文章を区別します。
• FlexSearch ではアイコン名、タグ、用途、カテゴリをインデックス化します。フィールドの重み付けとトークンの一致に基づき、決定論的なスコアを算出します。
• 上位 5 件の結果を固定で返すことで、複雑な設定を必要とせず、関連性の高い候補に絞り込めます。
• アプリケーション層では、パーサーの検証、リポジトリへのクエリ、応答のフォーマットを組み合わせるため、インターフェースはトランスポートに関する処理だけを担います。
• MCP の応答には自然言語による案内と機械可読な一致結果が含まれるため、LLM クライアントはアイコンを正確に 1 つ選択できます。
• CLI ランナーにより、npx またはグローバルインストールで単独実行できるため、簡単に統合できます。

開発用スクリプト

pnpm typecheck   # Strict TypeScript check (tsc --noEmit)
pnpm test        # Run Vitest suites
pnpm exec biome check --write --unsafe   # Format + fix code with Biome

ライセンス

MIT ライセンス