✨ Publier v1 is live — a polished docs platform built for the open web.
Skip to content

OpenInAI

Per-page dropdown that opens the current doc in ChatGPT, Claude, Perplexity, or Google AI Studio — plus a "Copy as Markdown" action for LLM prompts.

<OpenInAI> renders a small dropdown in the page header — the reader clicks it and gets four links (pre-filled with the current page URL) to ask their AI of choice, plus a “Copy as Markdown” action that writes [title](url) to the clipboard.

Publier can wire this into the page meta automatically; you only need to import and render it yourself when embedding in a custom layout or inline inside MDX.

Live demo

Click the button below to see the dropdown. Links open in a new tab with the current page’s URL pre-filled:

import { OpenInAI } from '@publier/shell/components';


<OpenInAI
  pageUrl="https://publier.net/docs/ui-components/open-in-ai"
  pageTitle="OpenInAI — Publier"
/>

In a custom layout

Pass Astro’s runtime URL and the frontmatter title:

---
import { OpenInAI } from '@publier/shell/components';


const { frontmatter } = Astro.props;
---


<OpenInAI
  pageUrl={Astro.url.href}
  pageTitle={frontmatter.title}
/>

What each action does

ActionResult
ChatGPTOpens chat.openai.com with the page URL pre-filled as the first message.
ClaudeOpens claude.ai with the page URL as the starter prompt.
PerplexityOpens perplexity.ai pre-queried with the page URL.
Google AI StudioOpens Google’s AI Studio with the page URL.
Copy as MarkdownWrites [pageTitle](pageUrl) to the clipboard. Shows a 2-second “Copied!” confirmation.

Props

PropTypeDefaultDescription
pageUrlstring''Full URL of the current page. Passed to each AI tool as context.
pageTitlestring''Used in the “Copy as Markdown” action: writes [pageTitle](pageUrl).

Behaviour

  • External AI links open in a new tab (target="_blank" rel="noopener noreferrer").
  • Clipboard write is wrapped in a try/catch — non-HTTPS origins and denied permissions fail silently (no error banner).
  • The dropdown closes on outside click via a document-level listener.
  • Zero hydration cost until the trigger button is visible.

Accessibility

  • The trigger is a real <button> with aria-haspopup="menu" and aria-expanded.
  • Dropdown uses role="menu" + role="menuitem" for screen readers.
  • Keyboard: Enter/Space opens; Escape closes.