134 lines
3.4 KiB
Markdown
134 lines
3.4 KiB
Markdown
# 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.
|