MCP — Utiliser le package @udixio/mcp

Déprécié. @udixio/mcp embarque un instantané figé de la doc et du thème au moment de son build, qui se périme à chaque évolution de la librairie. Pour connecter un agent IA à Udixio UI aujourd’hui, utilisez plutôt le plugin Claude Code/Codex ou la doc en markdown, qui lisent toujours des données à jour. Ce guide reste disponible pour les clients MCP qui n’ont pas d’autre option d’intégration.

Ce guide explique comment utiliser le serveur MCP pour exposer aux assistants IA (Claude Desktop, Cursor, MCP Inspector, etc.) les informations de la librairie UI :

• Liste des composants du design system
• Recherche dans la documentation (MD/MDX)
• Tokens de thème (couleurs, espaces, etc.)
• Accès à des fichiers de doc via une resource doc://{path}

Le serveur MCP est publié sous le nom npm public @udixio/mcp et expose un binaire udixio-mcp.

Prérequis

• Node.js ≥ 18

Le package @udixio/mcp est auto‑contenu: il embarque un instantané (docs, thème, index des composants) et fonctionne sans aucune configuration.

Utilisation (zéro setup)

# Installer le binaire globalement
npm i -g @udixio/mcp

# Lancer le serveur MCP (utilise les données embarquées)
udixio-mcp

Intégration côté client (ex. Claude Desktop):

{
  "mcpServers": {
    "udixio-ui": { "command": "udixio-mcp" }
  }
}

Outils MCP exposés (Tools)

Le serveur enregistre plusieurs « tools » accessibles côté client MCP :

• listComponents — retourne la liste des composants et leurs fichiers source relatifs (données embarquées).
• getComponentDoc — prend { name: string } et renvoie des chemins de doc/story correspondants (données embarquées).
• searchDocs — prend { query: string, limit?: number } et effectue une recherche plein texte dans la documentation embarquée.
• getThemeTokens — renvoie l’objet de thème issu du snapshot embarqué.

Exemple d’appel (depuis un client MCP) :

{
  "tool": "searchDocs",
  "input": { "query": "Button", "limit": 5 }
}

Resources MCP

Une resource est enregistrée pour lire directement des fichiers de doc par chemin relatif à apps/doc/src :

• Template: doc://{path}
• Exemple: doc://components/button.mdx

Intégration avec un client MCP (Claude Desktop)

Ajoutez/éditez votre configuration utilisateur pour déclarer le serveur MCP. Exemple minimal :

{
  "mcpServers": {
    "udixio-ui": {
      "command": "udixio-mcp"
    }
  }
}

Ensuite, dans le client, demandez par exemple :

• « Appelle listComponents »
• « Recherche dans la doc: searchDocs avec query=colors »
• « Donne-moi les tokens de thème via getThemeTokens »
• « Ouvre la resource doc://path/vers/un/fichier.mdx »