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

Langserve-Assistant-ui

โครงการสาธิตที่รวม Langserve, Langgraph และ Fastapi เพื่อสร้างตัวแทน AI กับ UI ที่ทันสมัย โครงการใช้ Assistant-ui และ next.js vercel ai sdk สำหรับอินเทอร์เฟซแชทที่ราบรื่น

ภาพรวม

โครงการนี้จัดแสดง:

  • เอเจนต์ Langgraph ที่ทำงานบนเซิร์ฟเวอร์ fastapi โดยใช้ Langserve
  • การตอบสนองแบบเรียลไทม์สตรีมมิ่งไปยังส่วนหน้า
  • UI แชทที่ทันสมัยสร้างขึ้นพร้อมผู้ช่วย ui และ next.js
  • สาธิตวิธีการรวมเครื่องมือภายนอกและ APIs

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

  • Python 3.11
  • node.js v20.18.0
  • npm v10.9.2
  • เส้นด้าย v1.22.22

โครงสร้างโครงการ 

 langserve-assistant-ui/
├── backend/         # FastAPI + LangServe server
└── frontend/        # Next.js + assistant-ui client

คำแนะนำการตั้งค่า

ตั้งค่าตัวแปรสภาพแวดล้อม

ไปที่ ./backend และสร้างไฟล์. .env ทำตามตัวอย่างใน .env.example

การตั้งค่าแบ็กเอนด์

แบ็กเอนด์ถูกสร้างขึ้นโดยใช้ Langchain CLI และใช้ประโยชน์ create_react_agent ของ Langgraph สำหรับการสร้างเอเจนต์ 

 cd backend
poetry install
poetry run python -m app.server

การตั้งค่าส่วนหน้า

ส่วนหน้าถูกสร้างขึ้นโดยใช้เครื่องมือ Assistant-UI CLI และใช้เบ็ด USECHAT ของ Vercel AI SDK พร้อมส่วนประกอบเธรดของ Assistant-UI 

 cd frontend
yarn install
yarn dev

คุณสมบัติและตัวอย่าง

การโต้ตอบของเครื่องมือโดยตรง

คุณสามารถสอบถามเครื่องมือโดยตรงโดยใช้พรอมต์ง่าย ๆ : 

 Example: "What is the stock price of Apple?"

ตัวอย่างการสืบค้นราคาหุ้น

การโต้ตอบตามตัวแทน

เอเจนต์สามารถประมวลผลแบบสอบถามที่ซับซ้อนมากขึ้นซึ่งต้องการหลายขั้นตอน: 

 Example: "What is the weather in San Francisco?"

ตัวอย่างการสืบค้นสภาพอากาศ

รายละเอียดทางเทคนิค

  • แบ็กเอนด์ : fastapi + langserve สำหรับจุดสิ้นสุด API และโฮสติ้งตัวแทน
  • frontend : next.js + vercel ai sdk สำหรับการสตรีมการตอบกลับ
  • ส่วนประกอบ UI : Assistant-UI สำหรับส่วนประกอบการแชทอินเทอร์เฟซ
  • Agent Framework : Langgraph สำหรับ Agent Orchestration

การบริจาค

อย่าลังเลที่จะเปิดปัญหาหรือส่งคำขอดึงหากคุณมีคำแนะนำสำหรับการปรับปรุง

ขยาย
ข้อมูลเพิ่มเติม
แอปที่เกี่ยวข้อง
แนะนำสำหรับคุณ
ข้อมูลที่เกี่ยวข้อง ทั้งหมด