Vercel AI SDK

Vercel AI SDK adalah library TypeScript untuk membangun aplikasi AI interaktif. SDK ini mendukung streaming token, UI hooks untuk React/Next.js, serta structured outputs.

Pengaturan

Instal ai dan adapter @ai-sdk/openai-compatible:

npm i ai @ai-sdk/openai-compatible

pnpm add ai @ai-sdk/openai-compatible

bun add ai @ai-sdk/openai-compatible

export NEOSANTARA_API_KEY="nsk_your_api_key_here"

NEOSANTARA_API_KEY=nsk_your_api_key_here

$env:NEOSANTARA_API_KEY="nsk_your_api_key_here"

Inisialisasi Provider

Buat instance provider Neosantara menggunakan fungsi createOpenAICompatible:

import { createOpenAICompatible } from '@ai-sdk/openai-compatible';

export const neosantara = createOpenAICompatible({
  name: 'neosantara',
  apiKey: process.env.NEOSANTARA_API_KEY,
  baseURL: 'https://api.neosantara.xyz/v1',
});

Eksekusi Teks dan Streaming

import { createOpenAICompatible } from '@ai-sdk/openai-compatible';
import { generateText } from 'ai';

const neosantara = createOpenAICompatible({
  name: 'neosantara',
  apiKey: process.env.NEOSANTARA_API_KEY,
  baseURL: 'https://api.neosantara.xyz/v1',
});

const { text, usage } = await generateText({
  model: neosantara('gemini-3.8-flash'),
  prompt: 'Jelaskan arsitektur microservices dalam 3 kalimat.',
});

console.log(text);
console.log('Token usage:', usage);

import { createOpenAICompatible } from '@ai-sdk/openai-compatible';
import { streamText } from 'ai';

const neosantara = createOpenAICompatible({
  name: 'neosantara',
  apiKey: process.env.NEOSANTARA_API_KEY,
  baseURL: 'https://api.neosantara.xyz/v1',
});

const result = streamText({
  model: neosantara('deepseek-v4.1-flash'),
  prompt: 'Tuliskan 3 prinsip clean architecture pada backend TypeScript.',
});

for await (const delta of result.textStream) {
  process.stdout.write(delta);
}
console.log();

Next.js App Router API Route (`app/api/chat/route.ts`)

Gunakan fungsi helper toDataStreamResponse() untuk streaming langsung ke hook frontend useChat:

app/api/chat/route.ts

import { createOpenAICompatible } from '@ai-sdk/openai-compatible';
import { streamText } from 'ai';

const neosantara = createOpenAICompatible({
  name: 'neosantara',
  apiKey: process.env.NEOSANTARA_API_KEY,
  baseURL: 'https://api.neosantara.xyz/v1',
});

export async function POST(req: Request) {
  const { messages } = await req.json();

  const result = streamText({
    model: neosantara('deepseek-v4.1-flash'),
    messages,
  });

  return result.toDataStreamResponse();
}

Perbandingan Fungsi Utama Vercel AI SDK

Fungsi	Tipe Output	Skenario Penggunaan
`generateText`	Promise teks lengkap	Ekstraksi data background, batch worker, atau bot Telegram
`streamText`	Asynchronous stream	Chat interaktif, UI streaming Next.js via hook `useChat`
`generateObject`	Skema typed Zod	Ekstraksi JSON terstruktur dan validasi form otomatis

Langkah Berikutnya

Topik terkait

Streaming Respons Chat Completions Katalog Model Ringkasan Integrasi

⌘I

Framework

Alat & Widget

Pengaturan

Inisialisasi Provider

Eksekusi Teks dan Streaming

Next.js App Router API Route (`app/api/chat/route.ts`)

Perbandingan Fungsi Utama Vercel AI SDK

Langkah Berikutnya

​Pengaturan

​Inisialisasi Provider

​Eksekusi Teks dan Streaming

​Next.js App Router API Route (app/api/chat/route.ts)

​Perbandingan Fungsi Utama Vercel AI SDK

​Langkah Berikutnya

Pengaturan

Inisialisasi Provider

Eksekusi Teks dan Streaming

Next.js App Router API Route (`app/api/chat/route.ts`)

Perbandingan Fungsi Utama Vercel AI SDK

Langkah Berikutnya