Zur App

DokumentationIntegrationen

21st.dev mit eigenem API-Schlüssel verbinden

Suche UI-Komponenten und Designinspiration über den offiziellen 21st-MCP mit deinem eigenen 21st.dev-Konto.

3 Min LesezeitAktualisiert am

Was du nutzen kannst

21st stellt unter anderem Komponentensuche, Designvorlagen und Codeabruf bereit. Die tatsächlich verfügbaren Werkzeuge hängen von deinem Konto ab. KI-Generierung benötigt zusätzlich den passenden 21st-Zugang und kann Guthaben verbrauchen.

Über den Katalog verbinden

  1. 01Erstelle unter https://21st.dev/mcp einen aktuellen API-Schlüssel in deinem eigenen Konto.
  2. 02Öffne Apps > Konnektoren, suche 21st.dev und wähle Verbinden.
  3. 03Füge deinen Schlüssel ein. Die Serveradresse und der Header x-api-key sind bereits hinterlegt.
  4. 04Teste die Verbindung und speichere sie anschließend. Danach steht sie auch in Workflow-Schritten zur Verfügung.

Du bringst deinen eigenen Schlüssel mit. Nutzung und Abrechnung laufen über dein 21st.dev-Konto. Alte Magic-Schlüssel wurden zurückgesetzt und müssen neu erstellt werden.

Alternativ als JSON importieren

Du kannst dieselbe Verbindung als eigenen MCP importieren. Das Standardformat mcpServers funktioniert auch in einem JSON-Codeblock. Ersetze den Platzhalter durch deinen eigenen Schlüssel.

{
  "mcpServers": {
    "21st": {
      "url": "https://21st.dev/api/mcp",
      "headers": {
        "x-api-key": "YOUR_21ST_API_KEY"
      }
    }
  }
}
  1. 01Füge einen benutzerdefinierten MCP hinzu und wähle JSON importieren.
  2. 02Füge die Konfiguration ein und wähle Konfiguration einlesen.
  3. 03Prüfe die erkannten Angaben und wähle Ins Formular übernehmen.
  4. 04Prüfe deinen Schlüssel, teste die Verbindung und speichere. Ein npx-Paket ist für diesen gehosteten Server nicht nötig.

Zugriff und Werkzeuge

Der entfernte Server liefert die Werkzeugliste. Die Verbindung ist deshalb nicht auf Lesen beschränkt. Prüfe Schreibaktionen und kostenpflichtige Generierung vor der Freigabe. Dein 21st-Konto legt fest, welche Funktionen du nutzen darfst.

Offizielle Einrichtung

Verwandte Artikel