Mischief

10 / Agent handoffs

Ask AI

Hand someone a prepared, source-aware prompt in the AI assistant they already use, or let them copy it for another one.

Live previewSource

Ask an AI about Fetchbean

Get a current, source-backed explanation from the assistant you already use.

Installation

Copy the source into your project, or keep it behind a package.

Copy the component into your project and make it yours.

Usage

const prompt = [
  "Explain what Acme does using current web sources.",
  "Prefer Acme's own docs, cite every claim, and flag anything unverified.",
].join("\n")

export function AskAboutAcme() {
  return <AskAi subject="Acme" prompt={prompt} />
}

API

subjectstringThe product or topic named in the heading and labels.
promptstringThe complete prompt sent to or copied for an assistant.
targetsreadonly AskAiTarget[]Custom assistant names and prepared URLs. Defaults to ChatGPT, Claude, Perplexity, and Grok.
descriptionReactNodeSupporting copy below the heading.
copyLabelstringThe idle copy button label.
onPromptCopied(prompt: string) => voidRuns after the prompt reaches the clipboard.
classNamestringClasses for the root element.
...rootPropsHTMLAttributes<HTMLDivElement>Native root attributes.

Accessibility

Every assistant is a named external link with a 44px target and explicit new-tab wording. The copy action is a native button. Success and failure are shown in the button and announced through a polite status region. The component does not open a destination until someone chooses it.

Dependencies

lucide-react, clsx, tailwind-merge