Open in Chat for Vue

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 Vue, 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

<script setup lang="ts">
import {
  OpenIn, OpenInChatGPT, OpenInClaude, OpenInContent, OpenInCursor,
  OpenInTrigger,
} from "@/components/ui/open-in-chat";
</script>

<template>
  <OpenIn query="How can I implement authentication in Next.js?">
    <OpenInTrigger />
    <OpenInContent>
      <OpenInChatGPT />
      <OpenInClaude />
      <OpenInCursor />
    </OpenInContent>
  </OpenIn>
</template>

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

AI SDK Elements is for React. In Vue, Open in Chat has the same parts and props, and the demos above show them in Vue's syntax.

FAQ

API Reference