Kontextmenü

Fügen Sie Ihren Docs KI-Integrationen mit einem Klick hinzu

Das Kontextmenü bietet schnellen Zugriff auf KI-optimierte Inhalte und direkte Integrationen mit beliebten KI-Tools. Wenn Nutzer das Kontextmenü auf einer beliebigen Seite öffnen, können sie Inhalte als Kontext für KI-Tools kopieren oder Unterhaltungen in ChatGPT, Claude, Perplexity oder in einem benutzerdefinierten Tool Ihrer Wahl starten – mit Ihrer Dokumentation bereits als Kontext geladen.

Menüoptionen

Das Kontextmenü enthält mehrere vorgefertigte Optionen, die Sie aktivieren können, indem Sie deren Kennung zu Ihrer Konfiguration hinzufügen.

Option	Kennung	Beschreibung
Seite kopieren	copy	Kopiert die aktuelle Seite als Markdown, um sie als Kontext in KI-Tools einzufügen
Als Markdown anzeigen	view	Öffnet die aktuelle Seite als Markdown
In ChatGPT öffnen	chatgpt	Erstellt ein ChatGPT-Gespräch mit der aktuellen Seite als Kontext
In Claude öffnen	claude	Erstellt ein Claude-Gespräch mit der aktuellen Seite als Kontext
In Perplexity öffnen	perplexity	Erstellt ein Perplexity-Gespräch mit der aktuellen Seite als Kontext
MCP-Server-URL kopieren	mcp	Kopiert Ihre MCP-Server-URL in die Zwischenablage
Mit Cursor verbinden	cursor	Installiert Ihren gehosteten MCP-Server in Cursor
Mit VS Code verbinden	vscode	Installiert Ihren gehosteten MCP-Server in VS Code

Aktivieren des Kontextmenüs

Fügen Sie Ihrer docs.json-Datei das Feld contextual hinzu und legen Sie fest, welche Optionen enthalten sein sollen.

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

Hinzufügen benutzerdefinierter Optionen

Erstellen Sie benutzerdefinierte Optionen im Kontextmenü, indem Sie ein Objekt zum Array options hinzufügen. Jede benutzerdefinierte Option benötigt die folgenden Eigenschaften:

title · string · required

Der Titel der Option.

description · string · required

Die Beschreibung der Option. Wird unter dem Titel angezeigt, wenn das Kontextmenü aufgeklappt ist.

icon · string · required

Das anzuzeigende Icon.

Optionen:

• Name eines Font Awesome Icons
• Name eines Lucide Icons
• JSX-kompatibler SVG-Code, in geschweifte Klammern gesetzt
• URL zu einem extern gehosteten Icon
• Pfad zu einer Icon-Datei in Ihrem Projekt

Für benutzerdefinierte SVG-Icons:

1. Konvertieren Sie Ihr SVG mit dem SVGR-Konverter.
2. Fügen Sie Ihren SVG-Code in das SVG-Eingabefeld ein.
3. Kopieren Sie das vollständige <svg>...</svg>-Element aus dem JSX-Ausgabefeld.
4. Setzen Sie den JSX-kompatiblen SVG-Code in geschweifte Klammern: icon={<svg ...> ... </svg>}.
5. Passen Sie height und width nach Bedarf an.

iconType · string

Der Iconstil für Font Awesome. Wird nur mit Font Awesome Icons verwendet.

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

href · string | object · required

Das href der Option. Verwenden Sie eine Zeichenfolge für einfache Links oder ein Objekt für dynamische Links mit Query-Parametern.

Show href object

base · string · required

Die Basis-URL der Option.

query · object · required

Die Query-Parameter der Option.

Show query object

key · string · required

Der Schlüssel des Query-Parameters.

value · string · required

Der Wert des Query-Parameters. Wir ersetzen die folgenden Platzhalter durch die entsprechenden Werte:

• Verwenden Sie $page, um den aktuellen Seiteninhalt in Markdown einzufügen.
• Verwenden Sie $path, um den aktuellen Seitenpfad einzufügen.
• Verwenden Sie $mcp, um die URL des gehosteten MCP-Servers einzufügen.

Beispiel für eine benutzerdefinierte Option:

{
    "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"
            }
        ]
    }
}

Beispiele für benutzerdefinierte Optionen

Einfacher Link

{
  "title": "Feature anfragen",
  "description": "An der Diskussion auf GitHub teilnehmen",
  "icon": "plus",
  "href": "https://github.com/orgs/mintlify/discussions/categories/feature-requests"
}

Dynamischer Link mit Seiteninhalt

{
  "title": "Auf X teilen",
  "description": "Diese Seite auf X teilen",
  "icon": "x",
  "href": {
    "base": "https://x.com/intent/tweet",
    "query": [
      {
      "key": "text",
      "value": "Schau dir diese Dokumentation an: $page"
      }
    ]
  }
}