Serveur MCP

Le serveur se trouve à l’adresse https://www.design-extractor.com/api/mcp, parle le streamable HTTP et accepte deux types d’identifiants : une connexion avec votre compte via le flux d’autorisation MCP standard (OAuth 2.1), ou une clé API personnelle envoyée sous la forme Authorization: Bearer dx_.... Grâce à lui, un agent peut lancer l’extraction d’un site public, attendre qu’elle se termine, lire le DESIGN.md final, consulter le prix et votre solde, et lister vos extractions précédentes. Le résultat apparaît aussi dans Mes extractions, comme toute autre extraction.

Pour Claude Code et Codex, il existe aussi un plugin qui associe le serveur à un skill apply-designmd : il guide l’agent pour extraire un site de référence et reporter les tokens sur Tailwind, des variables CSS ou un fichier de tokens. Code source et notes d’installation sur Magentix-Studio/design-extractor-plugin.

claude.ai, Claude Desktop, ChatGPT, Claude Code et Codex se connectent sans clé : le client découvre la connexion à partir de l’URL du serveur, vous autorisez une fois dans le navigateur, et le client conserve un token qu’il renouvelle seul. Rien à coller, rien à renouveler.

1. 1

   Ajoutez l’URL du serveur dans les paramètres des connecteurs

   claude.ai et Claude Desktop : Paramètres, Connecteurs, Ajouter un connecteur personnalisé, puis collez https://www.design-extractor.com/api/mcp. ChatGPT : Paramètres, Connecteurs, Créer, avec la même URL.

2. 2

   Autorisez l’accès sur la page de consentement

   Le client ouvre Design Extractor dans le navigateur. Connectez-vous si ce n’est pas déjà fait, vérifiez ce que demande l’agent et autorisez-le. Les extractions qu’il lance consomment vos crédits comme toutes les autres.

3. 3

   Demandez un site

   « Extrais le design de stripe.com » suffit. L’agent apparaît sous Agents connectés sur la page de votre compte, où un clic suffit pour le déconnecter. Un connecteur ajouté dans claude.ai apparaît aussi automatiquement dans Claude Code : une seule autorisation couvre les deux.

Claude Code et Codex se connectent de la même façon depuis le terminal : ajoutez le serveur sans clé et authentifiez-vous quand le client le demande. Les commandes exactes se trouvent sous Claude Code et Codex.

Une seule commande enregistre le serveur pour le projet en cours, sans clé. Ajoutez --scope user pour l’avoir dans tous vos projets.

claude mcp add --transport http design-extractor https://www.design-extractor.com/api/mcp

Lancez ensuite /mcp, choisissez design-extractor puis Authenticate. Connectez-vous et autorisez l’accès sur la page qui s’ouvre ; Claude Code conserve le token et le renouvelle seul.

Ou installez le plugin, qui ajoute le serveur et le skill apply-designmd. Son serveur se connecte de la même façon : après l’installation, lancez /mcp, choisissez le serveur du plugin et authentifiez-vous.

/plugin marketplace add Magentix-Studio/design-extractor-plugin
/plugin install design-extractor@design-extractor

Pour utiliser plutôt une clé API, sur une machine qui ne peut pas ouvrir de navigateur, passez-la dans un en-tête et sautez l’étape d’authentification.

claude mcp add --transport http design-extractor https://www.design-extractor.com/api/mcp \
  --header "Authorization: Bearer dx_..."

Vérifiez que /mcp affiche design-extractor comme connecté. Les outils s’appellent mcp__design-extractor__extract_design, etc., après claude mcp add, et mcp__plugin_design-extractor_design-extractor__extract_design quand le serveur vient du plugin.

Ajoutez le serveur sans clé et Codex ouvre aussitôt la page de connexion. Connectez-vous et autorisez l’accès sur la page qui s’ouvre ; codex mcp login design-extractor permet de recommencer plus tard si besoin.

codex mcp add design-extractor --url https://www.design-extractor.com/api/mcp

Ou installez le même plugin depuis sa marketplace. Dans la CLI Codex, /plugins ouvre le navigateur où les entrées de la marketplace s’installent et s’activent ; si son serveur demande une authentification, codex mcp login design-extractor ouvre la page de connexion.

codex plugin marketplace add Magentix-Studio/design-extractor-plugin
codex plugin add design-extractor@design-extractor

Pour utiliser plutôt une clé API, indiquez le nom de la variable d’environnement qui la contient et exportez-la dans le shell depuis lequel vous lancez Codex ; sinon, le serveur apparaît en échec avec zéro outil.

export DESIGN_EXTRACTOR_API_KEY=dx_...

codex mcp add design-extractor --url https://www.design-extractor.com/api/mcp \
  --bearer-token-env-var DESIGN_EXTRACTOR_API_KEY

La même déclaration à la main dans ~/.codex/config.toml ; pour mettre la clé directement dans le fichier, utilisez plutôt http_headers = { "Authorization" = "Bearer dx_..." }.

[mcp_servers.design-extractor]
url = "https://www.design-extractor.com/api/mcp"
bearer_token_env_var = "DESIGN_EXTRACTOR_API_KEY"

Ajoutez le serveur à .cursor/mcp.json dans le projet, ou à ~/.cursor/mcp.json pour tous les projets. Cursor accepte aussi ${env:DESIGN_EXTRACTOR_API_KEY} dans la valeur de l’en-tête si vous préférez garder la clé hors du fichier.

{
  "mcpServers": {
    "design-extractor": {
      "url": "https://www.design-extractor.com/api/mcp",
      "headers": {
        "Authorization": "Bearer dx_..."
      }
    }
  }
}

Passez le serveur dans options.mcpServers avec type: "http" et l’en-tête, et autorisez ses outils avec un joker pour que l’agent puisse les appeler sans demande d’autorisation.

import { query } from "@anthropic-ai/claude-agent-sdk";

for await (const message of query({
  prompt: "Extract the design system of https://example.com and summarize its colors",
  options: {
    mcpServers: {
      "design-extractor": {
        type: "http",
        url: "https://www.design-extractor.com/api/mcp",
        headers: {
          Authorization: `Bearer ${process.env.DESIGN_EXTRACTOR_API_KEY}`,
        },
      },
    },
    allowedTools: ["mcp__design-extractor__*"],
  },
})) {
  if (message.type === "result" && message.subtype === "success") {
    console.log(message.result);
  }
}

Une extraction via le serveur coûte exactement la même chose que sur le site. Lite extrait une page, Pro échantillonne les pages clés du site. Les prix actuels viennent de get_pricing (6 crédits pour Lite et 10 pour Pro au moment de la rédaction) et votre solde de get_credits. Quand le solde ne couvre pas le mode, extract_design refuse et l’indique ; rechargez sur la page Tarifs.

Demander un site que vous avez extrait récemment réutilise votre extraction au lieu d’en lancer une nouvelle, et la réponse indique qu’aucun crédit n’a été débité ; un site extrait uniquement par d’autres personnes coûte quand même le prix de son mode. Lancez d’abord list_my_extractions pour voir ce qui existe déjà.

Certains sites ne répondent qu’aux visiteurs de certains pays. Quand une extraction échoue pour cette raison, get_extraction liste les pays depuis lesquels la page se charge, et l’agent peut réessayer avec extract_design et country. Une extraction depuis un autre pays coûte le prix du mode plus un supplément, tous deux indiqués par get_pricing.