Menggunakan Prompt API bawaan dengan Vercel AI SDK

Thomas Steiner

Dipublikasikan: 16 Juli 2026

Vercel AI SDK adalah toolkit TypeScript yang independen dari penyedia dan dirancang untuk membantu Anda membuat aplikasi dan agen yang didukung AI menggunakan framework UI populer seperti Next.js, React, Svelte, Vue, Angular, dan runtime seperti Node.js. Meskipun sebagian besar penyedia berbasis cloud, panduan pertama dari seri dua bagian ini berfokus pada penyedia komunitas bernama Browser AI yang dibuat oleh Jakob Hoeg Mørk (yang di danai oleh Google). Browser AI memungkinkan Anda menggunakan Prompt API dengan AI SDK Vercel. Bagian kedua dari seri ini kemudian menjelaskan cara menambahkan antarmuka pengguna grafis ke aplikasi AI Anda.

Menginstal library

Paket @browser-ai/core adalah penyedia SDK AI untuk Prompt API. Anda dapat menginstalnya dengan npm. Vercel AI SDK yang mendasarinya akan otomatis diinstal oleh paket sebagai dependensi peer.

npm install @browser-ai/core

Penggunaan dasar

Untuk menggunakan penyedia:

1. Impor konstruktor browserAI dari paket @browser-ai/core.
2. Impor fungsi generateText() atau streamText() dari Vercel AI SDK. Kedua fungsi ini menghasilkan teks dan memanggil alat untuk perintah tertentu menggunakan model bahasa:

• Fungsi generateText() tidak melakukan streaming dan ideal untuk output singkat atau untuk output yang hanya dapat dilanjutkan setelah seluruh output diterima.
• Fungsi streamText() melakukan streaming pembuatan teks dari model bahasa. Anda dapat menggunakan fungsi ini untuk kasus penggunaan interaktif seperti chatbot dan aplikasi real-time lainnya.

Untuk membuat instance model:

1. Panggil browserAI(). Catatan: Sebagai praktik terbaik, selalu periksa availability() model, yang memungkinkan Anda menggunakan penggantian (lihat Penggunaan hybrid) saat model 'unavailable', atau menampilkan update progres saat model 'downloadable' atau 'downloading'.

2. Kemudian, Anda dapat memanggil generateText() atau streamText(). Lihat dokumentasi Vercel AI SDK untuk mengetahui daftar lengkap parameter. Misalnya, daripada meneruskan prompt secara langsung seperti dalam contoh kode berikut, Anda juga dapat meneruskan objek messages yang lebih kompleks untuk perintah multi-shot, atau meneruskan perintah 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);
  }
})();

Penggunaan multimodal

Paket @browser-ai/core mendukung input multimodal menggunakan type: 'file' objek dalam objek konten array messages.

content kolom objek (type: 'file')

type

'file'

data

string | Uint8Array | Buffer | ArrayBuffer | URL

Jika data adalah string, data tersebut harus salah satu dari:

Untuk contohnya, lihat cuplikan kode berikut:

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

Output terstruktur

Vercel AI SDK mendukung output terstruktur melalui zod, validasi skema pertama TypeScript dengan inferensi jenis statis. Lihat dokumentasi Menentukan skema zod untuk mengetahui detailnya.

Untuk meminta objek JSON yang cocok dengan skema Anda, teruskan output: Output.object({ schema }) ke generateText() atau streamText():

• generateText() dengan Output.object() menampilkan objek JSON akhir di kolom output setelah pembuatan selesai.
• streamText() dengan Output.object() menyediakan iterable asinkron partialOutputStream yang menjamin setiap hasil perantara akan diuraikan dengan benar sebagai JSON. Misalnya, jika skema Anda menerapkan array dua angka, Anda akan menerima [] sebagai hasil parsial pertama, [123] sebagai hasil kedua, dan [123, 456] sebagai hasil akhir.

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

Penggunaan hybrid

AI SDK Vercel benar-benar unggul dalam penggunaan hybrid. SDK ini menyediakan lapisan abstraksi tingkat yang lebih tinggi di atas implementasi tingkat yang lebih rendah dari penyedia yang mendasarinya. Saat menggunakan Prompt API sebagai penyedia, Anda membuat model dengan memanggil konstruktor browserAI.

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

const model = browserAI();

Untuk menggunakan penyedia lain, misalnya, penyedia AI Generatif Google, Anda harus melakukan hal berikut:

1. Instal penyedia yang dipilih.

   npm install @ai-sdk/google
   

2. Buat instance model menggunakan konstruktor penyedia, yang untuk penyedia cloud seperti AI Generatif Google, biasanya melibatkan penerusan kunci API. Dalam kasus penyedia AI Generatif Google, Anda juga dapat meneruskan ID model cloud, misalnya, 'gemini-2.5-flash'. Semua kode lainnya, seperti panggilan ke streamText(), akan tetap sama.

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

Penggantian cloud

Kasus penggunaan hybrid klasik adalah menggunakan Prompt API jika tersedia dan kembali ke penyedia cloud dalam situasi lain. Untuk memeriksa apakah Prompt API tersedia, paket @browser-ai/core menyediakan fungsi doesBrowserSupportBuiltInAI(). Anda dapat menggunakan fungsi ini untuk membuat instance model secara dinamis sebagai model berbasis cloud atau model bawaan.

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

Penggantian bawaan

Kasus penggunaan hybrid lainnya adalah lebih memilih menggunakan penyedia cloud saat online, tetapi kembali ke penyedia bawaan jika Prompt API didukung.

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

Demo

Demo langsung memungkinkan Anda mencoba kedua penyedia secara berdampingan. Pilih Cloud API (Gemini 2.5 Flash) atau Built-in AI dari tombol pilihan, klik Run, dan lihat halaman yang diisi dalam empat bagian secara berurutan: lelucon singkat yang dibuat sekaligus dengan generateText(), lelucon panjang yang di-streaming token demi token dengan streamText(), resep lasagna yang ditampilkan sebagai objek JSON lengkap, lalu resep yang sama di-streaming sebagai JSON yang valid secara bertahap menggunakan partialOutputStream. Jika Anda memilih Built-in AI dan browser belum mendownload model, indikator progres akan muncul sebelum demo dimulai.

Langkah berikutnya

Setelah mengetahui cara menggunakan Prompt API dengan Vercel AI SDK, langkah berikutnya adalah menggunakan UI AI SDK dan Elemen AI untuk menambahkan antarmuka pengguna grafis ke aplikasi Anda.

UI AI SDK dirancang untuk membantu Anda membuat aplikasi chat, penyelesaian, dan asisten interaktif dengan mudah. UI ini adalah toolkit yang independen dari framework, sehingga menyederhanakan integrasi fungsi AI canggih ke dalam aplikasi Anda.

Elemen AI adalah library komponen dan registry kustom untuk membantu Anda membuat aplikasi native AI dengan lebih cepat. Elemen ini menyediakan komponen bawaan seperti percakapan, pesan, dan lainnya.

Baca Menggunakan UI AI SDK Vercel dan Elemen AI dengan Prompt API, untuk mempelajari cara menambahkan GUI ke aplikasi Anda.