Anthropic'in Claude ailesi; kodlama, aracılı işler ve uzun bağlam muhakemesi için güçlü kapalı kaynak model serilerinden biridir. Ancak API maliyeti birçok yan proje ve prototip için erken aşamada engel olabilir. Puter.js bu faturalandırma modelini değiştirir: Claude modellerini Anthropic API anahtarı olmadan tarayıcıdan çağırırsınız; kullanım geliştiriciye değil, son kullanıcının Puter hesabına yazılır.
Bu rehberde Puter.js ile Claude entegrasyonunu uçtan uca kuracağız: script ekleme, model seçimi, temel çağrı, streaming, çok turlu sohbetler, sistem istemleri, model karşılaştırma ve üretime almadan önce bilmeniz gereken sınırlamalar.
Özet
- Puter.js, Claude modellerini API anahtarı, sunucu veya Anthropic faturalandırması olmadan tarayıcıdan kullanmanızı sağlar.
- Kullanım maliyeti geliştiriciye değil, son kullanıcının Puter hesabına yansır.
- Desteklenen modeller arasında 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 bulunur.
- Tek bir
<script>etiketi veputer.ai.chat()çağrısı ile entegrasyona başlayabilirsiniz. - Streaming, sistem istemleri ve çok turlu sohbetler desteklenir.
- Aynı istemi Puter ve resmi Anthropic API üzerinde test etmek için Apidog kullanabilirsiniz.
“Ücretsiz sınırsız” model pratikte nasıl çalışır?
Puter.js, tarayıcıda çalışan sunucusuz bir bulut ve yapay zeka kütüphanesidir. Geleneksel senaryoda Anthropic API anahtarını siz saklar, çağrıları siz yapar ve faturayı siz ödersiniz. Puter.js ile akış değişir:
- Kullanıcı uygulamanızı açar.
- Puter hesabıyla giriş yapar veya hesap oluşturur.
- Claude çağrısı kullanıcının Puter hesabı üzerinden çalışır.
- Siz API anahtarı yönetmez ve Anthropic faturası ödemezsiniz.
Geliştirici açısından sonuç:
- Depoda API anahtarı yoktur. Sızıntı, rotasyon ve secret yönetimi derdi azalır.
- Kullanım kullanıcı bazında ölçeklenir. Her kullanıcı kendi hesabıyla işlem yapar.
- Anthropic hesabı zorunlu değildir. Claude çağrısı Puter üzerinden yapılır.
Sınırlama: Bu yaklaşım tarayıcı merkezlidir. Oturum açmış bir kullanıcı bağlamı olmadan arka uç Python/Node betiğinde doğrudan aynı modeli kullanamazsınız. Sunucu tarafı işler için resmi Anthropic API daha uygundur.
Adım 1: Puter.js betiğini ekleyin
Statik HTML sayfasında tek bir script yeterlidir:
<script src="https://js.puter.com/v2/"></script>
Tam minimum iskelet:
<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8" />
<title>Puter Claude Demo</title>
</head>
<body>
<script src="https://js.puter.com/v2/"></script>
</body>
</html>
Bir paketleyici kullanıyorsanız NPM üzerinden de kurabilirsiniz:
npm install @heyputer/puter.js
import { puter } from '@heyputer/puter.js';
Hızlı prototip veya statik site için CDN script’i en basit yoldur. Vite, Webpack veya TypeScript tabanlı bir uygulamada NPM paketi daha uygundur.
Adım 2: Claude modelini seçin
Puter, Claude modellerini kısa model kimlikleriyle çağırır:
| Model Kimliği | Ne zaman kullanılır? |
|---|---|
claude-opus-4-7 |
En derin muhakeme, karmaşık kod inceleme, çok adımlı planlama |
claude-opus-4-6 |
Güçlü kodlama ve muhakeme işleri |
claude-opus-4.6-fast |
Daha düşük gecikmeli Opus varyantı |
claude-opus-4-5 |
Üretim aracıları için kararlı tercih |
claude-opus-4-1 |
Eski ve davranışı daha iyi bilinen Opus sürümü |
claude-opus-4 |
Opus 4 temel sürümü |
claude-sonnet-4-6 |
Genel amaçlı varsayılan model |
claude-sonnet-4-5 |
Çoğu görev için yeterli önceki Sonnet sürümü |
claude-sonnet-4 |
Sonnet 4 temel sürümü |
claude-haiku-4-5 |
Hızlı sınıflandırma ve yüksek hacimli basit görevler |
Pratik başlangıç önerisi:
- Genel kullanım:
claude-sonnet-4-6 - Hızlı ve basit görevler:
claude-haiku-4-5 - Zor muhakeme ve karmaşık kodlama:
claude-opus-4-7
Adım 3: İlk Claude çağrısını yapın
Aşağıdaki örnek, tarayıcıda çalışan minimum uygulamadır:
<!DOCTYPE html>
<html lang="tr">
<body>
<script src="https://js.puter.com/v2/"></script>
<script>
puter.ai.chat(
"Explain quantum computing in simple terms",
{ model: "claude-sonnet-4-6" }
).then(response => {
puter.print(response.message.content[0].text);
});
</script>
</body>
</html>
Dosyayı tarayıcıda açtığınızda Puter çağrıyı yönetir. Kullanıcı gerekirse Puter hesabıyla giriş yapar ve Claude yanıtı sayfaya yazılır.
Yanıt yapısı Anthropic mesaj formatına benzer:
response.message.content[0].text
Düz metin yanıtlarında genellikle ilk içerik bloğundaki text alanını okursunuz. Çok parçalı yanıtlar için içerik dizisini gezebilirsiniz:
for (const block of response.message.content) {
if (block.type === "text") {
console.log(block.text);
}
}
Adım 4: Yanıtı streaming ile gösterin
Uzun yanıtları tek seferde bekletmek kullanıcı deneyimini yavaş hissettirir. Streaming için stream: true kullanın:
const response = await puter.ai.chat(
"Write a detailed essay on the impact of artificial intelligence on society",
{
model: "claude-sonnet-4-6",
stream: true
}
);
for await (const part of response) {
puter.print(part?.text);
}
Bir sohbet arayüzünde aynı mantığı mesaj baloncuğuna ekleme yaparak kullanabilirsiniz:
const bubble = document.querySelector("#assistant-message");
for await (const part of response) {
if (part?.text) {
bubble.textContent += part.text;
}
}
Adım 5: Çok turlu sohbet oluşturun
Tek bir string yerine mesaj dizisi gönderebilirsiniz. Her mesajda role ve content bulunur:
const messages = [
{ role: "user", content: "I am building a Next.js app with Postgres." },
{ role: "assistant", content: "Got it. What do you need help with?" },
{ role: "user", content: "How should I structure the migrations folder?" }
];
const response = await puter.ai.chat(messages, {
model: "claude-opus-4-7"
});
console.log(response.message.content[0].text);
Sohbet geçmişini korumak için her kullanıcı ve asistan mesajını aynı diziye ekleyin:
messages.push({
role: "assistant",
content: response.message.content[0].text
});
messages.push({
role: "user",
content: "Can you show a folder structure example?"
});
Bir sonraki çağrıda Claude tüm konuşma geçmişini okuyarak daha tutarlı yanıt verir.
Adım 6: Sistem istemi ekleyin
Sistem istemleri; rol, ton, kısıtlar ve çıktı formatı tanımlamak için kullanılır:
const messages = [
{
role: "system",
content: "You are a senior backend engineer. Reply in numbered bullets, never more than five."
},
{
role: "user",
content: "How do I prevent SQL injection in a Node app?"
}
];
const response = await puter.ai.chat(messages, {
model: "claude-sonnet-4-6"
});
console.log(response.message.content[0].text);
Sistem istemini özellikle şu durumlarda kullanın:
- Yanıt uzunluğunu sınırlamak
- JSON, Markdown veya madde listesi formatı istemek
- Modeli belirli bir uzman rolüne sokmak
- Güvenlik ve davranış kuralları tanımlamak
Aynı istemde modelleri karşılaştırın
Hangi Claude modelinin kullanım durumunuza uygun olduğunu görmek için aynı istemi birkaç modelde çalıştırın:
const models = [
"claude-haiku-4-5",
"claude-sonnet-4-6",
"claude-opus-4-7"
];
const prompt = "Refactor this React component to use 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("---");
}
Bu küçük test size genellikle şu resmi verir:
- Haiku daha hızlıdır ve basit görevlerde yeterlidir.
- Sonnet çoğu uygulama için dengeli varsayılandır.
- Opus daha zor muhakeme ve karmaşık kod görevlerinde tercih edilir.
Puter yolunu resmi Anthropic API ile karşılaştırmak istiyorsanız aynı istemleri Apidog koleksiyonunda ayrı ortamlarla test edebilirsiniz.
Ne elde edersiniz, ne elde edemeyebilirsiniz?
Puter üzerinden Claude kullanımı pratiktir; ancak resmi Anthropic API’nin tüm yüzeyini birebir sunmayabilir.
Elde ettikleriniz:
- Claude model kataloğuna tarayıcıdan erişim
- Çok turlu sohbetler
- Sistem istemleri
- Streaming yanıtlar
- API anahtarı olmadan entegrasyon
- Geliştirici tarafında faturalandırma riskinin azalması
Puter sürümüne bağlı olarak eksik olabilecekler:
- Yerel tool/function calling
- Görsel giriş desteği
- Anthropic prompt caching maliyet optimizasyonları
- Tarayıcı bağlamı olmadan sunucu tarafı kullanım
- Anthropic hız limiti başlıklarına doğrudan erişim
Derin araç kullanımı veya MCP tabanlı iş akışları için resmi Anthropic API ya da Apidog’daki MCP sunucu testi daha fazla kontrol sağlar.
Puter ne zaman, resmi Anthropic API ne zaman?
Puter kullanın
Aşağıdaki durumlarda Puter daha hızlı ve risksiz bir başlangıç sağlar:
- Ücretsiz veya herkese açık bir tarayıcı uygulaması geliştiriyorsanız
- API anahtarı ve faturalandırma yönetmek istemiyorsanız
- Statik site, hackathon projesi veya tarayıcı uzantısı geliştiriyorsanız
- Prototip aşamasında Anthropic hesabı açmak istemiyorsanız
- Kullanıcılarınız Puter giriş adımını kabul edebiliyorsa
Resmi Anthropic API kullanın
Aşağıdaki durumlarda resmi API daha uygundur:
- Sunucu tarafı çağrılar yapmanız gerekiyorsa
- Cron job, batch processing veya backend endpoint çalıştırıyorsanız
- Prompt caching gibi maliyet optimizasyonlarına ihtiyacınız varsa
- Tool calling, görsel giriş veya Files API gibi özellikler gerekiyorsa
- Uyumluluk, sözleşme veya bölgesel veri gereksinimleriniz varsa
- Kullanıcıların ek bir Puter giriş adımı atmasını istemiyorsanız
Birçok proje için iyi strateji şudur: Prototipi Puter ile başlatın, sınırlara ulaştığınızda resmi Anthropic API’ye geçin. Mesaj yapısı benzer olduğu için geçiş daha yönetilebilir olur.
GPT tarafındaki benzer entegrasyon için GPT-5.5 API’si Nasıl Kullanılır yazısına bakabilirsiniz.
Apidog’da entegrasyonu test edin
Puter çağrıları tarayıcıda gerçekleştiği için doğrudan klasik bir backend test runner üzerinden çalıştırmak her zaman uygun değildir. Daha pratik yaklaşım:
- Puter script’ini içeren küçük bir statik test sayfası oluşturun.
- İstemi URL query parametresi veya form alanı üzerinden alın.
- Resmi Anthropic API’ye geçme ihtimaliniz için aynı istemleri Apidog koleksiyonunda tutun.
- Puter prototipi ve Anthropic üretim ortamını ayrı environment olarak yönetin.
Apidog’u indirin ve iki ortam oluşturun:
-
puter-prototype: Puter sayfanızın çalıştığı localhost veya statik site URL’si -
anthropic-prod:https://api.anthropic.com/v1
Böylece Puter’dan resmi API’ye geçtiğinizde aynı test koleksiyonunu kullanmaya devam edebilirsiniz.
SSS
Bu gerçekten sınırsız mı?
Geliştirici tarafında kullanım size faturalandırılmaz. Kullanıcı kendi Puter hesabındaki bakiye veya krediyle işlem yapar. Bu nedenle sınır, geliştirici hesabınızdan ziyade son kullanıcının Puter kullanımına bağlıdır.
Anthropic hesabı açmam gerekiyor mu?
Hayır. Puter, Anthropic tarafındaki ilişkiyi yönetir. Siz Anthropic API anahtarı kullanmazsınız.
Üretimde kullanabilir miyim?
Tarayıcı tabanlı uygulamalar için evet. Asıl karar noktası kullanıcı deneyimidir: Kullanıcılarınız Puter ile giriş yapmayı kabul ediyorsa yayınlayabilirsiniz.
Model çıktısı resmi API ile aynı mı?
Puter, kullanıcı adına Claude çağrısı yapar. Model davranışı aynı aileye dayanır; ancak aradaki ek katman nedeniyle gecikme değişebilir.
Prompt caching kullanabilir miyim?
Puter, Anthropic’in prompt caching maliyet kontrollerini resmi API kadar doğrudan sunmayabilir. Uzun ve sabit sistem istemlerinde maliyet optimizasyonu gerekiyorsa resmi Anthropic API daha uygundur.
Discord botu veya backend servisi için Puter kullanabilir miyim?
Doğrudan önerilmez. Puter tarayıcı ve kullanıcı oturumu merkezlidir. Backend servisleri için resmi Anthropic API kullanın.
Varsayılan model hangisi olmalı?
Çoğu uygulama için claude-sonnet-4-6 iyi varsayılandır. Daha hızlı ve basit işler için claude-haiku-4-5, daha derin muhakeme için claude-opus-4-7 seçebilirsiniz.
Özetle
Puter.js, Claude modellerini tarayıcı tabanlı uygulamalara API anahtarı ve geliştirici tarafı faturalandırma olmadan eklemek için pratik bir yoldur. En basit akış:
-
https://js.puter.com/v2/script’ini ekleyin. - Bir Claude modeli seçin.
-
puter.ai.chat()ile istem gönderin. - Gerekirse streaming, sistem istemi ve sohbet geçmişi ekleyin.
Sunucu tarafı işler, prompt caching, gelişmiş tool calling veya uyumluluk gereksinimleri için resmi Anthropic API daha doğru tercihtir. Ancak prototipler, statik siteler, ücretsiz halka açık uygulamalar ve hackathon projeleri için Puter hızlı bir başlangıç sağlar.
İsteği Apidog üzerinde bir kez modelleyin, Puter ve resmi API akışlarını karşılaştırın, sonra uygulamanızın gereksinimine göre doğru yolu seçin.

Top comments (0)