Der MCP Server

Was ist MCP?

MCP (Model Context Protocol) ist ein standardisiertes Protokoll, das KI-Assistenten den Zugriff auf externe Datenquellen und Tools ermöglicht. Nuxt UI bietet einen MCP-Server, der es KI-Assistenten wie Claude Code, Cursor und Windsurf ermöglicht, direkt auf Komponenteninformationen, Quellcode und Anwendungsbeispiele zuzugreifen.

Der MCP-Server bietet einen strukturierten Zugriff auf unsere Komponentenbibliothek, sodass KI-Tools die Nuxt-UI-Entwicklung leicht verstehen und unterstützen können.

Verfügbare Ressourcen

Der Nuxt UI MCP-Server bietet die folgenden Ressourcen für die Erkennung:

• resource://nuxt-ui/components: Alle verfügbaren Komponenten mit Kategorien durchsuchen
• resource://nuxt-ui/composables: Durchsuchen Sie alle verfügbaren composables mit Kategorien
• resource://nuxt-ui/examples: Alle verfügbaren Codebeispiele durchsuchen
• resource://nuxt-ui/templates: Alle verfügbaren Projektvorlagen durchsuchen
• resource://nuxt-ui/documentation-pages: Alle verfügbaren Dokumentationsseiten durchsuchen

Sie können auf diese Ressourcen mit Tools wie Claude Code mit @ zugreifen.

Verfügbare Tools

Der Nuxt UI MCP-Server bietet die folgenden Tools, die nach Kategorien geordnet sind:

Search Tools (englisch)

• search-components: Suche nach Komponenten nach Name, Kategorie oder Absicht. Alternative Namen wie "segmented control" oder "combobox" werden abgeglichen und die Ergebnisse werden nach Relevanz geordnet. Ohne Parameter werden alle Komponenten aufgelistet
• search-composables: Suche nach composables nach Name oder Beschreibung. Ohne Params werden alle composables aufgelistet
• search-icons: Suche nach Symbolen in Iconify Sammlungen (standardmäßig lucide). Gibt Symbolnamen im i-{prefix}-{name}-Format zurück, das von Nuxt UI verwendet wird

Component Tools (Deutsche Übersetzung)

• get-component: Speichert die Dokumentation und Details der Komponenten. Unterstützt einen sections-Parameter (usage, examples, api, theme, changelog), um nur bestimmte Teile abzurufen und die Antwortgröße zu reduzieren
• get-component-metadata: Retrieved metadata for a component including props, slots, and events (lightweight, no documentation content). Props sind standardmäßig kompakt, übergeben full: true für die rohen rekursiven Prop-Schemata.

Documentation Werkzeuge

• search-documentation: Dokumentationsseiten nach Titel, Beschreibung oder Abschnitt durchsuchen. Ohne Parameter werden alle Seiten aufgelistet. Verwenden Sie section zum Filtern (z. B. "getting-started", "components")
• get-documentation-page: Zeigt den Inhalt der Dokumentationsseite über den URL-Pfad an. Unterstützt einen headings-Parameter, um nur bestimmte h2-Abschnitte (z. B. ["Usage", "API"]) abzurufen und die Antwortgröße zu reduzieren.

Template Tools Bearbeiten

• list-templates: Listet alle verfügbaren Nuxt UI-Vorlagen mit optionaler Framework-Filterung auf
• get-template: Beschreibung, Funktionen und Links einer Vorlage abrufen

Beispiel-Tools

• list-examples: Listet die Namen aller verfügbaren UI-Beispiele auf
• get-example: Ruft den Quellcode eines UI-Beispiels ab

Migration Tools (englisch)

• get-migration-guide: Ruft die Migrationsanleitung und Upgrade-Anweisungen für diese Version von Nuxt UI ab

Limit Verfügbare Werkzeuge

Legen Sie den optionalen HTTP-Header X-MCP-Tools auf eine durch Kommas getrennte Liste von Werkzeugnamen fest, um nur die Werkzeuge anzuzeigen, die Ihr Assistent benötigt.

Verwenden Sie die genauen Namen der kebab-case MCP-Werkzeuge, zum Beispiel:

{
  "X-MCP-Tools": "search-components,get-component"
}

Kein Header macht alle Tools verfügbar, ein leerer Header macht keine Tools verfügbar und ein unbekannter Toolname gibt einen Konfigurationsfehler zurück.

Available Prompts Verfügbarkeit

Der Nuxt UI MCP Server bietet geführte Eingabeaufforderungen für gängige Workflows:

• find-component-for-usecase: Finden Sie die beste Komponente für Ihren spezifischen Anwendungsfall
• implement-component-with-props: Erstellen Sie eine vollständige Komponentenimplementierung mit den richtigen Requisiten
• xph11x: Anleitung zum Einrichten von Projektvorlagen

Sie können diese Ressourcen mit Tools wie Claude Code mit / zugreifen.

Konfiguration

Der Nuxt UI MCP-Server verwendet HTTP-Transport und kann in verschiedenen KI-Assistenten konfiguriert werden.

ChatGPT (Englisch)

Führen Sie die folgenden Schritte aus, um die Nuxt-Benutzeroberfläche als Connector in ChatGPT einzurichten:

1. **Enable Entwicklermodus: **
   • Gehe zu "Einstellungen">"Connectors">"Erweiterte Einstellungen">"Entwicklermodus"
2. **ChatGPT Einstellungen öffnen **
3. **Erstellen Sie auf der Registerkarte Connectors einen neuen Connector: **
   • Geben Sie dem Objekt einen Namen: Nuxt UI
   • MCP Server-URL: https://ui.nuxt.com/mcp
   • Authentifizierung: None
4. Klick auf Create

Der Nuxt UI-Connector wird später während der Konversationen im "Developer Mode"-Tool des Komponisten angezeigt.

Der XPH138XCLAUE Code

Fügen Sie den Server mit dem Befehl CLI hinzu:

claude mcp add --transport http nuxt-ui https://ui.nuxt.com/mcp

claude für Desktop

Setup Anweisungen:

1. Öffnen Sie Claude Desktop und navigieren Sie zu "Einstellungen">"Entwickler".
2. Klicken Sie auf "Edit Config". Dies öffnet das lokale Claude-Verzeichnis.
3. Ändern Sie die claude_desktop_config.json-Datei mit Ihrer benutzerdefinierten MCP-Serverkonfiguration.

{
  "mcpServers": {
    "nuxt-ui": {
      "command": "npx",
      "args": [
        "mcp-remote",
        "https://ui.nuxt.com/mcp"
      ]
    }
  }
}

4. Claude Desktop app. Der Nuxt UI MCP Server sollte nun registriert sein.

Cursor für

Quick Install (Deutsche Übersetzung)

Klicken Sie auf die Schaltfläche unten, um den Nuxt UI MCP Server direkt in Cursor zu installieren:

Manuelle Setup-Anleitung:

1. Cursor öffnen und auf "Einstellungen">"Tools & MCP" gehen
2. Add the Nuxt UI MCP server configuration (Deutsche Übersetzung)

Oder manuell erstellen/aktualisieren Sie .cursor/mcp.json in Ihrem Projektstamm:

{
  "mcpServers": {
    "nuxt-ui": {
      "type": "http",
      "url": "https://ui.nuxt.com/mcp"
    }
  }
}

Gemini CLI (Englisch)

Setup Anweisungen:

1. Lokalisieren Sie Ihre Gemini CLI-Konfigurationsdatei (normalerweise ~/.gemini/settings.json oder wie in Ihrer Umgebung angegeben).
2. Fügen Sie Ihrem mcpServers-Objekt die folgende Konfiguration hinzu:

{
  "mcpServers": {
    "nuxt-ui": {
      "httpUrl": "https://ui.nuxt.com/mcp"
    }
  }
}

3. Starten Sie Ihre Terminalsitzung neu oder laden Sie die CLI neu. Die Nuxt UI MCP-Server-Tools stehen nun zur Verfügung.

GitHub Copilot-Agent (englisch)

Wenn Sie bereits MCP-Server in Visual Studio Code konfiguriert haben, ersetzen Sie den servers-Schlüssel durch mcpServers und fügen Sie einen tools-Schlüssel hinzu, der angibt, welche Tools für Copilot verfügbar sind.

Setup-Anleitung:

1. Navigieren Sie zu Ihrem GitHub Repository
2. Gehen Sie zu Settings> Code & automation> Copilot> Coding-Agent
3. Fügen Sie im Abschnitt MCP configuration folgende Konfiguration hinzu:

{
  "mcpServers": {
    "nuxt-ui": {
      "type": "http",
      "url": "https://ui.nuxt.com/mcp",
      "tools": ["*"]
    }
  }
}

4. Click speichern

Validation der Konfiguration:

So überprüfen Sie, ob der MCP-Server richtig konfiguriert ist:

1. Erstellen Sie ein Problem in Ihrem Repository und weisen Sie es dem Copilot zu
2. Wait for Copilot to create a pull request (Warten Sie, bis Copilot eine Pull-Anforderung erstellt)
3. Klicken Sie in der Pull-Anforderung auf Sitzung anzeigen im Timeline-Ereignis "Copilot hat Arbeit begonnen"
4. Klicken Sie auf die Ellipsenschaltfläche (...) oben rechts und dann auf Copilot in der Seitenleiste
5. Erweitern Sie den Schritt MCP-Server starten, um die konfigurierten Nuxt-Tools anzuzeigen

Weitere Informationen zur Verwendung von MCP mit dem GitHub Copilot-Codierungsagenten finden Sie unter Extend coding agent with MCP.

GitHub Copilot CLI (Englisch)

Setup Anweisungen:

1. Start GitHub Copilot CLI im interaktiven Modus.
2. Run /mcp add.
3. Füllen Sie das Konfigurationsformular aus mit:
   • Server Name: nuxt-ui (englisch)
   • Server Type: HTTP (Deutsche Übersetzung)
   • URL: https://ui.nuxt.com/mcp (Deutsche Übersetzung)
   • HTTP Headers: leer lassen.
   • Tools: * (Deutsche Übersetzung)
4. Press Ctrl + S to save. The MCP server is available soforth without restarting the CLI. Der MCP-Server ist sofort verfügbar, ohne die CLI neu starten zu müssen.

Oder füge den Server direkt zu ~/.copilot/mcp-config.json hinzu:

{
  "mcpServers": {
    "nuxt-ui": {
      "type": "http",
      "url": "https://ui.nuxt.com/mcp",
      "tools": ["*"]
    }
  }
}

Verwenden Sie /mcp show, um zu überprüfen, ob der Server konfiguriert und verfügbar ist.

Weitere Details finden Sie unter MCP-Server für GitHub Copilot CLI hinzufügen.

Google Antigravitation (englisch).

Setup-Anweisungen:

1. Öffnen Sie den MCP-Store über das Dropdown-Menü "..." oben im Agentenfeld des Editors.
2. Klicken Sie auf "Manage MCP Servers"
3. Klicken Sie auf "View raw config"
4. Ändern Sie den mcp_config.json mit Ihrer benutzerdefinierten MCP-Serverkonfiguration:

{
  "mcpServers": {
    "nuxt-ui": {
      "serverUrl": "https://ui.nuxt.com/mcp"
    }
  }
}

5. Kehren Sie zum Tab "MCP Server verwalten" zurück und klicken Sie auf "Refresh". Der Nuxt UI MCP Server sollte nun erscheinen.

Le Chat Mistral (Deutsche Übersetzung)

Setup Anweisungen:

1. Navigieren Sie zu "Intelligenz">"Konnektoren"
2. Klicken Sie auf "Add Connector" und wählen Sie dann "Custom MCP Connector"
3. Create your Custom MCP Connector (Erstellen Sie Ihren benutzerdefinierten MCP-Connector)
   • Connector-Name: NuxtUI
   • Server-URL: https://ui.nuxt.com/mcp

OpenCode ist ein

Setup Anleitung:

1. In Ihrem Projektstamm erstellen Sie opencode.json
2. Fügen Sie folgende Konfiguration hinzu:

{
  "$schema": "https://opencode.ai/config.json",
  "mcp": {
    "nuxt-ui": {
      "type": "remote",
      "url": "https://ui.nuxt.com/mcp",
      "enabled": true
    }
  }
}

Visual Studio Bearbeiten

Setup Anweisungen:

1. VS-Code öffnen und auf die Befehlspalette zugreifen (Strg/Cmd + Shift + P)
2. Type "Preferences: Open Workspace Settings (JSON)" und wählen Sie es aus
3. Navigieren Sie zum .vscode-Ordner Ihres Projekts oder erstellen Sie einen, falls er nicht existiert
4. Erstellen oder bearbeiten Sie die mcp.json-Datei mit folgender Konfiguration:

{
  "servers": {
    "nuxt-ui": {
      "type": "http",
      "url": "https://ui.nuxt.com/mcp",
      "headers": {
        "X-MCP-Tools": "search-components,get-component"
      }
    }
  }
}

Entfernen Sie den headers-Eintrag, um alle Nuxt UI MCP-Tools verfügbar zu machen.

Windsurf (englisch)

Setup-Anleitung:

1. Open Windsurf and navigate to "Settings">"Windsurf Settings">"Cascade"(Windsurf-Einstellungen)
2. Klicken Sie auf die Schaltfläche "MCPs verwalten" und wählen Sie dann die Option "Raw-Konfiguration anzeigen"
3. Fügen Sie den MCP-Einstellungen die folgende Konfiguration hinzu:

{
  "mcpServers": {
    "nuxt-ui": {
      "serverUrl": "https://ui.nuxt.com/mcp"
    }
  }
}

Zed Bearbeiten

Setup-Anweisungen:

1. Öffnen Sie Zed und gehen Sie zu "Einstellungen">"Einstellungen öffnen"
2. Navigieren Sie zur Datei JSON-Einstellungen
3. Fügen Sie die folgende Kontextserver-Konfiguration zu Ihren Einstellungen hinzu:

{
  "context_servers": {
    "nuxt-ui": {
      "url": "https://ui.nuxt.com/mcp"
    }
  }
}

Beispiele

Nach der Konfiguration können Sie Ihrem KI-Assistenten Fragen stellen wie:

• "Alle verfügbaren Nuxt UI-Komponenten auflisten"
• "Dokumentation der Button-Komponente abrufen"
• "Zeig mir nur die Button-Anwendungsbeispiele"
• "Welche Requisiten akzeptiert die Eingabe?"
• "Formularbezogene Komponenten finden"
• "Suche nach Pfeil-Icons in Lucide"
• "Dashboard-Vorlagen auflisten"
• "Anleitung zum Einrichten der Vorlage abrufen"
• "Installationsanleitung anzeigen"
• "Holen Sie sich die Migrationsanleitung"
• "Liste alle Beispiele auf"
• "ContactForm-Beispielcode abrufen"

Der KI-Assistent wird den MCP-Server verwenden, um strukturierte JSON-Daten abzurufen und während der Entwicklung eine geführte Unterstützung für die Nuxt-Benutzeroberfläche bereitzustellen.