# 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.

<Preview path="open-in-chat" />

## Installation

<ElementsInstaller path="open-in-chat" />

## Usage

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

```tsx
<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<typeof DropdownMenu>',
  },
}}
/>

### `<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<typeof DropdownMenuTrigger>',
  },
}}
/>

### `<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<typeof DropdownMenuContent>',
  },
}}
/>

### `<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<typeof DropdownMenuItem>',
  },
}}
/>

### `<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.