🧩 はじめに：なぜ今「プロンプトからプロダクト」なのか？

2024年以降、ChatGPTやClaude、Geminiなどの生成AIは、プロンプトで遊ぶ段階を超え、**「業務にどう組み込むか」**が現場エンジニアの関心になりつつあります。

しかし、プロンプトのデザインとプロダクトへの統合は、思ったよりハードルが高い…

このシリーズでは、「プロンプトを作るだけ」で終わらせず、バックエンド設計・API連携・UI・セキュリティ・運用監視まで、現場で使える知識を一気に紹介していきます。

第1回は「GPT（OpenAI API）」を使って、既存のWebアプリにどう組み込むかを、設計・実装・落とし穴を交えて解説します。

📚 GPT統合の全体像：構成と選定ポイント

まず、GPTを用いたプロダクトの典型的な構成を見てみましょう：

[ ユーザー画面 ] ←→ [ Webサーバー ] ←→ [ OpenAI API (ChatGPT, GPT-4) ]
                                ↓
                          [ ログ/DB ]

✅ 選定すべき要素

項目	選定ポイント
モデル	GPT-3.5 vs GPT-4：価格・応答精度・速度
API連携	REST or SDK（Node.js / Python）
ストレージ	ログ保存 or コンテキスト保持用
プロンプト	固定 or 動的生成（ユーザー入力依存）
UI	Webフォーム / チャットUI / Slack Bot

🔧 実装例：Next.js + OpenAI API でチャット機能を構築

ステップ1：OpenAI API キーの取得

OpenAIのAPIキーを取得し、.env.localに追加します：

OPENAI_API_KEY=sk-...

ステップ2：APIルートの作成（Next.js）

// pages/api/chat.ts
import { Configuration, OpenAIApi } from 'openai';

const config = new Configuration({
  apiKey: process.env.OPENAI_API_KEY,
});
const openai = new OpenAIApi(config);

export default async function handler(req, res) {
  const { message } = req.body;

  const response = await openai.createChatCompletion({
    model: 'gpt-4',
    messages: [{ role: 'user', content: message }],
  });

  res.status(200).json({ reply: response.data.choices[0].message.content });
}

ステップ3：フロントエンドの構築（React）

// components/ChatBox.tsx
const ChatBox = () => {
  const [input, setInput] = useState('');
  const [log, setLog] = useState<string[]>([]);

  const sendMessage = async () => {
    const res = await fetch('/api/chat', {
      method: 'POST',
      body: JSON.stringify({ message: input }),
      headers: { 'Content-Type': 'application/json' },
    });
    const data = await res.json();
    setLog([...log, '🧑: ' + input, '🤖: ' + data.reply]);
    setInput('');
  };

  return (
    <div>
      {log.map((line, i) => <p key={i}>{line}</p>)}
      <input value={input} onChange={e => setInput(e.target.value)} />
      <button onClick={sendMessage}>送信</button>
    </div>
  );
};

🧠 現場で得たTipsと落とし穴

✔️ 実践的Tips

プロンプトのバージョン管理：重要！Git管理 or DBで管理する
ログ保存：Chatの履歴は、ユーザー対応やバグ調査に不可欠
応答時間キャッシュ：同じ質問が多い場合、Edge Cacheを使うとコスト削減

⚠️ 落とし穴あるある

問題	原因	対策
応答がブレる	プロンプトが曖昧	システムメッセージで制御
コスト高騰	無制限呼び出し	トークン数制限・回数制限
遅延がひどい	GPT-4の仕様	GPT-3.5に切替 or Streaming導入

🚀 応用編：LangChainによるワークフロー構築

単一プロンプトではなく、複数のGPT呼び出しを連携させるには LangChain が便利。

ドキュメントを読み込み → 要約 → カテゴリ分け
ユーザー入力を分類 → 適切なGPT Chainにルーティング

import { ChatOpenAI } from 'langchain/chat_models/openai';
import { PromptTemplate, LLMChain } from 'langchain';

const model = new ChatOpenAI({ temperature: 0 });
const prompt = PromptTemplate.fromTemplate(`以下の問い合わせを分類してください：{input}`);
const chain = new LLMChain({ llm: model, prompt });

const response = await chain.run("請求書の再発行をお願いします");

🧾 まとめ：GPT統合は「インフラ設計」も重要

観点	ポイント
✅ メリット	ユーザー体験向上、自然言語でのインターフェース提供
⚠️ デメリット	コスト・速度・不安定性・監査性の難しさ
🚀 展望	独自RAG（Retrieval-Augmented Generation）、社内知識統合へ

GPTを「遊び」から「業務活用」へ昇華させるには、プロンプト力 + 実装力 + 運用設計が三位一体で必要です。

次回は「Web／アプリにAIを導入する」で、思った通りの返答を出すテクニックを解説予定です。