AI Tools

AI Tools renders a short list of page actions under an "AI tools" heading. Readers can copy the page as Markdown, or open ChatGPT or Claude with a prompt that points to the page URL. Two optional links connect readers to the AI agent setup guide and to Google's preferred sources setting.

Docs guides, docs troubleshooting pages, and knowledge base guides use AI Tools in their sidebars.

'use client'
 
import { AiTools } from 'ui-patterns/AiTools'
 
export function AiToolsDemo() {
  return (
    <AiTools
      pageUrl="https://supabase.com/docs/guides/getting-started"
      markdownUrl="/docs/guides/getting-started.md"
      markdownFallback={() => '# Getting started'}
      agentSetupHref="https://supabase.com/docs/guides/ai-tools"
      preferredSourceHref="https://www.google.com/preferences/source?q=supabase.com"
    />
  )
}

Usage

import { AiTools } from 'ui-patterns/AiTools'

<AiTools
  pageUrl="https://supabase.com/docs/guides/getting-started"
  markdownUrl="/docs/guides/getting-started.md"
  markdownFallback={() => document.querySelector('article')?.innerHTML ?? ''}
/>

Pass the canonical page URL as pageUrl. The Ask ChatGPT and Ask Claude links include it in their prompt, so it must be publicly reachable.

Copy as Markdown fetches markdownUrl. If the response isn't OK, it copies the string that markdownFallback returns instead, such as the rendered article HTML.

Examples

Required props only

Without agentSetupHref and preferredSourceHref, AI Tools renders Copy as Markdown, Ask ChatGPT, and Ask Claude.

'use client'
 
import { AiTools } from 'ui-patterns/AiTools'
 
export function AiToolsMinimal() {
  return (
    <AiTools
      pageUrl="https://supabase.com/docs/guides/getting-started"
      markdownUrl="/docs/guides/getting-started.md"
      markdownFallback={() => '# Getting started'}
    />
  )
}

Analytics

AI Tools doesn't send telemetry. Each surface passes callbacks and sends its own events from them. For example, the docs wrapper in apps/docs/components/AiTools.tsx sends copy_as_markdown_clicked from onMarkdownCopy and ask_ai_clicked from onAskAiClick.

onMarkdownCopy fires only after the clipboard write succeeds.

Props