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

• Git

• Brötchen

Erste Schritte (Entwicklung)

1. Klonen Sie das Repository

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

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:

bun --version

3. Abhängigkeiten installieren

bun install

4. Erstellen Sie das Projekt

Dadurch wird die TypeScript-Quelle im build -Verzeichnis in JavaScript kompiliert.

bun run build

Verwendung

HTTP-Modus

Sie können den HTTP-Server mit npx ausführen:

npx heroicons-mcp

Dadurch wird der HTTP-Server gestartet (standardmäßig Port 3000, wie in src/http.ts definiert).

Oder global installieren:

npm install -g heroicons-mcp

Führen Sie dann Folgendes aus:

heroicons-mcp

Stdio-Modus

npx heroicons-mcp --stdio
# or if installed globally
heroicons-mcp --stdio

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):

bun run start
# or directly
bun run src/entry.ts

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):

bun run src/entry.ts --stdio

Konfiguration mit KI-Tools

Beispiel: Claude Desktop

So verwenden Sie diesen MCP-Server in Claude Desktop :

1. Öffnen Sie Ihre Claude Desktop-Konfigurationsdatei:

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

(Oder verwenden Sie Ihren bevorzugten Editor) 2. Fügen Sie den Server zum Abschnitt mcpServers hinzu.

Option A: über

{
  "mcpServers": {
    "heroicons": {
      "command": "npx",
      "args": ["heroicons-mcp", "--stdio"]
    }
  }
}

Option B: Direkt auf die Build-Ausgabe verweisen (stellen Sie sicher, dass Sie das Projekt mit

{
  "mcpServers": {
    "heroicons": {
      "command": "node",
      "args": ["/ABSOLUTE/PATH/TO/heroicons-mcp/build/entry.js", "--stdio"]
    }
  }
}

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

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 :

• 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 :

• name : "Benutzersymbol"

• style : "solide"

6. Der MCP-Server antwortet mit dem JSX-Codebeispiel:

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

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

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:

bun run build

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:

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

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