heroicons-mcp

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.

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

• Git
• Brötchen

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 :

1. Ö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 npx :

Option B: Direkt auf die Build-Ausgabe verweisen (stellen Sie sicher, dass Sie das Projekt mit bun run build erstellt haben):

Ersetzen Sie /ABSOLUTE/PATH/TO/heroicons-mcp/build/entry.js durch den tatsächlichen absoluten Pfad zu Ihrer erstellten entry.js Datei.

3. Speichern Sie die Datei und starten Sie Claude Desktop neu.
4. Sie sollten jetzt den „Heroicons“-Server in Claudes Werkzeugleiste sehen.

Hinweis: Für den Standarddiomodus wird der Befehl npx heroicons-mcp --stdio empfohlen.

Verfügbare Tools (MCP)

Dieser MCP-Server stellt KI-Codierungsassistenten die folgenden Tools zur Verfügung:

1. Liste aller Symbole

• Beschreibung: Listet alle verfügbaren Heroicons auf, optional gefiltert nach Stil (Umriss, durchgezogen).
• Parameter: style (optional: „Umriss“ | „durchgezogen“)

2. Suchsymbole

• Beschreibung: Sucht nach Heroicons nach Namen oder Schlüsselwörtern in allen Stilen.
• Parameter: query (Zeichenfolge), style (optional: „Umriss“ | „durchgezogen“)

3. 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:

1. Der Benutzer fragt das KI-Tool : „Suchen Sie mir ein ‚Benutzer‘-Symbol von Heroicons, vorzugsweise im einfarbigen Stil.“
2. KI-Tool ruft search_icons auf :

• query : "Benutzer"
• style : "solide"

3. Der MCP-Server antwortet mit einer Liste passender fester Heroicons (z. B. UserIcon , UserCircleIcon , UserPlusIcon ).
4. Der Benutzer fragt das Tool : „Zeigen Sie ein Anwendungsbeispiel für das Benutzersymbol.“
5. KI-Tool ruft get_icon_usage_examples auf :

• name : "Benutzersymbol"
• style : "solide"

6. 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 (verwendet src/entry.ts ).
• bun run dev:stdio : Startet den stdio MCP-Server für die Entwicklung (verwendet src/entry.ts --stdio ).
• bun run build : Kompiliert TypeScript in JavaScript (Ausgabe in build/ ).
• bun run lint : Lintet die Codebasis mit ESLint.

Ressourcen

• Heldenikonen
• Modellkontextprotokoll
• MCP-Inspektor
• MCP TypeScript SDK
• Brötchen

Lizenz

MIT