Open in chat
Explicit provider links that encode a supplied prompt for ChatGPT, Claude, Cursor, Scira, T3 Chat and v0.
Preview
In action
When to use
Use it for
- Offer an explicit handoff of supplied text to another application.
- Choose providers from chatgpt, claude, cursor, scira, t3, v0 and github. GitHub requires a separate githubUrl; it does not treat the prompt as a URL.
- Prompt query parameters use the browser's query encoder. Native links preserve browser open-in-new-tab behavior.
- No prompt is sent when the component renders or opens; the selected provider is contacted only after link activation.
- Provider handoff addresses are based on the pinned AI Elements reference and may evolve. The provider controls what happens after navigation.
Avoid
- Claiming that opening a provider link has submitted or generated a response.
- Including conversation content in prompt that the application does not intend to hand off.
Install
React package
npm install @noorddev/vlak-react
Load the stylesheet once at your app root, then import the components you use.
import "@noorddev/vlak-react/css";
import { OpenInChat } from "@noorddev/vlak-react";Per-component imports are available at @noorddev/vlak-react/components/open-in-chat.
Copy the source
npx @noorddev/vlak-cli add open-in-chat
Adds the component and its dependencies to components/vlak/. Follow the StyleX setup to compile the source in your application.
shadcn registry
npx shadcn add https://vlak.dev/r/open-in-chat.json
Installs the same source through the shadcn CLI.
React
import { OpenInChat } from "@noorddev/vlak-react";
<OpenInChat prompt="Review the brief and suggest the next step." providers={["chatgpt", "claude", "cursor"]} />See the integration example to compose these components with your application's model and data.
Props
OpenInChat
Explicit provider links for a supplied prompt. Nothing leaves the page until a link is activated.
| Prop | Type | Default | Description |
|---|---|---|---|
promptrequired | string | ||
providers | readonly OpenInChatProvider[] | ["chatgpt", "claude", "cursor", "scira", "t3", "v0"] | |
githubUrl | string | ||
label | string | "Open in chat" | |
defaultOpen | boolean | false |
Also accepts Omit<DetailsHTMLAttributes<HTMLDetailsElement>, "title">.
The ref reaches HTMLDetailsElement.
openInChatHref (function)
Builds provider handoff links without contacting providers or submitting a conversation.
Keyboard
| Keys | Does |
|---|---|
| Tab | Reaches the native disclosure and its provider links |
| Enter, Space | Opens or closes provider choices |
| Enter on a link | Opens that provider in a new tab |
Accessibility
- The disclosure and every provider link have readable names. New-tab behavior is included in link labels.
- Links have 44px minimum height, visible focus and rel=noopener noreferrer.
- Native details attributes and the details ref pass through; CSS-only markup retains native disclosure and links.
Markup
The same styles are available as CSS. Native HTML provides the static presentation; React or application code supplies state updates and actions.
npm install @noorddev/vlak
import "@noorddev/vlak/css";
<details class="rs-open-in-chat rs-disclosure"><summary class="rs-disclosure-summary">Open in chat</summary><ul class="rs-open-in-chat-list"><li><a class="rs-open-in-chat-link" href="https://claude.ai/new?q=Review+the+brief" target="_blank" rel="noopener noreferrer">Claude</a></li></ul></details>
Classes
.rs-open-in-chat.rs-open-in-chat-list.rs-open-in-chat-link.rs-open-in-chat-note
Depends on
Use elsewhere
More in AI
ChatConversationResponseResponse markdownMessage composerResponse actionsResponse branchResponse editorConversation exportAttachmentsSuggestionsModel selectorContext usageCheckpointReasoningThought stepsPlanTaskWork queueTool callConfirmationInline citationSourcesShimmerWidgetGenerated imageWidget patternsHighlighted codeAgentFile treeArtifactSnippetCommitEnvironment variablesPackage infoSchema displayTest resultsStack traceTerminalSandboxWeb previewJsx previewAudio playerMic selectorSpeech inputTranscriptionVoice selectorPersonaWorkflow canvas