Open in Chat for Ark 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.

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", not noopener alone, so the apps don't see your page's address.
• OpenInScira takes a label like the others, OpenInGroup is new for labelled groups, and useOpenInContext is exported for items of your own.
• The menu opens lined up with the trigger's start, as align="start" did.

On Ark UI, an OpenInItem of your own needs a value, and OpenIn takes the menu's positioning, bottom-start unless you set it.

FAQ

API Reference