AI导哈

Heroicons图标服务

一个基于Model Context Protocol (MCP)的服务，将Heroicons图标库作为资源提供给LLM和代理应用，支持图标搜索和集成。

  • by SeeYangZhi
  • TypeScript
  • 本地部署
  • 更新于
在 GitHub 查看 SeeYangZhi/heroicons-mcp

使用说明

女英雄mcp

A. 模型上下文协议（MCP） 服务器暴露 英雄 作为LLM和代理应用程序的资源和工具。使用Bun和MCP TypeScript SDK构建。

什么是Heroicons？

英雄 是一个流行的手工制作SVG图标库，由Tailwind CSS的制造商设计。这些图标有多种样式（大纲、实体），易于集成到web项目中。

什么是MCP？

这 模型上下文协议（MCP） 是人工智能工具从其主要训练数据之外的来源请求特定上下文的标准。

此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 --version

3.安装依赖项

bun install

4.建设项目

这将TypeScript源代码编译为JavaScript build 目录。

bun run build

用法

HTTP模式

您可以使用以下命令运行HTTP服务器 npx:

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.标准模式

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

对于开发（使用Bun）：

bun run src/entry.ts --stdio

使用AI工具进行配置

示例：克劳德桌面

要在中使用此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 文件。

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

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

可用工具（MCP）

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

  1. list_all_icons
  • 描述：列出所有可用的Heroicons，可选择按样式（轮廓、实心）过滤。
  • 参数： style （可选：“轮廓”|“实心”）
  1. 搜索图标
  • 描述：在所有样式中按名称或关键字搜索Heroicons。
  • 参数： query （字符串）， style （可选：“轮廓”|“实心”）
  1. get_icon_usage_examples
  • 描述：检索特定图标的JSX示例用法。
  • 参数： name （字符串）， style （字符串：“大纲”|“实心”）

示例用法

以下是AI工具如何使用此MCP服务器：

  1. 用户询问AI工具：“从Heroicons中为我找到一个‘用户’图标，最好是纯色。”
  2. AI工具调用 search_icons:
  • query：“用户”
  • style：“固体”
  1. MCP服务器响应 具有匹配的实心Heroicons列表（例如。， UserIcon, UserCircleIcon, UserPlusIcon).
  2. 用户询问工具：“显示UserIcon的使用示例”。
  3. AI工具调用 get_icon_usage_examples:
  • name：“用户图标”
  • style：“固体”
  1. MCP服务器响应 以JSX代码为例：
import { UserIcon } from "@heroicons/react/24/solid";

function Example() {
  return (
    <div>
      <UserIcon className="w-6 h-6 text-blue-500" />
    </div>
  );
}

与检查员一起在本地测试MCP

您可以使用以下命令在本地测试MCP服务器（stdio模式） MCP检查员.

首先，确保项目建成：

bun run build

然后启动检查器，并使用 node ./build/entry.js 命令与 --stdio 标志：

npx @modelcontextprotocol/inspector node ./build/entry.js --stdio

这将打开检查器界面，允许您交互式地测试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