Vercel AI SDK v5 ช่วยให้นักพัฒนา React สามารถย้ายการเรียกใช้งาน large-language-model (LLM) ไปไว้ที่ฝั่งเซิร์ฟเวอร์ ซึ่งช่วยปกปิด API key และลดความหน่วง (latency) ที่เกิดจากการสตรีมข้อความทีละส่วน (text chunks) ในเบราว์เซอร์ สถาปัตยกรรมแบบ transport-based ใหม่นี้ยังแยกการจัดการสถานะ (state handling) ออกจากกัน ทำให้โค้ดส่วน UI มีน้ำหนักเบา ในขณะที่ SDK จะเป็นผู้จัดการเรื่องการสตรีม, ประวัติการสนทนา (history) และการเรียกใช้งานเครื่องมือ (tool invocations)

ทำไมแนวทางแบบเดิมถึงสร้างปัญหาให้กับโมเดล

แชทบอท React ส่วนใหญ่ที่สร้างขึ้นก่อนเวอร์ชัน v5 จะสตรีมเอาต์พุตของโมเดลไปยังไคลเอนต์โดยตรง สิ่งนี้บีบให้นักพัฒนาต้องฝังคีย์ลับของ LLM ไว้ในโค้ดฝั่ง front-end ซึ่งทำให้ถูกเปิดเผยผ่าน network inspector ของเบราว์เซอร์ได้ นอกจากนี้ ทีมพัฒนายังต้องใช้ useState เพื่อเก็บข้อมูล token ที่เข้ามาแต่ละตัว ส่งผลให้เกิดการ re-render ทุกครั้งที่มีข้อมูลชิ้นเล็กๆ เข้ามา ทำให้ UI กระตุกและโค้ดกลายเป็นความวุ่นวายของ callback ต่างๆ

ผลลัพธ์คือ: ใครก็ตามสามารถขโมยคีย์ไปได้ และการสนทนาก็เกิดอาการหน่วงในขณะที่นักพัฒนาต้องวุ่นวายกับการจัดการโครงสร้างสถานะ (state plumbing) ในระดับต่ำ

สิ่งที่ v5 เปลี่ยนแปลงภายใต้ระบบ

  • Transport-Based Architecture – ตอนนี้ SDK จะมองว่าการเชื่อมต่อกับ LLM เป็นเลเยอร์การรับส่งข้อมูล (transport layer) แบบโมดูลาร์ การเรียกใช้งานจะเริ่มต้นจาก API route บนเซิร์ฟเวอร์ ดังนั้นคีย์ลับจึงไม่หลุดออกจาก backend เลย ตัว transport จะช่วยจัดการโปรโตคอลการสตรีม (streaming protocol) ให้กลายเป็น stream ของข้อความที่มีการกำหนดประเภท (typed stream) ที่สะอาดตาเพื่อส่งไปยัง front end

  • Typed Tool Invocations – เมื่อโมเดลตัดสินใจเรียกใช้เครื่องมือ (เช่น การค้นหาสภาพอากาศ หรือการดึงข้อมูลปฏิทิน) SDK จะแพ็กคำขอเป็น payload ที่มีการกำหนดประเภท (typed payload) ฝั่ง front end สามารถอ่านโครงสร้างของ payload ได้โดยตรง ช่วยลดการทำ parsing แบบเฉพาะกิจ (ad-hoc parsing) และลดข้อผิดพลาดขณะรันไทม์ (runtime errors)

  • Decoupled State Management – hook useChat ไม่ได้บังคับให้ต้องใช้ state store เพียงรูปแบบเดียวอีกต่อไป แต่มันจะจัดเตรียม callback และ utility ต่างๆ ที่ไลบรารีจัดการสถานะใดๆ ก็ตาม ไม่ว่าจะเป็น Zustand, Redux หรือ React context ธรรมดา ก็สามารถนำไปใช้งานได้ คอมโพเนนต์ UI จะได้โฟกัสไปที่การเรนเดอร์ ในขณะที่ SDK จะรับหน้าที่จัดการงานหนักๆ แทน

เวิร์กโฟลว์ที่ใช้งานได้จริง

  1. Server-side LLM logic – ใน API route ให้เรียกใช้ streamText (หรือ helper สำหรับการสตรีมที่เทียบเท่ากัน) SDK จะสตรีมเอาต์พุตของโมเดลกลับไปยังไคลเอนต์ผ่านการเชื่อมต่อที่ปลอดภัย ช่วยให้ API key ไม่หลุดไปถึงเบราว์เซอร์
  2. Client-side UI – นำเข้า useChat ใน React component ตัว hook จะคืนค่ารายการข้อความปัจจุบัน, ฟังก์ชันสำหรับส่งอินพุตใหม่จากผู้ใช้ และสถานะต่างๆ (status flags) เนื่องจากสถานะถูกเก็บไว้ที่อื่น คุณจึงสามารถเชื่อมต่อกับ state manager ตัวไหนก็ได้ที่คุณใช้งานอยู่แล้ว
  3. Tool handling – เมื่อโมเดลส่งคำสั่งเรียกใช้เครื่องมือ (tool call) SDK จะส่งออบเจกต์ที่มีโครงสร้างชัดเจนไปยังไคลเอนต์ คุณสามารถเรนเดอร์ weather widget, ตัวเลือกปฏิทิน หรือ UI element แบบกำหนดเองได้โดยไม่ต้องเขียนโค้ดซิงค์ข้อมูลด้วยตัวเอง

ผลลัพธ์ที่ได้คือการแยกส่วนที่ชัดเจน: เซิร์ฟเวอร์เป็นเจ้าของปฏิสัมพันธ์กับ LLM ทั้งหมด ส่วนไคลเอนต์เป็นเจ้าของเฉพาะการแสดงผล ไม่ต้องมีการทำ raw-stream parsing อีกต่อไป ไม่มีการรั่วไหลของคีย์โดยไม่ตั้งใจ และไม่มีอาการ UI กระตุกจากการ re-render ทุกครั้งที่มี token เข้ามา

ใครจะได้ประโยชน์ และใครอาจจะลังเล

สิ่งที่ควรจับตามองต่อไป

บทสรุป

Vercel AI SDK v5 ปฏิรูปการพัฒนาแชทบอทด้วย React โดยการย้ายการเรียกใช้งาน LLM ไปไว้ที่เซิร์ฟเวอร์, มอบข้อมูลเครื่องมือแบบมีการกำหนดประเภท (typed tool data), และปลดปล่อย front end จากการจัดการสถานะที่ซับซ้อนในระดับต่ำ การเปลี่ยนแปลงนี้ช่วยจัดการกับปัญหาใหญ่สองประการ คือ การเปิดเผยข้อมูลลับและ UI ที่กระตุก ในขณะที่ยังช่วยให้นักพัฒนาสามารถควบคุม stack ของสถานะของตนเองได้