MCP serveur

Qu 'est-ce que le MCP?

MCP (Model Context Protocol) est un protocole standardisé qui permet aux assistants d'IA d'accéder à des sources de données et à des outils externes. Nuxt UI fournit un serveur MCP qui permet aux assistants d'IA tels que Claude Code, Cursor et Windsurf d'accéder directement aux informations sur les composants, au code source et aux exemples d'utilisation.

Le serveur MCP fournit un accès structuré à notre bibliothèque de composants, ce qui permet aux outils d'IA de comprendre et d'aider au développement de l'interface utilisateur Nuxt.

Les ressources disponibles

Le serveur Nuxt UI MCP fournit les ressources suivantes pour la découverte:

• resource://nuxt-ui/components: Parcourir tous les composants disponibles avec des catégories
• resource://nuxt-ui/composables: Parcourir tous les composables disponibles avec des catégories
• resource://nuxt-ui/examples: Parcourir tous les exemples de code disponibles
• resource://nuxt-ui/templates: Parcourir tous les modèles de projet disponibles
• resource://nuxt-ui/documentation-pages: Parcourir toutes les pages de documentation disponibles

Vous pouvez accéder à ces ressources avec des outils comme Claude Code en utilisant @.

Outils disponibles

Le serveur Nuxt UI MCP fournit les outils suivants, organisés par catégorie:

Search Outils de recherche

• search-components: recherche de composants par nom, catégorie ou intention. Les noms alternatifs tels que "segmented control" ou "combobox" sont appariés et les résultats sont classés par pertinence. Sans paramètres, répertorie tous les composants
• search-composables: Recherche de composables par nom ou description. Sans paramètres, répertorie tous les composables
• search-icons: Recherche d'icônes dans les collections Iconify (par défaut lucide). Renvoie les noms d'icônes au format i-{prefix}-{name} utilisé par l'interface utilisateur Nuxt.

Composants Outils

• get-component: Récupère la documentation et les détails des composants. Supporte un paramètre sections (usage, examples, api, theme, changelog) pour récupérer uniquement des pièces spécifiques et réduire la taille de la réponse.
• get-component-metadata: Récupère les métadonnées d'un composant, y compris les props, les slots et les événements (léger, sans contenu de documentation). Les props sont compacts par défaut, passez full: true pour les schémas de prop récursifs bruts

Outils de documentation

• search-documentation: Rechercher les pages de documentation par titre, description ou section. Sans paramètres, répertorie toutes les pages. Utiliser section pour filtrer (par exemple, "getting-started", "components")
• get-documentation-page: Récupère le contenu de la page de documentation par chemin URL. Supporte un paramètre headings pour récupérer uniquement des sections h2 spécifiques (par exemple ["Usage", "API"]) et réduire la taille de la réponse.

Outils de modèle

• list-templates: répertorie tous les modèles d'interface utilisateur Nuxt disponibles avec filtrage optionnel du cadre
• get-template: Récupère la description, les caractéristiques et les liens d'un modèle

Exemples d'outils

• list-examples: liste les noms de tous les exemples d'interface utilisateur disponibles
• get-example: Récupère le code source d'un exemple d'interface utilisateur

Outils de migration

• get-migration-guide: Récupère le guide de migration et les instructions de mise à niveau pour cette version de Nuxt UI

Limit Outils disponibles

Définissez l'en-tête HTTP optionnel X-MCP-Tools sur une liste de noms d'outils séparés par des virgules pour n'exposer que les outils dont votre assistant a besoin.

Utilisez les noms exacts des outils MCP kebab-case, par exemple:

{
  "X-MCP-Tools": "search-components,get-component"
}

Aucun en-tête n'expose tous les outils, un en-tête vide n'expose aucun outil, et un nom d'outil inconnu renvoie une erreur de configuration.

Prompts disponibles

Le serveur MCP Nuxt UI fournit des invites guidées pour les flux de travail courants:

• find-component-for-usecase: Trouvez le meilleur composant pour votre cas d'utilisation spécifique
• implement-component-with-props: Générer une implémentation complète des composants avec les props appropriés
• setup-project-with-template: Obtenez des instructions de configuration guidées pour les modèles de projet

Vous pouvez accéder à ces ressources avec des outils comme Claude Code en utilisant /.

Configuration

The Nuxt UI MCP server uses HTTP transport and can be configured in different AI assistants.

chatgpt

Suivez ces étapes pour configurer l'interface utilisateur Nuxt en tant que connecteur dans ChatGPT:

1. x**Activer le mode développeur: **
   • Aller dans "Paramètres">"Connecteurs">"Paramètres avancés">"Mode développeur"
2. **Ouvrir ChatGPT réglages **
3. **Dans l'onglet Connecteurs, créez un nouveau connecteur: **
   • Donnez-lui un nom: Nuxt UI URL du serveur - MCP: https://ui.nuxt.com/mcp Authentification: None
4. Cliquez sur Create

Le connecteur Nuxt UI apparaîtra dans l'outil "Développeur" du compositeur plus tard pendant les conversations.

claude code

Ajoutez le serveur à l'aide de la commande CLI:

claude mcp add --transport http nuxt-ui https://ui.nuxt.com/mcp

Claude Desktop pour PC

Instructions d'installation #### :

1. Ouvrez Claude Desktop et accédez à "Paramètres">"Développeur".
2. Cliquez sur "Edit Config". Cela ouvrira le répertoire local Claude.
3. Modifiez le fichier claude_desktop_config.json avec votre configuration de serveur MCP personnalisée.

{
  "mcpServers": {
    "nuxt-ui": {
      "command": "npx",
      "args": [
        "mcp-remote",
        "https://ui.nuxt.com/mcp"
      ]
    }
  }
}

4. Redémarrer l'application Claude Desktop. Le serveur MCP Nuxt UI devrait maintenant être enregistré.

curseur

Installation rapide:

Cliquez sur le bouton ci-dessous pour installer le serveur MCP Nuxt UI directement dans Cursor:

Instructions d'installation manuelle:

1. Ouvrez le curseur et allez dans "Paramètres">"Outils et MCP"
2. Ajouter la configuration du serveur Nuxt UI MCP

Ou créer/mettre à jour manuellement .cursor/mcp.json dans la racine de votre projet:

{
  "mcpServers": {
    "nuxt-ui": {
      "type": "http",
      "url": "https://ui.nuxt.com/mcp"
    }
  }
}

Gemini CLI électronique

Instructions d'installation:

1. Localisez votre fichier de configuration Gemini CLI (généralement, comme spécifié dans votre environnement).
2. Ajoutez la configuration suivante à votre objet mcpServers:

{
  "mcpServers": {
    "nuxt-ui": {
      "httpUrl": "https://ui.nuxt.com/mcp"
    }
  }
}

3. Redémarrez votre session de terminal ou rechargez la CLI. Les outils de serveur MCP de l'interface utilisateur Nuxt seront maintenant disponibles.

GitHub Agent de copilote

Si vous avez déjà configuré des serveurs MCP dans Visual Studio Code, remplacez la clé servers par mcpServers et ajoutez une clé tools spécifiant quels outils sont disponibles pour Copilot.

Instructions d'installation:

1. Naviguer vers votre référentiel GitHub
2. Aller à Settings> Code & automation> Copilot> Coding agent
3. Dans la section configuration**MCP, ajoutez la configuration suivante:

{
  "mcpServers": {
    "nuxt-ui": {
      "type": "http",
      "url": "https://ui.nuxt.com/mcp",
      "tools": ["*"]
    }
  }
}

4. Click Sauvegarde

Valider la configuration:

Pour vérifier que le serveur MCP est correctement configuré:

1. Créer un problème dans votre dépôt et l'affecter à Copilot
2. Attendre que le copilote crée une pull request
3. Dans la pull request, cliquez sur Afficher la session dans l'événement "Copilote a commencé à travailler".
4. Cliquez sur le bouton ellipse (...) en haut à droite, puis cliquez sur Copilote dans la barre latérale
5. Développez l'étape Démarrer les serveurs MCP pour afficher les outils Nuxt configurés

Pour plus d'informations sur l'utilisation de MCP avec l'agent de codage GitHub Copilot, consultez l'agent de codage Extend avec MCP.

GitHub Copilot CLI pour

Instructions d'installation #### :

1. Démarrer GitHub Copilot CLI en mode interactif.
2. Exécutez /mcp add.
3. Remplir le formulaire de configuration avec:
   • Serveur Name: nuxt-ui
   • Serveur Type: HTTP
   • xURL: https://ui.nuxt.com/mcp
   • HTTP Headers: laisser vide
   • **Outils **: *
4. Appuyez sur Ctrl + S pour enregistrer. Le serveur MCP est disponible immédiatement sans redémarrer la CLI.

Ou ajoutez le serveur directement à ~/.copilot/mcp-config.json:

{
  "mcpServers": {
    "nuxt-ui": {
      "type": "http",
      "url": "https://ui.nuxt.com/mcp",
      "tools": ["*"]
    }
  }
}

Utilisez /mcp show pour vérifier que le serveur est configuré et disponible

Pour plus de détails, voir Adding MCP servers for GitHub Copilot CLI.

Google Antigravité

Instructions d'installation:

1. Ouvrez le magasin MCP via la liste déroulante "..." en haut du panneau de l'agent de l'éditeur.
2. Click on "Manage MCP Servers"
3. Cliquez sur "View raw config"
4. Modifier le mcp_config.json avec votre configuration de serveur MCP personnalisée:

{
  "mcpServers": {
    "nuxt-ui": {
      "serverUrl": "https://ui.nuxt.com/mcp"
    }
  }
}

5. Revenez à l'onglet "Gérer les serveurs MCP" et cliquez sur "Actualiser". Le serveur MCP Nuxt UI devrait maintenant apparaître.

XPH314xLe Chat Mistral

Instructions de configuration:

1. Naviguez dans "Intelligence">"Connecteurs"
2. Cliquez sur le bouton "Add Connector", puis sélectionnez "Custom MCP Connector"
3. Create votre connecteur MCP personnalisé: Nom du connecteur: NuxtUI URL du serveur: https://ui.nuxt.com/mcp

OpenCode

Instructions d'installation:

1. Dans votre projet racine, créez opencode.json
2. Ajoutez la configuration suivante:

{
  "$schema": "https://opencode.ai/config.json",
  "mcp": {
    "nuxt-ui": {
      "type": "remote",
      "url": "https://ui.nuxt.com/mcp",
      "enabled": true
    }
  }
}

Visual Studio pour Mac

Instructions d'installation #### :

1. Ouvrez le code VS et accédez à la palette de commandes (Ctrl/Cmd + Maj + P)
2. Tapez "Preferences: Open Workspace Settings (JSON)" et sélectionnez-le Accédez au dossier .vscode de votre projet ou créez-en un s'il n'existe pas
3. Créez ou modifiez le fichier mcp.json avec la configuration suivante:

{
  "servers": {
    "nuxt-ui": {
      "type": "http",
      "url": "https://ui.nuxt.com/mcp",
      "headers": {
        "X-MCP-Tools": "search-components,get-component"
      }
    }
  }
}

Supprimez l'entrée headers pour rendre tous les outils MCP de l'interface utilisateur Nuxt disponibles.

Windsurf électrique

Instructions d'installation #### :

1. Ouvrez Windsurf et naviguez dans "Paramètres">"Paramètres Windsurf">"Cascade"
2. Cliquez sur le bouton "Manage MCPs", puis sélectionnez l'option "View raw config"
3. Ajoutez la configuration suivante à vos paramètres MCP:

{
  "mcpServers": {
    "nuxt-ui": {
      "serverUrl": "https://ui.nuxt.com/mcp"
    }
  }
}

Zed équipé

Instructions d'installation:

1. Ouvrez Zed et allez dans "Paramètres">"Ouvrir les paramètres"
2. Naviguer vers le fichier de paramètres JSON
3. Ajoutez la configuration de serveur de contexte suivante à vos paramètres:

{
  "context_servers": {
    "nuxt-ui": {
      "url": "https://ui.nuxt.com/mcp"
    }
  }
}

Exemples d'utilisation

Une fois configuré, vous pouvez poser à votre assistant AI des questions telles que:

• "Liste tous les composants Nuxt disponibles"
• "Obtenir la documentation des composants du bouton"
• "Montrez-moi juste les exemples d'utilisation du bouton"
• "Quels sont les accessoires acceptés par Input?"
• "Trouver des composants liés aux formes"
• "Rechercher des icônes de flèches dans lucide"
• "Modèles de tableau de bord"
• "Obtenir les instructions de configuration du modèle"
• "Afficher le guide d'installation"
• "Obtenir le guide de migration"
• "Liste tous les exemples"
• "Obtenir un exemple de code ContactForm"

L'assistant IA utilisera le serveur MCP pour récupérer des données JSON structurées et fournira une assistance guidée pour l'interface utilisateur Nuxt pendant le développement.