Mcp Icon Visual

io.github.n0isy由 GitHub 帳號 n0isy 發布v0.1.1更新於 Oct 24, 2026

Search, retrieve, compare, and render SVG icons visually for AI agents.

已驗證STDIO僅桌面開發者工具媒體與設計

概覽

AI 產生的概覽

一個本機 MCP 伺服器，讓具備視覺能力的助理搜尋、取得、比較 SVG 圖示，並以 PNG 網格形式視覺化呈現。

可以做什麼
依關鍵字搜尋圖示，回傳 4x4 PNG 網格，並提供儲存格編號對應 SVG 連結的資訊，讓助理憑視覺挑選而非盲選。從 URL、Iconify ID、本機檔案路徑或內嵌 SVG 字串取得原始 SVG 標記。將 1 至 16 個 SVG 來源算繪到 512x512 的比較網格，背景色可設定，用於並排比較風格或反覆修改。
適用情境
適合具備視覺能力的助理為介面挑選圖示、讓新圖示符合專案既有的視覺風格，或在多輪修改中比較 SVG 的變化。由於工具回傳的是圖片，對純文字模型幫助不大。
執行需求
以 stdio 在本機執行，通常透過 npx 使用 npm 套件，或使用 Rust 編譯的執行檔。需要連線至遠端圖示算繪 API 的網路存取（預設上游服務，或以 api-base 參數指定自訂端點）。未宣告需要帳號、API 金鑰或環境變數。
安裝前請注意
傳入檔案路徑時伺服器會讀取本機檔案，磁碟上的 SVG 可能因此暴露給助理與遠端算繪 API。圖示來源與內嵌 SVG 內容會傳送給第三方算繪服務；如有疑慮，可改用自訂端點。

安裝

在 SourceWeft 中

  1. 開啟 儀表板中的 Mcp Icon Visual，將其新增到工作區。
  2. 為需要使用其工具的對話啟用該服務。

Desktop only，透過 STDIO。 STDIO 服務會啟動本機處理程序，因此需要 SourceWeft 桌面主機。

其他 MCP 客戶端

參照 儲存庫 中的啟動說明。

README

mcp-icon-visual

[MCP Registry] [npm] [License: MIT]

MCP server that gives AI agents the ability to search, retrieve, compare, and render SVG icons. Built with Rust and the rmcp SDK.

Combines local filesystem access with a remote rendering API to resolve SVGs from any source — inline strings, URLs, local files, or Iconify IDs — and render them onto visual comparison grids.

The key insight: every tool returns images. A vision-capable LLM doesn't just get metadata — it sees the icons. This turns icon selection from guesswork into a visual conversation.

[search_icons result for 'machine learning' — 4x4 grid with 16 icons]
search_icons("machine learning") — 4x4 grid, cells 0–15, returned as PNG

Agent Pipelines

These tools are designed to be composed by AI agents with vision. Below are three proven patterns.

1. Visual Search & Selection

An agent searches for icons and visually picks the best match — no blind URL selection.

                          ┌─────────────────────────────┐                          │        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                              └──────────────────┘

The agent runs multiple searches, looks at each grid, picks candidates by cell number, then renders a final side-by-side comparison to make the choice. Works especially well when the agent has context about the project's visual style.

2. Iterative Icon Editing

An agent modifies SVG code and uses render_grid as a visual diff to track progress across iterations.

         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

Each iteration, the agent passes all versions (original + edits) as inline SVGs to render_grid. It sees them side-by-side in one image and decides whether to keep iterating or stop. The original always stays in cell 0 as a reference.

3. Style Matching & Consistency

An agent ensures new icons match the visual style of existing project icons.

  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

By mixing local file paths and remote sources in a single grid, the agent can visually compare existing project icons against candidates in one shot. The grid becomes a style audit tool.

Combining Pipelines

These patterns compose naturally. A real-world workflow might:

  1. Search across multiple keywords (pipeline 1)
  2. Compare top candidates against existing project icons (pipeline 3)
  3. Edit the closest match to fix style inconsistencies (pipeline 2)
  4. Verify the final icon one more time against the full icon set (pipeline 3)

All driven by a single agent with vision, using three tools.

Tools

search_icons

Semantic icon search. Returns a 4x4 PNG grid (512x512, cells 0-15) and a mapping of cell numbers to SVG URLs.

ParameterTypeDefaultDescription
keywordstringrequiredSemantic search query (e.g. "cloud computing", "arrows")
backgroundstring"#FFFFFF"Grid background color, CSS hex
colorstring | nullnullRecolor all icons to this CSS hex color

get_svg

Retrieve raw SVG markup from any source. Returns the complete SVG string for inspection or modification.

ParameterTypeDescription
sourcestringURL, Iconify ID (mdi/cloud), absolute file path, or inline <svg>

render_grid

Render 1-16 SVGs onto a 4x4 comparison grid (512x512, cells 0-15). Useful for comparing icon variants side-by-side or previewing local icons alongside search results.

ParameterTypeDefaultDescription
sourcesstring[]required1-16 SVG sources (URLs, Iconify IDs, file paths, or inline SVGs)
backgroundstring"#FFFFFF"Grid background color, CSS hex

Source Resolution

All tools share a unified resolution pipeline that classifies sources automatically:

Source typeExampleResolution
Inline SVG<svg xmlns="...">...</svg>Returned as-is
URLhttps://mdn.alipayobjects.com/.../originalResolved via API
File path/home/user/icons/logo.svgRead from local disk
Iconify IDmdi/cloud, lucide/homeResolved via API

File paths are detected by prefix (/, ./, ~/) or .svg extension. Everything else without http:///https:// is treated as an Iconify ID.

Grid Format

All grid outputs are 512x512 PNG images with a 4x4 layout (128x128 cells), numbered 0-15 left-to-right, top-to-bottom:

┌────┬────┬────┬────┐│  0 │  1 │  2 │  3 │├────┼────┼────┼────┤│  4 │  5 │  6 │  7 │├────┼────┼────┼────┤│  8 │  9 │ 10 │ 11 │├────┼────┼────┼────┤│ 12 │ 13 │ 14 │ 15 │└────┴────┴────┴────┘

Cell numbers appear at the bottom-left of each cell. Unused cells show the number only.

Installation

npx (recommended)

No build needed. Works on Linux (x64/arm64), macOS (Intel/Apple Silicon), and Windows (x64).

json
{  "mcpServers": {    "icon-visual": {      "command": "npx",      "args": ["-y", "@br-ai-n/mcp-icon-visual"]    }  }}

From source

Requires Rust (edition 2024):

bash
cargo build --release --target x86_64-unknown-linux-musl

The release profile produces a fully static binary (musl libc, rustls-tls, LTO, stripped).

Usage

bash
# Default upstream API./mcp-icon-visual
# Custom API endpoint./mcp-icon-visual --api-base http://localhost:3000

The server communicates over stdio using the MCP protocol.

MCP Client Configuration

Claude Desktop / Cursor

json
{  "mcpServers": {    "icon-visual": {      "command": "npx",      "args": ["-y", "@br-ai-n/mcp-icon-visual"]    }  }}

Custom API endpoint

json
{  "mcpServers": {    "icon-visual": {      "command": "/path/to/mcp-icon-visual",      "args": ["--api-base", "http://localhost:3000"]    }  }}

Project Structure

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

Testing

bash
# Unit tests (source classification)cargo test
# Integration tests (requires network access to icons.buan.me)cargo test -- --ignored

Dependencies

CratePurpose
rmcpMCP server SDK (tool routing, stdio transport)
tokioAsync runtime
reqwestHTTP client (rustls-tls, no OpenSSL)
serde / serde_jsonSerialization
schemarsJSON Schema generation for tool parameters
clapCLI argument parsing
base64Base64 encoding
tracingLogging
thiserrorError derive macros

License

MIT License

Copyright (c) 2025

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

來源：README.md，提交 92d593c

工具

0
SourceWeft 尚未在沙箱中啟動過該軟體包，因此其工具未知。

版本歷史

1
  1. v0.1.1最新Sep 16, 2026

評分

已滿足適用檢查項的 40%

該評分衡量此收錄條目的完整程度，依據註冊中心條目、端點與公開來源計算得出。它不是對伺服器本身的評價，也不表示伺服器安全或目前可用：可連通性是帶日期的檢查結果，評分也不包含安裝量或使用者評價。

  • 近 30 天內可連通25 分

    請保持端點能夠回應 MCP 握手；SourceWeft 每 30 天探測一次。

  • 已宣告認證方式10 分

    請在註冊中心條目中宣告憑證請求標頭，或保持端點能夠回應探測，以便判定其認證方式。

  • 已列出工具15 分

    請讓伺服器在無憑證時回應 tools/list，或發布可在沙箱中無憑證啟動的軟體包。

  • 描述必需15 分
  • 圖示10 分
  • 文件15 分
  • 授權條款10 分

    請在儲存庫或註冊中心條目中宣告授權條款。