GoogleのGeminiファミリーは、大量ワークロード向けの費用対効果が高いフロンティアモデルラインです。ただし、無料の公開アプリ、サイドプロジェクト、ハッカソン用途でも、エンドポイントを数千人が使い始めるとAPI料金はすぐに増えます。Puter.jsを使うと、Google APIキーなしでGemini 2.5 Pro、Gemini 2.5 Flash、Gemini 2.0 Flash、Gemini 3 Flash Preview、Gemma 2/3/4ファミリーをブラウザから呼び出せます。課金は開発者ではなくエンドユーザーのPuterアカウント側で処理されるため、開発者側は無料で使えます。
要するに
- Puter.jsを使うと、Google APIキー、Google Cloudプロジェクト、バックエンドサーバーなしでGemini/Gemmaモデルを呼び出せます。
- サポートされるGeminiには、2.5 Pro、2.5 Flash、2.5 Flash Lite、2.0 Flash、2.0 Flash Lite、3 Flash Previewなどがあります。
- サポートされるGemmaには、複数サイズのGemma 2、3、4があります。
- 実装は
<script>タグ1つとputer.ai.chat()だけです。 - ストリーミング、画像入力、温度調整、マルチターン会話をブラウザで扱えます。
- エンドユーザーがPuterアカウント経由で使用料を負担するため、開発者側のAPIキー管理や請求リスクを避けられます。
- 公式Gemini APIとPuterの比較・移行検証には、Apidogを使うと整理しやすくなります。
「無料無制限」の仕組み
Puter.jsはLLMの課金モデルを反転させます。
通常は開発者がGoogle AI Studioキーを持ち、すべてのトークンコストを負担します。一方、PuterではエンドユーザーがPuterにサインインし、そのユーザーの残高から利用分が処理されます。新規Puterアカウントにはスタータークレジットが付与され、必要に応じてユーザーがチャージできます。
開発者側の実装上のメリットは次の通りです。
- Google Cloudプロジェクトが不要
- Google AI Studioキーが不要
- APIキーの漏洩対策やローテーションが不要
- 開発者側の利用上限管理が不要
- ユーザー数に応じて利用枠が分散される
- Googleへの直接課金を持たずにGeminiを組み込める
ただし、Puterはブラウザファーストです。ログイン済みユーザーセッションを前提にするため、cron、バッチ、Webhookなどのバックエンド処理には向きません。
ステップ1: Puter.jsをインストールする
静的HTMLならCDNを1行追加します。
<script src="https://js.puter.com/v2/"></script>
これでブラウザからputerオブジェクトを使えます。
バンドルされたアプリで使う場合はnpmからインストールします。
npm install @heyputer/puter.js
import { puter } from '@heyputer/puter.js';
ステップ2: モデルを選ぶ
用途ごとにモデルを切り替えます。
| モデルID | 使用する場面 |
|---|---|
google/gemini-2.5-pro |
深い推論、複雑な分析、長文コンテキストタスク |
google/gemini-2.5-flash |
日常的なデフォルト。速度、品質、コストのバランスが良い |
google/gemini-2.5-flash-lite |
大量分類、タグ付け、軽量Q&A |
google/gemini-2.0-flash |
安定したベースラインとして使いたい場合 |
google/gemini-3-flash-preview |
最新プレビューを試したい場合 |
google/gemma-3-27b-it |
オープンGemmaの命令チューニング済みモデルを使いたい場合 |
google/gemma-4-31b-it |
より大きなGemmaモデルを試したい場合 |
多くのアプリでは、まずgoogle/gemini-2.5-flashをデフォルトにします。
推奨の切り替え方は次の通りです。
const MODEL = {
default: 'google/gemini-2.5-flash',
reasoning: 'google/gemini-2.5-pro',
cheap: 'google/gemini-2.5-flash-lite',
};
- 通常のチャット:
google/gemini-2.5-flash - 難しい推論:
google/gemini-2.5-pro - 大量の分類・タグ付け:
google/gemini-2.5-flash-lite
ステップ3: Geminiと会話する
最小構成は次の通りです。
<!DOCTYPE html>
<html>
<body>
<script src="https://js.puter.com/v2/"></script>
<script>
puter.ai.chat(
"Explain machine learning in three sentences",
{ model: 'google/gemini-2.5-flash' }
).then(response => {
puter.print(response);
});
</script>
</body>
</html>
このHTMLをブラウザで開くと、PuterがGemini呼び出しを処理します。ユーザーがPuterにサインインしていない場合は、初回実行時にサインインまたはアカウント作成の流れになります。
APIキー、環境変数、バックエンドサーバーは不要です。
ステップ4: UIに組み込む
実際のアプリでは、入力欄と出力領域を用意して呼び出します。
<!DOCTYPE html>
<html>
<body>
<textarea id="prompt" rows="5" cols="60">
日本語で、REST APIとGraphQLの違いを説明してください。
</textarea>
<br />
<button id="send">送信</button>
<pre id="output"></pre>
<script src="https://js.puter.com/v2/"></script>
<script>
const promptEl = document.getElementById('prompt');
const outputEl = document.getElementById('output');
const sendBtn = document.getElementById('send');
sendBtn.addEventListener('click', async () => {
outputEl.textContent = '生成中...';
try {
const response = await puter.ai.chat(promptEl.value, {
model: 'google/gemini-2.5-flash',
});
outputEl.textContent = response;
} catch (error) {
outputEl.textContent = `Error: ${error.message}`;
}
});
</script>
</body>
</html>
最初はこの形で動作確認し、その後にReact、Vue、Svelteなどへ移植すると実装しやすくなります。
ステップ5: 応答をストリーミングする
チャットUIや長文回答では、ストリーミングを有効にします。
const response = await puter.ai.chat(
"Explain photosynthesis in detail",
{
model: 'google/gemini-2.5-flash',
stream: true,
}
);
for await (const part of response) {
if (part?.text) {
outputDiv.innerHTML += part.text;
}
}
part.textには応答の断片が入ります。UIに順次追加すれば、ユーザーは回答がリアルタイムに生成される様子を見られます。
HTMLに組み込むと次のようになります。
<div id="output"></div>
<script>
async function streamAnswer() {
const outputDiv = document.getElementById('output');
outputDiv.innerHTML = '';
const response = await puter.ai.chat(
"Geminiをブラウザアプリに組み込む手順を説明してください。",
{
model: 'google/gemini-2.5-flash',
stream: true,
}
);
for await (const part of response) {
if (part?.text) {
outputDiv.innerHTML += part.text;
}
}
}
streamAnswer();
</script>
ステップ6: 画像入力を使う
Geminiの強みの1つはマルチモーダル入力です。画像URLを渡すと、画像の内容を説明させたり、画像に関する質問をしたりできます。
puter.ai.chat(
"What do you see in this image? Describe colors, objects, and mood.",
"https://assets.puter.site/doge.jpeg",
{ model: 'google/gemini-2.5-flash' }
).then(response => {
puter.print(response);
});
主なユースケースは次の通りです。
- 代替テキスト生成
- ビジュアルQA
- スクリーンショット分析
- OCR補助
- アクセシビリティツール
- 商品画像のタグ付け
- 図やチャートの説明
自然画像や図の理解ではGeminiは強力です。ただし、テキストが非常に密集したスクリーンショットでは、GPT-5.xの方が有利な場合があります。
ステップ7: 温度を調整する
temperatureを指定すると、出力のランダム性を調整できます。
const response = await puter.ai.chat(
'Write a creative short story about a robot chef',
{
model: 'google/gemini-2.5-flash',
temperature: 0.2,
}
);
目安は次の通りです。
| 用途 | temperature |
|---|---|
| 事実ベースの回答 |
0.0〜0.3
|
| JSONや分類など構造化出力 |
0.0〜0.2
|
| 通常のチャット |
0.5〜0.7
|
| クリエイティブライティング |
0.7〜1.0
|
Gemini Flashでは、一般的なチャット用途なら0.7前後から試すとよいです。
ステップ8: マルチターン会話を実装する
会話履歴はメッセージ配列として渡します。
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 migrations?' },
];
const response = await puter.ai.chat(messages, {
model: 'google/gemini-2.5-pro',
});
console.log(response);
実装では、ユーザー発話とアシスタント応答を配列に追加していきます。
const messages = [];
async function sendMessage(userInput) {
messages.push({
role: 'user',
content: userInput,
});
const response = await puter.ai.chat(messages, {
model: 'google/gemini-2.5-flash',
});
messages.push({
role: 'assistant',
content: response,
});
return response;
}
Geminiは渡された履歴全体を読み取り、会話の文脈を維持します。
同じプロンプトでGeminiを他のモデルと比較する
Puterは主要なLLMを単一のインターフェースで扱えます。ユースケースに合うモデルを見つけるには、同じプロンプトを複数モデルに投げて比較します。
const models = [
'google/gemini-2.5-flash',
'claude-sonnet-4-6',
'gpt-5.5',
'x-ai/grok-4.3',
];
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);
console.log('---');
}
比較時は、少なくとも次の項目を記録します。
- レイテンシー
- 回答品質
- コードの正確性
- 指示追従性
- 日本語品質
- 長文での安定性
- ユーザーにとって許容できる応答時間
傾向として、Gemini Flashはレイテンシー面で使いやすく、Sonnetはコーディング品質、GPT-5.5は長文生成、Grok 4.3はコスト面で比較対象になります。最終的には、実際のプロンプトでベンチマークしてください。
得られるものと得られないもの
Puter経由で得られるもの:
- Gemini 2.5/2.0/3 Flash系モデル
- Gemini 2.5 Pro
- Open Gemmaファミリー
- マルチターン会話
- ストリーミング応答
- 画像URL入力
- 温度、最大トークン数、システムプロンプト
- ブラウザベースの本番アプリで使える実行パス
Puterのバージョンや公開状況によっては得られない可能性があるもの:
- Geminiでのネイティブ関数呼び出し
- コード実行ツール
- Google検索による根拠付け
- Geminiの最大200万トークンの長文コンテキスト
- ブラウザセッションなしのサーバーサイド実行
- Google側レート制限の直接的な可視化
コード実行、検索グラウンディング、長大コンテキストが必要なエージェント型ワークフローでは、公式Google AI Studio APIの方が適しています。
一般的なチャット、Q&A、コンテンツ生成、画像理解、プロトタイプでは、Puterで十分に始められます。
Puterと公式Gemini APIの使い分け
Puterを使うべきケース
- 無料の公開アプリを出したい
- APIキー漏洩や高額請求のリスクを避けたい
- Google Cloudプロジェクトを作りたくない
- 静的サイトでGeminiを使いたい
- ハッカソンやプロトタイプを高速に作りたい
- ブラウザ拡張機能にLLMを組み込みたい
- ユーザーがPuterへのサインインを許容できる
公式Gemini APIを使うべきケース
- cron、バッチ、Webhookなどサーバーサイド呼び出しが必要
- コード実行が必要
- Google検索による根拠付けが必要
- 最大200万トークンのフルコンテキストが必要
- Googleとの直接契約やコンプライアンス要件がある
- 独自データセットでファインチューニングしたい
- ユーザーにPuterサインインを要求できない
Gemini 3 Flashの単独ウォークスルーは、Gemini 3 Flash Preview APIの利用方法を参照してください。
Apidogで統合テストを整理する
Puterの呼び出しはブラウザ内で実行されるため、通常のバックエンド用APIテストランナーからそのままスクリプト化するのは難しいです。
実装時は次の流れにすると整理しやすくなります。
- Puterスクリプトを含む小さな静的ページを作る
- プロンプトやモデル名をクエリパラメータで渡せるようにする
- 公式APIへ移行する可能性がある場合は、ApidogでGoogle Gemini APIのリクエストを別環境として管理する
-
puter-prototypeとgemini-prodを分けて、同じ仕様を比較できるようにする
例:
-
puter-prototype: Puterページをホストするlocalhost URL -
gemini-prod:https://generativelanguage.googleapis.com/v1
Apidogをダウンロードし、Puterプロトタイプと公式Gemini APIを別環境として管理しておくと、移行時に比較しやすくなります。
より広範なAPIテストパターンは、QAエンジニア向けAPIテストツールも参考になります。
Puter経由で使える他のLLMパス
同じユーザー課金モデルは、他の主要LLMにも適用されます。
- 無料無制限のClaude APIを入手（Anthropic Opus、Sonnet、Haiku）
- 無料無制限のGPT-5.5 APIを入手（OpenAIの全カタログ）
- Grok 4.3を無料で使う方法（xAI）
- 無料無制限のDeepSeek APIを入手
Puterでは、model文字列を切り替えるだけでプロバイダーも切り替えられます。
await puter.ai.chat("Summarize this text", {
model: 'google/gemini-2.5-flash',
});
await puter.ai.chat("Summarize this text", {
model: 'gpt-5.5',
});
FAQ
これは本当に無制限ですか？
開発者側から見ると無制限です。エンドユーザーはPuterアカウントの残高に応じて利用します。新規アカウントにはスタータークレジットが付与され、必要に応じてユーザーがチャージできます。
GoogleアカウントやGoogle Cloudプロジェクトは必要ですか？
不要です。PuterがGoogleとの接続を処理します。開発者がGoogle APIキーを扱う必要はありません。
本番環境で使えますか？
ブラウザベースのアプリであれば使えます。重要なのは、ユーザーがPuterへのサインインを許容できるかどうかです。
Puter経由のGeminiは公式APIと同じですか？
Puterはユーザーの代わりにGoogleのAPIを呼び出します。モデルの基本的な動作は変わりません。ただし、Puterを経由する分、レイテンシーがわずかに増える可能性があります。
Geminiの200万トークンコンテキストは使えますか？
Puterは現在、すべてのモデルバリアントで200万トークン上限を完全に公開しているわけではありません。非常に長いコンテキストが必要な場合は、公式Google AI Studio APIを選ぶべきです。多くのユースケースは20万トークンを大きく下回るため、その範囲ではPuterで対応できます。
Discordボットやバックエンドサービスで使えますか？
Puterはブラウザファーストで、ユーザーセッションを前提とします。Discordボット、cron、バックエンドサービスでは、公式Gemini APIを直接使う方が適しています。
どのモデルをデフォルトにすべきですか？
まずはgoogle/gemini-2.5-flashです。速度、品質、コストのバランスが良く、多くのプロンプトに対応できます。
- 通常用途:
google/gemini-2.5-flash - 難しい推論:
google/gemini-2.5-pro - 大量分類:
google/gemini-2.5-flash-lite
画像生成はサポートされていますか？
Puterは現在、OpenAIのgpt-image-2およびDALL-Eバリアントを介した画像生成を公開しており、Imagenではありません。画像生成パスについては、無料無制限のGPT-5.5 APIを入手を参照してください。
まとめ
Puter.jsを使うと、Google CloudのセットアップなしでGeminiをブラウザアプリに組み込めます。最小実装は、CDNスクリプトを読み込み、puter.ai.chat()を呼び出すだけです。
まずは次の構成から始めるのが実用的です。
const response = await puter.ai.chat("あなたのプロンプト", {
model: 'google/gemini-2.5-flash',
});
無料公開アプリ、静的サイト、ハッカソン、プロトタイプでは、PuterはAPIキーなしでGeminiを試すためのシンプルな選択肢です。
一方で、サーバーサイド実行、ファインチューニング、コード実行、検索グラウンディング、最大200万トークンの長文コンテキストが必要な場合は、公式Google AI Studio APIを使うべきです。
Apidogで公式APIリクエストを整理しつつ、Puterプロトタイプと比較すれば、実装段階でどちらを採用すべきか判断しやすくなります。
Top comments (0)