ใช้ Prompt API ในตัวกับ Vercel AI SDK

Thomas Steiner

เผยแพร่: 16 กรกฎาคม 2026

AI SDK ของ Vercel เป็นชุดเครื่องมือ TypeScript ที่ไม่ขึ้นอยู่กับผู้ให้บริการ ซึ่งออกแบบมาเพื่อช่วยคุณสร้างแอปพลิเคชันและเอเจนต์ที่ทำงานด้วยระบบ AI โดยใช้ เฟรมเวิร์ก UI ยอดนิยม เช่น Next.js, React, Svelte, Vue, Angular และรันไทม์ อย่าง Node.js แม้ว่าผู้ให้บริการส่วนใหญ่จะใช้ระบบคลาวด์ แต่คำแนะนำแรกนี้ ในชุด 2 ตอนจะมุ่งเน้นไปที่ผู้ให้บริการในชุมชนที่ชื่อ Browser AI ซึ่งสร้างโดย Jakob Hoeg Mørk (ผู้ที่ได้รับ เงินทุนจาก Google) AI ในเบราว์เซอร์ช่วยให้คุณใช้ Prompt API กับ AI SDK ของ Vercel ได้ ส่วนที่ 2 ของซีรีส์จะอธิบายวิธีเพิ่มอินเทอร์เฟซผู้ใช้แบบกราฟิกให้กับแอปพลิเคชัน AI

ติดตั้งไลบรารี

แพ็กเกจ @browser-ai/core คือผู้ให้บริการ AI SDK สำหรับ Prompt API คุณติดตั้งได้ด้วย npm แพ็กเกจจะติดตั้ง Vercel AI SDK ที่อยู่เบื้องหลังโดยอัตโนมัติเป็น การขึ้นต่อกันแบบเพียร์

npm install @browser-ai/core

การใช้งานพื้นฐาน

วิธีใช้ผู้ให้บริการ

  1. นำเข้าตัวสร้าง browserAI จากแพ็กเกจ @browser-ai/core
  2. นำเข้าฟังก์ชัน generateText() หรือ streamText() จาก Vercel AI SDK ทั้ง 2 ฟังก์ชันจะสร้างข้อความและเรียกใช้เครื่องมือสำหรับพรอมต์ที่กำหนดโดยใช้โมเดลภาษา
  • ฟังก์ชัน generateText() ไม่ใช่การสตรีมและเหมาะสำหรับเอาต์พุตสั้นๆ หรือเอาต์พุตที่คุณจะดำเนินการต่อได้เมื่อได้รับเอาต์พุตทั้งหมดแล้วเท่านั้น
  • ฟังก์ชัน streamText() จะสตรีมข้อความที่สร้างขึ้นจากโมเดลภาษา คุณสามารถใช้ฟังก์ชันนี้สำหรับกรณีการใช้งานแบบอินเทอร์แอกทีฟ เช่น แชทบอท และแอปพลิเคชันแบบเรียลไทม์อื่นๆ

วิธีสร้างอินสแตนซ์โมเดล

  1. โทรมาที่ browserAI() หมายเหตุ: แนวทางปฏิบัติแนะนำคือให้ตรวจสอบavailability()ของโมเดลเสมอ ซึ่งจะช่วยให้คุณใช้การสำรองได้ (ดูการใช้งานแบบไฮบริด) เมื่อโมเดล'unavailable' หรือแสดงการอัปเดตความคืบหน้าเมื่อโมเดล'downloadable' หรือ 'downloading'

  2. จากนั้นคุณสามารถโทรหา generateText() หรือ streamText() ได้ ดูรายการพารามิเตอร์ทั้งหมดได้ในเอกสารประกอบของ Vercel AI SDK เช่น คุณสามารถส่งออบเจ็กต์ messages ที่ซับซ้อนมากขึ้นสำหรับการแจ้งหลายครั้ง หรือ ส่งพรอมต์ system แทนการส่ง prompt โดยตรงตามตัวอย่างโค้ดต่อไปนี้

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);
  }
})();

การใช้งานแบบหลายรูปแบบ

แพ็กเกจ @browser-ai/core รองรับอินพุตหลายรูปแบบโดยใช้ออบเจ็กต์ type: 'file' ในออบเจ็กต์เนื้อหาของอาร์เรย์ messages

content ฟิลด์ออบเจ็กต์ (type: 'file')

ฟิลด์ ประเภทค่าที่ยอมรับ คำอธิบาย 

type


'file'

ทำเครื่องหมายออบเจ็กต์เนื้อหานี้เป็นอินพุตไฟล์ 

data


string | Uint8Array | Buffer | ArrayBuffer | URL

เนื้อหาไฟล์ในรูปแบบที่รองรับ

เมื่อ data เป็น string ค่าดังกล่าวต้องเป็นค่าใดค่าหนึ่งต่อไปนี้

รูปแบบ คำอธิบาย
เนื้อหาที่เข้ารหัส Base64 ไบต์ของไฟล์ดิบที่เข้ารหัสเป็น Base64
URL ข้อมูล Base64 เช่น data:image/png;base64,...
URL ของ http(s) URL ระยะไกลที่จะดึงข้อมูลไฟล์

ดูตัวอย่างได้ที่ข้อมูลโค้ดต่อไปนี้

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);
}

เอาต์พุตที่มีโครงสร้าง

Vercel AI SDK รองรับเอาต์พุตที่มีโครงสร้างผ่าน zod ซึ่งเป็น การตรวจสอบสคีมาที่ใช้ TypeScript เป็นหลักพร้อมการอนุมานประเภทแบบคงที่ ดูรายละเอียดได้ที่เอกสารประกอบการกำหนดสคีมาของ Zod

หากต้องการขอออบเจ็กต์ JSON ที่ตรงกับสคีมา ให้ส่ง output: Output.object({ schema }) ไปยัง generateText() หรือ streamText()

  • generateText() ที่มี Output.object() จะแสดงออบเจ็กต์ JSON สุดท้าย ในช่อง output เมื่อสร้างเสร็จแล้ว
  • streamText() ที่มี Output.object() จะให้ partialOutputStream async iterable ซึ่งรับประกันว่าผลลัพธ์ระดับกลางแต่ละรายการจะแยกวิเคราะห์ เป็น JSON ได้อย่างถูกต้อง เช่น หากสคีมาบังคับใช้อาร์เรย์ของตัวเลข 2 ตัว คุณจะได้รับ [] เป็นผลลัพธ์บางส่วนแรก [123] เป็นผลลัพธ์บางส่วนที่ 2 และ [123, 456] เป็นผลลัพธ์สุดท้าย
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);
}

การใช้งานแบบผสม

สิ่งที่ทำให้ AI SDK ของ Vercel โดดเด่นจริงๆ คือการใช้งานแบบไฮบริด โดยจะจัดเลเยอร์การแยกรายละเอียดระดับสูงกว่า ไว้เหนือการติดตั้งใช้งานระดับล่างกว่า ของผู้ให้บริการพื้นฐาน เมื่อใช้ Prompt API เป็นผู้ให้บริการ คุณจะสร้าง model ได้โดยการเรียกตัวสร้าง browserAI

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

const model = browserAI();

หากต้องการใช้ผู้ให้บริการรายอื่น เช่น ผู้ให้บริการ Generative AI ของ Google คุณต้องทำดังนี้

  1. ติดตั้งผู้ให้บริการที่เลือก

    npm install @ai-sdk/google

  2. สร้างอินสแตนซ์ของ model โดยใช้ตัวสร้างของผู้ให้บริการ ซึ่งโดยปกติแล้วสำหรับผู้ให้บริการระบบคลาวด์ เช่น Google Generative AI จะเกี่ยวข้องกับการส่งคีย์ API ในกรณีของผู้ให้บริการ Generative AI ของ Google คุณยังสามารถ ส่งตัวระบุโมเดลระบบคลาวด์ได้ด้วย เช่น 'gemini-2.5-flash' ส่วนโค้ดที่เหลือทั้งหมด เช่น การเรียกใช้ streamText() จะยังคงเหมือนเดิมทุกประการ

    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');

การสำรองข้อมูลในระบบคลาวด์

กรณีการใช้งานแบบไฮบริดคลาสสิกคือการใช้ Prompt API เมื่อพร้อมใช้งานและ เปลี่ยนไปใช้ผู้ให้บริการระบบคลาวด์ในกรณีอื่นๆ หากต้องการตรวจสอบว่า Prompt API พร้อมใช้งานหรือไม่ @browser-ai/core แพ็กเกจมีฟังก์ชัน doesBrowserSupportBuiltInAI() คุณสามารถใช้ฟังก์ชันนี้เพื่อสร้างอินสแตนซ์ model แบบไดนามิกเป็นโมเดลบนคลาวด์หรือโมเดลในตัว ก็ได้

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');
})();

การสำรองข้อมูลในตัว

อีกกรณีการใช้งานแบบไฮบริดคือการใช้ผู้ให้บริการระบบคลาวด์เมื่อออนไลน์ แต่ให้กลับไปใช้ผู้ให้บริการในตัวหาก Prompt API รองรับ

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);

สาธิต

การสาธิตแบบสด ช่วยให้คุณลองใช้ผู้ให้บริการทั้ง 2 รายแบบเทียบกันได้ เลือก Cloud API (Gemini 2.5 Flash) หรือ AI ในตัว จากปุ่มตัวเลือก กดเรียกใช้ แล้วดูหน้าเว็บเติมข้อมูลใน 4 ส่วนตามลำดับ ได้แก่ มุกตลกสั้นๆ ที่สร้างขึ้นพร้อมกันด้วย generateText() มุกตลกยาวๆ ที่สตรีมโทเค็นทีละรายการด้วย streamText() สูตรลาซานญ่าที่แสดงเป็นออบเจ็กต์ JSON ที่สมบูรณ์ จากนั้นสูตรเดียวกันนั้นจะสตรีมเป็น JSON ที่ถูกต้องแบบเพิ่มขึ้นโดยใช้ partialOutputStream หากเลือก AI ในตัวและเบราว์เซอร์ยังไม่ได้ดาวน์โหลดโมเดล ตัวบ่งชี้ความคืบหน้าจะปรากฏขึ้นก่อนที่การสาธิตจะเริ่ม

Vercel AI Demo

ขั้นตอนถัดไป

ตอนนี้คุณทราบวิธีใช้ Prompt API กับ Vercel AI SDK แล้ว ขั้นตอนถัดไปคือการใช้UI ของ AI SDK และองค์ประกอบ AI เพื่อเพิ่มอินเทอร์เฟซผู้ใช้แบบกราฟิกในแอป

UI ของ AI SDK ออกแบบมาเพื่อช่วยคุณสร้างแอปพลิเคชันแชทแบบอินเทอร์แอกทีฟ การเติมข้อความ และ แอปพลิเคชันผู้ช่วยได้อย่างง่ายดาย เป็นชุดเครื่องมือที่ไม่ขึ้นกับเฟรมเวิร์ก ซึ่งช่วยเพิ่มความคล่องตัวให้กับการผสานรวมฟังก์ชันการทำงานของ AI ขั้นสูงเข้ากับแอปพลิเคชันของคุณ

AI Elements คือคลังคอมโพเนนต์และรีจิสทรีที่กำหนดเองซึ่งจะช่วยให้คุณสร้างแอปพลิเคชันที่ทำงานด้วยระบบ AI ได้เร็วขึ้น โดยมีคอมโพเนนต์ที่สร้างไว้ล่วงหน้า เช่น การสนทนา ข้อความ และอื่นๆ

อ่านใช้ UI และองค์ประกอบ AI ของ Vercel AI SDK กับ Prompt API เพื่อดูวิธีเพิ่ม GUI ลงในแอป