Open in Chat

PreviousNext

Quick actions to open prompts in various AI chat platforms.

import {
  OpenIn,
  OpenInChatGPT,
  OpenInClaude,
  OpenInContent,
  OpenInCursor,
  OpenInSeparator,
  OpenInTrigger,
  OpenInv0,
} from "@/components/ai-elements/open-in-chat"

export function OpenInChatDemo() {
  const query = "How do I build a responsive layout with CSS Grid?"

  return (
    <div className="flex items-center gap-2">
      <OpenIn query={query}>
        <OpenInTrigger />
        <OpenInContent>
          <OpenInChatGPT />
          <OpenInClaude />
          <OpenInCursor />
          <OpenInSeparator />
          <OpenInv0 />
        </OpenInContent>
      </OpenIn>
    </div>
  )
}

Installation

pnpm dlx shadcn@latest add open-in-chat

Usage

import {
  OpenInChat,
  OpenInChatLink,
  OpenInChatDropdown,
  OpenInChatTrigger,
} from "@/components/ai-elements/open-in-chat"
// Direct link
<OpenInChat prompt="Your prompt here" provider="chatgpt">
  <OpenInChatLink />
</OpenInChat>
 
// Dropdown menu
<OpenInChat prompt="Your prompt here">
  <OpenInChatDropdown>
    <OpenInChatTrigger />
  </OpenInChatDropdown>
</OpenInChat>

Examples

Direct Link

import {
  OpenIn,
  OpenInChatGPT,
  OpenInClaude,
  OpenInContent,
  OpenInCursor,
  OpenInSeparator,
  OpenInTrigger,
  OpenInv0,
} from "@/components/ai-elements/open-in-chat"

export function OpenInChatDemo() {
  const query = "How do I build a responsive layout with CSS Grid?"

  return (
    <div className="flex items-center gap-2">
      <OpenIn query={query}>
        <OpenInTrigger />
        <OpenInContent>
          <OpenInChatGPT />
          <OpenInClaude />
          <OpenInCursor />
          <OpenInSeparator />
          <OpenInv0 />
        </OpenInContent>
      </OpenIn>
    </div>
  )
}

export default function Example() {
  const prompt = "How do I build a responsive layout with CSS Grid?"
 
  return (
    <OpenInChat prompt={prompt} provider="chatgpt">
      <OpenInChatLink />
    </OpenInChat>
  )
}

Dropdown Menu

export default function Example() {
  const prompt = "Explain quantum computing"
 
  return (
    <OpenInChat prompt={prompt}>
      <OpenInChatDropdown>
        <OpenInChatTrigger />
      </OpenInChatDropdown>
    </OpenInChat>
  )
}

Supported Providers

  • ChatGPT: OpenAI ChatGPT
  • Claude: Anthropic Claude
  • Gemini: Google Gemini
  • Perplexity: Perplexity AI
  • GitHub Copilot: GitHub Copilot Chat
  • Scira: Scira AI

API Reference

OpenInChat

Container for chat links.

PropTypeDefaultDescription
promptstring-Prompt to open in chat
provider"chatgpt" | "claude" | "gemini" | "perplexity" | "github" | "scira"-Specific provider (for direct links)
childrenReactNode-Link or dropdown

OpenInChatLink

Direct link button to provider.

PropTypeDefaultDescription
classNamestring-Custom CSS classes

OpenInChatDropdown

Dropdown menu with all providers.

PropTypeDefaultDescription
childrenReactNode-Trigger button

OpenInChatTrigger

Trigger button for dropdown.

PropTypeDefaultDescription
classNamestring-Custom CSS classes