Menu contestuale

Aggiungi integrazioni AI con un clic alla documentazione

Il menu contestuale offre accesso rapido a contenuti ottimizzati per l’IA e integrazioni dirette con i principali strumenti di intelligenza artificiale. Quando gli utenti aprono il menu contestuale in qualsiasi pagina, possono copiare i contenuti come contesto per gli strumenti di IA oppure avviare conversazioni in ChatGPT, Claude, Perplexity o in uno strumento personalizzato a tua scelta, con la tua documentazione già caricata come contesto.

Opzioni del menu

Il menu contestuale include diverse opzioni predefinite che puoi abilitare aggiungendo il loro identificatore alla configurazione.

Opzione	Identificatore	Descrizione
Copia pagina	copy	Copia la pagina corrente in Markdown per incollarla come contesto negli strumenti di IA
Visualizza come Markdown	view	Apre la pagina corrente in Markdown
Apri in ChatGPT	chatgpt	Crea una conversazione in ChatGPT con la pagina corrente come contesto
Apri in Claude	claude	Crea una conversazione in Claude con la pagina corrente come contesto
Apri in Perplexity	perplexity	Crea una conversazione in Perplexity con la pagina corrente come contesto
Copia URL del server MCP	mcp	Copia l’URL del tuo server MCP negli appunti
Connetti a Cursor	cursor	Installa il tuo server MCP ospitato in Cursor
Connetti a VS Code	vscode	Installa il tuo server MCP ospitato in VS Code

Abilitare il menu contestuale

Aggiungi il campo contextual al file docs.json e specifica le opzioni che vuoi includere.

{
 "contextual": {
   "options": [
     "copy",
     "view",
     "chatgpt",
     "claude",
     "perplexity",
     "mcp",
     "cursor",
     "vscode"
   ]
 }
}

Aggiungere opzioni personalizzate

Crea opzioni personalizzate nel menu contestuale aggiungendo un oggetto all’array options. Ogni opzione personalizzata richiede queste proprietà:

title · string · required

Il titolo dell’opzione.

description · string · required

La descrizione dell’opzione. Mostrata sotto il titolo quando il menu contestuale è espanso.

icon · string · required

L’icona da visualizzare.

Opzioni:

• Nome dell’icona Font Awesome
• Nome dell’icona Lucide
• Codice SVG compatibile con JSX racchiuso tra parentesi graffe
• URL di un’icona ospitata esternamente
• Percorso di un file icona nel tuo progetto

Per icone SVG personalizzate:

1. Converti l’SVG con il convertitore SVGR.
2. Incolla il codice SVG nel campo di input SVG.
3. Copia l’elemento completo <svg>...</svg> dal campo di output JSX.
4. Racchiudi il codice SVG compatibile con JSX tra parentesi graffe: icon={<svg ...> ... </svg>}.
5. Regola height e width secondo necessità.

iconType · string

Lo stile dell’icona Font Awesome. Utilizzato solo con le icone Font Awesome.

Opzioni: regular, solid, light, thin, sharp-solid, duotone, brands.

href · string | object · required

L’href dell’opzione. Usa una stringa per i link semplici o un oggetto per i link dinamici con parametri di query.

Show href object

base · string · required

L’URL di base dell’opzione.

query · object · required

I parametri di query dell’opzione.

Show query object

key · string · required

La chiave del parametro di query.

value · string · required

Il valore del parametro di query. Sostituiremo i segnaposto seguenti con i valori corrispondenti:

• Usa $page per inserire il contenuto della pagina corrente in Markdown.
• Usa $path per inserire il percorso della pagina corrente.
• Usa $mcp per inserire l’URL del server MCP ospitato.

Esempio di opzione personalizzata:

{
    "contextual": {
        "options": [
            "copy",
            "view",
            "chatgpt",
            "claude",
            "perplexity",
            {
                "title": "Request a feature",
                "description": "Join the discussion on GitHub to request a new feature",
                "icon": "plus",
                "href": "https://github.com/orgs/mintlify/discussions/categories/feature-requests"
            }
        ]
    }
}

Esempi di opzioni personalizzate

Link semplice

{
  "title": "Richiedi una funzionalità",
  "description": "Partecipa alla discussione su GitHub",
  "icon": "plus",
  "href": "https://github.com/orgs/mintlify/discussions/categories/feature-requests"
}

Link dinamico con contenuto della pagina

{
  "title": "Condividi su X",
  "description": "Condividi questa pagina su X",
  "icon": "x",
  "href": {
    "base": "https://x.com/intent/tweet",
    "query": [
      {
      "key": "text",
      "value": "Dai un’occhiata a questa documentazione: $page"
      }
    ]
  }
}