Tutorial Integrasi Claude 3 Haiku ke Dalam Project Astro JS

Oleh Dimas Julianto TUKANG SAMBUNG CLAUDE ASTRO

Astro JS telah menahbiskan dirinya sebagai kerangka kerja (framework) pilihan utama bagi banyak pengembang web saat ini. Keunggulannya yang menganut filosofi Zero JS by default (Arsitektur Kepulauan / Island Architecture) membuat performa peramban sekencang kilat. Namun, sebuah website statis tanpa otak pemroses dinamis akan terasa hambar di era yang serba smart ini.

Pada panduan praktis ini, saya akan menunjukkan cara meracik titik akhir API (API Endpoint) di dalam proyek Astro JS Anda. Titik akhir ini nantinya akan menjadi perantara (middleware) yang mengalirkan pesan pengunjung web Anda menuju model bahasa buatan Anthropic yang paling kilat: Claude 3 Haiku.

Alasan kita menggunakan versi Haiku ketimbang Opus adalah karena kecepatan eksekusinya yang instan serta biaya komputasinya yang sangat bersahabat bagi kantong pengembang indie. Mari kita mulai merajut kodenya.

Persiapan Fondasi Proyek

Sebelum mulai menulis berkas, pastikan proyek Astro Anda sudah mendukung mode Server-Side Rendering (SSR). Secara bawaan (default), Astro membangun halaman secara statis murni (SSG), yang berarti fungsi API internal (Server Endpoints) tidak akan berjalan secara dinamis saat web sudah diterbitkan.

Membuat Endpoint API Astro

Di dalam struktur map Astro, buatlah sebuah rute API baru pada jalur alamat (path) src/pages/api/chat.js (atau .ts jika Anda menggunakan TypeScript). Berkas inilah yang akan bertindak sebagai pos satpam, menerima ketikan pertanyaan dari antarmuka pengguna web (Frontend) dan meneruskannya secara rahasia ke peladen Anthropic.

import Anthropic from '@anthropic-ai/sdk';

export async function POST({ request }) {
  // Parsing payload JSON yang dikirim oleh pengunjung web
  const body = await request.json();
  const userMessage = body.message;

  if (!userMessage) {
    return new Response(JSON.stringify({ error: "Pesan kosong" }), { status: 400 });
  }

  // Inisialisasi klien Anthropic menggunakan rahasia server
  const anthropic = new Anthropic({
    apiKey: import.meta.env.ANTHROPIC_API_KEY,
  });

  try {
    const message = await anthropic.messages.create({
      model: "claude-3-haiku-20240307",
      max_tokens: 1000,
      temperature: 0.5,
      system: "Anda adalah asisten AI ramah yang membantu pengunjung website Sitemas.",
      messages: [
        { role: "user", content: userMessage }
      ]
    });

    // Mengembalikan balasan Haiku ke antarmuka klien
    return new Response(JSON.stringify({ reply: message.content[0].text }), {
      status: 200,
      headers: { "Content-Type": "application/json" }
    });

  } catch (err) {
    console.error("Gagal memanggil API Anthropic:", err);
    return new Response(JSON.stringify({ error: "Terjadi kesalahan peladen" }), { status: 500 });
  }
}

Kunci keamanan yang paling vital pada baris kode di atas terletak pada pemanggilan import.meta.env. Perintah ini memastikan bahwa kode sandi (API Key) hanya tereksekusi dan dibaca pada ruang isolasi mesin peladen (server), bukan terkirim ke inspeksi peramban klien (Client Browser).

Menghubungkan Antarmuka Komponen UI

Sekarang mesin otak logikanya sudah terpasang. Langkah pamungkasnya adalah membuat sepotong komponen tombol dan kotak teks (Input) pada sembarang halaman Astro (misalnya di halaman src/pages/index.astro).

Berikut adalah cara memanggil fungsi titik akhir (endpoint) yang baru saja kita kerjakan menggunakan teknik standar fetch() di sisi klien:

---
import Layout from '../layouts/Layout.astro';
---

<Layout title="Integrasi Claude 3 Haiku">
  <main>
    <h1>Tanyakan Sesuatu pada AI</h1>
    <input type="text" id="userInput" placeholder="Ketik pesan Anda..." />
    <button id="sendBtn">Kirim Pesan</button>
    <p id="aiResponse">Balasan AI akan muncul di sini...</p>
  </main>

  <script>
    const btn = document.getElementById('sendBtn');
    const input = document.getElementById('userInput');
    const responseBox = document.getElementById('aiResponse');

    btn.addEventListener('click', async () => {
      const text = input.value;
      responseBox.innerText = "Haiku sedang berpikir...";

      const res = await fetch('/api/chat', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ message: text })
      });

      const data = await res.json();
      responseBox.innerText = data.reply || data.error;
    });
  </script>
</Layout>

Pertimbangan Deployment

Sebagai catatan tambahan penting, ketika Anda menjalankan mode peladen dinamis (SSR) di platform serverless seperti Cloudflare Pages atau Vercel Edge, Anda harus memastikan bahwa fungsi Anda berjalan cukup ringan dan cepat agar tidak terputus (timeout limit). Karena model Claude 3 Haiku membalas permintaan hampir seketika, Anda tidak perlu terlalu merisaukan perihal jeda batasan (cold start timeout) ini.

Semoga tutorial ini membuka mata Anda mengenai betapa mudahnya menyuntikkan denyut kehidupan kecerdasan buatan ke dalam wadah aplikasi kerangka kerja Astro JS. Selamat menyusun kode cemerlang!

Dimas Julianto, S.Kom.

@dimasjulianto

TECH ENTHUSIAST & DIGITAL CREATOR

Lihat Profil

Membangun ekosistem digital yang edukatif melalui Sitemas. Berfokus pada inovasi teknologi, AI, dan pengembangan konten kreatif yang berdampak.

Web DeveloperSoftware Engineer

Bergabung Januari 2026 West Java, Indonesia

Github Facebook Instagram Youtube Whatsapp Telegram