Panduan Vercel AI SDK: Contoh dan Tutorial Praktis

Ekosistem pengembangan aplikasi berbasis kecerdasan buatan (artificial intelligence) berkembang sangat pesat. Jika beberapa tahun lalu integrasi model bahasa besar (LLM) hanya berfokus pada respons teks mentah, kini para pengembang dituntut untuk membangun arsitektur modern yang mendukung streaming instan, structured output, tool calling, hingga sistem agen otonom.

Untuk menjawab kebutuhan tersebut, Vercel menghadirkan Vercel AI SDK, pustaka open-source berbasis TypeScript dan JavaScript yang dirancang untuk menyederhanakan siklus pembuatan aplikasi AI modern. Melalui pembaruan arsitektur pada AI SDK 7, pustaka ini berevolusi dari sekadar jembatan pemanggil API model menjadi kerangka kerja terpadu untuk membangun sistem agen produksi yang tangguh dan terukur.

Panduan ini menyajikan langkah praktis dan kumpulan implementasi kode (vercel ai sdk examples) yang dapat Anda terapkan langsung ke dalam proyek aplikasi web modern.

---

Memahami Fondasi Vercel AI SDK

Vercel AI SDK mengatasi sejumlah kendala teknis mendasar dalam rekayasa AI tingkat aplikasi:

1. Abstraksi Multi-Penyedia (Model Agnostic): Anda dapat berpindah antara OpenAI, Anthropic, Google Gemini, maupun model open-source tanpa mengubah logika inti aplikasi secara masif. Melalui integrasi dengan AI Gateway Vercel, pengembang bahkan dapat mengakses ratusan model melalui satu antarmuka terpadu lengkap dengan manajemen kuota dan caching.
2. Streaming Standar Web: Memanfaatkan Web Streams API untuk mengirimkan token generasi langsung ke antarmuka pengguna tanpa latensi tinggi.
3. Validasi Tipe Data yang Kuat: Integrasi native dengan pustaka skema seperti Zod memastikan structured output dan argumen tool calling selalu tervalidasi secara type-safe.

Untuk memulai proyek baru, instal paket inti berikut:

npm install ai zod

---

1. Chatbot Streaming Interaktif dengan Next.js

Pola paling mendasar dalam pembuatan aplikasi percakapan adalah streaming. Menunggu LLM menyelesaikan seluruh paragraf sebelum menampilkan respons akan memperburuk pengalaman pengguna (UX). Fungsi streamText memungkinkan token langsung mengalir ke klien seketika saat diproses.

Berikut adalah contoh implementasi pada Route Handler Next.js (app/api/chat/route.ts):

import { streamText } from "ai";

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

  const result = streamText({
    model: "openai/gpt-4o",
    messages,
  });

  return result.toUIMessageStreamResponse();
}

Pada sisi klien (client-side), Vercel AI SDK menyediakan hook bawaan useChat yang otomatis mengelola state input, riwayat pesan, serta status loading:

"use client";

import { useChat } from "ai/react";

export default function ChatComponent() {
  const { messages, input, handleInputChange, handleSubmit, isLoading } = useChat();

  return (
    <div className="max-w-xl mx-auto p-4 space-y-4">
      <div className="space-y-2">
        {messages.map((m) => (
          <div
            key={m.id}
            className={`p-3 rounded-lg ${
              m.role === "user" ? "bg-blue-100 text-blue-900 ml-auto" : "bg-gray-100 text-gray-900"
            } max-w-[80%]`}
          >
            <strong>{m.role === "user" ? "Anda: " : "AI: "}</strong>
            {m.content}
          </div>
        ))}
      </div>

      <form onSubmit={handleSubmit} className="flex gap-2">
        <input
          value={input}
          onChange={handleInputChange}
          placeholder="Ketik pertanyaan Anda..."
          className="flex-1 border rounded p-2"
        />
        <button
          type="submit"
          disabled={isLoading}
          className="bg-black text-white px-4 py-2 rounded disabled:opacity-50"
        >
          Kirim
        </button>
      </form>
    </div>
  );
}

---

2. Ekstraksi Data dengan Structured Output

Aplikasi skala produksi jarang hanya mengandalkan teks bebas. Sering kali sistem perlu mengubah masukan tidak terstruktur (seperti ulasan produk, tiket bantuan, atau formulir) menjadi objek JSON yang siap disimpan ke basis data relasional.

Dengan fungsi generateObject, Anda dapat mendefinisikan skema Zod secara ketat:

import { generateObject } from "ai";
import { z } from "zod";

const FeedbackSchema = z.object({
  sentimen: z.enum(["positif", "netral", "negatif"]),
  kategoriMasalah: z.enum(["layanan", "produk", "pengiriman", "harga"]),
  ringkasan: z.string().describe("Ringkasan komplain maksimal 15 kata"),
  skorKepuasan: z.number().min(1).max(5),
});

export async function analisisUlasan(ulasanPelanggan: string) {
  const { object } = await generateObject({
    model: "openai/gpt-4o-mini",
    schema: FeedbackSchema,
    prompt: `Analisis ulasan pelanggan berikut: "${ulasanPelanggan}"`,
  });

  return object;
}

Hasil dari fungsi tersebut berupa objek JavaScript murni yang terjamin strukturnya, sehingga meminimalkan risiko kegagalan penguraian (JSON parsing error).

---

3. Membangun AI Agent dengan Tool Calling

Kemampuan paling transformatif dari Vercel AI SDK adalah dukungannya terhadap pembuatan agen otonom melalui tool calling. Mekanisme ini memungkinkan model memutuskan kapan harus memanggil fungsi backend, mencari data eksternal, atau mengeksekusi logika bisnis pihak ketiga.

Contoh implementasi pengecekan inventaris toko daring:

import { generateText, tool } from "ai";
import { z } from "zod";

const result = await generateText({
  model: "openai/gpt-4o",
  prompt: "Apakah kopi Arabika Gayo ukuran 250g masih tersedia di gudang Jakarta?",
  tools: {
    cekStokGudang: tool({
      description: "Mengecek jumlah stok barang di gudang tertentu berdasarkan nama produk dan lokasi.",
      inputSchema: z.object({
        namaProduk: z.string(),
        lokasiGudang: z.string(),
      }),
      execute: async ({ namaProduk, lokasiGudang }) => {
        // Simulasi kueri basis data atau integrasi API internal
        return {
          produk: namaProduk,
          lokasi: lokasiGudang,
          stokTersedia: 42,
          satuan: "pack",
        };
      },
    }),
  },
  maxSteps: 3, // Mengizinkan multi-step loop jika model perlu menjalankan aksi beruntun
});

console.log(result.text);

Melalui parameter maxSteps, SDK menangani siklus umpan balik secara mandiri: memanggil fungsi, menerima data balasan, dan mengirimkannya kembali ke model untuk merumuskan jawaban akhir yang akurat.

---

Praktik Terbaik dalam Implementasi Skala Produksi

Saat menerapkan arsitektur AI pada beban kerja nyata, terapkan prinsip-prinsip berikut:

• Isolasi Eksekusi Kode: Jika agen Anda diizinkan menjalankan kode komputasi dinamis, pastikan proses tersebut berjalan dalam lingkungan sandbox terisolasi demi mencegah risiko keamanan server.
• Failover dan Redundansi: Pasang strategi cadangan (fallback) pada tingkat API gateway untuk beralih otomatis ke penyedia LLM lain saat terjadi lonjakan latensi atau rate limit.
• Arsitektur Multi-Agen: Untuk tugas kompleks seperti riset konten atau agregasi data, bagi beban kerja ke dalam agen-agen spesifik (misalnya koordinator, peneliti, dan editor) agar setiap langkah tetap terverifikasi.

Mengelola alur kerja konten berbasis riset yang konsisten dan siap dikutip oleh mesin pencari generatif memerlukan ketelitian tinggi. Platform seperti Terradium memanfaatkan arsitektur multi-agen untuk menyusun konten terstruktur sekaligus melacak visibilitas kutipan merek Anda di ChatGPT, Perplexity, Google AI Overviews, dan Gemini.

---

Kesimpulan

Vercel AI SDK telah menjadi standar industri dalam ekosistem TypeScript untuk membangun aplikasi cerdas modern. Melalui abstraksi streaming, validasi objek terstruktur, serta orkestrasi pemanggilan tool yang intuitif, pengembang dapat berfokus penuh pada logika bisnis tanpa harus merakit infrastruktur komunikasi LLM tingkat rendah dari awal. Mulailah dengan fitur percakapan interaktif sederhana, lalu kembangkan arsitektur Anda menjadi sistem agen otonom yang siap diandalkan di lingkungan produksi.