LangChain / Vercel AI SDK — AI Web

Framework AI untuk Web Developer Daripada menulis semua boilerplate sendiri, framework AI menyederhanakan integrasi: streaming, tool calling, RAG…

Framework AI seperti Vercel AI SDK dan LangChain.js adalah library yang membungkus kode yang sudah kamu tulis tangan di pelajaran-pelajaran sebelumnya: beda format tiap provider, parsing stream, loop tool, state chat, dan langkah-langkah RAG. Bayangin bumbu instan. Setelah kamu pernah mengulek bumbu sendiri, kamu tahu isinya, bisa menilai kapan bumbu instan sepadan, dan tetap bisa masak kalau bungkusnya gak ada. Pelajaran ini membandingkan ketiganya pada pekerjaan Toko Buku yang sama.

🧪 Tebakan cepat: tool loop Asisten Toko Buku yang ditulis tangan panjangnya 16 baris. Kamu pindah dari gpt-6-luna ke claude-haiku-5-5. Berapa baris yang berubah: sekitar 1, sekitar 3, atau lebih dari 10? Dan kalau loop-nya ditulis dengan Vercel AI SDK? Tebak dulu, jawabannya ada di bagian "Ganti provider: diukur, bukan diklaim".

Yang dibungkus framework

Pekerjaan Tulis tangan (pelajaran sebelumnya) Vercel AI SDK LangChain.js
Memanggil model, provider apa pun fetch ke /v1/responses atau /v1/messages, bentuk JSON beda generateText({ model: openai("gpt-6-luna") }) initChatModel("openai:gpt-6-luna")
Streaming bacaSSE, TextDecoder, nama event tiap provider streamText(...).textStream model.stream(...)
Loop tool function_call, call_id, batas putaran tool({...}) + stopWhen: isStepCount(3) createAgent({ tools })
State chat di React array pesan, status, AbortController useChat() dari @ai-sdk/react useStream() dari @langchain/react
RAG potong, embed, cosine, top-k embedMany, cosineSimilarity RecursiveCharacterTextSplitter, MemoryVectorStore
Konfirmasi tool tulis status menunggu_konfirmasi toolApproval humanInTheLoopMiddleware

Versi di npm per Oktober 2026: ai 7.0.137 (major 7 rilis 25 Juni 2026), @ai-sdk/react 4.0.140, @ai-sdk/openai 4.0.91; langchain 1.5.16 dan @langchain/core 1.2.17. Gak satu pun dipasang di proyek Toko Buku; Lab menampilkan kode framework-nya dan menjalankan versi tulis tangannya.

Vercel AI SDK

Library TypeScript dari Vercel untuk aplikasi web: satu API untuk banyak provider (paket @ai-sdk/openai, @ai-sdk/anthropic, dan lain-lain) plus hook React. Route asisten dengan tool, mengikuti dokumentasi AI SDK 7:

import { streamText, tool, isStepCount, convertToModelMessages, createUIMessageStreamResponse, toUIMessageStream } from "ai";
import { openai } from "@ai-sdk/openai";
import { z } from "zod";

export async function POST(req) {
  const { messages } = await req.json();
  const result = streamText({
    model: openai("gpt-6-luna"),
    providerOptions: { openai: { reasoningEffort: "none" } },
    instructions: ATURAN,
    messages: await convertToModelMessages(messages),
    tools: {
      cekStok: tool({
        description: "Cek stok dan harga buku di Toko Buku.",
        inputSchema: z.object({ judul: z.string().min(1).max(100) }),
        execute: async ({ judul }) => (await fetch(`https://api.tokobuku.test/books?q=${encodeURIComponent(judul)}`)).json(),
      }),
    },
    stopWhen: isStepCount(3),
  });
  return createUIMessageStreamResponse({ stream: toUIMessageStream({ stream: result.stream }) });
}

Di React:

import { useChat } from "@ai-sdk/react";
import { DefaultChatTransport } from "ai";

const { messages, sendMessage, status, stop, regenerate } = useChat({
  transport: new DefaultChatTransport({ api: "/api/assistant" }),
});

LangChain.js

Framework yang lebih besar, fokusnya agent dan komponen yang bisa disambung: model, prompt, tool, retriever, vector store. Dokumentasinya (Oktober 2026) menempatkan createAgent sebagai pintu masuk utama, LangGraph untuk orkestrasi tingkat rendah, dan Deep Agents untuk agent yang lebih lengkap. Pasangnya npm install langchain @langchain/core (Node 22 ke atas) plus paket provider seperti @langchain/openai.

import { createAgent, tool } from "langchain";
import * as z from "zod";

const alat = tool(cekStok, { name: "cekStok", description: "Cek stok dan harga buku.", schema: z.object({ judul: z.string().min(1).max(100) }) });
const agent = createAgent({ model: "openai:gpt-6-luna", tools: [alat], systemPrompt: ATURAN });
const hasil = await agent.invoke({ messages: [{ role: "user", content: "Stok Laskar Pelangi masih ada?" }] });
console.log(hasil.messages.at(-1)?.text);

Untuk RAG, komponennya tinggal disambung:

import { RecursiveCharacterTextSplitter } from "@langchain/textsplitters";
import { OpenAIEmbeddings } from "@langchain/openai";
import { MemoryVectorStore } from "@langchain/classic/vectorstores/memory";

const splitter = new RecursiveCharacterTextSplitter({ chunkSize: 1000, chunkOverlap: 200 });
const store = new MemoryVectorStore(new OpenAIEmbeddings({ model: "text-embedding-3-small" }));
await store.addDocuments(await splitter.splitDocuments(dokumen));
const sumber = await store.similaritySearch("Ada novel tentang sekolah di Belitung?", 2);

Ganti provider: diukur, bukan diklaim

Lab membandingkan versi OpenAI dan Anthropic dari kode yang sama baris demi baris (diff), untuk tool loop:

Gaya Baris Kalau ganti ke Anthropic
Tulis tangan 16 10 baris dibuang, 11 ditambah: URL, header, input_schema, tool_use, tool_result, cara membaca teks
Vercel AI SDK 13 3 dibuang, 2 ditambah: import provider, baris model, dan providerOptions khusus OpenAI
LangChain.js 6 1 dibuang, 1 ditambah: teks model, plus npm install @langchain/anthropic

Jadi versi tulis tangan berubah lebih dari 10 baris, dan versi AI SDK sekitar 3. Itu jawaban tebakannya. Untuk RAG, ketiganya tetap memakai embedding OpenAI: halaman "Embeddings" di dokumentasi Anthropic menulis Anthropic gak punya model embedding sendiri dan contohnya memakai Voyage AI.

Kapan tanpa framework

Framework sepadan kalau kamu memakai banyak bagiannya. Tanpa framework lebih masuk akal kalau:

⚠️ Jebakan yang sering ketemu

TL;DR: Vercel AI SDK (ai 7, Oktober 2026) dan LangChain.js (langchain 1.5) membungkus yang sudah kamu tulis tangan: format tiap provider, streaming (streamText, model.stream), loop tool (tool + stopWhen: isStepCount(n), createAgent), state chat (useChat dari @ai-sdk/react dengan sendMessage, status, stop, regenerate), dan RAG (embedMany + cosineSimilarity, text splitter + vector store). Keunggulan AI SDK: abstraksi streaming, state chat, dan ganti provider (tool loop: 3 baris dibuang dan 2 ditambah, versi tulis tangan 10 dibuang dan 11 ditambah). LangChain menyusun komponen AI (model, prompt, tool, retriever) jadi agent dan pipeline. Tanpa framework untuk endpoint kecil, backend non-JavaScript, dan debugging lapisan bawah. Validasi, hak akses, konfirmasi tool tulis, dan API key di server tetap tugasmu.

Yang akan kamu pelajari