Ouvrir l'app

DocumentationIntégrations

Connecter 21st.dev avec ta propre clé API

Recherche des composants UI et des idées de design via le MCP officiel de 21st avec ton propre compte 21st.dev.

3 min de lectureMis à jour le

Ce que tu peux utiliser

21st propose la recherche de composants, des modèles de design et la récupération de code. Les outils disponibles dépendent de ton compte. La génération par IA nécessite aussi l’accès 21st correspondant et peut consommer des crédits.

Connexion depuis le catalogue

  1. 01Crée une clé API actuelle dans ton compte sur https://21st.dev/mcp.
  2. 02Ouvre Apps > Connecteurs, recherche 21st.dev et choisis Connecter.
  3. 03Colle ta clé. L’adresse du serveur et l’en-tête x-api-key sont déjà configurés.
  4. 04Teste la connexion, puis enregistre-la. Tu peux aussi l’utiliser dans les étapes de workflow.

Utilise ta propre clé. L’utilisation et la facturation passent par ton compte 21st.dev. Les anciennes clés Magic ont été réinitialisées et doivent être recréées.

Autre possibilité : importer du JSON

Tu peux importer la même connexion comme MCP personnalisé. Le format standard mcpServers fonctionne aussi dans un bloc de code JSON. Remplace le texte indicatif par ta propre clé.

{
  "mcpServers": {
    "21st": {
      "url": "https://21st.dev/api/mcp",
      "headers": {
        "x-api-key": "YOUR_21ST_API_KEY"
      }
    }
  }
}
  1. 01Ajoute un MCP personnalisé et choisis Importer du JSON.
  2. 02Colle la configuration et choisis Lire la configuration.
  3. 03Vérifie les paramètres détectés et applique-les au formulaire.
  4. 04Vérifie ta clé, teste la connexion et enregistre-la. Ce serveur hébergé ne nécessite pas de paquet npx.

Accès et outils

Le serveur distant fournit la liste des outils. La connexion ne se limite donc pas à la lecture. Vérifie les actions d’écriture et la génération payante avant de les autoriser. Ton compte 21st détermine les fonctions accessibles.

Configuration officielle

Articles liés