Tutorial AI Praktis Part 4: Cara Menghubungkan AI Lokal Ollama ke Aplikasi Web (Next.js / Node.js) via REST API

Assalamualaikum Wr. Wb.

Tutorial AI Praktis Part 4: Cara Menghubungkan AI Lokal Ollama ke Aplikasi Web (Next.js / Node.js) via REST API | Bikin Fitur Pintar Sendiri | Ingin membangun aplikasi web portal yang punya fitur chatbot interaktif, perangkum artikel otomatis, atau generator formulir tanpa harus bayar biaya API token ke OpenAI/Claude? Kabar baiknya, saat Ollama berjalan di background komputer, ia otomatis menyediakan REST API lokal di port 11434 yang siap di-consume oleh aplikasi web kita. Kali ini admin akan membagikan panduan integrasi API Ollama ke Next.js yang dijamin work 100%.

1. Mengenal Endpoint REST API Ollama

Ollama menyediakan endpoint HTTP standar yang menerima format payload JSON:

• POST http://localhost:11434/api/generate : Menghasilkan output teks tunggal dari sebuah prompt.
• POST http://localhost:11434/api/chat : Mendukung pesan percakapan multi-turn dengan riwayat konteks (role: user, assistant, system).
• GET http://localhost:11434/api/tags : Mengambil daftar semua model AI yang sedang terpasang di komputer server.

Arsitektur pemanggilan API Route Next.js yang terhubung langsung ke Ollama port 11434

2. Contoh Implementasi API Route di Next.js (App Router)

Buat file endpoint di projek Next.js anda pada path app/api/ai-chat/route.js:

// File: app/api/ai-chat/route.js
export async function POST(req) {
  try {
    const { prompt } = await req.json();

    // Request ke background engine Ollama
    const response = await fetch("http://127.0.0.1:11434/api/generate", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({
        model: "llama3",
        prompt: prompt,
        stream: false // Nonaktifkan stream untuk respon instan satu paket
      }),
    });

    if (!response.ok) {
      throw new Error("Gagal terhubung ke Ollama API.");
    }

    const data = await response.json();

    return Response.json({
      status: "success",
      model: data.model,
      hasil: data.response
    });

  } catch (error) {
    return Response.json({ status: "error", message: error.message }, { status: 500 });
  }
}

3. Memanggil API dari Sisi Frontend

Di komponen UI web (misal: formulir bantuan), kita tinggal memanggilnya dengan fungsi fetch() standar:

async function kirimPrompt(teksUser) {
  const res = await fetch("/api/ai-chat", {
    method: "POST",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify({ prompt: teksUser })
  });
  
  const result = await res.json();
  console.log("Balasan AI:", result.hasil);
}

Itulah cara mudah menghubungkan AI lokal ke aplikasi web modern. Dengan setup ini, Anda bisa menyematkan fitur kecerdasan buatan canggih di aplikasi tanpa perlu pusing memikirkan tagihan kartu kredit bulanan.

Sekian tutorial kali ini, silahkan share artikel ini jika anda rasa bermanfaat untuk teman atau sahabat anda.

Semoga Bermanfaat ^_^

Terima Kasih.

Wassalamualaikum Wr. Wb.

Sumber gambar: Koleksi Pribadi / Screenshot Praktik