MCP Setup per AI

Cos'è il server MCP della documentazione

Questo sito di documentazione espone un server MCP (Model Context Protocol) all'endpoint /mcp. Il server MCP permette agli assistenti AI — come Claude Code e Cursor — di consultare la documentazione di @pzeta/vue-components direttamente durante lo sviluppo, senza dover navigare manualmente il sito.

Con il server MCP configurato puoi chiedere al tuo assistente AI:

• "Quali props accetta il componente DataTable?"
• "Come si usa useConfirm con un ConfirmDialog?"
• "Mostrami un esempio di Dialog con slot footer"
• "Qual è la differenza tra Select e MultiSelect?"

Configurazione Claude Code

Aggiunta al file .mcp.json

Crea o modifica il file .mcp.json nella root del tuo progetto (o nella home ~/.claude/mcp.json per configurazione globale):

{
  "mcpServers": {
    "pzeta-vue-components": {
      "type": "http",
      "url": "https://docscomp.pzeta.it/mcp"
    }
  }
}

::: note Se il server MCP è in esecuzione localmente (sviluppo), usa http://localhost:3000/mcp come URL. :::

Verifica della connessione

Dopo aver aggiunto la configurazione, riavvia Claude Code e verifica che il server MCP sia raggiungibile:

# Verifica che il server risponda
curl https://docscomp.pzeta.it/mcp

Il server risponde con un manifest JSON che descrive gli strumenti disponibili.

Utilizzo in Claude Code

Una volta configurato, puoi interrogare la documentazione direttamente nelle conversazioni:

Usando la documentazione di @pzeta/vue-components, mostrami come configurare
un DataTable con ordinamento, paginazione lato server e selezione multipla.

Claude Code recupererà automaticamente la documentazione rilevante e genererà codice contestualizzato per il tuo progetto.

Configurazione Cursor

Aggiunta tramite UI

1. Apri Cursor Settings (Cmd/Ctrl + ,)
2. Naviga su Features > MCP Servers
3. Clicca Add MCP Server
4. Inserisci i dati:
   • Name: pzeta-vue-components
   • Type: HTTP
   • URL: https://docscomp.pzeta.it/mcp
5. Salva e riavvia Cursor

Aggiunta tramite file di configurazione

Aggiungi il server nel file ~/.cursor/mcp.json:

{
  "mcpServers": {
    "pzeta-vue-components": {
      "type": "http",
      "url": "https://docscomp.pzeta.it/mcp"
    }
  }
}

Esempio file .mcp.json completo

Esempio di configurazione con più server MCP in un progetto Vue:

{
  "mcpServers": {
    "pzeta-vue-components": {
      "type": "http",
      "url": "https://docscomp.pzeta.it/mcp"
    },
    "context7": {
      "type": "http",
      "url": "https://mcp.context7.com/mcp"
    }
  }
}

Strumenti esposti dal server MCP

Il server MCP espone i seguenti strumenti agli assistenti AI:

Configurazione per sviluppo locale

Se stai sviluppando il sito di documentazione in locale, usa il server locale nel .mcp.json del tuo progetto:

{
  "mcpServers": {
    "pzeta-vue-components-local": {
      "type": "http",
      "url": "http://localhost:3000/mcp"
    }
  }
}

::: warning Il file .mcp.json con URL locali non deve essere committato nel repository condiviso. Aggiungilo al .gitignore oppure usa la configurazione globale in ~/.claude/mcp.json. :::

Risoluzione problemi

Il server MCP non risponde

Verifica che l'URL sia raggiungibile:

curl -I https://docscomp.pzeta.it/mcp

Claude Code non trova i componenti

Assicurati che il nome del server in .mcp.json non contenga spazi o caratteri speciali. Riavvia Claude Code dopo ogni modifica alla configurazione MCP.

Errore CORS in locale

Se usi il server locale con Cursor, verifica che il server Nuxt sia avviato con le opzioni CORS corrette. Il server di sviluppo Nuxt Content supporta MCP out-of-the-box.