Sử dụng Prompt API tích hợp sẵn với Vercel AI SDK

Thomas Steiner

Ngày xuất bản: 16 tháng 7 năm 2026

AI SDK của Vercel là một bộ công cụ TypeScript độc lập với nhà cung cấp, được thiết kế để giúp bạn tạo các ứng dụng và tác nhân dựa trên AI bằng các khung giao diện người dùng phổ biến như Next.js, React, Svelte, Vue, Angular và các thời gian chạy như Node.js. Mặc dù phần lớn các nhà cung cấp đều dựa trên đám mây, nhưng hướng dẫn đầu tiên trong loạt hướng dẫn gồm 2 phần này tập trung vào một nhà cung cấp cộng đồng có tên là Browser AI do Jakob Hoeg Mørk (người được Google tài trợ) tạo ra. AI trên trình duyệt cho phép bạn sử dụng Prompt API với AI SDK của Vercel. Phần hai của loạt bài này giải thích cách thêm giao diện người dùng đồ hoạ vào ứng dụng AI của bạn.

Cài đặt thư viện

Gói @browser-ai/core là nhà cung cấp SDK AI cho Prompt API. Bạn có thể cài đặt bằng npm. Gói sẽ tự động cài đặt Vercel AI SDK cơ bản dưới dạng một phần phụ thuộc ngang hàng.

npm install @browser-ai/core

Cách sử dụng cơ bản

Cách sử dụng nhà cung cấp:

  1. Nhập hàm khởi tạo browserAI từ gói @browser-ai/core.
  2. Nhập hàm generateText() hoặc streamText() từ Vercel AI SDK. Cả hai hàm này đều tạo văn bản và gọi các công cụ cho một câu lệnh nhất định bằng cách sử dụng một mô hình ngôn ngữ:
  • Hàm generateText() không truyền trực tuyến và phù hợp với các đầu ra ngắn hoặc đầu ra mà bạn chỉ có thể tiếp tục sau khi nhận được toàn bộ đầu ra.
  • Hàm streamText() truyền trực tuyến văn bản được tạo từ một mô hình ngôn ngữ. Bạn có thể sử dụng hàm này cho các trường hợp sử dụng tương tác như chatbot và các ứng dụng khác theo thời gian thực.

Cách tạo một thực thể mô hình:

  1. Gọi browserAI(). Lưu ý: Theo phương pháp hay nhất, hãy luôn kiểm tra availability() của mô hình. Nhờ đó, bạn có thể sử dụng một phương án dự phòng (xem phần Sử dụng kết hợp) khi mô hình là 'unavailable' hoặc hiển thị thông tin cập nhật về tiến trình khi mô hình là 'downloadable' hoặc 'downloading'.

  2. Sau đó, bạn có thể gọi generateText() hoặc streamText(). Hãy tham khảo tài liệu về Vercel AI SDK để biết danh sách đầy đủ các tham số, ví dụ: thay vì truyền trực tiếp một prompt như trong mã mẫu sau, bạn cũng có thể truyền một đối tượng messages phức tạp hơn để đưa ra nhiều ví dụ hoặc truyền một câu lệnh system.

import { browserAI } from '@browser-ai/core';
import { generateText, streamText } from 'ai';

(async () => {
  const model = browserAI();
  const availability = await model.availability();

  if (availability === 'unavailable') {
    console.log('Your browser cannot run the built-in AI model.');
    return;
  }

  if (availability === 'downloadable' || availability === 'downloading') {
    await model.createSessionWithProgress((progress) => {
      console.log(`Download progress: ${Math.round(progress * 100)}%`);
    });
  }

  // Non-streaming text generation.
  const { text } = await generateText({
    model,
    prompt: 'Tell me a short joke',
  });
  console.log(text);

  // Streaming text generation.
  const result = streamText({
    model,
    prompt: 'Tell me a long joke',
  });

  for await (const chunk of result.textStream) {
    console.log(chunk);
  }
})();

Sử dụng đa phương thức

Gói @browser-ai/core hỗ trợ chế độ nhập đa phương thức bằng cách sử dụng một đối tượng type: 'file' trong các đối tượng nội dung của mảng messages.

content trường đối tượng (type: 'file')

Trường Các loại giá trị được chấp nhận Nội dung mô tả 

type


'file'

Đánh dấu đối tượng nội dung này là một tệp đầu vào 

data


string | Uint8Array | Buffer | ArrayBuffer | URL

Nội dung tệp ở một trong số các định dạng được hỗ trợ

Khi data là string, thì giá trị này phải là một trong các giá trị sau:

Định dạng Nội dung mô tả
Nội dung được mã hoá Base64 Các byte của tệp thô được mã hoá dưới dạng base64
URL dữ liệu Base64 ví dụ: data:image/png;base64,...
URL http(s) URL từ xa mà tệp sẽ được tìm nạp

Hãy xem đoạn mã sau đây để biết ví dụ:

import { streamText } from 'ai';
import { browserAI } from '@browser-ai/core';

const base64ImageData = await getBase64ImageData();
const audioData = await getAudioBuffer();

const result = streamText({
  model: browserAI(),
  messages: [
    {
      role: 'user',
      content: [
        { type: 'text', text: "What's in this image?" },
        { type: 'file', mediaType: 'image/png', data: base64ImageData },
      ],
    },
    {
      role: 'user',
      content: [
        { type: 'text', text: 'Transcribe this audio file!' },
        { type: 'file', mediaType: 'audio/mp3', data: audioData },
      ],
    },
  ],
});

for await (const chunk of result.textStream) {
  console.log(chunk);
}

Đầu ra có cấu trúc

Vercel AI SDK hỗ trợ đầu ra có cấu trúc thông qua zod, một phương thức xác thực giản đồ đầu tiên bằng TypeScript với suy luận kiểu tĩnh. Hãy xem tài liệu Xác định giản đồ của zod để biết thông tin chi tiết.

Để yêu cầu một đối tượng JSON khớp với giản đồ của bạn, hãy truyền output: Output.object({ schema }) đến generateText() hoặc streamText():

  • generateText() có Output.object() sẽ trả về đối tượng JSON cuối cùng trong trường output sau khi quá trình tạo hoàn tất.
  • streamText() với Output.object() cung cấp một partialOutputStream có thể lặp lại không đồng bộ, trong đó mỗi kết quả trung gian đều được đảm bảo phân tích cú pháp chính xác dưới dạng JSON. Ví dụ: nếu giản đồ của bạn thực thi một mảng gồm 2 số, bạn sẽ nhận được [] làm kết quả một phần đầu tiên, [123] làm kết quả một phần thứ hai và [123, 456] làm kết quả cuối cùng.
import { browserAI } from '@browser-ai/core';
import { generateText, streamText, Output } from 'ai';
import z from 'zod';

const model = browserAI();

const schema = z.object({
  recipe: z.object({
    name: z.string(),
    ingredients: z.array(z.object({ name: z.string(), amount: z.string() })),
    steps: z.array(z.string()),
  }),
});

const prompt = 'Generate a lasagna recipe.';

// Non-streaming object generation.
const { output } = await generateText({
  model,
  output: Output.object({ schema }),
  prompt,
});

console.log(output);

// Streaming object generation.
const { partialOutputStream } = streamText({
  model,
  output: Output.object({ schema }),
  prompt,
});

for await (const partialObject of partialOutputStream) {
  console.log(partialObject);
}

Sử dụng kết hợp

Điểm mạnh thực sự của AI SDK của Vercel là khả năng sử dụng kết hợp. Nó cung cấp một lớp trừu tượng cấp cao hơn trên các triển khai cấp thấp hơn của nhà cung cấp cơ bản. Khi sử dụng Prompt API làm trình cung cấp, bạn sẽ tạo một model bằng cách gọi hàm khởi tạo browserAI.

import { browserAI } from '@browser-ai/core';

const model = browserAI();

Để sử dụng một nhà cung cấp khác, chẳng hạn như nhà cung cấp AI tạo sinh của Google, bạn cần làm như sau:

  1. Cài đặt nhà cung cấp đã chọn.

    npm install @ai-sdk/google

  2. Khởi tạo model bằng hàm khởi tạo của nhà cung cấp. Đối với các nhà cung cấp dịch vụ đám mây như Google AI tạo sinh, việc này thường liên quan đến việc truyền khoá API. Trong trường hợp nhà cung cấp AI tạo sinh của Google, bạn cũng có thể truyền một mã nhận dạng mô hình đám mây, chẳng hạn như 'gemini-2.5-flash'. Tất cả phần còn lại của mã, chẳng hạn như các lệnh gọi đến streamText(), vẫn giữ nguyên.

    import { createGoogleGenerativeAI } from '@ai-sdk/google';

const API_KEY = 'YOUR_GOOGLE_AI_API_KEY';

const google = createGoogleGenerativeAI({ apiKey: API_KEY });
const model = google('gemini-2.5-flash');

Dự phòng trên đám mây

Một trường hợp sử dụng kết hợp cổ điển là sử dụng Prompt API khi có sẵn và quay lại nhà cung cấp dịch vụ đám mây trong các trường hợp khác. Để kiểm tra xem Prompt API có dùng được hay không, gói @browser-ai/core cung cấp hàm doesBrowserSupportBuiltInAI(). Bạn có thể dùng hàm này để tạo thực thể model một cách linh động dưới dạng mô hình dựa trên đám mây hoặc mô hình tích hợp.

import { doesBrowserSupportBuiltInAI } from '@browser-ai/core';

const API_KEY = 'YOUR_GOOGLE_AI_API_KEY';

const model = await (async () => {
  if (doesBrowserSupportBuiltInAI()) {
    const { browserAI } = await import('@browser-ai/core');
    return browserAI();
  }
  const { createGoogleGenerativeAI } = await import('@ai-sdk/google');
  const google = createGoogleGenerativeAI({ apiKey: API_KEY });
  return google('gemini-2.5-flash');
})();

Cơ chế dự phòng tích hợp

Một trường hợp sử dụng kết hợp khác là ưu tiên sử dụng nhà cung cấp dịch vụ đám mây khi có mạng, nhưng quay lại nhà cung cấp tích hợp nếu Prompt API được hỗ trợ.

import { doesBrowserSupportBuiltInAI } from '@browser-ai/core';

const API_KEY = 'YOUR_GOOGLE_AI_API_KEY';

let model;

const switchProvider = async (forceCloud = false) => {
  model = await (async () => {
    if (navigator.onLine || forceCloud) {
      const { createGoogleGenerativeAI } = await import('@ai-sdk/google');
      const google = createGoogleGenerativeAI({ apiKey: API_KEY });
      return google('gemini-2.5-flash');
    }
    const { browserAI } = await import('@browser-ai/core');
    return browserAI();
  })();
};

if (doesBrowserSupportBuiltInAI()) {
  window.addEventListener('online', switchProvider);
  window.addEventListener('offline', switchProvider);
}
await switchProvider(true);

Bản minh hoạ

Bản minh hoạ trực tiếp cho phép bạn dùng thử cả hai nhà cung cấp cùng lúc. Chọn Cloud API (Gemini 2.5 Flash) hoặc AI tích hợp trong các nút chọn, nhấn vào Run (Chạy) và xem trang điền vào 4 phần theo trình tự: một câu chuyện cười ngắn được tạo cùng một lúc bằng generateText(), một câu chuyện cười dài được truyền trực tuyến từng mã thông báo bằng streamText(), một công thức làm món lasagna được trả về dưới dạng một đối tượng JSON hoàn chỉnh, sau đó công thức tương tự đó được truyền trực tuyến dưới dạng JSON hợp lệ tăng dần bằng partialOutputStream. Nếu bạn chọn AI tích hợp và trình duyệt của bạn chưa tải mô hình xuống, thì chỉ báo tiến trình sẽ xuất hiện trước khi bản minh hoạ bắt đầu.

Bản minh hoạ AI của Vercel

Bước tiếp theo

Giờ đây, bạn đã biết cách sử dụng Prompt API với Vercel AI SDK. Bước tiếp theo là sử dụng Giao diện người dùng AI SDK và Các phần tử AI để thêm giao diện người dùng đồ hoạ vào ứng dụng của bạn.

Giao diện người dùng AI SDK được thiết kế để giúp bạn dễ dàng tạo các ứng dụng trò chuyện, hoàn thành và trợ lý tương tác. Đây là một bộ công cụ độc lập với khung, giúp đơn giản hoá việc tích hợp các chức năng AI nâng cao vào ứng dụng của bạn.

AI Elements là một thư viện thành phần và sổ đăng ký tuỳ chỉnh giúp bạn xây dựng các ứng dụng gốc AI nhanh hơn. Thư viện này cung cấp các thành phần dựng sẵn như cuộc trò chuyện, tin nhắn và nhiều thành phần khác.

Đọc bài viết Sử dụng giao diện người dùng và các phần tử AI của Vercel AI SDK với Prompt API để tìm hiểu cách thêm GUI vào ứng dụng của bạn.