AnthropicのClaudeファミリーは、本格的なコーディング、エージェント的な作業、長文コンテキストの推論において最も高性能なクローズドソースモデルラインであり、そのAPI価格にもそれが反映されています。Sonnetは100万トークンあたり3ドル/15ドル、Opusはそれ以上です。その費用は、ほとんどのサイドプロジェクトが始まる前に立ち止まらせてしまいます。しかし、課金モデルを根本から覆す方法が一つあります。Puter.jsは、AnthropicキーなしでClaudeの全ラインアップ(Opus 4.7、Sonnet 4.6、Haiku 4.5、その他7つのバリアント)を公開し、開発者ではなくエンドユーザーに請求します。開発者であるあなたにとって、それは構造上、無料で無制限です。
このガイドでは、セットアップの全工程、つまりモデルID、動作するコード、ストリーミング、そして公開前に知っておくべきトレードオフについて説明します。
TL;DR
- Puter.jsは、APIキーなし、Anthropicへの課金なし、サーバーなしで、開発者にClaudeファミリー全体への無料かつ無制限のアクセスを提供します。
- エンドユーザーはPuterアカウントから自身の使用量をまかないます。開発者は一切支払う必要がありません。
- サポートされるモデル: 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。
- 1つの
<script>タグ、1つの関数呼び出し(puter.ai.chat)だけでClaudeと対話できます。 - ストリーミング、システムプロンプト、複数ターンの会話はすべて機能します。PuterはAnthropicのメッセージ形式を反映しています。
- ベンチマークのために、Apidogを使用して、Puter経由のClaudeと公式のAnthropic APIの両方に対して同じプロンプトをスクリプト化してみてください。
「無料無制限」の仕組み
Puter.jsは、ブラウザで動作するサーバーレスのクラウドおよびAIライブラリです。アーキテクチャの転換は、あなたがAnthropic APIキーを保持して費用を負担する代わりに、エンドユーザーがPuterにサインイン(無料アカウント)し、その残高からAPI呼び出しの料金が請求されるという点です。新しいPuterアカウントにはスタートアップクレジットが付与され、ユーザーは必要に応じてチャージできます。
開発者にとっては、これは以下の3つのことを意味します。
- リポジトリにAPIキーは不要。漏洩のリスク、キーのローテーション、プロジェクトごとのキー管理は不要です。
- 開発者側の使用量制限なし。すべてのユーザーが自身のアカウントで実行するため、あなたの「制限」はユーザーベースに比例してスケールします。
- Anthropicとの関係は不要。Anthropicと契約を結ぶ必要はありません。Puterが仲介役となります。
トレードオフとして、これはブラウザファーストです。ログインしたユーザーセッションなしに、バックエンドのPythonスクリプトでPuterを使用することはできません。バックエンドでの使用については、以下の代替案のセクションを参照してください。
ステップ1: スクリプトをドロップインする
HTMLに1つのタグを追加するだけで、ビルドステップは不要です。
<script src="https://js.puter.com/v2/"></script>
これがインストール全体のプロセスです。npm installも、キーの設定も、DNSのセットアップもありません。バンドルされたアプリのためにNPMを好む場合は、以下を使用します。
npm install @heyputer/puter.js
import { puter } from '@heyputer/puter.js';
CDNタグは、静的サイトや簡単なプロトタイプにとって最も抵抗の少ない方法です。NPMインポートを使用すると、ViteまたはWebpackビルドでツリーシェイキングとTypeScriptの型定義が得られます。
ステップ2: Claudeモデルを選択する
PuterはAnthropicの全カタログを公開しています。モデルIDはハイフン区切りのAnthropicの命名規則に従っています。
| モデルID | 使用する場面 |
|---|---|
claude-opus-4-7 |
最新のフラッグシップ。最も深い推論、最高のエージェント的作業 |
claude-opus-4-6 |
以前のフラッグシップ。強力なコーディング、わずかに安価 |
claude-opus-4.6-fast |
低レイテンシーのOpusバリアント |
claude-opus-4-5 |
プロダクションエージェント向けの安定した選択肢 |
claude-opus-4-1 |
レガシーな安定版。よく理解されている振る舞い |
claude-opus-4 |
元のOpus 4ベースライン |
claude-sonnet-4-6 |
デフォルトの日常利用モデル。コストと品質のバランスが優れている |
claude-sonnet-4-5 |
以前のSonnet。安価で、ほとんどのタスクに依然として優れている |
claude-sonnet-4 |
Sonnet 4ベースライン |
claude-haiku-4-5 |
最速、最安価。大量の分類に適している |
まず最初に使うべき2つは、日常的な推論にはclaude-sonnet-4-6、高速な分類にはclaude-haiku-4-5です。真の深さ(長文推論、複雑なコードレビュー、エージェント的な多段階計画)が必要な場合は、claude-opus-4-7を取り出してください。
ステップ3: Claudeに話させる
最小限の呼び出し例:
<!DOCTYPE html>
<html>
<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>
ファイルをブラウザで開いてください。PuterがAPI呼び出しを処理し、ユーザーがサインイン(または初回実行時に無料のPuterアカウントを作成)すると、応答がページに表示されます。
応答形式はAnthropicのメッセージAPIを反映しています。response.message.contentはコンテンツブロックの配列であり、プレーンテキストの応答では[0].textを読み取ります。複数の部分からなる応答(テキスト+ツール呼び出し)の場合は、配列を反復処理します。
ステップ4: 応答をストリーミングする
長い回答はストリーミングなしでは遅く感じられます。stream: trueを渡し、イテレーターを消費します。
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);
}
for awaitパターンは、チャンクが到着するたびに読み取ります。チャットUIの場合、各part.textをメッセージバブルに追加すると、ユーザーはテキストが単語ごとに表示されるのを見ることができます。
ステップ5: 複数ターンの会話
単一の文字列の代わりにメッセージの配列を渡します。各メッセージにはroleとcontentがあります。
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);
ターン間で状態を維持するには、次の呼び出しの前に、すべてのユーザーメッセージとすべてのアシスタントの応答を配列にプッシュします。Claudeはトランスクリプト全体を読み取り、一貫性を保ちます。
ステップ6: システムプロンプト
ペルソナ、制約、出力形式をシステムメッセージで上部に設定します。
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' });
システムプロンプトは会話全体で保持され、トーン、出力形式、行動のガイドラインを設定するのに適切な場所です。
同じプロンプトでモデルを比較する
あなたのユースケースに最適なClaudeモデルを見つける最も速い方法は、それらすべてに対して同じプロンプトをスクリプト化し、比較することです。小さなベンチマークループの例:
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('---');
}
一度実行すると、トレードオフのパターンが見えてきます。HaikuはOpusよりも5〜10倍速く、Sonnetはその中間で、Opusは難しいプロンプトに対して明らかに優れた回答を生成します。ほとんどのアプリでは、Sonnet 4.6が適切なデフォルトです。
ApidogでPuterの無料パスを公式のAnthropic APIと比較ベンチマークするには、両プロバイダーを同じコレクションに保持し、環境を切り替えます。
得られるものと得られないもの
Puterを介した無料無制限のClaudeは現実ですが、その機能は公式APIの一部です。正直なリストは以下の通りです。
得られるもの:
- Claudeモデルの全カタログ(Opus、Sonnet、Haiku、すべての現行バージョン)
- 複数ターンの会話
- システムプロンプト
- ストリーミング応答
- 本番環境に対応した規模(Puterがインフラを管理)
- 開発者としての課金負担ゼロ
得られない可能性のあるもの(Puterのバージョンによる):
- ネイティブのツール使用 / 関数呼び出し(最新のPuterドキュメントを確認してください)
- ビジョン入力(画像添付)
- Anthropicのプロンプトキャッシュによるコスト削減
- ブラウザコンテキストなしでのサーバーサイド使用
- 直接的なレート制限の可視性(Anthropicのヘッダーは表示されません)
詳細なツール使用ワークフローには、公式のAnthropic APIまたはApidogでのMCPサーバーテストがより多くの制御を提供します。一般的なチャットボット、Q&Aアプリ、またはコンテンツジェネレーターであれば、Puterの機能で十分です。
Puterと公式Anthropic APIの使い分け
使い分けは以下の通りです。
Puterを使うべき場合:
- 無料の公開アプリをリリースし、課金負担を避けたい場合。
- プロトタイプを作成中で、Anthropicとの課金関係をまだ設定したくない場合。
- バックエンドなしで、静的サイト、ハッカソンプロジェクト、ブラウザ拡張機能でClaudeをサポートしたい場合。
- ユーザーがPuterへのサインインに抵抗がない(または既に利用している)場合。
公式Anthropic APIを使うべき場合:
- サーバーサイドの呼び出し(cronジョブ、APIエンドポイント、バッチ処理)が必要な場合。
- 安定したシステムプロンプトでのコスト削減のためにプロンプトキャッシュが必要な場合。
- きめ細やかなツール使用、ビジョン入力、またはFiles APIが必要な場合。
- コンプライアンス(BAA、SOC 2、地域内データ保存など)のために契約関係が必要な場合。
- ユーザーがPuterのサインインステップを許容しない場合。
ほとんどのプロジェクトはプロトタイプとしてPuterから始まり、上記のいずれかの制限に達したときに公式APIに移行します。移行は簡単で、メッセージ形式は同じです。
GPTの同等機能については、GPT-5.5 APIの使用方法を参照してください。
Apidogでの連携テスト
Puterの呼び出しはブラウザで行われるため、バックエンドのテストランナーから直接スクリプト化することはできません。機能するパターンは以下の通りです。
- Puterスクリプトとプロンプト用のクエリパラメータを含む小さな静的ページを作成します。
- Apidogを使用して、上流のAnthropic APIサーフェスを検証します(最終的に移行する場合)。
- 両方を同じApidogコレクション内で別々の環境として保持し、ワンクリックで切り替えられるようにします。

Apidogをダウンロードし、puter-prototype(Puterページをホストするlocalhost URL)とanthropic-prod(https://api.anthropic.com/v1)という2つの環境を設定します。Puterから公式APIに移行する際、コレクションはきれいに移植できます。
FAQ
これは本当に無制限ですか、それとも隠れた上限がありますか?開発者側からは無制限です。エンドユーザーはPuterアカウントにある残高を使用します。新規アカウントにはスタートアップクレジットが付与され、ユーザーは必要に応じてチャージします。開発者ごとの上限はありません。
Anthropicに登録する必要はありますか?いいえ。PuterがAnthropicとの関係を処理します。Anthropicキーを見ることはありません。
これは本番環境で使用できますか?はい、ブラウザベースのアプリであれば使用できます。Puterは本番環境のインフラを実行しています。適切な質問は、あなたのユーザーがPuterへのサインインを望むかどうかです。もし望むなら、リリースしてください。
Puterを介したClaudeは、公式APIとまったく同じように動作しますか?モデルの出力は同じです。Puterはユーザーに代わって公式のAnthropic APIを呼び出します。余分なホップがあるため、レイテンシーがわずかに高くなる可能性がありますが、モデルの動作は変わりません。
Claudeのプロンプトキャッシュによるコスト削減についてはどうですか?Puterは現在、Anthropicのプロンプトキャッシュの料金制御を公開していません。安定した5万トークンのシステムプロンプトがあり、キャッシュ割引が必要な場合は、公式APIを使用してください。
Puterを介してDiscordボットやバックエンドサービスでClaudeを使用できますか?きれいに使用することはできません。Puterはブラウザファーストであり、ユーザーセッションを前提としています。バックエンドサービスは公式のAnthropic APIを使用すべきです。
どのモデルをデフォルトにすべきですか?claude-sonnet-4-6です。ほとんどのプロンプトにおいて、コスト、速度、品質のバランスが適切です。より深い推論が必要な場合はclaude-opus-4-7に移行し、大量の分類が必要な場合はclaude-haiku-4-5を使用してください。
私のユーザーは多額の料金を請求されますか?Anthropicの料金設定では、ほとんどのチャットスタイルの使用量はセッションあたり数セントです。カジュアルなユーザーであれば、Puterのスタートアップクレジットで何十回もの会話を実行でき、チャージする必要はありません。
まとめ
Puter.jsを介した無料無制限のClaudeは、Anthropic品質の出力をAnthropic品質の課金なしで実現したいブラウザベースのアプリにとって、最もクリーンな方法です。スクリプトをドロップインし、モデルを選択し、プロンプトを記述するだけです。エンドユーザーが使用量を負担し、あなたはキーなしでリリースできます。
サーバーサイドのワークロード、プロンプトキャッシュ、または完全なツール使用フローには、公式Anthropic APIが依然として適切な選択肢です。しかし、プロトタイプ、無料の公開アプリ、ハッカソンビルド、サイドプロジェクト、静的サイトには、Puterが答えです。
Apidogで一度リクエストを作成し、Puterと公式APIをベンチマークして、あなたのニーズに合う道を選択してください。
