heroicons-mcp

一个模型上下文协议 (MCP)服务器，将Heroicons作为 LLM 和代理应用程序的资源和工具公开。使用 Bun 和 MCP TypeScript SDK 构建。

Heroicons 是什么？

Heroicons是一个流行的手工 SVG 图标库，由 Tailwind CSS 的开发者设计。这些图标提供多种样式（轮廓、实心），易于集成到 Web 项目中。

Related MCP server: SupaUI MCP Server

什么是 MCP？

模型上下文协议 (MCP)是 AI 工具从其主要训练数据之外的来源请求特定上下文的标准。

该 MCP 服务器允许 AI 编码助手和其他代理应用程序访问有关 Heroicons 的信息，从而提供更好的帮助和图标搜索功能。

特征

• 将 Heroicons 作为 MCP 资源公开（轮廓和实心样式）

• 提供按名称或关键字搜索图标的工具

• 允许列出所有图标或特定样式的图标

• 准备与 Claude Desktop 和其他 MCP 客户端集成

• 可以作为 HTTP 服务器或基于 stdio 的 MCP 服务器运行

先决条件

• Git

• 包子

入门（开发）

1. 克隆存储库

git clone https://github.com/SeeYangZhi/heroicons-mcp.git
cd heroicons-mcp

2.安装 Bun（如果没有）

参考Bun官方安装指南。
安装完成后，重新启动终端并检查：

bun --version

3.安装依赖项

bun install

4. 构建项目

这会在build目录中将 TypeScript 源编译为 JavaScript。

bun run build

用法

HTTP 模式

您可以使用npx运行 HTTP 服务器：

npx heroicons-mcp

这将启动 HTTP 服务器（默认为端口 3000，如src/http.ts中所定义）。

或者全局安装：

npm install -g heroicons-mcp

然后运行：

heroicons-mcp

标准输入输出模式

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

本地开发

运行 MCP 服务器主要有两种方式：

1. HTTP模式

适用于支持通过 HTTP 进行通信的客户端。

对于开发（使用 Bun）：

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

这将运行在src/entry.ts中定义的服务器，默认为 HTTP 模式。

2. Stdio 模式

通常用于与 Claude Desktop 或 MCP Inspector 等工具直接集成，通过标准输入/输出进行通信。

对于开发（使用 Bun）：

bun run src/entry.ts --stdio

使用AI工具进行配置

例如：Claude Desktop

要在Claude Desktop中使用此 MCP 服务器：

1. 打开您的 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文件的实际绝对路径。

3. 保存文件并重新启动 Claude Desktop。

4. 您现在应该可以在 Claude 的工具面板中看到“heroicons”服务器。

注意： npx heroicons-mcp --stdio命令是 stdio 模式的推荐方法。

可用工具 (MCP)

该 MCP 服务器向 AI 编码助手公开以下工具：

1. 列出所有图标

• 描述：列出所有可用的英雄图标，可选择按样式（轮廓、实心）进行过滤。

• 参数： style （可选：“outline”|“solid”）

2. 搜索图标

• 描述：按名称或关键字搜索所有样式的 Heroicons。

• 参数： query （字符串）、 style （可选：“轮廓”|“实心”）

3. 获取图标使用示例

• 描述：检索特定图标的 JSX 示例用法。

• 参数： name （字符串）、 style （字符串：“outline”|“solid”）

示例用法

AI 工具可能这样使用此 MCP 服务器：

1. 用户询问 AI 工具：“从 Heroicons 中帮我找一个‘用户’图标，最好是实心的。”

2. AI工具调用search_icons ：

• query ：“用户”

• style ：“纯色”

3. MCP 服务器响应匹配的实心 Heroicon 列表（例如， UserIcon 、 UserCircleIcon 、 UserPlusIcon ）。

4. 用户询问工具：“显示 UserIcon 的使用示例”。

5. AI工具调用get_icon_usage_examples ：

• name ：“用户图标”

• style ：“纯色”

6. 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 检查代码库。

资源

• 英雄偶像

• 模型上下文协议

• MCP 检查器

• MCP TypeScript SDK

• 包子

执照

麻省理工学院