Open In Chat

A dropdown that opens the same prompt in ChatGPT, Claude, Cursor, T3, Scira, or v0 with one click.

Default

Pass a query to OpenIn, then compose provider items inside OpenInContent.

Loading…

Installation

CLI

npx @sonojs/ui@latest add open-in-chat

Also needsnpx @sonojs/ui@latest add button dropdown-menu && npm i lucide-react

Usage

open-in-chat.tsx

import {
  OpenIn,
  OpenInChatGPT,
  OpenInClaude,
  OpenInContent,
  OpenInCursor,
  OpenInScira,
  OpenInT3,
  OpenInTrigger,
  OpenInv0,
} from "@/components/sonojs/open-in-chat"

const sampleQuery = "How can I implement authentication in Next.js?"

export function Example() {
  return (
    <OpenIn query={sampleQuery}>
      <OpenInTrigger />
      <OpenInContent>
        <OpenInChatGPT />
        <OpenInClaude />
        <OpenInCursor />
        <OpenInT3 />
        <OpenInScira />
        <OpenInv0 />
      </OpenInContent>
    </OpenIn>
  )
}

Props

Prop	Type	Default	Description
query	string	—	Prompt text shared with every provider link via context.
…DropdownMenu	DropdownMenu props	—	`OpenIn` forwards remaining props to `DropdownMenu`.
children	ReactNode	—	Compose `OpenInTrigger`, `OpenInContent`, and provider items.