📄 ai-sdk/elements/components/open-in-chat

File: open-in-chat.md | Updated: 11/15/2025

Source: https://ai-sdk.dev/elements/components/open-in-chat

Vercel

Slash Forward

Sparkles

AI SDK

Docs Cookbook Providers Playground AI ElementsAI ElementsLeft sparkleRight sparkle AI GatewayGateway

Search...⌘KFeedback GitHub Vercel LogoSign in with Vercel

Documentation

Open In Chat

A dropdown menu for opening queries in various AI chat platforms including ChatGPT, Claude, T3, Scira, and v0.

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

Preview

Code

Open in chat

Installation


AI Elements

shadcn CLI

Manual

npx ai-elements@latest add open-in-chat

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 />

Prop

Type

query?string

...props?React.ComponentProps<typeof DropdownMenu>

<OpenInTrigger />

Prop

Type

children?React.ReactNode

...props?React.ComponentProps<typeof DropdownMenuTrigger>

<OpenInContent />

Prop

Type

className?string

...props?React.ComponentProps<typeof DropdownMenuContent>

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

Prop

Type

...props?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.

Web Preview

A composable component for previewing the result of a generated UI, with support for live examples and code display.
Code Block

Provides syntax highlighting, line numbers, and copy to clipboard functionality for code blocks.

On this page

Installation Features Supported Platforms Props <OpenIn /> <OpenInTrigger /> <OpenInContent /> <OpenInChatGPT />, <OpenInClaude />, <OpenInT3 />, <OpenInScira />, <OpenInv0 />, <OpenInCursor /> <OpenInItem />, <OpenInLabel />, <OpenInSeparator />

GitHubEdit this page on GitHub Scroll to topCopy pageOpen in chat