AIブログ自動生成ツール開発シリーズ
この連載では、AIを使ったブログ自動生成ツールをゼロから作ります。
OpenAI API接続の実装
前章では
4ステップUIを実装しました。
この記事では
OpenAI APIを安全に接続する方法
を解説します。
ここで重要なのは
いきなり記事生成を作らないこと
です。
まずは
疎通確認専用API
を作ります。
この章のゴール
この章では
OpenAI APIを
確実につながる状態
にします。
確認する項目
APIキーの有効性
ネットワーク接続
SDK呼び出し
usage取得
この段階を作っておくと
後のAI処理が
圧倒的に安定します。
なぜ疎通確認APIを作るのか
初心者がよくやる失敗は
巨大な生成ロジックを先に作る
ことです。
その状態で接続エラーが起きると
原因が分かりません。
そこで
/api/openai/test
を作ります。
このAPIの役割は
最短の1往復通信
です。
疎通確認APIの実装
Next.jsでは
app/api/openai/test/route.ts
を作ります。
import { NextResponse } from "next/server";
import { getOpenAIClient } from "@/src/services/openaiClient";export async function GET() {
try {
const client = getOpenAIClient(); const res = await client.responses.create({
model: "gpt-5-mini",
input: [
{
role: "user",
content: "疎通確認です。JSONで {\"ok\":true} を返してください。"
}
]
}); return NextResponse.json({
ok: true,
output: res.output_text,
usage: res.usage
}); } catch (error) {
return NextResponse.json(
{
ok: false,
error: error instanceof Error ? error.message : "Unknown error"
},
{ status: 500 }
);
}
}
この段階では
精度よりエラー可視化
を優先します。
OpenAIクライアント設計
クライアントは
src/services/openaiClient.ts
に作ります。
重要ポイント
APIキー未設定なら即エラー
クライアントはシングルトン
理由
設定漏れを即検知
不要なインスタンス生成防止
AI出力をJSON固定にする
AI出力は
構造化データ
として使います。
そのため
プロンプトで
必ずJSONのみ返す
と明示します。
さらに受信側では
コードブロックJSON対応
余計な文削除
再パース
失敗時リトライ
を行います。
これで
モデル出力の揺れ
に強くなります。
zodでレスポンス検証
JSON parseだけでは
安全ではありません。
そこで
zod
を使います。
例
seoSchema
outlineSchema
imagePlanSchema
internalLinkSchema
この検証により
不正データの連鎖を防げます。
プロンプトテンプレート設計
生成品質を安定させるには
プロンプトを
毎回書くのではなく
テンプレート化
します。
例
日本語出力
誇張表現回避
文字数
トーン
禁止表現
必須要素
ヒアリング回答
これを
baseConstraint
として
各ステージに追加します。
usageログを必ず保存する
OpenAI呼び出し時は
必ず
usage
を保存します。
取得データ
input_tokens
output_tokens
model
stage
これにより
コスト監視
処理分析
見積との差分
が可能になります。
料金についてはこちら
エラー設計
APIでは
400 入力不足
404 対象なし
500 内部エラー
を使い分けます。
フロント側では
statusMessage
で必ず表示します。
沈黙するエラー
が一番危険です。
疎通確認チェックリスト
次を確認します。
GET /api/openai/test
チェック項目
ok true
usage取得
APIキー未設定エラー
500エラー返却
ここまで確認できたら
記事生成に進めます。
まとめ
OpenAI連携で重要なのは
高度なプロンプトではありません。
重要なのは
疎通確認
JSON固定
zod検証
usage記録
この4つです。
これを最初に作ると
AIシステムが壊れにくくなります。
次の記事では
記事生成パイプライン
を実装します。
前の記事
UI実装
次の記事
記事生成パイプライン