React AI Open In Chat

You've seen those "Open in ChatGPT" or "Ask Claude" buttons around the web? This component gives you a dropdown with all the major AI chat providers pre-configured. Pass it a query string, click a provider, and it opens that chat with your query pre-filled. We've got ChatGPT, Claude, v0, Cursor, and a few others baked in. Super useful for documentation sites where you want users to be able to dive deeper with their favorite AI, or for search results where someone might want a conversational follow-up. Each provider has its icon and the URL encoding is handled for you.

Open In Chat preview

Installation

npx shadcn@latest add https://www.shadcn.io/registry/open-in-chat.json

npx shadcn@latest add https://www.shadcn.io/registry/open-in-chat.json

pnpm dlx shadcn@latest add https://www.shadcn.io/registry/open-in-chat.json

bunx shadcn@latest add https://www.shadcn.io/registry/open-in-chat.json

Related Components

FAQ