heroicons-mcp
Ein Model Context Protocol (MCP) -Server, der Heroicons als Ressourcen und Tools für LLMs und Agentenanwendungen bereitstellt. Erstellt mit Bun und dem MCP TypeScript SDK.
Was sind Heroicons?
Heroicons ist eine beliebte Bibliothek handgefertigter SVG-Symbole, die von den Machern von Tailwind CSS entwickelt wurden. Die Symbole sind in verschiedenen Stilen (Outline, Solid) verfügbar und lassen sich problemlos in Webprojekte integrieren.
Related MCP server: phalcon-mcp
Was ist MCP?
Das Model Context Protocol (MCP) ist ein Standard für KI-Tools, um spezifischen Kontext von Quellen außerhalb ihrer Haupttrainingsdaten anzufordern.
Dieser MCP-Server ermöglicht KI-Codierungsassistenten und anderen Agentenanwendungen den Zugriff auf Informationen zu Heroicons und ermöglicht so eine bessere Unterstützung und Symbolsuchfunktionen.
Merkmale
Stellt Heroicons als MCP-Ressourcen bereit (Outline- und Solid-Stile)
Bietet Tools zum Suchen von Symbolen nach Namen oder Schlüsselwörtern
Ermöglicht die Auflistung aller Symbole oder Symbole innerhalb eines bestimmten Stils
Bereit zur Integration mit Claude Desktop und anderen MCP-Clients
Kann als HTTP-Server oder stdio-basierter MCP-Server ausgeführt werden
Voraussetzungen
Erste Schritte (Entwicklung)
1. Klonen Sie das Repository
2. Installieren Sie Bun (falls Sie es nicht haben)
Weitere Informationen finden Sie in der offiziellen Installationsanleitung von Bun .
Starten Sie Ihr Terminal nach der Installation neu und überprüfen Sie:
3. Abhängigkeiten installieren
4. Erstellen Sie das Projekt
Dadurch wird die TypeScript-Quelle im build -Verzeichnis in JavaScript kompiliert.
Verwendung
HTTP-Modus
Sie können den HTTP-Server mit npx ausführen:
Dadurch wird der HTTP-Server gestartet (standardmäßig Port 3000, wie in src/http.ts definiert).
Oder global installieren:
Führen Sie dann Folgendes aus:
Stdio-Modus
Lokale Entwicklung
Es gibt zwei Hauptmethoden zum Ausführen des MCP-Servers:
1. HTTP-Modus
Geeignet für Clients, die die Kommunikation über HTTP unterstützen.
Zur Entwicklung (mit Bun):
Dadurch wird der in src/entry.ts definierte Server ausgeführt, der standardmäßig im HTTP-Modus ist.
2. Stdio-Modus
Wird häufig für die direkte Integration mit Tools wie Claude Desktop oder MCP Inspector verwendet und kommuniziert über Standard-Eingabe/Ausgabe.
Zur Entwicklung (mit Bun):
Konfiguration mit KI-Tools
Beispiel: Claude Desktop
So verwenden Sie diesen MCP-Server in Claude Desktop :
Öffnen Sie Ihre Claude Desktop-Konfigurationsdatei:
(Oder verwenden Sie Ihren bevorzugten Editor) 2. Fügen Sie den Server zum Abschnitt mcpServers hinzu.
Option A: über
Option B: Direkt auf die Build-Ausgabe verweisen (stellen Sie sicher, dass Sie das Projekt mit
Ersetzen Sie /ABSOLUTE/PATH/TO/heroicons-mcp/build/entry.js durch den tatsächlichen absoluten Pfad zu Ihrer erstellten entry.js Datei.
Speichern Sie die Datei und starten Sie Claude Desktop neu.
Sie sollten jetzt den „Heroicons“-Server in Claudes Werkzeugleiste sehen.
Hinweis: Für den Standarddiomodus wird der Befehl
Verfügbare Tools (MCP)
Dieser MCP-Server stellt KI-Codierungsassistenten die folgenden Tools zur Verfügung:
Liste aller Symbole
Beschreibung: Listet alle verfügbaren Heroicons auf, optional gefiltert nach Stil (Umriss, durchgezogen).
Parameter:
style(optional: „Umriss“ | „durchgezogen“)
Suchsymbole
Beschreibung: Sucht nach Heroicons nach Namen oder Schlüsselwörtern in allen Stilen.
Parameter:
query(Zeichenfolge),style(optional: „Umriss“ | „durchgezogen“)
get_icon_usage_examples
Beschreibung: Ruft die JSX-Beispielverwendung für ein bestimmtes Symbol ab.
Parameter:
name(Zeichenfolge),style(Zeichenfolge: „Umriss“ | „durchgezogen“)
Beispielverwendung
So könnte ein KI-Tool diesen MCP-Server verwenden:
Der Benutzer fragt das KI-Tool : „Suchen Sie mir ein ‚Benutzer‘-Symbol von Heroicons, vorzugsweise im einfarbigen Stil.“
KI-Tool ruft :
query: "Benutzer"style: "solide"
Der MCP-Server antwortet mit einer Liste passender fester Heroicons (z. B.
UserIcon,UserCircleIcon,UserPlusIcon).Der Benutzer fragt das Tool : „Zeigen Sie ein Anwendungsbeispiel für das Benutzersymbol.“
KI-Tool ruft :
name: "Benutzersymbol"style: "solide"
Der MCP-Server antwortet mit dem JSX-Codebeispiel:
MCP lokal mit Inspector testen
Sie können den MCP-Server (Standardmodus) lokal mit dem MCP Inspector testen.
Stellen Sie zunächst sicher, dass das Projekt erstellt ist:
Starten Sie dann den Inspector und verbinden Sie ihn mit Ihrem Server, indem Sie den Befehl node ./build/entry.js mit dem Flag --stdio verwenden:
Dadurch wird die Inspector-Schnittstelle geöffnet, über die Sie die von Ihrem MCP-Server bereitgestellten Ressourcen und Tools interaktiv testen können.
Entwicklungsskripte
bun run dev: Startet den Server im HTTP-Modus für die Entwicklung (verwendetsrc/entry.ts).bun run dev:stdio: Startet den stdio MCP-Server für die Entwicklung (verwendetsrc/entry.ts --stdio).bun run build: Kompiliert TypeScript in JavaScript (Ausgabe inbuild/).bun run lint: Lintet die Codebasis mit ESLint.