00 การตั้งค่า

เนื้อหาเวิร์กช็อปเก็บรักษาไว้ในที่เก็บข้อมูล langfuse/langfuse-workshop ที่เป็นสาธารณะ ใช้ที่เก็บข้อมูลสำหรับแอปพลิเคชันที่สามารถเรียกใช้ได้ สาขา checkpoint และการตั้งค่าในเครื่อง

ดูไฟล์ Markdown นี้

เป้าหมาย

ให้แอปพลิเคชันเวิร์กช็อปทำงานในเครื่องของคุณโดยมีข้อมูลประจำตัว OpenAI และ Langfuse อยู่ในที่ จากที่นี่ คุณสามารถเรียนรู้ 01-base-app จากนั้นเริ่มสร้างใน 02-tracing

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

Node.js ^20.19.0 || >=22.12.0 — ตรวจสอบด้วย node -v และอัปเกรดก่อนติดตั้งหากคุณต่ำกว่ามัน (nvm install 22 หรือเทียบเท่าสำหรับ asdf, fnm, หรือ volta)

เวอร์ชันที่เก่ากว่าล้มเหลวในลักษณะที่ง่ายต่อการเข้าใจผิด ไฟล์ไบนารีเฉพาะแพลตฟอร์มของ Vite เป็นการอ้างอิงที่ไม่บังคับใช้ ดังนั้น npm จึงข้ามไป โดยไม่รายงานข้อผิดพลาด: npm install ดูเหมือนว่าประสบความสำเร็จ และปัญหาจะปรากฏขึ้นภายหลังเมื่อ npm run dev ไม่สามารถเริ่ม Vite ได้ หากคุณอัปเกรด Node หลังจากติดตั้ง ให้เรียกใช้ npm ci อีกครั้งเพื่อให้ไฟล์ไบนารีที่ข้ามไปถูกดึงมา

จุดเริ่มต้น

โคลนที่เก็บข้อมูลเวิร์กช็อป เข้าไป จากนั้นเช็คเอาต์ checkpoint การตั้งค่าสำหรับบทนี้:

git clone https://github.com/langfuse/langfuse-workshop.git
cd langfuse-workshop
git checkout checkpoint/00-setup

Checkpoint นี้โดยจงใจมีแอปพลิเคชัน base ที่ไม่ได้ติดตามเดียวกับ checkpoint/01-base-app ใช้มันเพื่อยืนยันว่าคีย์ API ของคุณ การอ้างอิง และพอร์ตท้องถิ่นใช้งานได้ก่อนเปลี่ยนไปยังบทสร้าง คีย์ Langfuse จะกำหนดค่าแล้ว แต่ trace จะเริ่มขึ้นหลังจากที่คุณเพิ่มการติดตามในเครื่องใน 02-tracing

ขั้นตอนที่ 1 — รับคีย์ API

1. OpenAI — platform.openai.com → API Keys → สร้างคีย์ใหม่ คัดลอกค่า sk-...
2. Langfuse — ลงทะเบียนที่ langfuse.com ในภูมิภาค EU สร้างโครงการ และคัดลอกคีย์สาธารณะ + คีย์ลับจาก Settings → API Keys

ขั้นตอนที่ 2 — ติดตั้งทักษะ Langfuse และ CLI

โมดูลภายหลังจะใช้ Langfuse ผ่านตัวแทนการเข้ารหัส ซึ่งต้องใช้ทักษะ langfuse และ CLI ของ Langfuse

วางสิ่งนี้ลงในตัวแทนการเข้ารหัสของคุณเพื่อติดตั้งทั้งสองอย่าง:

"โปรดติดตั้งทักษะ langfuse จาก https://github.com/langfuse/skills/tree/main/skills/langfuse และติดตั้ง Langfuse CLI ด้วย npm install -g langfuse-cli"

อย่างไรก็ตาม คุณต้องติดตั้งให้:

# Langfuse CLI
npm install -g langfuse-cli

# Langfuse Skill:
npx skills add langfuse/skills --skill "langfuse"

ขั้นตอนที่ 3 — กำหนดค่า .env

cp .env.example .env

กรอกใน:

OPENAI_API_KEY=sk-...
LANGFUSE_PUBLIC_KEY=pk-lf-...
LANGFUSE_SECRET_KEY=sk-lf-...
LANGFUSE_BASE_URL=https://cloud.langfuse.com

ปล่อยให้ส่วนที่เหลือค่าเริ่มต้นตามที่เป็นอยู่

แอปพลิเคชันเวิร์กช็อปจะโหลดไฟล์ .env ของที่เก็บข้อมูลนี้เสมอสำหรับเซิร์ฟเวอร์และสคริปต์ตัวช่วย หากคุณมีค่า LANGFUSE_*, OPENAI_*, หรือ DATASET_NAME ที่ส่งออกในเชลล์ของคุณจากโครงการอื่น จะไม่แทนที่ไฟล์นี้ เพื่อเปลี่ยนการกำหนดค่าเวิร์กช็อป ให้แก้ไข .env

เก็บค่าเหล่านี้ไว้ในเครื่องของคุณ .env เท่านั้น อย่าวางคีย์ API จริงลงในบันทึกเวิร์กช็อปที่ใช้ร่วมกัน ใจของการสนทนา ภาพหน้าจอ หรือข้อความแชท

ขั้นตอนที่ 4 — ติดตั้งและเรียกใช้

npm install
npm run dev

เปิด http://127.0.0.1:3333

หากคุณต้องการตรวจสอบเซิร์ฟเวอร์แยกกัน ให้ตรวจสอบ http://127.0.0.1:8787/api/health หรือ http://127.0.0.1:8787/api/support-context ในระหว่าง npm run dev 127.0.0.1:8787/ ไม่ใช่ URL ของแอปพลิเคชันหลัก

หากไม่มีอะไรโหลดบน 127.0.0.1:3333 ให้เลื่อนเอาต์พุต npm run dev กลับไปที่ [dev:client] บรรทัด concurrently เก็บเซิร์ฟเวอร์ API ให้ทำงานแม้ว่า Vite จะขัดข้อง ดังนั้นเทอร์มินัลจึงยังคงมีชีวิตอยู่ — และการเปิด 127.0.0.1:8787/ ในสถานะนั้นจะตอบกลับด้วย ENOENT ... dist/index.html ซึ่งหมายเพียงว่าการสร้างการใช้งานจริงขาดหายไปและไม่พูดอะไรเกี่ยวกับความล้มเหลวที่แท้จริง Cannot find native binding ข้อผิดพลาดในบรรทัด [dev:client] นั้นเป็นเวอร์ชันโหนด ดูข้อกำหนดเบื้องต้น

ขั้นตอนที่ 5 — ยืนยันสิ่งที่คุณเห็น

คุณควรเห็น เอเจนต์สนับสนุน Dad IT:

• มาสก็อต Specs ที่ด้านบน -คำทักทายจาก Specs
• ชิปข้อเสนอแนะด้านล่างการทักทาย
• แผง iPhone ทางด้านขวา ("Dad" + รายละเอียด iPhone 15)

วิธีตรวจสอบว่าคุณเสร็จสิ้น

• npm run dev ทำงานและฟังบน http://127.0.0.1:3333 (ไคลเอนต์) และ http://127.0.0.1:8787 (เซิร์ฟเวอร์ API)
• http://127.0.0.1:8787/api/health หรือ http://127.0.0.1:8787/api/support-context ส่งคืนการตอบกลับจริง
• เบราว์เซอร์แสดงการทักทายของ Specs ไม่ใช่ข้อผิดพลาด
• การส่งชิปข้อเสนอแนะหนึ่งอันทำให้เกิดคำตอบ iPhone จริงจากโมเดล

สถานะสุดท้าย

สภาพแวดล้อมของคุณพร้อมแล้ว เพื่อสร้างเวิร์กช็อปทีละขั้นตอน ให้เรียนรู้ 01-base-app หากคุณต้องการทัวร์แอป จากนั้นเช็คเอาต์ checkpoint/02-tracing สำหรับการเปลี่ยนแปลงรหัสครั้งแรก