OpenInChat

Overview

OpenIn é um DropdownMenu pré-feito que linka o query atual pra outras IAs — útil em apps de docs / search que querem dar ao user a opção de continuar em outra ferramenta.

Cada provider tem seu Item dedicado (OpenInChatGPT, OpenInClaude, etc) com URL pré-formatada e ícone do brand.

Anatomy

<OpenIn query="...">
  ├─ <OpenInTrigger />
  └─ <OpenInContent>
       ├─ <OpenInLabel>...</OpenInLabel>
       ├─ <OpenInSeparator />
       ├─ <OpenInChatGPT />
       ├─ <OpenInClaude />
       ├─ <OpenInScira />
       ├─ <OpenInv0 />
       ├─ <OpenInCursor />
       └─ <OpenInT3 />
</OpenIn>

Usage

<OpenIn query="Como configuro tokens da KDS?">
  <OpenInTrigger />
  <OpenInContent>
    <OpenInLabel>Abrir em outra IA</OpenInLabel>
    <OpenInSeparator />
    <OpenInChatGPT />
    <OpenInClaude />
    <OpenInCursor />
  </OpenInContent>
</OpenIn>

Props

OpenIn (Root)

Herda de DropdownMenu — open, onOpenChange, etc.

OpenInTrigger

Aceita ComponentProps<typeof DropdownMenuTrigger>. Default visual: button "Open in chat" com chevron.

<OpenInTrigger>
  <Button variant="ghost">Continuar em...</Button>
</OpenInTrigger>

OpenInContent

Aceita ComponentProps<typeof DropdownMenuContent>. Default align="start", w-[240px].

OpenInLabel · OpenInSeparator

Wrappers de DropdownMenuLabel / DropdownMenuSeparator.

Provider Items

Cada Item é um <DropdownMenuItem> que renderiza <a target="_blank"> com URL formatada via URLSearchParams:

Cada um aceita ComponentProps<typeof DropdownMenuItem> — você pode passar disabled, className, etc.

Subcomponents

• OpenIn — root + provider que segura o query.
• OpenInTrigger — botão que abre o menu.
• OpenInContent — wrapper do menu.
• OpenInLabel + OpenInSeparator — estrutura visual.
• Provider Items — cada um é um link pré-formatado pra um provider específico de IA.

useOpenInContext()

Hook interno que retorna { query: string }. Use pra criar Items custom pra outros providers:

function OpenInPerplexity() {
  const { query } = useOpenInContext();
  return (
    <DropdownMenuItem asChild>
      <a href={`https://perplexity.ai/?q=${encodeURIComponent(query)}`} target="_blank">
        Open in Perplexity
      </a>
    </DropdownMenuItem>
  );
}

When to use

• Docs / search apps que querem dar opção "continuar em outra IA".
• Surface de discovery — user achou algo em uma ferramenta, quer pivotar pra outra.

When not to use

• App proprietário onde você NÃO quer que o user vá pra outro provider — não inclua o componente.
• Compartilhamento social — use Sonner toast com share button (Twitter, etc).

Best practices

• Curate providers. Não inclua todos os 7 — escolha 2-3 relevantes pro contexto. Demais opções viram ruído.
• Label claro. "Abrir em outra IA" > "Compartilhar".
• Disabled em providers indisponíveis se você sabe que o provider não aceita o tipo de query (ex.: v0 só aceita prompts de UI).

Accessibility

Related

• DropdownMenu — base.
• Sonner — pra share-to-social como alternativa.