The share button,
but for AI.
Every “Ask AI” widget puts a chatbot on your site. This does the opposite: it sends your content to the user’s own AI provider, with author-crafted prompts.
The share button, but for AI. You embed, you craft the prompt, and visitors copy it or open it in Claude, ChatGPT, or Perplexity.
Under 8KB. Zero dependencies. npm install @promptthis/react
Getting Started
Three steps to add a prompt button to your site.
Install the package
npm install @promptthis/reactImport and use
import { PromptButton } from '@promptthis/react'
import '@promptthis/react/styles.css'
<PromptButton content="Your content here." />Try it live
Click the button below. Copy the prompt or open it in your AI tool.
Basic Usage
Pass your content as a string. Visitors choose to copy the prompt or open it directly in Claude, ChatGPT, or Perplexity.
Every "Ask AI" widget puts a chatbot on your site. PromptThis does the opposite: you embed a button, craft the prompt, and visitors open it directly in their own AI provider. The share button, but for AI. Under 8KB, zero dependencies.
import { PromptButton } from '@promptthis/react'
<PromptButton
content="PromptThis is a drop-in widget that adds
prompt sharing to any content..."
/>Icon Only
Pass label={null} to render just the icon. Works with any theme.
Every "Ask AI" widget puts a chatbot on your site. PromptThis does the opposite: you embed a button, craft the prompt, and visitors open it directly in their own AI provider. The share button, but for AI. Under 8KB, zero dependencies.
<PromptButton content="..." label={null} />Customized Prompts
Use a ref to extract content from the DOM. Shape the prompt with role, context, and instruction. Choose which providers visitors see with openIn.
Every "Ask AI" widget puts a chatbot on your site. PromptThis does the opposite: you embed a button, craft the prompt, and visitors open it directly in their own AI provider. The share button, but for AI. Under 8KB, zero dependencies.
const ref = useRef<HTMLDivElement>(null)
<div ref={ref}>
<p>Content is extracted from this DOM element.</p>
<PromptButton
content={ref}
role="You are a senior frontend developer."
context="From the PromptThis documentation."
instruction="Explain how to integrate this."
openIn={['claude', 'chatgpt']}
/>
</div>usePrompt Hook
Build your own UI around the prompt. The hook gives you the assembled prompt, copy and openIn functions, and the filtered provider list.
Every "Ask AI" widget puts a chatbot on your site. PromptThis does the opposite: you embed a button, craft the prompt, and visitors open it directly in their own AI provider. The share button, but for AI. Under 8KB, zero dependencies.
import { usePrompt } from '@promptthis/react'
const { copy, openIn, providers } = usePrompt({
content: 'Your content here.',
role: 'You are a helpful coding assistant.',
openIn: ['claude', 'chatgpt', 'perplexity'],
})
<button onClick={() => copy()}>Copy prompt</button>
{providers.map((p) => (
<button key={p.id} onClick={() => openIn(p.id)}>
{p.icon} {p.name}
</button>
))}Theming
Style with CSS custom properties via style and popoverStyle. No !important needed.
Zero configuration. Import the stylesheet and drop in a button.
Neutral background, subtle border, 8px radius. Inherits your page’s font and text color. Override anything with CSS custom properties.
Sharp corners, inverted hover, dark popover.
Pill shape, gradient button, soft popover.
Clean, quiet, shadcn-inspired.
Dark mode, glow, neon accents.
// Use CSS custom properties via style and popoverStyle
<PromptButton
content="..."
style={{
"--promptthis-bg": "transparent",
"--promptthis-text": "black",
"--promptthis-border": "black",
"--promptthis-radius": "0px",
"--promptthis-hover-bg": "black",
"--promptthis-hover-text": "white",
}}
popoverStyle={{
"--promptthis-popover-bg": "black",
"--promptthis-item-text": "white",
"--promptthis-item-hover-bg": "rgba(255,255,255,0.1)",
}}
/>PromptProvider
Wrap any subtree with shared defaults. Every nested PromptButton and usePrompt inherits the same role, providers, and configuration.
Every "Ask AI" widget puts a chatbot on your site. PromptThis does the opposite: you embed a button, craft the prompt, and visitors open it directly in their own AI provider. The share button, but for AI. Under 8KB, zero dependencies.
import { PromptProvider, PromptButton } from '@promptthis/react'
<PromptProvider
defaultRole="You are a documentation expert."
openIn={['claude', 'perplexity']}
>
<PromptButton
content="Inherits defaults from provider."
label="Prompt A"
/>
<PromptButton
content="Same shared configuration."
label="Prompt B"
/>
</PromptProvider>