MIT License
героиконы-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 .
Вариант А: через
{
"mcpServers": {
"heroicons": {
"command": "npx",
"args": ["heroicons-mcp", "--stdio"]
}
}
}
Вариант B: Прямое указание на вывод сборки (убедитесь, что вы собрали проект с помощью
{
"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», доступный на панели инструментов Клода.
Примечание: команда
Доступные инструменты (MCP)
Этот сервер MCP предоставляет следующие инструменты помощникам по кодированию на базе ИИ:
список_всех_иконок
Описание: Список всех доступных Heroicons, опционально отфильтрованных по стилю (контурный, сплошной).
Параметры:
style(необязательно: "outline" | "solid")
иконки_поиска
Описание: Поиск Heroicons по имени или ключевым словам во всех стилях.
Параметры:
query(строка),style(необязательно: "outline" | "solid")
получить_значок_примеры_использования
Описание: Извлекает пример использования JSX для определенного значка.
Параметры:
name(строка),style(строка: "outline" | "solid")
Пример использования
Вот как инструмент ИИ может использовать этот сервер MCP:
Пользователь задает инструменту искусственного интеллекта вопрос : «Найди мне иконку пользователя из Heroicons, желательно в сплошном стиле».
Инструмент ИИ вызывает :
query: "пользователь"style: "твердый"
Сервер MCP отвечает списком соответствующих сплошных иконок Heroicons (например,
UserIcon,UserCircleIcon,UserPlusIcon).Пользователь запрашивает у инструмента : «Показать пример использования UserIcon».
Инструмент ИИ вызывает :
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.
Ресурсы
Лицензия
hybrid server
The server is able to function both locally and remotely, depending on the configuration or use case.
героиконы-mcp
Related MCP Servers
- MIT License
- MIT License