Vercel AI SDK ile yerleşik Prompt API'yi kullanma

Thomas Steiner

Yayınlanma tarihi: 16 Temmuz 2026

Vercel AI SDK, Next.js, React, Svelte, Vue ve Angular gibi popüler kullanıcı arayüzü çerçevelerini ve Node.js gibi çalışma zamanlarını kullanarak yapay zeka destekli uygulamalar ve temsilciler oluşturmanıza yardımcı olmak için tasarlanmış, sağlayıcıdan bağımsız bir TypeScript araç setidir. Sağlayıcıların çoğu bulut tabanlı olsa da iki bölümlük serinin bu ilk rehberi, Jakob Hoeg Mørk tarafından oluşturulan ve Browser AI adlı bir topluluk sağlayıcısına odaklanmaktadır (Google tarafından finanse edilmiştir). Browser AI, Vercel'in AI SDK'sı ile Prompt API'yi kullanmanıza olanak tanır. Serinin ikinci bölümünde ise yapay zeka uygulamanıza grafik kullanıcı arayüzü ekleme açıklanmaktadır.

Kitaplığı yükleme

@browser-ai/core paketi, Prompt API'nin yapay zeka SDK'sı sağlayıcısıdır. npm ile yükleyebilirsiniz. Temel alınan Vercel AI SDK, paket tarafından otomatik olarak eş bağımlılık şeklinde yüklenir.

npm install @browser-ai/core

Temel kullanım

Sağlayıcıyı kullanmak için:

1. @browser-ai/core paketinden browserAI oluşturucusunu içe aktarın.
2. Vercel AI SDK'sından generateText() veya streamText() işlevlerini içe aktarın. Her iki işlev de bir dil modelini kullanarak belirli bir istem için metin oluşturur ve araçları çağırır:

• generateText() işlevi, akış içermeyen ve kısa çıktılar veya yalnızca çıktının tamamı alındıktan sonra devam edebileceğiniz çıktılar için idealdir.
• streamText() işlevi, bir dil modelinden metin oluşturma işlemlerini yayınlar. Bu işlevi, chatbot'lar ve diğer anlık uygulamalar gibi etkileşimli kullanım alanlarında kullanabilirsiniz.

Model örneği oluşturmak için:

1. browserAI() Hizmetleri İçin Arayın. Not: En iyi uygulama olarak, modelin availability() özelliğini her zaman kontrol edin. Bu özellik, model 'unavailable' olduğunda yedek kullanmanıza (bkz. Karma kullanım) veya model 'downloadable' ya da 'downloading' olduğunda ilerleme durumu güncellemesi göstermenize olanak tanır.

2. Ardından generateText() veya streamText() numaralı telefonu arayabilirsiniz. Parametrelerin tam listesi için Vercel AI SDK dokümanlarına bakın. Örneğin, aşağıdaki kod örneğinde olduğu gibi doğrudan bir prompt iletmek yerine çok görevli istem için daha karmaşık bir messages nesnesi veya bir system istemi de iletebilirsiniz.

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

Çok formatlı kullanım

@browser-ai/core paketi, type: 'file' dizisindeki messages içerik nesnelerini kullanarak çok formatlı girişi destekler.

content nesne alanları (type: 'file')

type

'file'

data

string | Uint8Array | Buffer | ArrayBuffer | URL

data, string olduğunda şu değerlerden biri olmalıdır:

Örnek için aşağıdaki kod snippet'ine bakın:

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

Yapılandırılmış çıkış

Vercel AI SDK, statik tür çıkarımı ile TypeScript'in öncelikli olduğu bir şema doğrulama aracı olan zod aracılığıyla yapılandırılmış çıkışı destekler. Ayrıntılar için zod'un Şemaları tanımlama dokümanını inceleyin.

Şemanızla eşleşen bir JSON nesnesi istemek için output: Output.object({ schema }) değerini generateText() veya streamText() öğesine iletin:

• generateText() ile Output.object(), oluşturma işlemi tamamlandığında output alanında nihai JSON nesnesini döndürür.
• Output.object() ile streamText(), her ara sonucun JSON olarak doğru şekilde ayrıştırılacağı garanti edilen bir partialOutputStream eş zamansız yinelenebilir öğesi sağlar. Örneğin, şemanız iki sayılık bir diziyi zorunlu kılıyorsa ilk kısmi sonuç olarak [], ikinci kısmi sonuç olarak [123] ve nihai sonuç olarak [123, 456] değerini alırsınız.

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

Karma kullanım

Vercel'in Yapay Zeka SDK'sının en iyi olduğu nokta hibrit kullanımdır. Temel sağlayıcıların daha düşük düzeydeki uygulamalarının üzerinde daha yüksek düzeyde bir soyutlama katmanı sağlar. Sağlayıcı olarak Prompt API'yi kullandığınızda browserAI oluşturucuyu çağırarak model oluşturursunuz.

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

const model = browserAI();

Farklı bir sağlayıcıyı (ör. Google Üretken Yapay Zeka sağlayıcısı) kullanmak için şunları yapmanız gerekir:

1. Seçilen sağlayıcıyı yükleyin.

   npm install @ai-sdk/google
   

2. model, sağlayıcının oluşturucusunu kullanarak oluşturun. Google Üretken Yapay Zeka gibi bulut sağlayıcılar için bu işlem genellikle bir API anahtarı iletmeyi içerir. Google Üretken Yapay Zeka sağlayıcısı söz konusu olduğunda, 'gemini-2.5-flash' gibi bir bulut modeli tanımlayıcısı da iletebilirsiniz. Kodun geri kalanı (ör. streamText() çağrılarınız) tamamen aynı kalır.

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

Bulut yedeklemesi

Klasik bir karma kullanım alanı, Prompt API'nin kullanılabildiği durumlarda bu API'yi kullanmak, diğer durumlarda ise bir bulut sağlayıcıya geri dönmektir. Prompt API'nin kullanılabilir olup olmadığını kontrol etmek için @browser-ai/core paketinde doesBrowserSupportBuiltInAI() işlevi bulunur. Bu işlevi, model öğesini dinamik olarak bulut tabanlı bir model veya yerleşik bir model olarak oluşturmak için kullanabilirsiniz.

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

Yerleşik yedek

Bir başka karma kullanım alanı da tercihen online olduğunuzda bir bulut sağlayıcıyı kullanmak, ancak Prompt API destekleniyorsa yerleşik sağlayıcıya geri dönmektir.

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

Canlı demo sayesinde iki sağlayıcıyı da yan yana deneyebilirsiniz. Radyo düğmelerinden Cloud API (Gemini 2.5 Flash) veya Built-in AI'ı (Yerleşik Yapay Zeka) seçin, Run'ı (Çalıştır) tıklayın ve sayfanın sırayla dört bölümü doldurmasını izleyin: generateText() ile tek seferde oluşturulan kısa bir şaka, streamText() ile jeton jeton yayınlanan uzun bir şaka, tam bir JSON nesnesi olarak döndürülen lazanya tarifi ve ardından partialOutputStream kullanılarak artımlı olarak geçerli JSON olarak yayınlanan aynı tarif. Yerleşik yapay zekayı seçerseniz ve tarayıcınız modeli henüz indirmediyse demolar başlamadan önce bir ilerleme göstergesi görünür.

Sonraki adım

Vercel AI SDK ile Prompt API'yi nasıl kullanacağınızı öğrendiğinize göre, bir sonraki adım AI SDK UI ve AI Elements'ı kullanarak uygulamanıza grafik kullanıcı arayüzü eklemektir.

AI SDK kullanıcı arayüzü, etkileşimli sohbet, tamamlama ve asistan uygulamalarını kolayca oluşturmanıza yardımcı olmak için tasarlanmıştır. Bu, gelişmiş yapay zeka işlevlerinin uygulamalarınıza entegrasyonunu kolaylaştıran, çerçeveden bağımsız bir araç setidir.

AI Elements, yapay zeka destekli uygulamaları daha hızlı oluşturmanıza yardımcı olan bir bileşen kitaplığı ve özel kayıt defteridir. İleti dizileri, mesajlar gibi önceden oluşturulmuş bileşenler sunar.

Uygulamanıza GUI eklemeyi öğrenmek için Use the Vercel AI SDK UI and AI Elements with the Prompt API (Vercel AI SDK kullanıcı arayüzünü ve yapay zeka öğelerini istem API'siyle kullanma) başlıklı makaleyi okuyun.