MCP-server

Wat is MCP?

MCP (Model Context Protocol) is een gestandaardiseerd protocol waarmee AI-assistenten toegang hebben tot externe gegevensbronnen en tools. Nuxt UI biedt een MCP-server waarmee AI-assistenten zoals Claude Code, Cursor en Windsurf rechtstreeks toegang hebben tot componentinformatie, broncode en gebruiksvoorbeelden.

De MCP-server biedt gestructureerde toegang tot onze componentenbibliotheek, waardoor AI-tools gemakkelijk de ontwikkeling van Nuxt UI kunnen begrijpen en helpen.

Beschikbare bronnen

De Nuxt UI MCP-server biedt de volgende bronnen voor ontdekking:

• resource://nuxt-ui/components: Blader door alle beschikbare componenten met categorieën
• resource://nuxt-ui/composables: Blader door alle beschikbare composables met categorieën
• resource://nuxt-ui/examples: Blader door alle beschikbare codevoorbeelden
• resource://nuxt-ui/templates: Blader door alle beschikbare projectsjablonen
• resource://nuxt-ui/documentation-pages: Blader door alle beschikbare documentatiepagina 's

Je hebt toegang tot deze bronnen met tools zoals Claude Code met @.

Beschikbare hulpmiddelen

De Nuxt UI MCP-server biedt de volgende tools per categorie:

Hulpmiddelen zoeken

• search-components: Zoek componenten op naam, categorie of intentie. Alternatieve namen zoals "segmented control" of "combobox" komen overeen en de resultaten worden gerangschikt op relevantie. Zonder params worden alle componenten vermeld
• search-composables: Zoek composables op naam of beschrijving. Zonder params, geeft alle composables weer
• search-icons: Zoek naar pictogrammen in Iconify-collecties (standaard lucide). Retourneert pictogramnamen in het i-{prefix}-{name}-formaat dat wordt gebruikt door Nuxt UI

Component Gereedschap

• get-component: Haalt componentdocumentatie en details op. Ondersteunt een sections-parameter (usage, examples, api, theme, changelog) om alleen specifieke onderdelen op te halen en de responsgrootte te verkleinen
• get-component-metadata: Haalt metagegevens op voor een component inclusief rekwisieten, slots en evenementen (lichtgewicht, geen documentatie-inhoud). Props zijn standaard compact, geef full: true door voor de ruwe recursieve prop-schema 's

Documentation Gereedschappen

• search-documentation: Zoek documentatiepagina 's op titel, beschrijving of sectie. Zonder params, geeft alle pagina 's weer. Gebruik section om te filteren (bijv. "getting-started", "components")
• get-documentation-page: Haalt de inhoud van de documentatiepagina op per URL-pad. Ondersteunt een headings-parameter om alleen specifieke h2-secties op te halen (bijv. ["Usage", "API"]) en de responsgrootte te verkleinen

Template Gereedschap

• list-templates: geeft een overzicht van alle beschikbare Nuxt UI-sjablonen met optionele framefiltering
• get-template: Haalt de beschrijving, functies en links van een sjabloon op

Voorbeeld Gereedschap

• list-examples: geeft de namen weer van alle beschikbare UI-voorbeelden
• get-example: Haalt de broncode van een UI-voorbeeld op

Migratie Hulpmiddelen

• get-migration-guide: Haalt de migratiehandleiding en upgrade-instructies voor deze versie van Nuxt UI op

Beperk beschikbare tools

Stel de optionele X-MCP-Tools HTTP-header in op een door komma 's gescheiden lijst met gereedschapsnamen om alleen de tools weer te geven die uw assistent nodig heeft. Dit helpt om de context die in uw assistent is gedefinieerd te verminderen.

Gebruik de exacte MCP-gereedschapsnamen voor kebab-cases, bijvoorbeeld:

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

Geen enkele koptekst geeft alle tools weer, een lege koptekst geeft geen tools weer en een onbekende toolnaam retourneert een configuratiefout.

Beschikbare Prompts

De Nuxt UI MCP-server biedt begeleide prompts voor veelvoorkomende workflows:

• find-component-for-usecase: Vind het beste onderdeel voor uw specifieke use-case
• implement-component-with-props: Genereer volledige componentimplementatie met de juiste rekwisieten
• setup-project-with-template: Ontvang instructies voor projectsjablonen

Je hebt toegang tot deze bronnen met tools zoals Claude Code met /.

Configuration

De Nuxt UI MCP-server maakt gebruik van HTTP-transport en kan worden geconfigureerd in verschillende AI-assistenten.

ChatGPT

Volg deze stappen om Nuxt UI in te stellen als een connector binnen ChatGPT:

1. **Enable Ontwikkelaarsmodus: **

• Ga naar "Instellingen" > "Connectors" > "Geavanceerde instellingen" > "Ontwikkelaarsmodus"

2. Open ChatGPT instellingen
3. **Maak op het tabblad Connectors een nieuwe connector: **

• Geef het een naam: Nuxt UI
• MCP server URL: https://ui.nuxt.com/mcp
• Authentication: None

4. Klik op Create

De Nuxt UI-connector verschijnt later tijdens gesprekken in de tool 'Ontwikkelaarsmodus' van de componist.

Claude-code

Voeg de server toe met het CLI-commando:

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

Claude Bureaublad

Setup instructies:

1. Open Claude Desktop en navigeer naar "Instellingen" > "Ontwikkelaar".
2. Klik op "Edit Config". Hiermee wordt de lokale Claude directory geopend.
3. Wijzig het claude_desktop_config.json-bestand met uw aangepaste MCP-serverconfiguratie.

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

4. Claude Desktop-app opnieuw opstarten. De Nuxt UI MCP-server moet nu worden geregistreerd.

Cursor

Snel installeren:

Klik op de onderstaande knop om de Nuxt UI MCP-server rechtstreeks in Cursor te installeren:

Handmatige installatie instructies:

1. Open Cursor en ga naar "Instellingen" > "Extra & MCP"
2. Voeg de configuratie van de Nuxt UI MCP-server toe

Of maak / update .cursor/mcp.json handmatig in je project root:

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

Gemini CLI bewerken

Setup instructies:

1. Zoek uw Gemini CLI-configuratiebestand (meestal ~ / .gemini / settings.json of zoals gespecificeerd in uw omgeving).
2. Voeg de volgende configuratie toe aan uw mcpServers-object:

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

3. Start uw terminalsessie opnieuw of laad de CLI opnieuw. De Nuxt UI MCP-servertools zijn nu beschikbaar voor gebruik.

GitHub Copiloot Agent

Als u al MCP-servers hebt geconfigureerd in Visual Studio Code, vervangt u de servers-sleutel door mcpServers en voegt u een tools-sleutel toe die aangeeft welke tools beschikbaar zijn voor Copilot.

Setup instructies:

1. Navigeer naar je GitHub repository
2. Ga naar Settings > Code & automatisering > Copilot > Codeeragent
3. Voeg in de sectie MCP configuration de volgende configuratie toe:

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

4. Klik op Opslaan

De configuratie valideren:

Om te controleren of de MCP-server correct is geconfigureerd:

1. Maak een probleem in uw repository en wijs het toe aan Copilot
2. Wacht tot Copilot een pull-verzoek maakt
3. Klik in het pull-verzoek op Sessie bekijken in de tijdlijngebeurtenis 'Copilot gestart werk'
4. Klik op de ellipsknop (...) rechtsboven, klik dan op Copilot in de zijbalk
5. Vouw de stap Start MCP Servers uit om de geconfigureerde Nuxt-tools te zien

Zie Extend coding agent met MCP voor meer informatie over het gebruik van MCP met GitHub Copilot coding agent.

GitHub Copilot CLI bewerken

Setup instructies:

1. Start GitHub Copilot CLI in interactieve modus.
2. Uitvoeren /mcp add.
3. Vul het configuratieformulier in met:

• Server Name: nuxt-ui
• Server Type: HTTP
• URL: https://ui.nuxt.com/mcp
• HTTP Headers: leeg laten
• Tools: *

4. Druk Ctrl+S om op te slaan. De MCP-server is onmiddellijk beschikbaar zonder de CLI opnieuw op te starten.

Of voeg de server direct toe aan ~/.copilot/mcp-config.json:

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

Gebruik /mcp show om te bevestigen dat de server is geconfigureerd en beschikbaar is.

Zie MCP-servers toevoegen voor GitHub Copilot CLI voor meer informatie.

Google antizwaartekracht

Setup instructies:

1. Open de MCP-winkel via de "..."dropdown bovenaan het agentpaneel van de redacteur.
2. Klik op "MCP Servers beheren"
3. Klik op "Bekijk raw config"
4. Wijzig de mcp_config.json met uw aangepaste MCP-serverconfiguratie:

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

5. Ga terug naar het tabblad "MCP-servers beheren" en klik op "Vernieuwen". De Nuxt UI MCP-server zou nu moeten verschijnen.

Le Chat Mistral bewerken

Setup instructies:

1. Navigeren naar "Intelligentie" > "Connectoren"
2. Klik op de knop "Connector toevoegen" en selecteer vervolgens "Aangepaste MCP-connector"
3. Maak uw aangepaste MCP-connector:

• Connector Naam: NuxtUI
• Server URL: https://ui.nuxt.com/mcp

OpenCode

Setup instructies:

1. Maak in je project root opencode.json
2. Voeg de volgende configuratie toe:

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

Visuele Studio Code

Setup instructies:

1. Open VS Code en open het opdrachtpalet (Ctrl / Cmd + Shift + P)
2. Type "Voorkeuren: Open Workspace Settings (JSON)" en selecteer het
3. Navigeer naar de .vscode-map van uw project of maak er een als deze niet bestaat
4. Maak of bewerk het mcp.json bestand met de volgende configuratie:

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

Verwijder het headers item om alle Nuxt UI MCP tools beschikbaar te maken.

Windsurfen

Setup instructies:

1. Open Windsurf en navigeer naar "Instellingen" > "Windsurf Instellingen" > "Cascade"
2. Klik op de knop "MCP 's beheren" en selecteer vervolgens de optie "Raw-configuratie weergeven"
3. Voeg de volgende configuratie toe aan uw MCP-instellingen:

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

Zed

Setup instructies:

1. Open Zed en ga naar "Instellingen" > "Instellingen openen"
2. Navigeer naar het JSON-instellingenbestand
3. Voeg de volgende contextserverconfiguratie toe aan uw instellingen:

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

Usage Voorbeelden

Eenmaal geconfigureerd, kunt u uw AI-assistent vragen stellen zoals:

• "Toon alle beschikbare Nuxt UI componenten"
• "Ontvang documentatie voor knopcomponenten"
• "Laat me alleen de voorbeelden van het gebruik van de knop zien"
• "Welke rekwisieten accepteert Input?"
• "Formulier gerelateerde onderdelen zoeken"
• "Zoek naar pijlpictogrammen in lucide"
• "Dashboardsjablonen weergeven"
• "Instellingen sjabloon ophalen"
• "Installatiehandleiding tonen"
• "Download de migratiegids"
• "Lijst van alle voorbeelden"
• "ContactForm voorbeeldcode ophalen"

De AI-assistent zal de MCP-server gebruiken om gestructureerde JSON-gegevens op te halen en begeleide assistentie te bieden aan Nuxt UI tijdens de ontwikkeling.