gh-nathanonn-claude-skills-ai-elements-claude-skills-ai-elements/docs/components/open-in-chat.md

Open In Chat

URL: /components/open-in-chat

---

title: Open In Chat description: A dropdown menu for opening queries in various AI chat platforms including ChatGPT, Claude, T3, Scira, and v0. path: elements/components/open-in-chat

---

The OpenIn component provides a dropdown menu that allows users to open queries in different AI chat platforms with a single click.

Installation

Usage

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

<OpenIn query="How can I implement authentication in Next.js?">
    <OpenInTrigger />
    <OpenInContent>
        <OpenInChatGPT />
        <OpenInClaude />
        <OpenInT3 />
        <OpenInScira />
        <OpenInv0 />
        <OpenInCursor />
    </OpenInContent>
</OpenIn>

Features

• Pre-configured links to popular AI chat platforms
• Context-based query passing for cleaner API
• Customizable dropdown trigger button
• Automatic URL parameter encoding for queries
• Support for ChatGPT, Claude, T3 Chat, Scira AI, v0, and Cursor
• Branded icons for each platform
• TypeScript support with proper type definitions
• Accessible dropdown menu with keyboard navigation
• External link indicators for clarity

Supported Platforms

• ChatGPT - Opens query in OpenAI's ChatGPT with search hints
• Claude - Opens query in Anthropic's Claude AI
• T3 Chat - Opens query in T3 Chat platform
• Scira AI - Opens query in Scira's AI assistant
• v0 - Opens query in Vercel's v0 platform
• Cursor - Opens query in Cursor AI editor

Props

<OpenIn />

<TypeTable type={{ query: { description: 'The query text to be sent to all AI platforms.', type: 'string', }, '...props': { description: 'Props to spread to the underlying radix-ui DropdownMenu component.', type: 'React.ComponentProps', }, }} />

<OpenInTrigger />

<TypeTable type={{ children: { description: 'Custom trigger button.', type: 'React.ReactNode', default: '"Open in chat" button with chevron icon', }, '...props': { description: 'Props to spread to the underlying DropdownMenuTrigger component.', type: 'React.ComponentProps', }, }} />

<OpenInContent />

<TypeTable type={{ className: { description: 'Additional CSS classes to apply to the dropdown content.', type: 'string', }, '...props': { description: 'Props to spread to the underlying DropdownMenuContent component.', type: 'React.ComponentProps', }, }} />

<OpenInChatGPT />, <OpenInClaude />, <OpenInT3 />, <OpenInScira />, <OpenInv0 />, <OpenInCursor />

<TypeTable type={{ '...props': { description: 'Props to spread to the underlying DropdownMenuItem component. The query is automatically provided via context from the parent OpenIn component.', type: 'React.ComponentProps', }, }} />

<OpenInItem />, <OpenInLabel />, <OpenInSeparator />

Additional composable components for custom dropdown menu items, labels, and separators that follow the same props pattern as their underlying radix-ui counterparts.