Framework AI untuk Web Developer

Daripada menulis semua boilerplate sendiri, framework AI menyederhanakan integrasi: streaming, tool calling, RAG, multi-provider support.

Vercel AI SDK

Framework ringan dari Vercel, fokus pada web/React. Provider-agnostic.

import { generateText, streamText } from "ai";
import { openai } from "@ai-sdk/openai";
import { anthropic } from "@ai-sdk/anthropic";

// Ganti provider tanpa ubah kode
const result = await generateText({
  model: openai("gpt-4o"),     // atau anthropic("claude-sonnet-4-20250514")
  prompt: "Jelaskan closure di JavaScript",
});

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

// React hooks (frontend)
import { useChat, useCompletion } from "ai/react";
const { messages, input, handleSubmit } = useChat();

LangChain.js

Framework lebih besar, fokus pada chains dan agents. Bisa overkill untuk simple use case.

import { ChatOpenAI } from "@langchain/openai";
import { HumanMessage, SystemMessage } from "@langchain/core/messages";

const model = new ChatOpenAI({ model: "gpt-4o" });

// Simple call
const response = await model.invoke([
  new SystemMessage("Kamu asisten coding."),
  new HumanMessage("Jelaskan promises"),
]);

// Chain: prompt → model → parser
import { ChatPromptTemplate } from "@langchain/core/prompts";
import { StringOutputParser } from "@langchain/core/output_parsers";

const chain = ChatPromptTemplate
  .fromTemplate("Jelaskan {topic} dalam 3 kalimat")
  .pipe(model)
  .pipe(new StringOutputParser());

const result = await chain.invoke({ topic: "WebSocket" });

Kapan Pakai Apa?

• Vercel AI SDK — Web app, React, streaming chat, simple use case
• LangChain — Complex chains, agents, RAG pipelines, document processing
• Direct API — Kontrol penuh, minimal dependencies