Mcp Icon Visual について
Mcp Icon Visual は、AI エージェント向けに SVG アイコンの検索、取得、比較、描画を行う MCP サーバーです。画像グリッドを返し、視覚対応モデルが候補を見て判断できます。
主な機能
- 01意味に基づくアイコン検索
- 02URL、ファイル、Iconify IDからSVGを取得
- 03最大16個のアイコンを比較グリッドに描画
- 04インラインSVGとローカルファイルの解決
活用シーン
- 01検索結果を見比べてアイコンを選択
- 02SVGの編集版を並べて確認
- 03候補アイコンと既存のプロジェクトスタイルを照合
MCP 対応
search_icons、get_svg、render_grid を MCP ツールとして提供します。stdio で通信し、描画画像を MCP クライアントに返します。
設定
ローカルサーバーの設定はどのクライアントでも共通です。コピーしてクライアントの MCP 設定ファイルに貼り付けてください。
ツール
3掲載時のツール一覧 · 3 週間前に更新
| パラメーター | 型 | 必須 | 説明 |
|---|---|---|---|
| source | string | はい | SVG ソース。次を受け付けます： - 検索結果の URL："https://mdn.alipayobjects.com/…/original" - Iconify ID："mdi/cloud"、"lucide/home"、"tabler/database" - 絶対ファイルパス："/home/user/project/icons/logo.svg" - インライン SVG："<svg xmlns='…'>…</svg>" ローカルファイルには必ず絶対パスを使用してください。 |
詳細
mcp-icon-visual
AI エージェントが SVG アイコンの検索、取得、比較、レンダリングを行える MCP サーバーです。Rust と rmcp SDK で構築されています。
ローカルファイルシステムへのアクセスとリモートレンダリング API を組み合わせ、インライン文字列、URL、ローカルファイル、Iconify ID など、あらゆるソースから SVG を解決し、視覚的な比較グリッドにレンダリングします。
重要なポイントは、すべてのツールが画像を返すことです。視覚機能を備えた LLM はメタデータを受け取るだけでなく、アイコンを見ることができます。これにより、アイコンの選択は当て推量ではなく、視覚的な対話へと変わります。
search_icons("machine learning") — 4x4 グリッド、セル 0〜15、PNG として返されます
エージェントのパイプライン
これらのツールは、視覚機能を備えた AI エージェントが組み合わせて使えるように設計されています。ここでは、実証済みの 3 つのパターンを紹介します。
1. 視覚検索と選択
エージェントがアイコンを検索し、視覚的に最適なものを選択します。URL を見ずに選ぶ必要はありません。
┌─────────────────────────────┐
│ Agent + Vision │
└──────────────┬──────────────┘
│
┌────────────────┼────────────────┐
v v v
search_icons search_icons search_icons
"cloud" "upload" "storage"
│ │ │
v v v
┌──────────┐ ┌──────────┐ ┌──────────┐
│ 4x4 grid │ │ 4x4 grid │ │ 4x4 grid │
│ (sees) │ │ (sees) │ │ (sees) │
└────┬─────┘ └────┬─────┘ └────┬─────┘
│ │ │
└───────────────┼───────────────┘
v
"cells 3, 7, 12 match
the project style"
│
v
render_grid [3 winners]
│
v
┌──────────────────┐
│ final comparison │
│ grid (sees) │──> pick best
└──────────────────┘
エージェントは複数回検索を実行し、それぞれのグリッドを見て、セル番号で候補を選んだ後、最終候補を横並びにレンダリングして選択します。プロジェクトのビジュアルスタイルに関するコンテキストをエージェントが持っている場合に、特に効果を発揮します。
2. アイコンの反復編集
エージェントが SVG コードを修正し、render_grid を視覚的な差分として使って、反復を通じた進捗を追跡します。
get_svg "mdi/cloud"
│
v
┌───────────┐
│ raw SVG │
│ markup │
└─────┬─────┘
│
┌────────┴─────────────────────────────────────┐
│ Edit Loop │
│ │
│ Agent modifies SVG code │
│ │ │
│ v │
│ render_grid [original, v1, v2, v3] │
│ │ │
│ v │
│ ┌──────────────────────────────┐ │
│ │ cell 0: original │ │
│ │ cell 1: thicker strokes │ │
│ │ cell 2: rounded corners │ │
│ │ cell 3: filled variant │ │
│ └──────────────┬───────────────┘ │
│ │ │
│ agent sees all versions │
│ decides next edit │
│ │ │
│ └──── loop ──────────────────┘
│
v
save final SVG to disk
各反復で、エージェントはすべてのバージョン（オリジナルと編集後）をインライン SVG として render_grid に渡します。1 枚の画像で横並びに表示し、反復を続けるか終了するかを判断します。参照用として、オリジナルは常にセル 0 に置かれます。
3. スタイルの一致と一貫性
エージェントが、新しいアイコンを既存プロジェクトのアイコンと同じビジュアルスタイルにします。
Project icons on disk Candidate sources
───────────────────── ─────────────────
/app/icons/nav-home.svg search_icons "settings"
/app/icons/nav-search.svg │
/app/icons/nav-profile.svg v
│ picks cells 2, 5, 9
│ │
└──────────┬───────────────────┘
v
render_grid [
/app/icons/nav-home.svg, ← cell 0: existing
/app/icons/nav-search.svg, ← cell 1: existing
/app/icons/nav-profile.svg, ← cell 2: existing
candidate_url_1, ← cell 3: candidate
candidate_url_2, ← cell 4: candidate
candidate_url_3, ← cell 5: candidate
"<svg>...custom edit...</svg>" ← cell 6: agent's edit
]
│
v
┌────────────────────────────────┐
│ grid image: │
│ existing icons vs candidates │
│ (agent sees style match/clash) │
└────────────────┬───────────────┘
│
agent judges:
"cell 4 matches stroke weight
and corner radius of cells 0-2,
cell 3 is too thin,
cell 5 wrong fill style"
│
v
get_svg cell_4_url
│
v
save to /app/icons/nav-settings.svg
ローカルファイルパスとリモートソースを 1 つのグリッドに混在させることで、エージェントは既存プロジェクトのアイコンと候補を一度に視覚的に比較できます。このグリッドはスタイル監査ツールになります。
パイプラインの組み合わせ
これらのパターンは自然に組み合わせられます。実際のワークフローでは、次のように進められます。
- 複数のキーワードで検索する（パイプライン 1）
- 上位候補を既存プロジェクトのアイコンと比較する（パイプライン 3）
- 最も近い候補を編集し、スタイルの不一致を修正する（パイプライン 2）
- 最終的なアイコンを、アイコン一式ともう一度照合する（パイプライン 3）
すべて、視覚機能を備えた 1 つのエージェントが、3 つのツールを使って実行します。
ツール
search_icons
セマンティックアイコン検索です。4x4 の PNG グリッド（512x512、セル 0〜15）と、セル番号と SVG URL の対応表を返します。
| パラメーター | 型 | デフォルト | 説明 |
|---|---|---|---|
keyword | string | 必須 | セマンティック検索クエリ（例："cloud computing"、"arrows"） |
background | string | "#FFFFFF" | グリッドの背景色。CSS の 16 進数カラー |
color | string | null | null | すべてのアイコンを、この CSS の 16 進数カラーに変更します |
get_svg
あらゆるソースから SVG マークアップを取得します。確認または変更に使える完全な SVG 文字列を返します。
| パラメーター | 型 | 説明 |
|---|---|---|
source | string | URL、Iconify ID（mdi/cloud）、絶対ファイルパス、またはインラインの <svg> |
render_grid
1～16 個の SVG を 4x4 の比較グリッド（512x512、セル 0～15）にレンダリングします。アイコンのバリエーションを並べて比較したり、検索結果と併せてローカルのアイコンをプレビューしたりするのに便利です。
| パラメーター | 型 | デフォルト | 説明 |
|---|---|---|---|
sources | string[] | 必須 | 1～16 個の SVG ソース（URL、Iconify ID、ファイルパス、またはインライン SVG） |
background | string | "#FFFFFF" | グリッドの背景色。CSS の hex |
ソースの解決
すべてのツールは、ソースを自動的に分類する統一された解決パイプラインを共有しています。
| ソースの種類 | 例 | 解決方法 |
|---|---|---|
| インライン SVG | <svg xmlns="...">...</svg> | そのまま返されます |
| URL | https://mdn.alipayobjects.com/.../original | API 経由で解決されます |
| ファイルパス | /home/user/icons/logo.svg | ローカルディスクから読み込まれます |
| Iconify ID | mdi/cloud, lucide/home | API 経由で解決されます |
ファイルパスは、プレフィックス（/、./、~/）または .svg 拡張子によって検出されます。http://／https:// を含まないその他のすべての値は、Iconify ID として扱われます。
グリッド形式
すべてのグリッド出力は、4x4 レイアウト（128x128 セル）の 512x512 PNG 画像で、左から右、上から下に 0～15 の番号が付いています。
┌────┬────┬────┬────┐
│ 0 │ 1 │ 2 │ 3 │
├────┼────┼────┼────┤
│ 4 │ 5 │ 6 │ 7 │
├────┼────┼────┼────┤
│ 8 │ 9 │ 10 │ 11 │
├────┼────┼────┼────┤
│ 12 │ 13 │ 14 │ 15 │
└────┴────┴────┴────┘
各セルの左下にセル番号が表示されます。未使用のセルには番号のみが表示されます。
インストール
npx（推奨）
ビルドは不要です。Linux（x64/arm64）、macOS（Intel/Apple Silicon）、Windows（x64）で動作します。
{
"mcpServers": {
"icon-visual": {
"command": "npx",
"args": ["-y", "@br-ai-n/mcp-icon-visual"]
}
}
}
ソースから
Rust（edition 2024）が必要です。
cargo build --release --target x86_64-unknown-linux-musl
リリースプロファイルでは、完全に静的なバイナリが生成されます（musl libc、rustls-tls、LTO、シンボル削除）。
使い方
# Default upstream API
./mcp-icon-visual
# Custom API endpoint
./mcp-icon-visual --api-base http://localhost:3000
サーバーは MCP プロトコルを使用して stdio 経由で通信します。
MCP クライアントの設定
Claude Desktop / Cursor
{
"mcpServers": {
"icon-visual": {
"command": "npx",
"args": ["-y", "@br-ai-n/mcp-icon-visual"]
}
}
}
カスタム API エンドポイント
{
"mcpServers": {
"icon-visual": {
"command": "/path/to/mcp-icon-visual",
"args": ["--api-base", "http://localhost:3000"]
}
}
}
プロジェクト構成
src/
├── main.rs # Entrypoint, CLI args, stdio transport
├── server.rs # IconServer + MCP tool routing + response builders
├── api_client.rs # HTTP client for upstream rendering API
├── resolve.rs # Source classification and SVG resolution
├── error.rs # Error types
└── tools/
├── mod.rs
├── search_icons.rs # SearchIconsParams
├── get_svg.rs # GetSvgParams
└── render_grid.rs # RenderGridParams
テスト
# Unit tests (source classification)
cargo test
# Integration tests (requires network access to icons.buan.me)
cargo test -- --ignored
依存関係
| クレート | 用途 |
|---|---|
rmcp | MCP サーバー SDK（ツールのルーティング、stdio トランスポート） |
tokio | 非同期ランタイム |
reqwest | HTTP クライアント（rustls-tls、OpenSSL 不使用） |
serde / serde_json | シリアライズ |
schemars | ツールパラメーター用 JSON Schema の生成 |
clap | CLI 引数の解析 |
base64 | Base64 エンコード |
tracing | ロギング |
thiserror | エラー導出マクロ |
ライセンス
MIT License
Copyright (c) 2025
本ソフトウェアおよび関連ドキュメントファイル（以下「本ソフトウェア」）の複製を取得するすべての人に対し、無償で、本ソフトウェアを制限なく取り扱うことを許可します。これには、本ソフトウェアを使用、複製、変更、結合、公開、配布、サブライセンス、および／または販売する権利が含まれます。また、本ソフトウェアを提供する相手にこれらを許可することも認められます。ただし、以下の条件に従うものとします。
上記の著作権表示および本許諾表示は、本ソフトウェアのすべての複製または実質的な部分に含めるものとします。
本ソフトウェアは「現状のまま」提供され、商品性、特定目的への適合性、および非侵害性に関する保証を含め、明示的または黙示的を問わず、いかなる保証もありません。作者または著作権者は、契約行為、不法行為、その他の行為を問わず、本ソフトウェアまたは本ソフトウェアの使用もしくはその他の取り扱いに起因または関連して発生する、いかなる請求、損害、その他の責任についても責任を負いません。
コメント
AI アプリケーションが外部のツールやデータソースに統一的な方法で接続するためのオープンなプロトコルです。クライアントはモデルとの対話を担い、MCP サーバーはツール・リソース・プロンプトテンプレートを提供します。標準メッセージでやり取りするため、1 つのサーバーを複数のクライアントで再利用できます。