OpenAIのGPT-5.5は有料APIとして提供され、入力100万トークンあたり5ドル、出力100万トークンあたり30ドルがかかります。サイドプロジェクト、ハッカソン、無料公開アプリでは、このコストが実装前の障壁になります。Puter.jsを使うと、OpenAIキーなしでGPT-5.5、GPT-5.5 Pro、GPT-5.x系、GPT-Image-2、DALL-E、OpenAI TTSをブラウザから呼び出せます。課金は開発者ではなく、Puterにサインインしたエンドユーザー側で処理されます。
TL;DR
- Puter.jsを使うと、APIキー、OpenAIアカウント、サーバーなしでOpenAIモデルをブラウザから呼び出せます。
- 対応テキストモデルには、gpt-5.5、gpt-5.5-pro、gpt-5.4、gpt-5、gpt-5-mini、o1、o3、gpt-4.1、gpt-4o、チャット/Codex系バリアントが含まれます。
- 画像生成: gpt-image-2、gpt-image-1.5、dall-e-3。
- TTS: gpt-4o-mini-tts、tts-1、tts-1-hd。
- 最小構成は
<script>タグ1つとputer.ai.chat()だけです。 - ストリーミング、関数呼び出し、画像入力、画像生成、TTSをブラウザで実装できます。
- エンドユーザーはPuterアカウントから自身の使用量を支払います。
- 移行判断には、ApidogでPuter版と公式OpenAI API版のプロンプトを比較してください。
「無料無制限」の仕組み
Puter.jsは、LLM利用時の課金主体を開発者からエンドユーザーに移します。開発者がOpenAI APIキーを保持して全トークン費用を負担する代わりに、ユーザーがPuterにサインインし、そのユーザーのPuter残高から呼び出しが課金されます。
開発者側のメリットは次の3つです。
OpenAIアカウントやAPIキーを管理しなくてよい
リポジトリへのキー混入、キー漏洩、ローテーション対応を避けられます。開発者単位の利用上限を気にしにくい
各ユーザーが自身のPuterアカウントで実行します。請求リスクを抑えられる
公開アプリで予期せぬOpenAI請求が発生する構成を避けられます。
ただし、Puter.jsはブラウザファーストです。ログイン済みユーザーセッションを前提とするため、Node.jsのバックエンドスクリプトやcronジョブで使う用途には向きません。サーバーサイド実行が必要な場合は、公式OpenAI APIを使うのが適切です。
ステップ1: インストール
CDN版なら、HTMLに1行追加するだけです。
<script src="https://js.puter.com/v2/"></script>
バンドル済みアプリではNPM版を使えます。
npm install @heyputer/puter.js
import { puter } from '@heyputer/puter.js';
CDN版は、静的HTML、ハッカソン用プロトタイプ、静的サイト、ブラウザ拡張機能に向いています。NPM版は、ビルド環境やTypeScriptを使うアプリで扱いやすい選択肢です。
ステップ2: モデルを選択する
PuterはGPT-5.x系と既存OpenAIモデルを公開しています。用途ごとの選択例は次の通りです。
| モデルID | 使用場面 |
|---|---|
gpt-5.5-pro |
高度な推論、コーディングエージェント、複雑な分析 |
gpt-5.5 |
日常的なチャット、品質とコストのバランス |
gpt-5.4-nano |
高速・低コストな分類や大量テキスト処理 |
gpt-5.4-mini |
チャットUI向けのミドルティア |
gpt-5.3-codex |
コード生成・コード解析 |
o3 |
複雑な推論チェーン |
o1-pro |
エージェントによる多段階プランニング |
gpt-4.1, gpt-4o, gpt-4o-mini
|
安定したベースライン |
画像生成:
-
gpt-image-2: 最新、鮮明な出力、高速。 -
gpt-image-1.5/gpt-image-1/dall-e-3/dall-e-2: 古いが安定した選択肢。
テキスト読み上げ:
-
gpt-4o-mini-tts: 最新の自然な音声。 -
tts-1,tts-1-hd: クラシックなTTS、低レイテンシー用途。
ステップ3: GPT-5.5に応答させる
最小構成のチャット呼び出しです。
<!DOCTYPE html>
<html>
<body>
<script src="https://js.puter.com/v2/"></script>
<script>
puter.ai.chat(
"WebSocketsについて3文で説明してください。",
{ model: "gpt-5.5" }
).then(response => {
puter.print(response);
});
</script>
</body>
</html>
このHTMLをブラウザで開くと、Puterが呼び出しを処理します。ユーザーは必要に応じてPuterにサインインし、応答がページに表示されます。APIキー、環境変数、サーバーは不要です。
ステップ4: 応答をストリーミングする
チャットUIや長文生成では、stream: trueを使って逐次表示します。
const response = await puter.ai.chat(
"相対性理論について詳しく説明してください。",
{ model: "gpt-5.5", stream: true }
);
for await (const part of response) {
puter.print(part?.text);
}
part.textをUIのメッセージバブルに追記すれば、ユーザーには回答がリアルタイムに生成されているように見えます。
ステップ5: ビジョン、画像入力を使う
第2引数に画像URLを渡すと、モデルに画像を読み取らせて質問できます。
puter.ai.chat(
"この画像に何が見えますか？色、オブジェクト、雰囲気を説明してください。",
"https://assets.puter.site/doge.jpeg",
{ model: "gpt-5.5" }
).then(response => {
puter.print(response);
});
用途例:
- altテキスト生成
- ビジュアルQA
- スクリーンショット分析
- OCR
- アクセシビリティ支援
ステップ6: 画像を生成する
puter.ai.txt2img()は、生成済み画像を含む<img>要素を返します。
puter.ai.txt2img(
"未来的な夜の都市景観、シネマティック、ネオン、雨。",
{ model: "gpt-image-2" }
).then(imageElement => {
document.body.appendChild(imageElement);
});
画像生成の費用は、ユーザーのPuterアカウント残高から支払われます。無料公開の画像ジェネレーターやプロトタイプを作る場合、開発者側でOpenAI請求を抱えない構成にできます。
ステップ7: テキスト読み上げを実装する
OpenAI TTSはtxt2speech()から呼び出せます。戻り値は音声を含む<audio>要素です。
puter.ai.txt2speech(
"おかえりなさい。あなたのアカウント残高は$1,247.50です。",
{ provider: "openai", model: "gpt-4o-mini-tts" }
).then(audio => {
audio.setAttribute("controls", "");
document.body.appendChild(audio);
});
使用例:
- 音声プロンプト
- アプリ内ナレーション
- ポッドキャストイントロ
- アクセシビリティ向け読み上げ
ステップ8: 関数呼び出しを使う
関数呼び出しは、OpenAI形式に近い形でツールを宣言します。
const tools = [{
type: "function",
function: {
name: "get_weather",
description: "都市の現在の天気を取得します。",
parameters: {
type: "object",
properties: {
city: { type: "string" }
},
required: ["city"],
},
},
}];
const response = await puter.ai.chat(
"東京の現在の天気は？",
{ model: "gpt-5.5", tools }
);
const toolCalls = response.message.tool_calls;
if (toolCalls?.length) {
// ここで実際の関数を実行し、結果をモデルに返す
console.log(
toolCalls[0].function.name,
toolCalls[0].function.arguments
);
}
既存のOpenAI向けツール定義がある場合、近い形式で再利用できます。本番環境でツール駆動型フローを検証する場合は、ApidogでのMCPサーバーテストも参考になります。
ステップ9: temperatureとmax_tokensを調整する
標準的なOpenAIパラメータは、オプションオブジェクトに渡します。
const response = await puter.ai.chat(
"火星について教えてください。",
{
model: "gpt-5.5",
temperature: 0.2,
max_tokens: 200,
}
);
目安:
- 事実ベースの回答:
temperature: 0.0〜0.3 - 創造的な文章:
temperature: 0.7〜1.0 - コスト制御:
max_tokensで出力上限を設定
公開アプリでは、max_tokensを設定してユーザー側の消費を予測しやすくするのが実用的です。
提供されるものと、されない可能性があるもの
Puter経由のGPT-5.5アクセスは便利ですが、公式OpenAI APIの全機能をそのまま置き換えるものではありません。
提供されるもの:
- GPT-5.5、GPT-5.5 Pro、GPT-5.4系、Codex系バリアント
- GPT-4.1、GPT-4o、o1、o3などの既存OpenAIモデル
- GPT-Image-2およびDALL-Eによる画像生成
-
gpt-4o-mini-ttsを含むOpenAI TTS - ストリーミング
- ビジョン入力
- 関数呼び出し
temperaturemax_tokens
提供されない可能性があるもの:
- Responses API
- プロンプトキャッシュによるコスト最適化
- Files API
- ブラウザセッションなしのサーバーサイド利用
- OpenAIからの直接のレートリミットヘッダー
- OpenAIの構造化出力モードやJSONスキーマ強制
本格的なサーバーサイド本番フローには、公式OpenAI APIが適しています。一方、ブラウザアプリ、サイドプロジェクト、公開ツール、静的サイトではPuterが実装しやすい選択肢です。
Puterと公式OpenAI APIの使い分け
Puterを使う場合
- 無料公開アプリをリリースしたい
- 開発者側の課金リスクを避けたい
- OpenAI APIキーを管理したくない
- 静的サイト、ハッカソン、ブラウザ拡張機能でAI機能を使いたい
- ユーザーがPuterサインインを許容できる
公式OpenAI APIを使う場合
- cron、Webhook、バッチ処理などサーバーサイド呼び出しが必要
- プロンプトキャッシュでコストを最適化したい
- Responses API、Files、構造化出力が必要
- コンプライアンス上の契約関係が必要
- ユーザーに外部サインインを要求できない
多くのプロジェクトでは、まずPuterでプロトタイプを作り、制限に当たった段階で公式APIへ移行する流れが現実的です。メッセージ形式が近いため、移行作業も比較的シンプルです。
有料の本番環境セットアップについては、GPT-5.5 APIの使用方法を参照してください。
Apidogで統合テストを整理する
Puterの呼び出しはブラウザ内で発生するため、バックエンドのテストランナーから直接実行する構成には向きません。実装時は次のように分けると管理しやすくなります。
- Puterスクリプトを含む小さな静的ページを作る。
- プロンプトやモデル名をクエリパラメータで渡せるようにする。
- 将来移行する可能性のある公式OpenAI APIのリクエストをApidogで定義する。
- Puter検証用とOpenAI本番用を、同じApidogコレクション内の別環境として管理する。
Apidogをダウンロードし、次のような環境を作成します。
-
puter-prototype: Puterページをホストするlocalhost URL -
openai-prod:https://api.openai.com/v1
これにより、プロトタイプから本番移行する際も、同じコレクションをベースに検証できます。より広いAPIテスト設計については、QAエンジニア向けのAPIテストツールを参照してください。
FAQ
これは本当に無制限ですか？
開発者側から見ると無制限です。エンドユーザーは自身のPuterアカウント残高を使います。新規アカウントには初期クレジットが付与され、必要に応じてユーザーがチャージします。
OpenAIアカウントは必要ですか？
いいえ。OpenAIとの接続はPuter側が処理します。開発者がOpenAI APIキーを扱う必要はありません。
本番環境で使えますか？
ブラウザベースのアプリであれば使えます。判断ポイントは、ユーザーがPuterにサインインすることを許容できるかどうかです。
Puter経由のGPT-5.5は公式APIと同じ性能ですか？
Puterはユーザーの代理として公式OpenAI APIを呼び出します。追加ホップによりレイテンシーが少し増える可能性はありますが、モデルの動作自体は変わりません。
プロンプトキャッシュは使えますか？
Puterは現在、OpenAIのプロンプトキャッシュの価格管理機能を公開していません。大きな固定システムプロンプトを使い、キャッシュ割引が重要な場合は公式APIを使ってください。
バックエンドサービスで使えますか？
きれいには使えません。Puterはブラウザファーストで、ユーザーセッションを前提とします。バックエンドサービスでは公式OpenAI APIを使うべきです。無料のサーバーサイド選択肢については、GPT-5.5 APIを無料で使う方法を参照してください。
どのモデルをデフォルトにすべきですか？
日常的な推論にはgpt-5.5、大量分類にはgpt-5.4-nano、複雑な推論にはgpt-5.5-pro、長い推論チェーンにはo3が候補です。
ユーザーに高額な料金がかかりますか？
多くのチャット用途では、1セッションあたり数セント程度に収まるケースが一般的です。ただし画像生成は相対的に高くなります。max_tokensを設定し、不要な生成呼び出しを避けてください。
Puterで画像を生成できますか？
はい。txt2img()でgpt-image-2またはDALL-Eを使えます。画像生成費用はユーザーのPuter残高から支払われます。公式の有料APIガイドは、GPT-Image-2 APIの使用方法を参照してください。
まとめ
Puter.jsを使うと、ブラウザベースのアプリにGPT-5.5、画像生成、TTS、ストリーミング、関数呼び出しを短いコードで組み込めます。開発者はOpenAIキーを持たず、エンドユーザーのPuterアカウントで利用量が処理されます。
サーバーサイド処理、プロンプトキャッシュ、Responses API、Files API、厳密な構造化出力が必要な場合は、公式OpenAI APIを選んでください。プロトタイプ、ハッカソン、無料公開アプリ、静的サイトではPuterが実装しやすい選択肢です。
Apidogでリクエストを整理し、Puter版と公式API版を比較して、プロジェクトに合う実装パスを選びましょう。
Top comments (0)