Vercel AI SDK v5 cho phép các nhà phát triển React chuyển các lệnh gọi mô hình ngôn ngữ lớn (LLM) sang máy chủ, giúp ẩn các khóa API và giảm thiểu độ trễ phát sinh từ việc truyền tải (streaming) các đoạn văn bản trong trình duyệt. Kiến trúc dựa trên transport mới cũng tách biệt việc xử lý trạng thái (state), giúp mã UI luôn nhẹ nhàng trong khi SDK quản lý việc streaming, lịch sử và các lệnh gọi công cụ (tool invocations).

Tại sao cách tiếp cận cũ lại gây ra vấn đề

Hầu hết các chatbot React được xây dựng trước phiên bản v5 đều truyền trực tiếp đầu ra của mô hình đến client. Điều này buộc các nhà phát triển phải nhúng khóa bí mật của LLM vào mã front-end, khiến nó bị lộ trong trình kiểm tra mạng (network inspector) của trình duyệt. Các nhóm phát triển cũng sử dụng useState để lưu đệm (buffer) từng token nhận được, gây ra việc re-render sau mỗi đoạn nhỏ. Giao diện người dùng (UI) bị giật (flicker) và mã nguồn trở thành một mớ hỗn độn các callback.

Kết quả là: bất kỳ ai cũng có thể đánh cắp khóa, và cuộc hội thoại bị trễ trong khi các nhà phát triển phải vật lộn với việc xử lý các vấn đề trạng thái phức tạp ở mức thấp.

Những thay đổi cốt lõi trong v5

  • Kiến trúc dựa trên Transport – SDK hiện coi kết nối tới LLM như một lớp transport mô-đun. Các lệnh gọi bắt nguồn từ một API route trên máy chủ, vì vậy khóa bí mật không bao giờ rời khỏi backend. Transport trừu tượng hóa giao thức streaming, cung cấp một luồng tin nhắn có kiểu dữ liệu (typed stream) rõ ràng cho front end.

  • Lệnh gọi công cụ có kiểu dữ liệu (Typed Tool Invocations) – Khi một mô hình quyết định gọi một công cụ (ví dụ: tra cứu thời tiết hoặc lấy dữ liệu lịch), SDK sẽ đóng gói yêu cầu thành một payload có kiểu dữ liệu. Front end đọc trực tiếp cấu trúc của payload, giúp loại bỏ việc phân tích (parsing) tùy tiện và giảm thiểu lỗi runtime.

  • Quản lý trạng thái tách biệt – Hook useChat không còn bắt buộc sử dụng một kho lưu trữ trạng thái (state store) duy nhất. Nó cung cấp các callback và tiện ích mà bất kỳ thư viện quản lý trạng thái nào—Zustand, Redux, hoặc React context thuần túy—cũng có thể sử dụng. Các thành phần UI tập trung vào việc hiển thị trong khi SDK đảm nhận các tác vụ nặng nề.

Quy trình làm việc thực tế

  1. Logic LLM phía máy chủ – Trong một API route, hãy gọi streamText (hoặc trình trợ giúp streaming tương đương). SDK sẽ truyền đầu ra của mô hình về client thông qua một kết nối an toàn, giữ cho khóa API không bị lộ ra trình duyệt.
  2. UI phía client – Import useChat vào một component React. Hook này trả về danh sách tin nhắn hiện tại, một hàm để gửi đầu vào mới của người dùng và các cờ trạng thái (status flags). Vì trạng thái nằm ở nơi khác, bạn có thể tích hợp bất kỳ trình quản lý trạng thái nào mà bạn đang sử dụng.
  3. Xử lý công cụ – Khi mô hình phát ra một lệnh gọi công cụ, SDK sẽ gửi một đối tượng có cấu trúc đến client. Bạn có thể hiển thị một widget thời tiết, một trình chọn lịch, hoặc bất kỳ thành phần UI tùy chỉnh nào mà không cần viết mã đồng bộ hóa thủ công.

Kết quả là một sự phân tách rõ ràng: máy chủ quản lý tất cả các tương tác với LLM, còn client chỉ đảm nhận phần hiển thị. Không còn việc phân tích raw-stream, không còn rò rỉ khóa vô ý, và không còn tình trạng UI bị giật do re-render theo từng token.

Ai sẽ được hưởng lợi, và ai có thể sẽ do dự

Những điều cần theo dõi tiếp theo

Kết luận

Vercel AI SDK v5 định hình lại việc phát triển chatbot React bằng cách chuyển các lệnh gọi LLM sang máy chủ, cung cấp dữ liệu công cụ có kiểu dữ liệu và giải phóng front end khỏi việc xoay xở với các trạng thái ở mức thấp. Sự thay đổi này giải quyết hai rủi ro lớn nhất—lộ bí mật và UI bị giật—trong khi vẫn cho phép các nhà phát triển duy trì quyền kiểm soát ngăn xếp trạng thái (state stack) của riêng họ.