Menu contextual

Adicione integrações de IA com um clique à sua documentação

O menu contextual oferece acesso rápido a conteúdo otimizado por IA e integrações diretas com ferramentas de IA populares. Ao selecionar o menu contextual em qualquer página, os usuários podem copiar o conteúdo para usar como contexto em ferramentas de IA ou abrir conversas no ChatGPT, Claude, Perplexity ou em uma ferramenta personalizada de sua preferência, com a documentação já carregada como contexto.

Opções do menu

O menu contextual inclui várias opções prontas que você pode habilitar adicionando seus identificadores à configuração.

Opção	Identificador	Descrição
Copiar página	copy	Copia a página atual como Markdown para colar como contexto em ferramentas de IA
Ver como Markdown	view	Abre a página atual como Markdown
Abrir no ChatGPT	chatgpt	Cria uma conversa no ChatGPT com a página atual como contexto
Abrir no Claude	claude	Cria uma conversa no Claude com a página atual como contexto
Abrir no Perplexity	perplexity	Cria uma conversa no Perplexity com a página atual como contexto
Copiar URL do servidor MCP	mcp	Copia a URL do seu servidor MCP para a área de transferência
Conectar ao Cursor	cursor	Instala seu servidor MCP hospedado no Cursor
Conectar ao VS Code	vscode	Instala seu servidor MCP hospedado no VS Code

Habilitando o menu contextual

Adicione o campo contextual ao arquivo docs.json e especifique quais opções deseja incluir.

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

Adicionando opções personalizadas

Crie opções personalizadas no menu contextual adicionando um objeto ao array options. Cada opção personalizada requer as seguintes propriedades:

title · string · required

O título da opção.

description · string · required

A descrição da opção. Exibida abaixo do título quando o menu contextual é expandido.

icon · string · required

O ícone a ser exibido.

Opções:

• nome do ícone Font Awesome
• nome do ícone Lucide
• código SVG compatível com JSX, entre chaves
• URL para um ícone hospedado externamente
• caminho para um arquivo de ícone no seu projeto

Para ícones SVG personalizados:

1. Converta seu SVG usando o conversor SVGR.
2. Cole seu código SVG no campo de entrada de SVG.
3. Copie o elemento completo <svg>...</svg> do campo de saída em JSX.
4. Coloque o código SVG compatível com JSX entre chaves: icon={<svg ...> ... </svg>}.
5. Ajuste height e width conforme necessário.

iconType · string

O estilo do ícone do Font Awesome. Usado apenas com ícones do Font Awesome.

Opções: regular, solid, light, thin, sharp-solid, duotone, brands.

href · string | object · required

O href da opção. Use uma string para links simples ou um objeto para links dinâmicos com parâmetros de consulta.

Show href object

base · string · required

A URL base da opção.

query · object · required

Os parâmetros de consulta da opção.

Show query object

key · string · required

A chave do parâmetro de consulta.

value · string · required

O valor do parâmetro de consulta. Substituiremos os seguintes placeholders pelos valores correspondentes:

• Use $page para inserir o conteúdo da página atual em Markdown.
• Use $path para inserir o caminho da página atual.
• Use $mcp para inserir a URL do servidor MCP hospedado.

Exemplo de opção personalizada:

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

Exemplos de opções personalizadas

Link simples

{
  "title": "Solicitar um recurso",
  "description": "Participe da discussão no GitHub",
  "icon": "plus",
  "href": "https://github.com/orgs/mintlify/discussions/categories/feature-requests"
}

Link dinâmico com conteúdo da página

{
  "title": "Compartilhar no X",
  "description": "Compartilhe esta página no X",
  "icon": "x",
  "href": {
    "base": "https://x.com/intent/tweet",
    "query": [
      {
      "key": "text",
      "value": "Confira esta documentação: $page"
      }
    ]
  }
}