героиконы-mcp

Сервер Model Context Protocol (MCP), предоставляющий Heroicons в качестве ресурсов и инструментов для LLM и агентских приложений. Создан с помощью Bun и MCP TypeScript SDK.

Что такое Heroicons?

Heroicons — популярная библиотека иконок SVG, созданных вручную, разработанная создателями Tailwind CSS. Иконки доступны в нескольких стилях (Outline, Solid) и легко интегрируются в веб-проекты.

Что такое МКП?

Протокол контекста модели (MCP) — это стандарт для инструментов ИИ, позволяющий запрашивать определенный контекст из источников, находящихся за пределами их основных обучающих данных.

Этот сервер MCP позволяет помощникам по кодированию на основе ИИ и другим агентским приложениям получать доступ к информации о Heroicons, обеспечивая лучшую поддержку и возможности поиска иконок.

Функции

Раскрывает Heroicons как ресурсы MCP (стили Outline и Solid)
Предоставляет инструменты для поиска иконок по имени или ключевым словам.
Позволяет перечислить все значки или значки в определенном стиле.
Готов к интеграции с Claude Desktop и другими клиентами MCP
Может работать как HTTP-сервер или как MCP-сервер на базе stdio

Предпосылки

Начало работы (разработка)

1. Клонировать репозиторий

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

2. Установите Bun (если у вас его нет)

Обратитесь к официальному руководству по установке 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

Режим Stdio

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

Конфигурация с помощью инструментов ИИ

Пример: Клод Десктоп

Чтобы использовать этот MCP-сервер в Claude Desktop :

Откройте файл конфигурации Claude Desktop:

code ~/Library/Application\ Support/Claude/claude_desktop_config.json

(Или используйте предпочитаемый вами редактор) 2. Добавьте сервер в раздел mcpServers .

Вариант А: через 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.
Теперь вы должны увидеть сервер «heroicons», доступный на панели инструментов Клода.

Примечание: команда npx heroicons-mcp --stdio является рекомендуемым способом для режима stdio.

Доступные инструменты (MCP)

Этот сервер MCP предоставляет следующие инструменты помощникам по кодированию на базе ИИ:

список_всех_иконок

Описание: Список всех доступных Heroicons, опционально отфильтрованных по стилю (контурный, сплошной).
Параметры: style (необязательно: "outline" | "solid")

иконки_поиска

Описание: Поиск Heroicons по имени или ключевым словам во всех стилях.
Параметры: query (строка), style (необязательно: "outline" | "solid")

получить_значок_примеры_использования

Описание: Извлекает пример использования JSX для определенного значка.
Параметры: name (строка), style (строка: "outline" | "solid")

Пример использования

Вот как инструмент ИИ может использовать этот сервер MCP:

Пользователь задает инструменту искусственного интеллекта вопрос : «Найди мне иконку пользователя из Heroicons, желательно в сплошном стиле».
Инструмент ИИ вызывает search_icons :

query : "пользователь"
style : "твердый"

Сервер MCP отвечает списком соответствующих сплошных иконок Heroicons (например, UserIcon , UserCircleIcon , UserPlusIcon ).
Пользователь запрашивает у инструмента : «Показать пример использования UserIcon».
Инструмент ИИ вызывает get_icon_usage_examples :

name : "UserIcon"
style : "твердый"

Сервер MCP отвечает примером кода JSX:

import { UserIcon } from "@heroicons/react/24/solid";

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

Локальное тестирование MCP с помощью Inspector

Вы можете протестировать сервер MCP (режим stdio) локально с помощью MCP Inspector .

Сначала убедитесь, что проект построен:

bun run build

Затем запустите Inspector и подключите его к своему серверу с помощью команды 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.

Ресурсы

Лицензия

Массачусетский технологический институт

heroicons-mcp