DEV Community

Cover image for Dapatkan Akses API Claude Opus 4.7 Gratis Tanpa Batas
Walse
Walse

Posted on • Originally published at apidog.com

Dapatkan Akses API Claude Opus 4.7 Gratis Tanpa Batas

Rangkaian model Claude dari Anthropic dikenal kuat untuk pengkodean serius, pekerjaan agen, dan penalaran konteks panjang. Namun biaya API bisa cepat menjadi hambatan: Sonnet berjalan di kisaran $3 / $15 per juta token, sementara Opus lebih tinggi. Puter.js menawarkan jalur berbeda: akses ke jajaran Claude seperti Opus 4.7, Sonnet 4.6, Haiku 4.5, dan varian lain tanpa kunci Anthropic. Model biayanya dipindahkan ke pengguna akhir melalui akun Puter, bukan ke pengembang aplikasi.

Coba Apidog hari ini

Panduan ini menunjukkan cara mengintegrasikan Claude lewat Puter.js: mulai dari pemasangan script, pemilihan model, panggilan chat, streaming, percakapan multi-giliran, sampai strategi pengujian sebelum produksi.

TL;DR

  • Puter.js memberi akses ke keluarga model Claude tanpa kunci API Anthropic, tanpa server, dan tanpa tagihan langsung ke pengembang.
  • Pengguna akhir menggunakan saldo akun Puter mereka sendiri.
  • Model yang tersedia mencakup Opus 4.7, Opus 4.6, Opus 4.6 Fast, Opus 4.5, Opus 4.1, Opus 4, Sonnet 4.6, Sonnet 4.5, Sonnet 4, dan Haiku 4.5.
  • Integrasi minimal: satu tag <script> dan satu panggilan puter.ai.chat.
  • Streaming, prompt sistem, dan percakapan multi-giliran dapat digunakan dari browser.
  • Gunakan Apidog untuk membandingkan prompt yang sama antara prototipe Puter dan API resmi Anthropic.

Cara kerja model “gratis untuk pengembang”

Puter.js adalah pustaka cloud dan AI berbasis browser. Alih-alih menyimpan kunci API Anthropic di backend Anda, pengguna masuk ke akun Puter mereka sendiri. Panggilan model kemudian dikaitkan dengan akun pengguna tersebut.

Dampaknya untuk pengembang:

  • Tidak ada kunci API di repo. Tidak ada risiko kebocoran secret atau rotasi key.
  • Tidak ada tagihan Anthropic langsung ke aplikasi Anda. Penggunaan bergantung pada akun Puter pengguna.
  • Tidak perlu backend hanya untuk memanggil Claude. Aplikasi statis, demo, dan prototipe bisa langsung berjalan di browser.

Batasannya: pendekatan ini browser-first. Untuk cron job, worker backend, batch processing, atau API internal, gunakan API resmi Anthropic.

Langkah 1: Tambahkan Puter.js

Untuk HTML statis, cukup tambahkan script berikut:

<script src="https://js.puter.com/v2/"></script>
Enter fullscreen mode Exit fullscreen mode

Contoh halaman minimal:

<!DOCTYPE html>
<html>
<body>
  <script src="https://js.puter.com/v2/"></script>
</body>
</html>
Enter fullscreen mode Exit fullscreen mode

Jika Anda memakai bundler seperti Vite atau Webpack, gunakan paket NPM:

npm install @heyputer/puter.js
Enter fullscreen mode Exit fullscreen mode

Lalu import di kode JavaScript:

import { puter } from '@heyputer/puter.js';
Enter fullscreen mode Exit fullscreen mode

Gunakan CDN untuk prototipe cepat. Gunakan NPM jika aplikasi Anda sudah memakai build pipeline dan TypeScript.

Langkah 2: Pilih model Claude

Puter mengekspos model Claude dengan ID model berikut:

ID Model Kapan digunakan
claude-opus-4-7 Model flagship terbaru untuk penalaran kompleks dan tugas agen yang berat
claude-opus-4-6 Model Opus sebelumnya untuk pengkodean dan analisis mendalam
claude-opus-4.6-fast Varian Opus dengan latensi lebih rendah
claude-opus-4-5 Pilihan stabil untuk workflow produksi
claude-opus-4-1 Model legacy dengan perilaku yang lebih mudah diprediksi
claude-opus-4 Basis awal keluarga Opus 4
claude-sonnet-4-6 Default harian untuk keseimbangan kualitas dan kecepatan
claude-sonnet-4-5 Sonnet sebelumnya untuk sebagian besar tugas umum
claude-sonnet-4 Basis awal keluarga Sonnet 4
claude-haiku-4-5 Model cepat untuk klasifikasi, ekstraksi, dan tugas volume tinggi

Rekomendasi awal:

  • Pakai claude-sonnet-4-6 sebagai default.
  • Pakai claude-haiku-4-5 untuk tugas ringan dan cepat.
  • Pakai claude-opus-4-7 untuk analisis panjang, review kode kompleks, atau perencanaan multi-langkah.

Langkah 3: Buat panggilan chat pertama

Contoh paling sederhana:

<!DOCTYPE html>
<html>
<body>
  <script src="https://js.puter.com/v2/"></script>

  <script>
    puter.ai.chat(
      "Jelaskan komputasi kuantum dalam istilah sederhana",
      { model: "claude-sonnet-4-6" }
    ).then(response => {
      puter.print(response.message.content[0].text);
    });
  </script>
</body>
</html>
Enter fullscreen mode Exit fullscreen mode

Buka file tersebut di browser. Saat diperlukan, Puter akan menangani proses login pengguna. Setelah itu, respons Claude dicetak ke halaman.

Struktur respons mengikuti bentuk pesan Anthropic:

response.message.content[0].text
Enter fullscreen mode Exit fullscreen mode

Untuk output teks biasa, blok pertama biasanya cukup. Jika respons berisi beberapa blok konten, lakukan iterasi:

for (const block of response.message.content) {
  if (block.text) {
    console.log(block.text);
  }
}
Enter fullscreen mode Exit fullscreen mode

Langkah 4: Tampilkan respons dengan streaming

Untuk jawaban panjang, gunakan streaming agar UI terasa lebih responsif:

const response = await puter.ai.chat(
  "Tulis esai terperinci tentang dampak kecerdasan buatan pada masyarakat",
  {
    model: "claude-sonnet-4-6",
    stream: true
  }
);

for await (const part of response) {
  puter.print(part?.text);
}
Enter fullscreen mode Exit fullscreen mode

Untuk UI chat, append setiap potongan teks ke elemen pesan:

const output = document.querySelector("#output");

const response = await puter.ai.chat("Buatkan ringkasan tentang REST API", {
  model: "claude-sonnet-4-6",
  stream: true
});

for await (const part of response) {
  if (part?.text) {
    output.textContent += part.text;
  }
}
Enter fullscreen mode Exit fullscreen mode

HTML minimalnya:

<div id="output"></div>
Enter fullscreen mode Exit fullscreen mode

Langkah 5: Buat percakapan multi-giliran

Untuk percakapan, kirim array pesan dengan role dan content:

const messages = [
  {
    role: "user",
    content: "Saya sedang membangun aplikasi Next.js dengan Postgres."
  },
  {
    role: "assistant",
    content: "Baik. Apa yang Anda butuhkan bantuannya?"
  },
  {
    role: "user",
    content: "Bagaimana saya harus menyusun folder migrasi?"
  }
];

const response = await puter.ai.chat(messages, {
  model: "claude-opus-4-7"
});

console.log(response.message.content[0].text);
Enter fullscreen mode Exit fullscreen mode

Untuk mempertahankan konteks, simpan riwayat pesan:

const messages = [];

async function sendMessage(userInput) {
  messages.push({
    role: "user",
    content: userInput
  });

  const response = await puter.ai.chat(messages, {
    model: "claude-sonnet-4-6"
  });

  const assistantText = response.message.content[0].text;

  messages.push({
    role: "assistant",
    content: assistantText
  });

  return assistantText;
}
Enter fullscreen mode Exit fullscreen mode

Dengan pola ini, setiap giliran berikutnya membawa konteks sebelumnya.

Langkah 6: Tambahkan prompt sistem

Gunakan pesan system untuk mengatur persona, batasan, dan format output:

const messages = [
  {
    role: "system",
    content: "Anda adalah insinyur backend senior. Balas dalam poin bernomor, maksimal lima poin."
  },
  {
    role: "user",
    content: "Bagaimana cara mencegah injeksi SQL di aplikasi Node.js?"
  }
];

const response = await puter.ai.chat(messages, {
  model: "claude-sonnet-4-6"
});

console.log(response.message.content[0].text);
Enter fullscreen mode Exit fullscreen mode

Contoh prompt sistem untuk output JSON:

const messages = [
  {
    role: "system",
    content: "Balas hanya dalam JSON valid dengan field: summary, risks, recommendations."
  },
  {
    role: "user",
    content: "Review rencana migrasi database ini: ..."
  }
];

const response = await puter.ai.chat(messages, {
  model: "claude-sonnet-4-6"
});
Enter fullscreen mode Exit fullscreen mode

Prompt sistem cocok untuk:

  • format output,
  • gaya jawaban,
  • batasan panjang,
  • peran teknis,
  • aturan keamanan aplikasi.

Benchmark beberapa model dengan prompt yang sama

Jangan memilih model berdasarkan nama saja. Jalankan prompt yang sama di beberapa model, lalu bandingkan output dan latensinya.

const models = [
  "claude-haiku-4-5",
  "claude-sonnet-4-6",
  "claude-opus-4-7"
];

const prompt = "Refactor komponen React ini agar menggunakan hooks: ...";

for (const model of models) {
  const start = performance.now();

  const response = await puter.ai.chat(prompt, { model });

  const elapsed = performance.now() - start;

  console.log(`${model}: ${elapsed.toFixed(0)}ms`);
  console.log(response.message.content[0].text);
  console.log("---");
}
Enter fullscreen mode Exit fullscreen mode

Gunakan hasil benchmark untuk menentukan default:

  • Haiku untuk tugas cepat dan repetitif.
  • Sonnet untuk mayoritas fitur aplikasi.
  • Opus untuk prompt sulit, analisis panjang, atau keputusan yang membutuhkan penalaran lebih dalam.

Untuk membandingkan jalur Puter dengan API resmi Anthropic di Apidog, simpan keduanya sebagai environment berbeda dalam satu collection.

Apa yang tersedia dan apa yang perlu dicek

Claude melalui Puter cocok untuk banyak aplikasi berbasis browser, tetapi tidak selalu menggantikan API resmi Anthropic.

Yang tersedia:

  • katalog model Claude,
  • percakapan multi-giliran,
  • prompt sistem,
  • respons streaming,
  • integrasi browser tanpa backend,
  • tidak ada kunci Anthropic di sisi pengembang.

Yang perlu Anda verifikasi di dokumentasi Puter terbaru:

  • tool use atau function calling,
  • input gambar,
  • prompt caching Anthropic,
  • penggunaan server-side,
  • header rate limit Anthropic langsung.

Jika aplikasi Anda membutuhkan workflow tool use yang kompleks, pertimbangkan API resmi Anthropic atau pengujian server MCP di Apidog.

Kapan memakai Puter dan kapan memakai API resmi Anthropic

Gunakan Puter.js ketika:

  • aplikasi Anda berjalan di browser,
  • Anda membuat prototipe, demo, hackathon project, atau situs statis,
  • Anda tidak ingin mengelola kunci API,
  • pengguna bisa login ke akun Puter,
  • Anda ingin menghindari risiko tagihan langsung di sisi pengembang.

Gunakan API resmi Anthropic ketika:

  • Anda membutuhkan pemanggilan dari backend,
  • Anda menjalankan batch processing, cron job, atau worker,
  • Anda membutuhkan prompt caching,
  • Anda membutuhkan kontrol penuh atas tool use, vision, atau Files API,
  • Anda memiliki kebutuhan kepatuhan atau kontrak tertentu,
  • pengguna tidak boleh melewati langkah login Puter.

Strategi praktis: mulai dari Puter untuk validasi produk. Jika aplikasi membutuhkan server-side execution atau kontrol API lebih dalam, migrasikan ke API resmi. Struktur pesan yang mirip membuat transisinya lebih mudah.

Untuk pendekatan serupa pada model GPT, lihat Cara menggunakan GPT-5.5 API.

Menguji integrasi dengan Apidog

Karena Puter berjalan di browser, Anda tidak mengujinya seperti endpoint backend biasa. Pola yang lebih praktis:

  1. Buat halaman statis kecil yang menerima prompt dari query parameter.
  2. Jalankan prompt tersebut melalui Puter di browser.
  3. Buat request Anthropic resmi di Apidog untuk skenario yang sama.
  4. Simpan konfigurasi sebagai environment berbeda.

Contoh environment:

  • puter-prototype: URL lokal untuk halaman Puter Anda.
  • anthropic-prod: https://api.anthropic.com/v1.

Unduh Apidog, lalu buat collection untuk menyimpan prompt, payload, dan hasil pengujian. Dengan cara ini, Anda bisa membandingkan hasil Puter dan API resmi sebelum memilih jalur produksi.

FAQ

Apakah ini benar-benar tidak terbatas?

Tidak terbatas dari sisi pengembang. Pengguna akhir tetap menggunakan saldo akun Puter mereka sendiri.

Apakah saya perlu akun Anthropic?

Tidak. Puter menangani integrasi ke Anthropic. Anda tidak menyimpan kunci Anthropic.

Apakah bisa digunakan di produksi?

Bisa untuk aplikasi berbasis browser, selama flow login Puter dapat diterima oleh pengguna Anda.

Apakah output Claude melalui Puter sama dengan API resmi?

Puter memanggil Claude melalui jalur Anthropic atas nama pengguna. Perilaku model mengikuti model yang digunakan, meskipun latensi bisa dipengaruhi lapisan tambahan.

Apakah prompt caching Anthropic tersedia?

Jika Anda membutuhkan kontrol prompt caching secara langsung, gunakan API resmi Anthropic.

Bisakah dipakai untuk bot Discord atau service backend?

Tidak ideal. Puter dirancang browser-first dan bergantung pada sesi pengguna. Untuk bot dan backend service, gunakan API resmi.

Model default apa yang sebaiknya dipilih?

Mulai dari claude-sonnet-4-6. Naik ke claude-opus-4-7 untuk tugas sulit, atau turun ke claude-haiku-4-5 untuk klasifikasi dan tugas cepat.

Kesimpulan

Puter.js adalah cara cepat untuk menambahkan Claude ke aplikasi browser tanpa mengelola kunci Anthropic atau backend khusus. Tambahkan script, pilih model, lalu panggil puter.ai.chat.

Gunakan Puter untuk prototipe, aplikasi publik gratis, proyek sampingan, demo, dan situs statis. Gunakan API resmi Anthropic jika Anda membutuhkan eksekusi server-side, prompt caching, tool use yang lengkap, atau kebutuhan kepatuhan tertentu.

Buat skenario pengujian di Apidog, bandingkan hasil Puter dengan API resmi, lalu pilih arsitektur yang paling sesuai untuk aplikasi Anda.

Top comments (0)