Компоненты AI

Готовые примитивы для AI-чатов и агентских интерфейсов — нативные Oracul DS, агностичны от AI SDK.

Что это

Набор примитивов для построения интерфейсов AI-приложений: чат-история, сообщения, ввод prompt, стриминговый markdown, suggestions, и далее — attachments, reasoning, sources, tool calls, web-preview, и т.д. Адаптировано из Vercel AI Elements и переписано на наши примитивы (Base UI, Oracul tokens, data-slot API), чтобы работало нативно с остальной системой.

Phase 1 — готово сейчас

chat-conversation — контейнер истории с auto-scroll к низу.
chat-message — role-aware bubble (user/assistant/system/tool), actions, branch-picker.
chat-response — streaming markdown с code blocks, math, mermaid (через streamdown).
chat-suggestion — горизонтальные chip-suggestions.
chat-prompt-input — форма ввода с auto-resize textarea, Enter/Shift+Enter, submit с status.

Агностично от AI SDK. Компоненты принимают plain props (role, content, parts). Интеграция с @ai-sdk/react (или Claude API, или своего стека) живёт в particles и приложении.
Все на Oracul DS. Button, Avatar, cn, data-slot — те же что в остальной системе. Темы, токены, dark mode работают из коробки.
Установка через CLI как у любого другого компонента:


pnpm dlx shadcn@latest add @oracul/chat-conversation
npx shadcn@latest add @oracul/chat-message
npx shadcn@latest add @oracul/chat-response
npx shadcn@latest add @oracul/chat-suggestion
npx shadcn@latest add @oracul/chat-prompt-input

Демо

Объясни кратко, что такое Oracul DS

Oracul DS — это библиотека компонентов на Base UI с shadcn-стилем установки (npx shadcn@latest add). Особенности:

50+ примитивов: Button, Dialog, Select, и т.д.
480+ готовых particles — собранных блоков (формы, карточки, тулбары)
Tailwind v4 и семантические токены тем
Поддержка dark mode из коробки

"use client";

import { IconCopy, IconRotate, IconThumbUp } from "@tabler/icons-react";
import { useState } from "react";
import {
  ChatConversation,
  ChatConversationContent,
  ChatConversationScrollButton,
} from "@/components/ui/chat-conversation";
import {
  ChatMessage,
  ChatMessageAction,
  ChatMessageActions,
  ChatMessageAvatar,
  ChatMessageContent,
  ChatMessageToolbar,
} from "@/components/ui/chat-message";
import {
  ChatPromptInput,
  ChatPromptInputSubmit,
  ChatPromptInputTextarea,
  ChatPromptInputToolbar,
  ChatPromptInputTools,
} from "@/components/ui/chat-prompt-input";
import { ChatResponse } from "@/components/ui/chat-response";
import {
  ChatSuggestion,
  ChatSuggestions,
} from "@/components/ui/chat-suggestion";

type ChatRole = "user" | "assistant";
type ChatItem = { id: string; role: ChatRole; content: string };

const seedMessages: ChatItem[] = [
  {
    id: "m1",
    role: "user",
    content: "Объясни кратко, что такое Oracul DS",
  },
  {
    id: "m2",
    role: "assistant",
    content:
      "**Oracul DS** — это библиотека компонентов на [Base UI](https://base-ui.com/) с shadcn-стилем установки (`npx shadcn@latest add`). Особенности:\n\n- 50+ примитивов: `Button`, `Dialog`, `Select`, и т.д.\n- 480+ готовых particles — собранных блоков (формы, карточки, тулбары)\n- Tailwind v4 и семантические токены тем\n- Поддержка dark mode из коробки",
  },
];

const suggestions = [
  "Какие компоненты есть?",
  "Покажи пример формы",
  "Как кастомизировать тему?",
  "Сравни с shadcn/ui",
];

export default function Particle() {
  const [messages, setMessages] = useState(seedMessages);
  const [status, setStatus] = useState<"ready" | "streaming">("ready");

  const send = (text: string) => {
    const userMsg: ChatItem = {
      id: `u-${Date.now()}`,
      role: "user",
      content: text,
    };
    const reply: ChatItem = {
      id: `a-${Date.now()}`,
      role: "assistant",
      content: `Понял, ты спросил: «${text}». В демо я просто эхо, но в боевом сценарии тут был бы стримящийся ответ от модели.`,
    };
    setMessages((prev) => [...prev, userMsg]);
    setStatus("streaming");
    setTimeout(() => {
      setMessages((prev) => [...prev, reply]);
      setStatus("ready");
    }, 600);
  };

  return (
    <div className="flex h-140 w-full flex-col gap-3 rounded-2xl border bg-card p-3">
      <ChatConversation>
        <ChatConversationContent>
          {messages.map((m) => (
            <ChatMessage from={m.role} key={m.id}>
              {m.role === "assistant" ? (
                <ChatMessageAvatar fallback="J" />
              ) : null}
              <ChatMessageContent>
                {m.role === "assistant" ? (
                  <ChatResponse>{m.content}</ChatResponse>
                ) : (
                  m.content
                )}
              </ChatMessageContent>
              {m.role === "assistant" ? (
                <ChatMessageToolbar>
                  <ChatMessageActions>
                    <ChatMessageAction label="Копировать">
                      <IconCopy aria-hidden="true" stroke={1.5} />
                    </ChatMessageAction>
                    <ChatMessageAction label="Сгенерировать заново">
                      <IconRotate aria-hidden="true" stroke={1.5} />
                    </ChatMessageAction>
                    <ChatMessageAction label="Нравится">
                      <IconThumbUp aria-hidden="true" stroke={1.5} />
                    </ChatMessageAction>
                  </ChatMessageActions>
                </ChatMessageToolbar>
              ) : null}
            </ChatMessage>
          ))}
        </ChatConversationContent>
        <ChatConversationScrollButton />
      </ChatConversation>

      <ChatSuggestions>
        {suggestions.map((s) => (
          <ChatSuggestion key={s} onSelect={send} suggestion={s} />
        ))}
      </ChatSuggestions>

      <ChatPromptInput onMessageSend={send}>
        <ChatPromptInputTextarea placeholder="Спроси что-нибудь о Oracul DS…" />
        <ChatPromptInputToolbar>
          <ChatPromptInputTools />
          <ChatPromptInputSubmit status={status} />
        </ChatPromptInputToolbar>
      </ChatPromptInput>
    </div>
  );
}

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

Что это Phase 1 — готово сейчас Phase 2 — скоро Phase 3 — позже Принципы Демо