Chuyển đến nội dung
Yuvashadcn
Yuva cho shadcn/uiMenu

Yuva cho shadcn/ui

Các thành phần React cho chat trực tiếp, thảo luận trên trang tài liệu và đăng ký danh sách thư, được sao chép vào dự án shadcn/ui của bạn.

Registry của Yuva là một bộ thành phần và hook mà CLI shadcn sao chép vào dự án của bạn. Chúng dùng giao diện của bạn, trò chuyện với Yuva qua máy khách useyuva, và bạn tự do chỉnh sửa.

Yêu cầu

  • Một dự án đã dùng shadcn/ui, với React và Tailwind CSS.
  • Một kênh chat Yuva và khóa công khai của nó (yuva_pk_…).

Thiết lập kênh

  1. Trong bảng điều khiển Yuva, mở Cài đặt, hộp thư của bạn, Kênh, rồi thêm một kênh chat.
  2. Thêm mọi origin sẽ hiển thị các thành phần làm origin được phép: trang web và máy chủ phát triển của bạn.
  3. Sao chép khóa công khai của kênh. Nó không phải bí mật.
  4. Với thảo luận, đặt chế độ thảo luận của kênh thành moderated hoặc open. Với biểu mẫu đăng ký, thêm một danh sách thư công khai.

Đưa khóa và địa chỉ máy chủ Yuva của bạn cho các thành phần, ví dụ trong biến môi trường:

.env.local
NEXT_PUBLIC_YUVA_SERVER=https://support.example.com
NEXT_PUBLIC_YUVA_CHANNEL=yuva_pk_xxxxxxxxxxxxxxxx

Thêm mục đầu tiên của bạn

Cài khối chat, rồi hiển thị nó:

Shell
npx shadcn@latest add https://useyuva.com/r/yuva-chat.json
tsx
import { YuvaChat } from "@/components/yuva-chat"

export function Support() {
  return (
    <YuvaChat
      server={process.env.NEXT_PUBLIC_YUVA_SERVER}
      channel={process.env.NEXT_PUBLIC_YUVA_CHANNEL}
    />
  )
}

Mục

Mọi mục trong registry, nhóm như thanh bên.

Khối

Thành phần

Hook

Tiếp →Yuva chat