shadcn.io is an independent project built on shadcn/ui
A button that opens a menu of chat apps, each a link that starts a new chat with your query already typed in.
Use it where a reader may want to keep going with their own assistant: under a docs page, beside a search result, at the end of an answer. Pass the question once as query and every item builds its app's link from it, with the encoding done. In React, it's a Dropdown Menu of links that open in a new tab: nothing is sent until the reader picks an app, and the chat itself happens there, not on your page.
Installation
Anatomy
OpenIn
├── OpenInTrigger
└── OpenInContent
├── OpenInGroup
│ ├── OpenInLabel
│ ├── OpenInChatGPT
│ ├── OpenInClaude
│ ├── OpenInT3
│ └── OpenInScira
├── OpenInSeparator
├── OpenInv0
├── OpenInCursor
└── OpenInItem (one of your own)OpenInTrigger draws an Open in chat button when it has no child. useOpenInContext reads the query from inside OpenIn, for an item of your own.
Usage
import {
OpenIn, OpenInChatGPT, OpenInClaude, OpenInContent, OpenInCursor,
OpenInTrigger,
} from "@/components/ui/open-in-chat";<OpenIn query="How can I implement authentication in Next.js?">
<OpenInTrigger />
<OpenInContent>
<OpenInChatGPT />
<OpenInClaude />
<OpenInCursor />
</OpenInContent>
</OpenIn>Providers
Each item is a link to its app with the query in the URL, opened in a new tab with rel="noopener noreferrer", so the app can't reach back into your page or see where the reader came from.
| Part | Opens | Query in |
|---|---|---|
OpenInChatGPT | https://chatgpt.com/ with search on | prompt |
OpenInClaude | https://claude.ai/new | q |
OpenInT3 | https://t3.chat/new | q |
OpenInScira | https://scira.ai/ | q |
OpenInv0 | https://v0.app | q |
OpenInCursor | https://cursor.com/link/prompt | text |
label replaces an item's text, Open in and the app's name. Each app reads its own parameter, so if one stops prefilling, check its URL before the component.
Demos
Labels
The six apps in two groups, Chat and Code, each an OpenInGroup with an OpenInLabel on top and an OpenInSeparator between them. label shortens each item to the app's name, since the heading already says what the menu does. Use groups when the list mixes chat apps with tools that build code, so the reader finds theirs at a glance.
Custom
Two items of your own beside the built-in ones: OpenInItem as a link to Perplexity, its URL built from the same query, and a Copy prompt item that copies the query and stays open to say it did. Use OpenInItem for an app the component doesn't know, and keep its link opening in a new tab like the rest.
Trigger
An Ask AI button of your own under an answer, with the question it answers as the query. Give OpenInTrigger your button and the menu opens from it, lined up with its start. Use a small ghost button where the menu is a side path, and the default outline button where opening the chat is the point.
Migrating from AI SDK Elements
If you added Open in Chat from AI SDK Elements (opens in a new tab), install this one and change the import from @/components/ai-elements/open-in-chat to @/components/ui/open-in-chat. Every part keeps its name and props, and each app's link is built the same way. What differs:
- The links open with
rel="noopener noreferrer", notnoopeneralone, so the apps don't see your page's address. OpenInSciratakes alabellike the others,OpenInGroupis new for labelled groups, anduseOpenInContextis exported for items of your own.- The menu opens lined up with the trigger's start, as
align="start"did.
On React Aria, OpenIn is the MenuTrigger, OpenInTrigger is the Button itself, and an OpenInItem link takes href, target and rel directly.
FAQ
How do I install Open in Chat in React?
Run the command in the Installation section on this page. It adds open-in-chat to your ui folder with the Dropdown Menu and Button it's built from. The app marks are inline SVGs in the file, so there's no icon package beyond lucide.
The command uses the shadcn CLI.
Which apps can Open in Chat open?
ChatGPT, Claude, T3 Chat, Scira, v0 and Cursor, one part each, every one a link with the query in its URL. The Providers table lists each address and the parameter it reads. Use only the ones your readers have; an empty menu item is worse than a short menu.
How does Open in Chat pass the question to each app?
Set query on OpenIn: each item reads it and builds its link with URLSearchParams, so spaces, question marks and quotes arrive intact. Keep it to a question or a short prompt; a URL holds a few thousand characters, so link to a long page rather than pasting it.
How do I add another app to Open in Chat?
Add an OpenInItem with a link to it, as the Custom demo does for Perplexity: build its URL from the same query, and open it in a new tab with rel="noopener noreferrer". Inside OpenIn, useOpenInContext gives an item of your own the query.
Why does Open in Chat open a new tab?
So the reader keeps your page while the chat starts beside it. Each link has target="_blank" and rel="noopener noreferrer": the app gets the query and nothing else, neither a handle on your window nor the address it came from.
Can Open in Chat be used with the keyboard?
Yes. Enter, Space or the down arrow on the trigger opens the menu, and the arrow keys move through the apps. Enter opens the highlighted app in a new tab and closes the menu. Escape closes it without opening anything and puts focus back on the trigger.
Is this the same as AI SDK Elements' Open in Chat?
It has the same parts and props, so most code only changes its import. Links hide your page's address from the apps, Scira takes a label like the rest, and there's a group part for labelled groups. The Migrating section lists what differs on your stack.
API Reference
OpenIn
defaultOpen?boolean
Whether the overlay is open by default (uncontrolled).
onOpenChange?(isOpen: boolean) → void
Handler that is called when the overlay's open state changes.
- Parameters
isOpen– boolean- Returns
void
querystring
The text to open each chat with: a question, a prompt or a page.
isOpen?boolean
Whether the overlay is open by default (controlled).
trigger?"press" | "longPress" | "contextMenu"
How the menu is triggered.
- Type
"press" | "longPress" | "contextMenu"- Default
"press"
OpenInTrigger
data-slot="open-in-trigger"
children?ReactNode
The content to display in the button.
clickEffect?boolean
Apply a click effect to the button.
- Default
true
download?LinkPrimitiveProps["download"]
With href, downloads the linked file instead of opening it.
href?string
When set, the button renders as a link.
isDisabled?boolean
Whether the button is disabled.
isLoading?boolean
Show a loading indicator.
- Default
false
rel?string
With href, the link's relationship to the page (noreferrer, …).
target?string
With href, where the linked page opens (_blank, …).
className?string
Merged with the part's classes.
OpenInContent
data-slot="open-in-content"
autoFocus?boolean | FocusStrategy
Where the focus should be set.
- Type
boolean | FocusStrategy
crossOffset?number
The additional offset applied along the cross axis between the element and its anchor element.
- Default
0
offset?number
The additional offset applied along the main axis between the element and its anchor element.
- Default
8
onAction?(key: Key, value: T) → void
Handler that is called when an item is selected.
- Parameters
key– Keyvalue– T- Returns
void
onClose?() → void
Handler that is called when the menu should close after selecting an item.
- Returns
void
placement?"bottom" | "bottom left" | "bottom right" | "bottom start" | "bottom end" | "top" | "top left" | "top right" | "top start" | "top end" | "left" | "left top" | "left bottom" | "start" | "start top" | "start bottom" | "right" | "right top" | "right bottom" | "end" | "end top" | "end bottom"
The placement of the element with respect to its anchor element.
- Type
"bottom" | "bottom left" | "bottom right" | "bottom start" | "bottom end" | "top" | "top left" | "top right" | "top start" | "top end" | "left" | "left top" | "left bottom" | "start" | "start top" | "start bottom" | "right" | "right top" | "right bottom" | "end" | "end top" | "end bottom"- Default
"bottom"
shouldFocusWrap?boolean
Whether keyboard navigation is circular.
className?string
Merged with the part's classes.
OpenInItem
data-slot="open-in-item"
children?ChildrenOrFunction<T>
The children of the component. A function may be provided to alter the children based on component state.
- Type
ChildrenOrFunction<T>
id?Key
The unique id of the item.
inset?boolean
Indents it to line up with items that have an icon or indicator.
isDisabled?boolean
Whether the item is disabled.
onAction?() → void
Handler that is called when the item is selected.
- Returns
void
shouldCloseOnSelect?boolean
Whether the menu should close when the menu item is selected.
style?StyleOrFunction<T>
The inline [style](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/style) for the element. A function may be provided to compute the style based on component state.
- Type
StyleOrFunction<T>
textValue?string
A string representation of the item's contents, used for features like typeahead.
value?T
The object value that this item represents. When using dynamic collections, this is set automatically.
variant?"default" | "destructive"
The visual style.
- Type
"default" | "destructive"
render?(props: DetailedHTMLProps<LinkWithRequiredHref, HTMLAnchorElement> | React.JSX.IntrinsicElements[Fallback], renderProps: T) → ReactElement
Overrides the default DOM element with a custom render function.
This allows rendering existing components with built-in styles and behaviors
such as router links, animation libraries, and pre-styled components.
Note: You can check if 'href' in props in order to tell whether to render an <a> element.
Requirements:
- You must render the expected element type (e.g. if <a> is expected, you cannot render a
<button>).
- Only a single root DOM element can be rendered (no fragments).
- You must pass through props and ref to the underlying DOM element, merging with your own prop
as appropriate.
- Type
(props: DetailedHTMLProps<LinkWithRequiredHref, HTMLAnchorElement> | React.JSX.IntrinsicElements[Fallback], renderProps: T) → ReactElement- Parameters
props– DetailedHTMLProps<LinkWithRequiredHrefHTMLAnchorElement> | React.JSX.IntrinsicElements[Fallback]renderProps– T- Returns
ReactElement
className?ClassNameOrFunction<MenuItemRenderProps>
The CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the element. A function may be provided to compute the class based on component state.
- Type
ClassNameOrFunction<MenuItemRenderProps>- Default
"react-aria-MenuItem"
OpenInGroup
data-slot="open-in-group"
dependencies?ReadonlyArray<any>
Values that should invalidate the item cache when using dynamic collections.
- Type
ReadonlyArray<any>
id?Key
The unique id of the section.
shouldCloseOnSelect?boolean
Whether the menu should close when the menu item is selected.
style?object
The inline [style](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/style) for the element.
- Type
{ prop?: string]: string | number }
value?T
The object value that this section represents. When using dynamic collections, this is set automatically.
render?DOMRenderFunction<E, T>
Overrides the default DOM element with a custom render function.
This allows rendering existing components with built-in styles and behaviors
such as router links, animation libraries, and pre-styled components.
Requirements:
- You must render the expected element type (e.g. if <button> is expected, you cannot render an
<a>).
- Only a single root DOM element can be rendered (no fragments).
- You must pass through props and ref to the underlying DOM element, merging with your own prop
as appropriate.
- Type
DOMRenderFunction<E, T>
className?string
The CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the element.
- Default
"react-aria-MenuSection"
OpenInLabel
data-slot="open-in-label"
inset?boolean
Indents it to line up with items that have an icon or indicator.
render?DOMRenderFunction<E, T>
Overrides the default DOM element with a custom render function.
This allows rendering existing components with built-in styles and behaviors
such as router links, animation libraries, and pre-styled components.
Requirements:
- You must render the expected element type (e.g. if <button> is expected, you cannot render an
<a>).
- Only a single root DOM element can be rendered (no fragments).
- You must pass through props and ref to the underlying DOM element, merging with your own prop
as appropriate.
- Type
DOMRenderFunction<E, T>
OpenInSeparator
data-slot="open-in-separator"
children?ReactNode
The children of the component.
elementType?string
The HTML element type that will be used to render the separator.
orientation?"horizontal" | "vertical"
The orientation of the separator.
- Type
"horizontal" | "vertical"- Default
"horizontal"
style?object
The inline [style](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/style) for the element.
- Type
{ prop?: string]: string | number }
className?string
The CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the element.
OpenInChatGPT
inset?boolean
Indents it to line up with items that have an icon or indicator.
isDisabled?boolean
Whether the item is disabled.
label?string
The item's text, in place of Open in and the app's name.
onAction?() → void
Handler that is called when the item is selected.
- Returns
void
shouldCloseOnSelect?boolean
Whether the menu should close when the menu item is selected.
style?StyleOrFunction<T>
The inline [style](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/style) for the element. A function may be provided to compute the style based on component state.
- Type
StyleOrFunction<T>
textValue?string
A string representation of the item's contents, used for features like typeahead.
value?string
The item's id in the menu.
- Default
chatgpt
variant?"default" | "destructive"
The visual style.
- Type
"default" | "destructive"
render?(props: DetailedHTMLProps<LinkWithRequiredHref, HTMLAnchorElement> | React.JSX.IntrinsicElements[Fallback], renderProps: T) → ReactElement
Overrides the default DOM element with a custom render function.
This allows rendering existing components with built-in styles and behaviors
such as router links, animation libraries, and pre-styled components.
Note: You can check if 'href' in props in order to tell whether to render an <a> element.
Requirements:
- You must render the expected element type (e.g. if <a> is expected, you cannot render a
<button>).
- Only a single root DOM element can be rendered (no fragments).
- You must pass through props and ref to the underlying DOM element, merging with your own prop
as appropriate.
- Type
(props: DetailedHTMLProps<LinkWithRequiredHref, HTMLAnchorElement> | React.JSX.IntrinsicElements[Fallback], renderProps: T) → ReactElement- Parameters
props– DetailedHTMLProps<LinkWithRequiredHrefHTMLAnchorElement> | React.JSX.IntrinsicElements[Fallback]renderProps– T- Returns
ReactElement
className?string
Merged with the part's classes.
OpenInClaude
inset?boolean
Indents it to line up with items that have an icon or indicator.
isDisabled?boolean
Whether the item is disabled.
label?string
The item's text, in place of Open in and the app's name.
onAction?() → void
Handler that is called when the item is selected.
- Returns
void
shouldCloseOnSelect?boolean
Whether the menu should close when the menu item is selected.
style?StyleOrFunction<T>
The inline [style](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/style) for the element. A function may be provided to compute the style based on component state.
- Type
StyleOrFunction<T>
textValue?string
A string representation of the item's contents, used for features like typeahead.
value?string
The item's id in the menu.
- Default
claude
variant?"default" | "destructive"
The visual style.
- Type
"default" | "destructive"
render?(props: DetailedHTMLProps<LinkWithRequiredHref, HTMLAnchorElement> | React.JSX.IntrinsicElements[Fallback], renderProps: T) → ReactElement
Overrides the default DOM element with a custom render function.
This allows rendering existing components with built-in styles and behaviors
such as router links, animation libraries, and pre-styled components.
Note: You can check if 'href' in props in order to tell whether to render an <a> element.
Requirements:
- You must render the expected element type (e.g. if <a> is expected, you cannot render a
<button>).
- Only a single root DOM element can be rendered (no fragments).
- You must pass through props and ref to the underlying DOM element, merging with your own prop
as appropriate.
- Type
(props: DetailedHTMLProps<LinkWithRequiredHref, HTMLAnchorElement> | React.JSX.IntrinsicElements[Fallback], renderProps: T) → ReactElement- Parameters
props– DetailedHTMLProps<LinkWithRequiredHrefHTMLAnchorElement> | React.JSX.IntrinsicElements[Fallback]renderProps– T- Returns
ReactElement
className?string
Merged with the part's classes.
OpenInT3
inset?boolean
Indents it to line up with items that have an icon or indicator.
isDisabled?boolean
Whether the item is disabled.
label?string
The item's text, in place of Open in and the app's name.
onAction?() → void
Handler that is called when the item is selected.
- Returns
void
shouldCloseOnSelect?boolean
Whether the menu should close when the menu item is selected.
style?StyleOrFunction<T>
The inline [style](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/style) for the element. A function may be provided to compute the style based on component state.
- Type
StyleOrFunction<T>
textValue?string
A string representation of the item's contents, used for features like typeahead.
value?string
The item's id in the menu.
- Default
t3
variant?"default" | "destructive"
The visual style.
- Type
"default" | "destructive"
render?(props: DetailedHTMLProps<LinkWithRequiredHref, HTMLAnchorElement> | React.JSX.IntrinsicElements[Fallback], renderProps: T) → ReactElement
Overrides the default DOM element with a custom render function.
This allows rendering existing components with built-in styles and behaviors
such as router links, animation libraries, and pre-styled components.
Note: You can check if 'href' in props in order to tell whether to render an <a> element.
Requirements:
- You must render the expected element type (e.g. if <a> is expected, you cannot render a
<button>).
- Only a single root DOM element can be rendered (no fragments).
- You must pass through props and ref to the underlying DOM element, merging with your own prop
as appropriate.
- Type
(props: DetailedHTMLProps<LinkWithRequiredHref, HTMLAnchorElement> | React.JSX.IntrinsicElements[Fallback], renderProps: T) → ReactElement- Parameters
props– DetailedHTMLProps<LinkWithRequiredHrefHTMLAnchorElement> | React.JSX.IntrinsicElements[Fallback]renderProps– T- Returns
ReactElement
className?string
Merged with the part's classes.
OpenInScira
inset?boolean
Indents it to line up with items that have an icon or indicator.
isDisabled?boolean
Whether the item is disabled.
label?string
The item's text, in place of Open in and the app's name.
onAction?() → void
Handler that is called when the item is selected.
- Returns
void
shouldCloseOnSelect?boolean
Whether the menu should close when the menu item is selected.
style?StyleOrFunction<T>
The inline [style](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/style) for the element. A function may be provided to compute the style based on component state.
- Type
StyleOrFunction<T>
textValue?string
A string representation of the item's contents, used for features like typeahead.
value?string
The item's id in the menu.
- Default
scira
variant?"default" | "destructive"
The visual style.
- Type
"default" | "destructive"
render?(props: DetailedHTMLProps<LinkWithRequiredHref, HTMLAnchorElement> | React.JSX.IntrinsicElements[Fallback], renderProps: T) → ReactElement
Overrides the default DOM element with a custom render function.
This allows rendering existing components with built-in styles and behaviors
such as router links, animation libraries, and pre-styled components.
Note: You can check if 'href' in props in order to tell whether to render an <a> element.
Requirements:
- You must render the expected element type (e.g. if <a> is expected, you cannot render a
<button>).
- Only a single root DOM element can be rendered (no fragments).
- You must pass through props and ref to the underlying DOM element, merging with your own prop
as appropriate.
- Type
(props: DetailedHTMLProps<LinkWithRequiredHref, HTMLAnchorElement> | React.JSX.IntrinsicElements[Fallback], renderProps: T) → ReactElement- Parameters
props– DetailedHTMLProps<LinkWithRequiredHrefHTMLAnchorElement> | React.JSX.IntrinsicElements[Fallback]renderProps– T- Returns
ReactElement
className?string
Merged with the part's classes.
OpenInv0
inset?boolean
Indents it to line up with items that have an icon or indicator.
isDisabled?boolean
Whether the item is disabled.
label?string
The item's text, in place of Open in and the app's name.
onAction?() → void
Handler that is called when the item is selected.
- Returns
void
shouldCloseOnSelect?boolean
Whether the menu should close when the menu item is selected.
style?StyleOrFunction<T>
The inline [style](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/style) for the element. A function may be provided to compute the style based on component state.
- Type
StyleOrFunction<T>
textValue?string
A string representation of the item's contents, used for features like typeahead.
value?string
The item's id in the menu.
- Default
v0
variant?"default" | "destructive"
The visual style.
- Type
"default" | "destructive"
render?(props: DetailedHTMLProps<LinkWithRequiredHref, HTMLAnchorElement> | React.JSX.IntrinsicElements[Fallback], renderProps: T) → ReactElement
Overrides the default DOM element with a custom render function.
This allows rendering existing components with built-in styles and behaviors
such as router links, animation libraries, and pre-styled components.
Note: You can check if 'href' in props in order to tell whether to render an <a> element.
Requirements:
- You must render the expected element type (e.g. if <a> is expected, you cannot render a
<button>).
- Only a single root DOM element can be rendered (no fragments).
- You must pass through props and ref to the underlying DOM element, merging with your own prop
as appropriate.
- Type
(props: DetailedHTMLProps<LinkWithRequiredHref, HTMLAnchorElement> | React.JSX.IntrinsicElements[Fallback], renderProps: T) → ReactElement- Parameters
props– DetailedHTMLProps<LinkWithRequiredHrefHTMLAnchorElement> | React.JSX.IntrinsicElements[Fallback]renderProps– T- Returns
ReactElement
className?string
Merged with the part's classes.
OpenInCursor
inset?boolean
Indents it to line up with items that have an icon or indicator.
isDisabled?boolean
Whether the item is disabled.
label?string
The item's text, in place of Open in and the app's name.
onAction?() → void
Handler that is called when the item is selected.
- Returns
void
shouldCloseOnSelect?boolean
Whether the menu should close when the menu item is selected.
style?StyleOrFunction<T>
The inline [style](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/style) for the element. A function may be provided to compute the style based on component state.
- Type
StyleOrFunction<T>
textValue?string
A string representation of the item's contents, used for features like typeahead.
value?string
The item's id in the menu.
- Default
cursor
variant?"default" | "destructive"
The visual style.
- Type
"default" | "destructive"
render?(props: DetailedHTMLProps<LinkWithRequiredHref, HTMLAnchorElement> | React.JSX.IntrinsicElements[Fallback], renderProps: T) → ReactElement
Overrides the default DOM element with a custom render function.
This allows rendering existing components with built-in styles and behaviors
such as router links, animation libraries, and pre-styled components.
Note: You can check if 'href' in props in order to tell whether to render an <a> element.
Requirements:
- You must render the expected element type (e.g. if <a> is expected, you cannot render a
<button>).
- Only a single root DOM element can be rendered (no fragments).
- You must pass through props and ref to the underlying DOM element, merging with your own prop
as appropriate.
- Type
(props: DetailedHTMLProps<LinkWithRequiredHref, HTMLAnchorElement> | React.JSX.IntrinsicElements[Fallback], renderProps: T) → ReactElement- Parameters
props– DetailedHTMLProps<LinkWithRequiredHrefHTMLAnchorElement> | React.JSX.IntrinsicElements[Fallback]renderProps– T- Returns
ReactElement
className?string
Merged with the part's classes.
