Akira

Posted on May 9 • Originally published at apidog.com

無料無制限 Claude Opus 4.7 API 入手

AnthropicのClaudeファミリーは、本格的なコーディング、エージェント的な作業、長文コンテキストの推論に強いクローズドソースモデルラインであり、API価格にもそれが反映されています。Sonnetは100万トークンあたり3ドル/15ドル、Opusはそれ以上です。サイドプロジェクトやプロトタイプでは、このコストが導入前のブレーキになりがちです。Puter.jsを使うと、AnthropicキーなしでClaudeのラインアップ（Opus 4.7、Sonnet 4.6、Haiku 4.5、その他のバリアント）をブラウザから利用でき、課金は開発者ではなくエンドユーザー側のPuterアカウントに紐づきます。

今すぐApidogを試す

このガイドでは、Puter.jsでClaudeを呼び出すためのセットアップ、モデルID、実装コード、ストリーミング、複数ターン会話、公開前に確認すべき制約を順に説明します。

TL;DR

Puter.jsを使うと、APIキーなし、Anthropicへの直接課金なし、サーバーなしでClaudeファミリーをブラウザから呼び出せます。
エンドユーザーはPuterアカウントで自身の使用量をまかないます。開発者側でAnthropicキーを管理する必要はありません。
サポートされるモデル: 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>タグとputer.ai.chat()の呼び出しだけです。
ストリーミング、システムプロンプト、複数ターンの会話に対応しています。
ベンチマークする場合は、ApidogでPuter経由のClaudeと公式Anthropic APIに対して同じプロンプトを実行すると比較しやすくなります。

「無料無制限」の仕組み

Puter.jsは、ブラウザで動作するサーバーレスのクラウドおよびAIライブラリです。

通常は開発者がAnthropic APIキーを保持し、利用量に応じて課金されます。一方、Puter.jsではエンドユーザーがPuterにサインインし、そのPuterアカウントの残高からAPI呼び出しの料金が処理されます。新規Puterアカウントにはスタートアップクレジットが付与され、必要に応じてユーザーがチャージできます。

開発者側の実装上のメリットは次の通りです。

APIキーをリポジトリに置かなくてよい

キー漏洩、ローテーション、プロジェクトごとのキー管理を避けられます。
開発者側で使用量を負担しない

各ユーザーが自身のPuterアカウントで実行するため、開発者のAnthropic請求に利用量が集中しません。
Anthropicとの直接契約が不要

Puterが仲介するため、Anthropicキーなしで利用できます。

ただし、Puter.jsはブラウザファーストです。ログイン済みユーザーセッションを前提とするため、バックエンドのPythonスクリプト、cron、Discordボットなどから直接使う用途には向きません。その場合は公式Anthropic APIを使う方が適しています。

ステップ1: Puter.jsを読み込む

静的HTMLやプロトタイプでは、HTMLに次のタグを追加するだけです。

<script src="https://js.puter.com/v2/"></script>

ビルドステップは不要です。npm install、APIキー設定、サーバー実装も必要ありません。

Vite、Webpack、Next.jsなどのバンドル環境で使う場合は、NPMパッケージも利用できます。

npm install @heyputer/puter.js

import { puter } from '@heyputer/puter.js';

最小検証ならCDNタグが最速です。既存のフロントエンドアプリに組み込む場合はNPMインポートを使うと管理しやすくなります。

ステップ2: Claudeモデルを選ぶ

PuterはClaudeの複数モデルを公開しています。モデル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`	高速・低コスト。分類や軽量タスク向け

最初は次のように選ぶと実装しやすいです。

通常のチャット、Q&A、コード補助: claude-sonnet-4-6
高速な分類、大量処理: claude-haiku-4-5
長文推論、複雑なコードレビュー、多段階計画: claude-opus-4-7

ステップ3: 最小コードでClaudeを呼び出す

まずはHTMLファイル1つで動作確認します。

<!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

複数のコンテンツブロックが返る可能性がある場合は、配列として処理します。

for (const block of response.message.content) {
  if (block.type === 'text') {
    console.log(block.text);
  }
}

ステップ4: 応答をストリーミングする

長い回答では、完了まで待ってから表示すると遅く感じられます。stream: trueを指定し、for awaitでチャンクを処理します。

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);
}

チャットUIに組み込む場合は、各part.textを既存のメッセージ要素に追記します。

const output = document.querySelector('#assistant-message');

for await (const part of response) {
  if (part?.text) {
    output.textContent += 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);

実際のチャットUIでは、ユーザー入力とアシスタント応答を同じ配列に追加してから、次のリクエストで再送します。

const messages = [];

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

  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;
}

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'
});

console.log(response.message.content[0].text);

システムプロンプトは、次のような制御に向いています。

回答の粒度
出力フォーマット
禁止事項
口調
役割設定
コード例の有無

例として、日本語で短く回答させたい場合は次のようにします。

const messages = [
  {
    role: 'system',
    content: 'あなたは経験豊富なWebエンジニアです。回答は日本語で、実装手順を中心に簡潔に説明してください。'
  },
  {
    role: 'user',
    content: 'Expressで認証ミドルウェアを設計する方法を教えてください。'
  },
];

同じプロンプトでモデルを比較する

ユースケースに合うモデルを選ぶには、同じプロンプトを複数モデルに投げて、速度と出力品質を比較します。

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、日常的な実装支援はSonnet、複雑な推論やレビューはOpusから試すとよいです。

ApidogでPuterの無料パスと公式Anthropic APIを比較する場合は、両プロバイダーを同じコレクション内に保持し、環境を切り替えて同じプロンプトを実行します。

得られるものと得られないもの

Puter経由でClaudeを使うと、ブラウザアプリに素早くAI機能を組み込めます。ただし、公式APIのすべての機能を同じ粒度で制御できるわけではありません。

得られるもの:

Claudeモデルのカタログ
複数ターン会話
システムプロンプト
ストリーミング応答
ブラウザからの直接呼び出し
開発者側のAnthropic APIキー不要
開発者側の課金負担なし

得られない可能性があるもの（Puterのバージョンに依存）:

ネイティブのツール使用 / 関数呼び出し
ビジョン入力（画像添付）
Anthropicのプロンプトキャッシュによるコスト制御
ブラウザコンテキストなしでのサーバーサイド利用
Anthropicのレート制限ヘッダーなどの直接的な可視性

詳細なツール使用ワークフローが必要な場合は、公式Anthropic APIまたはApidogでのMCPサーバーテストのような構成の方が制御しやすくなります。

一方、一般的なチャットボット、Q&Aアプリ、コンテンツ生成、学習用プロトタイプであれば、Puter.jsの機能で十分なケースが多いです。

Puterと公式Anthropic APIの使い分け

Puterを使うべき場合

無料の公開アプリをリリースし、開発者側の課金負担を避けたい。
プロトタイプ段階で、Anthropicの請求設定をまだ行いたくない。
静的サイト、ハッカソンプロジェクト、ブラウザ拡張機能にClaudeを組み込みたい。
サーバーを立てずにフロントエンドだけで試したい。
ユーザーがPuterへのサインインを許容できる。

公式Anthropic APIを使うべき場合

cronジョブ、APIエンドポイント、バッチ処理などサーバーサイド実行が必要。
安定した長いシステムプロンプトに対してプロンプトキャッシュを使いたい。
高度なツール使用、ビジョン入力、Files APIなどが必要。
コンプライアンスや契約面でAnthropicとの直接関係が必要。
ユーザーにPuterサインインを要求できない。

多くのプロジェクトでは、最初にPuterでプロトタイプを作り、制約に当たった段階で公式APIへ移行する流れが現実的です。メッセージ形式が近いため、移行時の設計変更を抑えやすくなります。

GPT系APIの同等機能については、GPT-5.5 APIの使用方法も参照してください。

Apidogで連携テストする

Puterの呼び出しはブラウザで実行されるため、一般的なバックエンドAPIテストランナーから直接同じ形で叩くことはできません。実装時は、次のように分けて検証すると扱いやすくなります。

Puterスクリプトを含む小さな静的ページを作る。
プロンプトをクエリパラメータや入力欄から渡せるようにする。
公式Anthropic APIへ移行する可能性がある場合は、ApidogでAnthropic APIのリクエストも定義する。
Puter用とAnthropic用を別環境として管理する。
同じプロンプトで速度、出力、失敗時の挙動を比較する。

Apidogをダウンロードし、例えば次の2つの環境を作成します。

puter-prototype

Puterページをホストするlocalhost URL
anthropic-prod

https://api.anthropic.com/v1

Puterでプロトタイプを作り、必要になったら公式APIに移行する場合でも、同じプロンプトセットを使って比較できます。

FAQ

これは本当に無制限ですか？隠れた上限はありますか？

開発者側から見ると無制限です。エンドユーザーは自身のPuterアカウントの残高を使用します。新規アカウントにはスタートアップクレジットが付与され、必要に応じてユーザーがチャージします。

Anthropicに登録する必要はありますか？

いいえ。PuterがAnthropicとの関係を処理します。開発者がAnthropic APIキーを扱う必要はありません。

本番環境で使えますか？

ブラウザベースのアプリであれば使用できます。確認すべきポイントは、ユーザーがPuterへのサインインを許容できるかどうかです。

Puter経由のClaudeは公式APIと同じように動作しますか？

Puterはユーザーに代わってClaudeを呼び出します。追加の経路があるため、レイテンシーが変わる可能性はあります。モデル選定や出力品質は、実際のプロンプトで比較するのが安全です。

Claudeのプロンプトキャッシュは使えますか？

Puterは現在、Anthropicのプロンプトキャッシュの料金制御を直接公開していない可能性があります。安定した長いシステムプロンプトがあり、キャッシュ割引を前提にしたい場合は公式APIを検討してください。

Discordボットやバックエンドサービスで使えますか？

Puterはブラウザファーストで、ユーザーセッションを前提とします。バックエンドサービス、Bot、cron、バッチ処理には公式Anthropic APIの方が適しています。

どのモデルをデフォルトにすべきですか？

まずはclaude-sonnet-4-6が扱いやすいです。より深い推論が必要ならclaude-opus-4-7、大量の軽量処理ならclaude-haiku-4-5を試します。

ユーザーに高額請求が発生しますか？

チャットスタイルの一般的な利用であれば、使用量は比較的小さくなりやすいです。ただし、長文コンテキストや大量実行では消費が増えるため、アプリ側でプロンプト長や実行頻度を制御する設計が重要です。

まとめ

Puter.jsを使うと、Anthropic APIキーを管理せずに、ブラウザベースのアプリへClaudeを組み込めます。実装はシンプルです。

<script src="https://js.puter.com/v2/"></script>を追加する。
モデルIDを選ぶ。
puter.ai.chat()を呼び出す。
必要に応じてストリーミング、会話履歴、システムプロンプトを追加する。

サーバーサイド処理、プロンプトキャッシュ、高度なツール使用、厳密なコンプライアンス要件がある場合は、公式Anthropic APIを使う方が適しています。

一方で、プロトタイプ、無料公開アプリ、ハッカソン、サイドプロジェクト、静的サイトでは、Puter.jsは導入コストの低い選択肢です。

Apidogで同じプロンプトを管理し、Puter経由と公式APIを比較して、アプリに合う実装方針を選びましょう。

DEV Community