ข้ามไปยังเนื้อหา
Yuvashadcn
Yuva สำหรับ shadcn/uiเมนู

Yuva สำหรับ shadcn/ui

คอมโพเนนต์ React สำหรับแชตสด การสนทนาในหน้าเอกสาร และการสมัครรายชื่ออีเมล คัดลอกเข้าโปรเจกต์ shadcn/ui ของคุณ

Yuva registry คือชุดคอมโพเนนต์และ hooks ที่ shadcn CLI คัดลอกเข้าโปรเจกต์ของคุณ ใช้ธีมของคุณ คุยกับ Yuva ผ่านไคลเอนต์ useyuva และคุณแก้ไขได้เอง

สิ่งที่ต้องมี

  • โปรเจกต์ที่ใช้ shadcn/ui อยู่แล้ว พร้อม React และ Tailwind CSS
  • ช่องทางแชตของ Yuva และคีย์สาธารณะ (yuva_pk_…)

ตั้งค่าช่องทาง

  1. ในแผงควบคุม Yuva ให้เปิดการตั้งค่า กล่องข้อความของคุณ แล้วเลือกช่องทาง จากนั้นเพิ่มช่องทางแชต
  2. เพิ่มทุก origin ที่จะแสดงคอมโพเนนต์เป็น origin ที่อนุญาต ได้แก่ไซต์ของคุณและเซิร์ฟเวอร์สำหรับพัฒนา
  3. คัดลอกคีย์สาธารณะของช่องทาง คีย์นี้ไม่ใช่ความลับ
  4. สำหรับการสนทนา ให้ตั้งโหมดการสนทนาของช่องทางเป็น moderated หรือ open สำหรับฟอร์มสมัครรับ ให้เพิ่มรายชื่ออีเมลสาธารณะ

ส่งคีย์และที่อยู่เซิร์ฟเวอร์ Yuva ของคุณให้คอมโพเนนต์ เช่นผ่านตัวแปรสภาพแวดล้อม:

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

เพิ่มรายการแรกของคุณ

ติดตั้งบล็อกแชต แล้วเรนเดอร์:

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}
    />
  )
}

รายการ

ทุกรายการใน registry จัดกลุ่มแบบเดียวกับแถบด้านข้าง

บล็อก

คอมโพเนนต์

Hooks

ถัดไป →Yuva chat