Rangkaian model Claude dari Anthropic adalah lini model sumber tertutup yang paling mumpuni untuk pengkodean serius, pekerjaan agensi, dan penalaran konteks panjang, dan harga API mencerminkannya: Sonnet berjalan seharga $3 / $15 per juta token, Opus berjalan lebih tinggi. Biaya tersebut menghentikan sebagian besar proyek sampingan sebelum dimulai. Ada satu jalur yang membalikkan model penagihan: Puter.js mengekspos seluruh jajaran Claude (Opus 4.7, Sonnet 4.6, Haiku 4.5, dan tujuh varian lainnya) tanpa kunci Anthropic, dan menagih pengguna akhir alih-alih pengembang. Bagi Anda sebagai pembangun, secara struktural ini gratis dan tidak terbatas.
Panduan ini membahas penyiapan secara menyeluruh: ID model, kode yang berfungsi, streaming, dan pertimbangan yang perlu Anda ketahui sebelum Anda meluncurkan.
TL;DR
- Puter.js memberi pengembang akses gratis, tidak terbatas ke seluruh keluarga Claude tanpa kunci API, tanpa tagihan Anthropic, tanpa server.
- Pengguna akhir menanggung penggunaan mereka sendiri dari akun Puter; Anda membayar nol.
- Model yang didukung: 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, Haiku 4.5.
- Satu tag
<script>, satu panggilan fungsi (puter.ai.chat), dan Anda sudah bisa berbicara dengan Claude. - Streaming, prompt sistem, percakapan multi-giliran semuanya berfungsi; Puter mencerminkan bentuk pesan Anthropic.
- Gunakan Apidog untuk membuat skrip prompt yang sama terhadap Claude melalui Puter dan terhadap API resmi Anthropic untuk benchmarking.
Bagaimana "gratis tak terbatas" bekerja di balik layar
Puter.js adalah pustaka cloud dan AI tanpa server yang berjalan di browser. Perubahan arsitekturnya: alih-alih Anda memegang kunci API Anthropic dan menanggung biayanya, pengguna akhir Anda masuk ke Puter (akun gratis) dan panggilan tersebut dibebankan ke saldo mereka. Akun Puter baru dilengkapi dengan kredit awal; pengguna mengisi ulang jika mereka menginginkan lebih.
Bagi pengembang, ini berarti tiga hal:
- Tidak ada kunci API di repo Anda. Tidak ada risiko kebocoran, tidak ada rotasi, tidak ada kunci lingkup proyek untuk dikelola.
- Tidak ada batasan penggunaan di pihak Anda. Setiap pengguna berjalan menggunakan akun mereka sendiri, jadi "batas" Anda akan berskala linear dengan basis pengguna Anda.
- Tidak perlu hubungan dengan Anthropic. Anda tidak pernah menandatangani kontrak dengan Anthropic; Puter adalah perantaranya.
Pertukaran: ini adalah pendekatan browser-first. Skrip Python backend tidak dapat menggunakan Puter tanpa sesi pengguna yang masuk. Untuk penggunaan backend, lihat bagian alternatif di bawah ini.
Langkah 1: Masukkan skrip
Satu tag di HTML Anda, tanpa langkah build:
<script src="https://js.puter.com/v2/"></script>
Itu adalah seluruh instalasi. Tidak ada npm install, tidak ada konfigurasi kunci, tidak ada pengaturan DNS. Jika Anda lebih memilih NPM untuk aplikasi terbundle:
npm install @heyputer/puter.js
import { puter } from '@heyputer/puter.js';
Tag CDN adalah jalur termudah untuk situs statis atau prototipe cepat. Import NPM memberi Anda tree-shaking dan tipe TypeScript dalam build Vite atau Webpack.
Langkah 2: Pilih model Claude
Puter mengekspos katalog Anthropic lengkap. ID model mengikuti penamaan Anthropic dengan pemisah tanda hubung:
| ID Model | Kapan digunakan |
|---|---|
claude-opus-4-7 |
Flagship terbaru; penalaran terdalam, pekerjaan agensi terbaik |
claude-opus-4-6 |
Flagship sebelumnya; pengkodean kuat, sedikit lebih murah |
claude-opus-4.6-fast |
Varian Opus dengan latensi lebih rendah |
claude-opus-4-5 |
Pilihan stabil untuk agen produksi |
claude-opus-4-1 |
Stabil warisan; perilaku yang dipahami dengan baik |
claude-opus-4 |
Dasar Opus 4 asli |
claude-sonnet-4-6 |
Penggerak harian default; keseimbangan biaya/kualitas yang kuat |
claude-sonnet-4-5 |
Sonnet sebelumnya; lebih murah, masih sangat baik untuk sebagian besar tugas |
claude-sonnet-4 |
Dasar Sonnet 4 |
claude-haiku-4-5 |
Tercepat, termurah; baik untuk klasifikasi volume tinggi |
Dua yang pertama Anda pilih: claude-sonnet-4-6 untuk penalaran sehari-hari dan claude-haiku-4-5 untuk klasifikasi cepat. Gunakan claude-opus-4-7 saat Anda membutuhkan kedalaman nyata (penalaran bentuk panjang, tinjauan kode kompleks, perencanaan multi-langkah agensi).
Langkah 3: Buat Claude berbicara
Panggilan minimal yang dapat dijalankan:
<!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>
Buka file di browser. Puter menangani panggilan API, pengguna masuk (atau membuat akun Puter gratis pada saat pertama kali dijalankan), dan responsnya dicetak ke halaman.
Bentuk responsnya mencerminkan API pesan Anthropic. response.message.content adalah array blok konten; untuk balasan teks biasa Anda membaca [0].text. Untuk respons multi-bagian (teks + panggilan alat), iterasi array.
Langkah 4: Streaming respons
Jawaban panjang terasa lambat tanpa streaming. Teruskan stream: true dan konsumsi iteratornya:
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);
}
Pola for await membaca potongan-potongan data saat tiba. Untuk UI obrolan, tambahkan setiap part.text ke gelembung pesan Anda; pengguna melihat teks muncul kata demi kata.
Langkah 5: Percakapan multi-giliran
Teruskan array pesan alih-alih string tunggal. Setiap pesan memiliki 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);
Untuk menjaga status di setiap giliran, dorong setiap pesan pengguna dan setiap respons asisten ke dalam array sebelum panggilan berikutnya. Claude membaca seluruh transkrip dan tetap konsisten.
Langkah 6: Prompt sistem
Atur persona, batasan, dan format output dengan pesan sistem di bagian atas:
const messages = [
{ role: 'system', content: 'Anda adalah insinyur backend senior. Balas dalam poin bernomor, tidak lebih dari lima.' },
{ role: 'user', content: 'Bagaimana cara mencegah injeksi SQL di aplikasi Node?' },
];
const response = await puter.ai.chat(messages, { model: 'claude-sonnet-4-6' });
Prompt sistem berlaku di seluruh percakapan dan merupakan tempat yang tepat untuk nada, format output, dan batasan perilaku.
Membandingkan model pada prompt yang sama
Cara tercepat untuk menemukan model Claude yang tepat untuk kasus penggunaan Anda adalah dengan membuat skrip prompt yang sama di semua model dan membandingkannya. Sebuah loop benchmark kecil:
const models = ['claude-haiku-4-5', 'claude-sonnet-4-6', 'claude-opus-4-7'];
const prompt = "Refactor komponen React ini untuk 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('---');
}
Jalankan sekali dan Anda akan melihat pola pertukaran: Haiku 5–10x lebih cepat dari Opus, Sonnet berada di tengah, Opus menghasilkan jawaban yang jauh lebih baik pada prompt yang sulit. Untuk sebagian besar aplikasi, Sonnet 4.6 adalah default yang tepat.
Untuk membandingkan jalur gratis Puter dengan API resmi Anthropic di Apidog, simpan kedua penyedia dalam koleksi yang sama dan alihkan lingkungannya.
Apa yang Anda dapatkan dan apa yang tidak
Claude gratis tak terbatas melalui Puter itu nyata, tetapi permukaannya adalah subset dari API resmi. Daftar jujurnya:
Anda mendapatkan:
- Katalog model Claude lengkap (Opus, Sonnet, Haiku, semua versi saat ini)
- Percakapan multi-giliran
- Prompt sistem
- Respons streaming
- Skala siap produksi (Puter menangani infrastruktur)
- Tidak ada risiko tagihan bagi Anda sebagai pengembang
Anda mungkin tidak mendapatkan (tergantung versi Puter):
- Penggunaan alat asli / pemanggilan fungsi (periksa dokumen Puter terbaru)
- Input penglihatan (lampiran gambar)
- Pengurangan biaya caching prompt Anthropic
- Penggunaan sisi server tanpa konteks browser
- Visibilitas batas laju langsung (Anda tidak melihat header Anthropic)
Untuk alur kerja penggunaan alat yang mendalam, API resmi Anthropic atau pengujian server MCP di Apidog memberi Anda kontrol lebih. Untuk chatbot tipikal, aplikasi Tanya Jawab, atau generator konten, permukaan Puter sudah cukup.
Kapan menggunakan Puter vs API resmi Anthropic
Perbandingannya:
Gunakan Puter ketika:
- Anda meluncurkan aplikasi publik gratis dan tidak ingin terekspos tagihan.
- Anda sedang membuat prototipe dan belum ingin menjalin hubungan penagihan dengan Anthropic.
- Anda ingin mendukung Claude di situs statis, proyek hackathon, atau ekstensi browser tanpa backend.
- Pengguna Anda senang untuk masuk ke Puter (atau sudah menggunakannya).
Gunakan API resmi Anthropic ketika:
- Anda memerlukan panggilan sisi server (cron jobs, endpoint API, pemrosesan batch).
- Anda memerlukan caching prompt untuk penghematan biaya pada prompt sistem yang stabil.
- Anda memerlukan penggunaan alat yang terperinci, input penglihatan, atau Files API.
- Anda memerlukan hubungan kontraktual untuk kepatuhan (BAA, SOC 2, residensi regional).
- Pengguna Anda tidak akan mentolerir langkah masuk Puter.
Sebagian besar proyek dimulai di Puter untuk pembuatan prototipe dan bermigrasi ke API resmi ketika mereka mencapai salah satu batasan di atas. Migrasinya mudah; bentuk pesannya sama.
Untuk padanan GPT, lihat Cara menggunakan GPT-5.5 API.
Menguji integrasi di Apidog
Panggilan Puter terjadi di browser, jadi Anda tidak dapat membuat skripnya langsung dari backend test runner. Pola yang berfungsi:
- Buat halaman statis kecil dengan skrip Puter dan parameter kueri untuk prompt.
- Gunakan Apidog untuk memvalidasi permukaan API Anthropic upstream (ketika Anda akhirnya bermigrasi).
- Simpan keduanya sebagai lingkungan terpisah dalam koleksi Apidog yang sama sehingga Anda dapat beralih dengan satu klik.

Unduh Apidog dan siapkan dua lingkungan: puter-prototype (URL localhost yang menghosting halaman Puter Anda) dan anthropic-prod (https://api.anthropic.com/v1). Koleksi tersebut dapat dipindahkan dengan mudah ketika Anda beralih dari Puter ke API resmi.
FAQ
- Apakah ini benar-benar tidak terbatas, atau ada batasan tersembunyi?Tidak terbatas dari sisi pengembang, ya. Pengguna akhir memiliki saldo di akun Puter mereka; akun baru mendapatkan kredit awal dan pengguna mengisi ulang jika mereka menginginkan lebih. Tidak ada batasan per pengembang.
- Apakah saya perlu mendaftar Anthropic?Tidak. Puter menangani hubungan dengan Anthropic. Anda tidak pernah melihat kunci Anthropic.
- Bisakah saya menggunakannya dalam produksi?Ya untuk aplikasi berbasis browser. Puter menjalankan infrastruktur produksi. Pertanyaan yang tepat adalah apakah pengguna Anda bersedia masuk ke Puter; jika ya, luncurkan.
- Apakah Claude melalui Puter berkinerja identik dengan API resmi?Output modelnya sama; Puter memanggil API resmi Anthropic atas nama pengguna. Latensi mungkin sedikit lebih tinggi karena hop tambahan, tetapi perilaku model tidak berubah.
- Bagaimana dengan penghematan caching prompt Claude?Puter tidak mengekspos kontrol harga caching prompt Anthropic saat ini. Jika Anda memiliki prompt sistem 50k token yang stabil dan membutuhkan diskon cache, gunakan API resmi.
- Bisakah saya menggunakan Claude di bot Discord atau layanan backend melalui Puter?Tidak secara bersih. Puter adalah browser-first dan mengasumsikan sesi pengguna. Layanan backend harus menggunakan API resmi Anthropic.
- Model apa yang harus saya gunakan secara default?
claude-sonnet-4-6. Ini adalah keseimbangan yang tepat antara biaya, kecepatan, dan kualitas untuk sebagian besar prompt. Pindah keclaude-opus-4-7ketika Anda membutuhkan penalaran yang lebih dalam, danclaude-haiku-4-5ketika Anda membutuhkan klasifikasi massal. - Apakah pengguna saya akan dikenakan biaya banyak?Sebagian besar penggunaan gaya obrolan menghabiskan beberapa sen per sesi dengan tarif Anthropic. Pengguna biasa dapat menjalankan lusinan percakapan dengan kredit awal Puter sebelum mereka perlu mengisi ulang.
Kesimpulan
Claude gratis tak terbatas melalui Puter.js adalah jalur terbersih untuk aplikasi berbasis browser apa pun yang menginginkan output berkualitas Anthropic tanpa tagihan berkualitas Anthropic. Masukkan skripnya, pilih model, tulis promptnya. Pengguna akhir menanggung penggunaan; Anda meluncurkan tanpa kunci.
Untuk beban kerja sisi server, caching prompt, atau alur penggunaan alat lengkap, API resmi Anthropic masih merupakan jawaban yang tepat. Namun untuk prototipe, aplikasi publik gratis, build hackathon, proyek sampingan, dan situs statis, Puter adalah jawabannya.
Buat permintaannya sekali di Apidog, bandingkan Puter dengan API resmi, dan pilih jalur yang sesuai dengan kebutuhan Anda.
