Setup Claude Code

Claude Code supporta nativamente i server MCP tramite file di configurazione .mcp.json. Una volta configurato, puoi chiedere informazioni su @pzeta/vue-components direttamente nel terminale o nel chat di Claude Code.

Configurazione

Crea o aggiorna il file .mcp.json nella root del tuo progetto:

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

Questo file può essere committato nel repository per condividerlo con tutto il team.

Sviluppo locale

Se stai eseguendo la documentazione in locale (utile per documentare versioni non ancora rilasciate), usa:

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

Configurazione globale

Per rendere il server disponibile su tutti i tuoi progetti senza aggiungere .mcp.json in ciascuno, aggiungilo al file di configurazione globale di Claude Code (~/.claude/mcp.json):

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

Verifica della connessione

Dopo aver aggiunto la configurazione, riavvia Claude Code. Per verificare che il server sia attivo, chiedi:

/mcp

Oppure fai una query di test:

Quali server MCP sono configurati?

Claude Code elencherà vue-components-docs tra i server disponibili se la configurazione è corretta.

Puoi anche verificare direttamente che il server risponda aprendo nel browser:

https://docscomp.pzeta.it/mcp

La risposta deve essere un JSON valido con il manifesto del server MCP.

Esempi di query

Una volta connesso, puoi fare domande direttamente nel chat di Claude Code:

Quali props accetta il componente DataTable?

Come si usa il composable useToast()?

Mostrami un esempio completo di Dialog con slot footer.

Quali componenti supportano la prop severity?

Claude risponderà con informazioni accurate estratte dalla documentazione ufficiale, inclusi tipi TypeScript, esempi di codice e note di utilizzo.

Combinare con il codice del progetto

Il vantaggio principale di MCP in Claude Code e' la combinazione del contesto del tuo progetto con la documentazione della libreria. Puoi fare query come:

Nel file src/views/UserList.vue sto usando DataTable. 
Come aggiungo la paginazione lazy con le API che ho in src/services/UserService.ts?

Claude Code leggera' il tuo codice e consultara' la documentazione di DataTable per fornire una risposta contestualizzata al tuo progetto specifico.