heroicons-mcp

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

Heroicons 是什么？

Heroicons是一个流行的手工 SVG 图标库，由 Tailwind CSS 的开发者设计。这些图标提供多种样式（轮廓、实心），易于集成到 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. 构建项目

这会在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 服务器：

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

保存文件并重新启动 Claude Desktop。
您现在应该可以在 Claude 的工具面板中看到“heroicons”服务器。

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

可用工具 (MCP)

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

列出所有图标

描述：列出所有可用的英雄图标，可选择按样式（轮廓、实心）进行过滤。
参数： style （可选：“outline”|“solid”）

搜索图标

描述：按名称或关键字搜索所有样式的 Heroicons。
参数： query （字符串）、 style （可选：“轮廓”|“实心”）

获取图标使用示例

描述：检索特定图标的 JSX 示例用法。
参数： name （字符串）、 style （字符串：“outline”|“solid”）

示例用法

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

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

query ：“用户”
style ：“纯色”

MCP 服务器响应匹配的实心 Heroicon 列表（例如， UserIcon 、 UserCircleIcon 、 UserPlusIcon ）。
用户询问工具：“显示 UserIcon 的使用示例”。
AI工具调用get_icon_usage_examples ：

name ：“用户图标”
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 检查代码库。

资源

执照

麻省理工学院

heroicons-mcp

heroicons-mcp

Heroicons 是什么？

什么是 MCP？

特征

先决条件

入门（开发）

1. 克隆存储库

2.安装 Bun（如果没有）

3.安装依赖项

4. 构建项目

用法

HTTP 模式

标准输入输出模式

本地开发

1. HTTP模式

2. Stdio 模式

使用AI工具进行配置

例如：Claude Desktop

可用工具 (MCP)

示例用法

使用 Inspector 在本地测试 MCP

开发脚本

资源

执照

Related MCP Servers

mcp-glama-demo

mcp-untun

protolint-mcp

mcp-nomad

New MCP Servers

MCP directory API