หน้าแรก>การเขียนโปรแกรมที่เกี่ยวข้อง>ซอร์สโค้ดอื่น ๆ
ดาวน์โหลด

คลอดด์ UI

อินเทอร์เฟซการแชทที่ทันสมัยสำหรับโมเดล Claude AI ของ Anthropic ที่สร้างด้วย Nuxt.js สัมผัสประสบการณ์การสนทนาที่ราบรื่นกับ Claude ในส่วนต่อประสานผู้ใช้ที่สะอาดตา

ข้อกำหนดเบื้องต้น

  • Node.js (เวอร์ชัน 18 หรือสูงกว่า)
  • npm หรือเส้นด้าย
  • คีย์ API ของมานุษยวิทยา

ภาพหน้าจอของ Claude UI

- คุณสมบัติ

  • - การจัดการประวัติการสนทนา
  • - รองรับโมเดล Claude หลายแบบ
  • การเน้นมาร์กดาวน์และการเน้นไวยากรณ์โค้ด
  • - สลับโหมดมืด / สว่าง
  • - ปรับเปลี่ยนพฤติกรรมโดยใช้ระบบแจ้งสำหรับการแชทแต่ละครั้ง
  • จำกัดโทเค็นเอาต์พุตสำหรับการแชทแต่ละครั้ง
  • กำหนดอุณหภูมิ (สุ่ม) สำหรับแต่ละแชท
  • - แคชพร้อมท์สำหรับไฟล์แนบ
  • - การแยกข้อความและการแยกวิเคราะห์

เทคสแต็ค

  • สร้างด้วย Nuxt 3
  • - การรวมฐานข้อมูลกับ Drizzle ORM
  • - ส่วนประกอบ UI จาก @nuxt/ui
  • - การบูรณาการ AI กับ @anthropic-ai/sdk
  • ความสามารถในการแยกข้อความด้วย @ nosferatu500/texttract
  • รองรับ Markdown ด้วย Markdown-it
  • การเน้นโค้ดด้วย highlight.js

ตั้งค่า

ตรวจสอบให้แน่ใจว่าได้ติดตั้งการอ้างอิง: 

 # npm
npm install

# pnpm
pnpm install

# yarn
yarn install

อีเอ็นวี

สร้างไฟล์ .env ในไดเร็กทอรีรากและเพิ่มคีย์ ANTHROPIC_KEY API ของคุณ

เซิร์ฟเวอร์การพัฒนา

เริ่มเซิร์ฟเวอร์การพัฒนาบน http://localhost:3000: 

 # npm
npm run dev

# pnpm
pnpm dev

# yarn
yarn dev

การผลิต

สร้างแอปพลิเคชันสำหรับการผลิต: 

 # npm
npm run build

# pnpm
pnpm build

# yarn
yarn build

ฐานข้อมูล

แอปพลิเคชันใช้ฐานข้อมูล SQLite เพื่อจัดเก็บข้อมูลเธรดและข้อความ

การจัดการฐานข้อมูล

โปรเจ็กต์นี้ใช้ Drizzle ORM สำหรับการจัดการฐานข้อมูล คำสั่งที่ใช้ได้: 

 # Generate database schema
npm run db:generate

# Migrate database schema
npm run db:migrate

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

  • เพิ่มการรองรับการสตรีมสำหรับการแชทที่ยาวนาน
  • เพิ่มการตรวจสอบฝั่งเซิร์ฟเวอร์สำหรับการป้อนข้อมูลแบบฟอร์ม
  • เพิ่มการตรวจสอบผู้ใช้
ขยาย
ข้อมูลเพิ่มเติม
แอปที่เกี่ยวข้อง
แนะนำสำหรับคุณ
ข้อมูลที่เกี่ยวข้อง ทั้งหมด