21st.dev

Claude Code

1. Lancez ceci dans un terminal, dans le dossier de votre projet :

claude mcp add --transport http 21st-dev https://21st.dev/api/mcp

1. Démarrez Claude Code, tapez /mcp, choisissez 21st-dev puis Authenticate. Une fenêtre de navigateur s’ouvre pour la connexion à 21st.dev.

Ajoutez --scope user pour le rendre disponible dans tous vos projets, pas seulement celui-ci.

Claude Desktop

1. Ouvrez Settings → Connectors et cliquez sur Add custom connector.
2. Nommez-le 21st.dev et collez cette URL :

https://21st.dev/api/mcp

1. Cliquez sur Add, puis sur Connect, et connectez-vous quand 21st.dev le demande.

Le fichier de configuration JSON de Claude Desktop ne lance que des serveurs locaux. Les serveurs distants passent par les Connectors, et les connecteurs ajoutés sur claude.ai apparaissent aussi ici.

claude.ai

1. Ouvrez le formulaire des connecteurs sur claude.ai. Ce bouton remplit le nom et l’URL pour vous :

Ajouter à claude.ai (s’ouvre dans un nouvel onglet)

1. Vérifiez que l’URL est https://21st.dev/api/mcp et cliquez sur Add.
2. Cliquez sur Connect et connectez-vous quand 21st.dev le demande.

Les offres gratuites permettent un connecteur personnalisé. Sur les offres Team et Enterprise, un propriétaire l’ajoute dans Organization settings → Connectors.

ChatGPT

1. Sur chatgpt.com, ouvrez Settings → Security and login et activez Developer mode.
2. Allez sur chatgpt.com/plugins et cliquez sur + pour créer une application pour un serveur MCP distant.
3. Collez https://21st.dev/api/mcp comme URL du serveur et choisissez OAuth. ChatGPT vous envoie chez 21st.dev pour vous connecter.

Le mode développeur est disponible sur le web pour les comptes Plus, Pro, Business, Enterprise et Education.

Cursor

Ajouter à Cursor (s’ouvre dans un nouvel onglet)

Ou ajoutez-le à la main dans ~/.cursor/mcp.json (tous les projets) ou .cursor/mcp.json (ce projet) :

{
  "mcpServers": {
    "21st-dev": {
      "url": "https://21st.dev/api/mcp"
    }
  }
}

Cursor affiche Needs login à côté du serveur. Cliquez dessus pour vous connecter.

VS Code

Installer dans VS Code (s’ouvre dans un nouvel onglet)

Ou depuis un terminal :

code --add-mcp '{"name":"21st-dev","type":"http","url":"https://21st.dev/api/mcp"}'

Ou committez-le dans le dépôt, dans .vscode/mcp.json :

{
  "servers": {
    "21st-dev": {
      "type": "http",
      "url": "https://21st.dev/api/mcp"
    }
  }
}

VS Code vous demande de vous connecter au premier démarrage du serveur.

Devin Desktop

1. Ajoutez-le à ~/.config/devin/mcp_config.json (macOS et Linux) ou %APPDATA%\devin\mcp_config.json (Windows) :

{
  "mcpServers": {
    "21st-dev": {
      "serverUrl": "https://21st.dev/api/mcp"
    }
  }
}

1. Actualisez la liste des serveurs MCP dans Cascade et connectez-vous quand c’est demandé.

Devin Desktop est le nouveau nom de Windsurf. Pour les serveurs distants, il lit serverUrl (ou url).

Codex

codex mcp add 21st-dev --url https://21st.dev/api/mcp
codex mcp login 21st-dev

Ou modifiez directement ~/.codex/config.toml :

[mcp_servers.21st-dev]
url = "https://21st.dev/api/mcp"

Gemini CLI

gemini mcp add --transport http 21st-dev https://21st.dev/api/mcp

Puis, dans Gemini CLI, lancez /mcp auth 21st-dev pour vous connecter.

Cela l’ajoute au projet en cours. Ajoutez -s user pour l’utiliser partout.

Tout client

La plupart des clients acceptent cette forme. Certains nomment autrement le champ de l’URL : serverUrl dans Devin Desktop, httpUrl dans le fichier de réglages de Gemini CLI.

{
  "mcpServers": {
    "21st-dev": {
      "type": "http",
      "url": "https://21st.dev/api/mcp"
    }
  }
}

Zed place les serveurs sous context_servers dans ses réglages. Cline a besoin de "type": "streamableHttp", sinon il suppose SSE.

Votre client ne lance que des serveurs locaux ? Reliez-le avec npx -y mcp-remote https://21st.dev/api/mcp.

Badge pour README

[![21st.dev on mcp.tc](https://mcp.tc/i/21st-dev/badge.svg)](https://mcp.tc/i/21st-dev)

<a href="https://mcp.tc/i/21st-dev"><img src="https://mcp.tc/i/21st-dev/badge.svg" alt="21st.dev on mcp.tc" height="20"></a>

Il suit le mode clair ou sombre du lecteur. Ajoutez ?theme=light ou ?theme=dark pour le fixer, ou ?style=compact pour afficher le symbole sans le nom.

Carte pour site web

<script src="https://mcp.tc/w/21st-dev.js" async></script>

La carte apparaît à l’endroit de la balise. Ajoutez data-theme="dark" ou data-size="compact" à la balise pour la modifier. Le fichier contient tout ce qu’il lui faut : il ne fait aucune autre requête et ne dépose aucun cookie.

iframe

<iframe src="https://mcp.tc/embed/21st-dev" title="21st.dev on mcp.tc" width="420" height="200" loading="lazy" allow="clipboard-write" style="border:0;border-radius:8px;max-width:100%"></iframe>

Utilisez-la sur les pages qui n’autorisent pas les scripts. Ajoutez ?theme=light ou ?theme=dark à l’adresse pour fixer les couleurs.

JSON

La fiche sous forme de données pour vos pages et vos outils : nom, accroche, URL du serveur, outils et liens « Add to ». N’importe quel site peut la lire (CORS ouvert).

https://mcp.tc/i/21st-dev.json

Ce que signifie chaque champ