Chat Open In Chat

Выпадающее меню «открыть в…» для передачи запроса в ChatGPT, Claude, Cursor, Google, GitHub.

Текущий промпт: «Объясни, как мигрировать с revalidate на Cache Components в Next.js 16»

import {
  ChatOpenIn,
  ChatOpenInChatGPT,
  ChatOpenInClaude,
  ChatOpenInCursor,
  ChatOpenInGitHub,
  ChatOpenInGoogle,
  ChatOpenInPopup,
  ChatOpenInSeparator,
  ChatOpenInTrigger,
} from "@/components/ui/chat-open-in-chat";

const lastMessage =
  "Объясни, как мигрировать с revalidate на Cache Components в Next.js 16";

export default function Particle() {
  return (
    <div className="flex w-full flex-col items-start gap-3 p-4">
      <p className="max-w-xl text-muted-foreground text-sm">
        Текущий промпт:{" "}
        <span className="font-medium text-foreground">«{lastMessage}»</span>
      </p>
      <ChatOpenIn query={lastMessage}>
        <ChatOpenInTrigger />
        <ChatOpenInPopup>
          <ChatOpenInChatGPT />
          <ChatOpenInClaude />
          <ChatOpenInCursor />
          <ChatOpenInSeparator />
          <ChatOpenInGitHub />
          <ChatOpenInGoogle />
        </ChatOpenInPopup>
      </ChatOpenIn>
    </div>
  );
}

Установка


pnpm dlx shadcn@latest add @oracul/chat-open-in-chat

Использование

import {
  ChatOpenIn,
  ChatOpenInChatGPT,
  ChatOpenInClaude,
  ChatOpenInCursor,
  ChatOpenInGitHub,
  ChatOpenInGoogle,
  ChatOpenInPopup,
  ChatOpenInSeparator,
  ChatOpenInTrigger,
} from "@/components/ui/chat-open-in-chat";
 
<ChatOpenIn query={lastUserMessage}>
  <ChatOpenInTrigger />
  <ChatOpenInPopup>
    <ChatOpenInChatGPT />
    <ChatOpenInClaude />
    <ChatOpenInCursor />
    <ChatOpenInSeparator />
    <ChatOpenInGitHub />
    <ChatOpenInGoogle />
  </ChatOpenInPopup>
</ChatOpenIn>

Свои назначения

Для своего сервиса используйте <ChatOpenInItem>:

<ChatOpenInItem
  href="https://perplexity.ai/?q={query}"
  icon={<MyPerplexityIcon />}
>
  Perplexity
</ChatOpenInItem>

{query} в href будет заменён на URL-кодированное значение свойства query корневого компонента. Любой <MenuItem> от Oracul тоже работает — внутри это обычное выпадающее меню.

Встроенные пресеты

Компонент	Шаблон URL
`ChatOpenInChatGPT`	`https://chatgpt.com/?q={query}`
`ChatOpenInClaude`	`https://claude.ai/new?q={query}`
`ChatOpenInCursor`	`cursor://anysphere.cursor-deeplink/chat?text={query}`
`ChatOpenInGoogle`	`https://www.google.com/search?q={query}`
`ChatOpenInGitHub`	`https://github.com/search?q={query}&type=code`

На этой странице

Установка Использование Свои назначения Встроенные пресеты