この記事で扱うこと

チャットの画面から使っているAIは、自分のアプリのコードからも呼び出せます。そのための入口がAIの会社のAPIです。

この記事では、GoogleのGeminiを例に、アプリからAIを呼び出す流れ、APIキーの置き場所、Next.jsで呼び出すコードを順に見ていきます。料金の詳しい話は別の記事に任せます。

APIそのもの（リクエストとレスポンス、HTTPメソッド、JSON、Route Handlerの読み方）は、Noemaの「AI駆動開発で困らないためのAPI」で説明しています。この記事では、そこにAIの呼び出しを足す部分だけを扱います。

AIを呼び出す流れ

画面は自分のサーバーに頼み、サーバーがAPIキーを付けてAIの会社に頼みます。

左の画面が質問を自分のサーバーに送り、サーバーが API キーを付けて AI の会社の API に送る。答えは逆の順に画面まで戻る。API キーはサーバーの中にだけ置かれている図

画面から直接AIの会社に頼まないのは、APIキーを守るためです。

APIキー（そのAPIを使う権利を示す、パスワードのような文字列）は、使った分の料金がその持ち主にかかります。ブラウザで動くコードに置くと、開発者ツールで誰でも読めてしまいます。そのため、AIを呼ぶ処理は、サーバーで動くNext.jsのRoute Handler（app/api/.../route.ts）の中に書きます。

APIキーの置き場所

GeminiのAPIキーは、Google AI Studioで作ります。作り方と、キーを安全に扱うための注意は、Gemini API公式の「Gemini API キーを使用する」のページに書いてあります。

作ったキーは、プロジェクトの .env.local というファイルに書き、コードからは process.env.名前 で読みます。

GEMINI_API_KEY=ここに作ったキー
決まり 理由
名前の先頭に NEXT_PUBLIC_ を付けない 付けると、ブラウザに送られるコードに埋め込まれる
.env.local を GitHub に上げない 上がったキーは、すぐに悪用されることがある
キーが漏れたら、すぐに作り直す 古いキーを消せば、そのキーは使えなくなる

キーを書いたら、コードの中にキーの文字列がそのまま入っていないことと、.env.local がGitHubに上がっていないことを確かめます。

呼び出すコード

Geminiの公式の道具（SDK）を入れてから、Route Handlerを1つ作ります。

npm install @google/genai

// app/api/ask/route.ts
import { GoogleGenAI } from "@google/genai";

const ai = new GoogleGenAI({ apiKey: process.env.GEMINI_API_KEY });

export async function POST(request: Request) {
  const { question } = await request.json();
  const result = await ai.models.generateContent({
    model: "gemini-3.8-flash",
    contents: question,
  });
  return Response.json({ answer: result.text });
}
部分 意味
SDK その会社の API を呼びやすくする、公式の道具
POST 画面から質問を受け取るので、送る用のメソッドにする
model 使う AI の種類。新しい版が出ると名前が変わり、古い名前は使えなくなることがある
contents AI に渡す文
result.text AI が返した答えの文

model に書ける名前と、無料の枠で使える回数は、Gemini Developer APIの料金のページで確かめます。上のコードのモデル名も、読む時期によっては使えなくなっていることがあります。

画面の側は、ほかのAPIを呼ぶときと同じ形で送ります。

const response = await fetch("/api/ask", {
  method: "POST",
  body: JSON.stringify({ question }),
});
const { answer } = await response.json();

Route Handlerが返したJSONの answer に、AIの答えが入っています。これを画面に表示すれば、入力欄に書いた質問にAIが答える画面になります。

料金と送る内容

AIのAPIは、やり取りした文の量（トークンという単位で数える）に応じて料金がかかります。Geminiには無料の枠がありますが、無料の枠で送った内容はGoogleのサービスの改善に使われます。個人情報やほかの人から預かった文は送らないでください。

料金の決まり方、無料の枠と有料の違い、使える金額の上限の決め方は、Noemaの「外部APIを使うときの料金と上限」にまとめています。公開するアプリで気を付けることの全体は、「AI駆動開発で困らないためのセキュリティ」にあります。

ClaudeやOpenAIのAPIも、キーを作ってSDKから呼ぶ形はほぼ同じです。それぞれの公式の始め方のページで、TypeScriptやJavaScriptの例を見比べられます。

まとめ

アプリからAIを呼ぶときは、画面から自分のサーバーへ質問を送り、サーバーがAPIキーを付けてAIの会社のAPIに頼みます。キーは .env.local に書いてサーバーだけで読み、NEXT_PUBLIC_ を付けず、GitHubに上げません。Next.jsではRoute HandlerからSDKで呼び、答えをJSONで画面に返します。無料の枠では送った内容がサービスの改善に使われるので、送る内容を先に決めておきます。

参考にした資料

  • Gemini API「スタート ガイド」は、「1. API キーを取得する」と「2. SDK をインストールして最初の呼び出しを行う」の節で、キーの作り方と最初の呼び出しを説明しています。コードの例はJavaScriptのタブを見てください
  • Gemini API「Gemini API キーを使用する」は、キーの作り方と、キーを安全に扱うための注意を書いた公式のページです
  • 「Gemini Developer API の料金」は、モデルごとの料金と無料枠を載せた公式のページです。無料枠で送った内容の扱いも、ここに書かれています
  • Claude Platform「Claudeを使い始める」は、「前提条件」と「APIを呼び出す」の節でClaudeのAPIの始め方を説明しています。ClaudeのAPIは前払いのクレジットを買ってから使います
  • OpenAI API「Developer quickstart」は、OpenAIのAPIキーの作り方と、JavaScriptで最初のリクエストを送る例を載せた英語のページです
  • Noema「AI駆動開発で困らないためのAPI」は、リクエストとレスポンス、JSON、status code、Next.jsのRoute Handlerの読み方を扱っています
  • Noema「AI駆動開発で困らないためのセキュリティ」は、公開するアプリで守るもの、APIキーなどのSecretsの扱い、大量アクセスへの備えを扱っています