MCP Server

mdui fornisce un server MCP (Model Context Protocol) dedicato, @mdui/mcp, che consente agli agenti IA di interrogare informazioni locali su componenti, icone, variabili CSS e documentazione.

Funziona con strumenti per sviluppatori quali Claude Code, Cursor, GitHub Copilot e altri, aiutandoti a generare codice e a usare correttamente i componenti e gli stili di mdui.

Strumenti

Il server MCP di mdui espone i seguenti strumenti agli agenti IA:

• list_components: Elenca tutti i componenti di mdui.
• get_component_metadata: Ottiene i metadati API dettagliati per un singolo componente.
• list_css_classes: Elenca i nomi delle classi CSS globali.
• list_css_variables: Elenca le variabili CSS globali.
• list_documents: Elenca tutte le voci della documentazione.
• get_document: Ottiene il contenuto completo di un singolo documento.
• list_icon_codes: Elenca i codici delle icone per attributi o API.
• list_icon_components: Elenca i componenti icona autonomi e le loro istruzioni di importazione ESM.

Come usare

Questo server supporta solo il trasporto stdio. Funziona direttamente con VS Code, Cursor, Claude Code, Windsurf, Zed e altri client, così come con agenti IA che supportano MCP su stdio.

VS Code

Assicurati di avere installate sia le estensioni GitHub Copilot che GitHub Copilot Chat.

1. Crea .vscode/mcp.json nella root del progetto con il seguente contenuto:

   {
     "servers": {
       "mdui": {
         "command": "npx",
         "args": ["-y", "@mdui/mcp"]
       }
     }
   }
   

2. Fai clic sul pulsante "Start" che appare nel file mcp.json.

3. Avvia una conversazione in GitHub Copilot Chat.

Cursor

1. Crea o modifica .cursor/mcp.json nella root del progetto e aggiungi:

   {
     "mcpServers": {
       "mdui": {
         "command": "npx",
         "args": ["-y", "@mdui/mcp"]
       }
     }
   }
   

2. Vai su Impostazioni > Impostazioni Cursor > MCP & Integrazioni e abilita il server mdui.

3. Avvia una chat in Cursor.

Claude Code

1. Nel tuo terminale, aggiungi il server MCP mdui:

   claude mcp add mdui -- npx -y @mdui/mcp
   

2. Quindi esegui claude per avviare una sessione.

3. Inserisci i tuoi prompt per iniziare a interagire con il server.

Windsurf

1. Apri Impostazioni > Impostazioni Windsurf > Cascade.

2. Fai clic su "Gestisci MCP", poi "Visualizza configurazione raw", e aggiungi:

   {
     "mcpServers": {
       "mdui": {
         "command": "npx",
         "args": ["-y", "@mdui/mcp"]
       }
     }
   }
   

   Se il server MCP non appare automaticamente, fai clic su Aggiorna per ricaricare l'elenco.

3. Inserisci i tuoi prompt per avviare una conversazione.

Zed

1. Apri Impostazioni > Apri Impostazioni, quindi aggiungi quanto segue a settings.json:

   {
     "context_servers": {
       "mdui": {
         "source": "custom",
         "command": "npx",
         "args": ["-y", "@mdui/mcp"]
       }
     }
   }
   

2. Inizia a dare istruzioni per utilizzare il server.

Client MCP personalizzati

Quando utilizzi un client MCP personalizzato localmente o in un ambiente di sviluppo, aggiungi il server alla configurazione del tuo client. Ad esempio:

{
  "mcpServers": {
    "mdui": {
      "command": "npx",
      "args": ["-y", "@mdui/mcp"]
    }
  }
}