GPT-5-mini APIで作るAIチャットアプリ【2025年最新】

Last updated at 2025-09-21Posted at 2025-09-21

🚀 はじめに

2025年、AI技術の進歩により、誰でも簡単に高品質なAIチャットアプリを作れる時代になりました。

この記事では、Next.js 15とOpenAI GPT-5-mini APIを使って、30分で動くモダンなAIチャットアプリを作成します。

🎯 この記事で作るもの

これは初心者向けの基本システムですが、この土台を使って以下のような本格的なAIソリューションが構築できます：

🚀 このシステムから発展できる企業向けAIソリューション

🤖 AIキャラクター・AI社員システム: RAG + 音声 + 3Dキャラクター統合
🧠 社内特化型AI: レリバンスエンジニアリング技術による高精度RAG
🎭 推しキャラリアル再現: ベクトル検索による個性完全再現
💼 企業DX加速: Google AI・ChatGPT・Claude統合システム

🎯 基本システムの特徴

💬 シンプルなチャットUI
📱 レスポンシブデザイン
⚡ TypeScript完全対応
🔒 セキュアなAPI管理

🔗 完成したコード

GitHub: https://github.com/nobu-suzuki345/gpt5-mini-chat-app

📚 前提知識

JavaScript/TypeScriptの基礎
Reactの基本概念
ターミナル操作の基本

🛠️ 環境構築

1. Next.js 15プロジェクトの作成

npx create-next-app@latest gpt5-mini-chat-app --typescript --tailwind --eslint --app --src-dir --import-alias "@/*"
cd gpt5-mini-chat-app

2. OpenAI SDKのインストール

npm install openai

3. OpenAI APIキーの取得

OpenAI Platformにアクセス
アカウント作成またはログイン
「API Keys」→「Create new secret key」
生成されたキーをコピー（一度しか表示されません！）

⚠️ 重要：セキュリティとコスト管理

🔒 セキュリティ対策

APIキーは絶対に公開しない
環境変数で管理する
.env.localファイルを使用

💰 コスト管理

OpenAI APIは従量課金制
使用量監視を定期的に確認
APIキーに使用制限を設定することを強く推奨

🎨 実装開始

1. 環境変数の設定

.env.localファイルを作成：

OPENAI_API_KEY=your_openai_api_key_here
NEXT_PUBLIC_APP_URL=http://localhost:3000

2. API Routeの作成

src/app/api/chat/route.tsを作成：

import OpenAI from 'openai';
import { NextRequest } from 'next/server';

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

export async function POST(request: NextRequest) {
  try {
    const { message } = await request.json();

    if (!message) {
      return Response.json({ error: 'メッセージが必要です' }, { status: 400 });
    }

    const completion = await openai.chat.completions.create({
      model: "gpt-5-mini", // 最新のGPT-5-miniモデル（2025年8月正式リリース）
      messages: [{ role: "user", content: message }],
      max_completion_tokens: 1000, // GPT-5-miniでは max_completion_tokens を使用
      // temperature: GPT-5-miniではデフォルト値(1)のみサポート
    });

    return Response.json({ 
      reply: completion.choices[0].message.content 
    });
  } catch (error) {
    console.error('API Error:', error);
    return Response.json(
      { error: 'APIエラーが発生しました' }, 
      { status: 500 }
    );
  }
}

3. チャットコンポーネントの作成

src/components/ChatApp.tsxを作成：

'use client';
import { useState } from 'react';

interface Message {
  role: 'user' | 'assistant';
  content: string;
}

export default function ChatApp() {
  const [message, setMessage] = useState('');
  const [chat, setChat] = useState<Message[]>([]);
  const [loading, setLoading] = useState(false);

  const sendMessage = async () => {
    if (!message.trim()) return;
    
    setLoading(true);
    const userMessage: Message = { role: 'user', content: message };
    setChat(prev => [...prev, userMessage]);
    
    try {
      const response = await fetch('/api/chat', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ message }),
      });
      
      if (!response.ok) {
        throw new Error('APIエラーが発生しました');
      }
      
      const data = await response.json();
      setChat(prev => [...prev, { role: 'assistant', content: data.reply }]);
    } catch (error) {
      console.error('Error:', error);
      setChat(prev => [...prev, { 
        role: 'assistant', 
        content: 'エラーが発生しました。もう一度お試しください。' 
      }]);
    } finally {
      setLoading(false);
      setMessage('');
    }
  };

  const handleKeyPress = (e: React.KeyboardEvent) => {
    if (e.key === 'Enter' && !e.shiftKey) {
      e.preventDefault();
      sendMessage();
    }
  };

  return (
    <div className="max-w-4xl mx-auto p-6 h-screen flex flex-col">
      <div className="mb-6">
        <h1 className="text-3xl font-bold text-gray-800 mb-2">
          🤖 GPT-5-mini チャットアプリ
        </h1>
        <p className="text-gray-600">
          AIとチャットしてみましょう！何でも質問してください。
        </p>
      </div>
      
      <div className="flex-1 border border-gray-300 rounded-lg p-4 overflow-y-auto mb-4 bg-gray-50">
        {chat.length === 0 && (
          <div className="text-center text-gray-500 mt-8">
            <p className="text-lg">👋 こんにちは！</p>
            <p>何か質問があれば、下のテキストボックスに入力してください。</p>
          </div>
        )}
        
        {chat.map((msg, index) => (
          <div key={index} className={`mb-4 ${
            msg.role === 'user' ? 'text-right' : 'text-left'
          }`}>
            <div className={`inline-block p-3 rounded-lg max-w-xs md:max-w-md lg:max-w-lg ${
              msg.role === 'user' 
                ? 'bg-blue-500 text-white' 
                : 'bg-white border border-gray-200 text-gray-800'
            }`}>
              <div className="whitespace-pre-wrap">{msg.content}</div>
            </div>
          </div>
        ))}
        
        {loading && (
          <div className="text-left mb-4">
            <div className="inline-block p-3 rounded-lg bg-white border border-gray-200">
              <div className="flex items-center space-x-2">
                <div className="animate-spin rounded-full h-4 w-4 border-b-2 border-gray-600"></div>
                <span className="text-gray-600">考え中...</span>
              </div>
            </div>
          </div>
        )}
      </div>
      
      <div className="flex gap-3">
        <input
          type="text"
          value={message}
          onChange={(e) => setMessage(e.target.value)}
          onKeyPress={handleKeyPress}
          className="flex-1 border border-gray-300 rounded-lg px-4 py-3 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
          placeholder="メッセージを入力..."
          disabled={loading}
        />
        <button
          onClick={sendMessage}
          disabled={loading || !message.trim()}
          className="bg-blue-500 hover:bg-blue-600 disabled:bg-gray-400 text-white px-6 py-3 rounded-lg font-medium transition-colors duration-200 disabled:cursor-not-allowed"
        >
          送信
        </button>
      </div>
    </div>
  );
}

4. メインページの更新

src/app/page.tsxを更新：

import ChatApp from '@/components/ChatApp';

export default function Home() {
  return (
    <div className="min-h-screen bg-gradient-to-br from-blue-50 to-indigo-100">
      <ChatApp />
    </div>
  );
}

🚀 アプリの起動

1. 開発サーバーの起動

npm run dev

2. ブラウザでアクセス

http://localhost:3000 にアクセス

3. チャット開始！

テキストボックスにメッセージを入力してAIとチャットしてみましょう！

⚡ GPT-5-mini vs GPT-4o-mini の重要な違い

🔄 API実装の違い

GPT-4o-mini（従来）

const completion = await openai.chat.completions.create({
  model: "gpt-4o-mini",
  messages: [{ role: "user", content: message }],
  max_tokens: 1000,        // ✅ max_tokens使用
  temperature: 0.7         // ✅ 0.0-2.0の範囲で設定可能
});

GPT-5-mini（2025年最新）

const completion = await openai.chat.completions.create({
  model: "gpt-5-mini",
  messages: [{ role: "user", content: message }],
  max_completion_tokens: 1000,  // 🔄 変更: max_tokens → max_completion_tokens
  // temperature: 削除         // ❌ デフォルト値(1)のみサポート
});

📊 主な変更点

パラメータ	GPT-4o-mini	GPT-5-mini	説明
トークン制限	`max_tokens`	`max_completion_tokens`	パラメータ名変更
温度設定	`temperature: 0.0-2.0`	デフォルト値(1)のみ	カスタマイズ不可
レスポンス構造	`choices[0].message.content`	`choices[0].message.content`	同じ
追加機能	-	Responses API対応	新しいエンドポイント

🚀 GPT-5-miniの利点

🧠 高い推論能力: より複雑な問題を解決可能
⚡ 高速処理: 最適化されたレスポンス速度
💰 コスト効率: GPT-5の性能を低コストで利用
🔮 将来性: 2025年最新技術で長期サポート保証

🎨 実装のポイント

✅ 実装した機能

リアルタイムチャット: AIとスムーズな会話
美しいUI: Tailwind CSSによるモダンなデザイン
エラーハンドリング: APIエラーの適切な処理
ローディング状態: 待機中の視覚的フィードバック
レスポンシブデザイン: モバイル対応
キーボードショートカット: Enterキーで送信

🔧 技術的な工夫

型安全性: TypeScriptによる完全な型定義
状態管理: ReactのuseStateで効率的な状態管理
非同期処理: async/awaitによる安全なAPI呼び出し
エラーハンドリング: try-catchでの適切なエラー処理
GPT-5-mini最適化: 新しいパラメータ構造に完全対応

🚀 このシステムから本格的なAIソリューションへ

🤖 AIキャラクター・AI社員システムの構築

この基本チャットアプリを土台として、以下の技術を追加することで企業レベルのAIソリューションが構築できます：

※以下は詳細は割愛しますので参考程度にご覧ください

1. RAG（Retrieval Augmented Generation）統合

// レリバンスエンジニアリング技術による高精度RAG実装例
const relevanceSearch = await vectorDB.search({
  query: userMessage,
  threshold: 0.8,
  contextWindow: 4000
});

const enhancedPrompt = `
コンテキスト: ${relevanceSearch.documents}
質問: ${userMessage}
`;

2. 音声機能の統合

// 音声入力・出力機能
const speechRecognition = new webkitSpeechRecognition();
const speechSynthesis = window.speechSynthesis;

// AIキャラクターの個性的な音声設定
const voiceSettings = {
  voice: selectedCharacterVoice,
  rate: 1.0,
  pitch: 1.2
};

3. 3Dキャラクター表示

// Three.js / Ready Player Me統合
import { Canvas } from '@react-three-fiber';
import { CharacterModel } from './CharacterModel';

// AIの感情に応じたアニメーション制御
<CharacterModel 
  emotion={aiResponse.emotion}
  speaking={isAISpeaking}
  gesture={aiResponse.gesture}
/>

🎯 企業向け応用例

社内特化型AI社員

営業AI: 商品知識・顧客情報を完全習得
人事AI: 社内規定・労務知識を網羅
技術AI: 社内システム・開発知識を統合

エンターテインメント

推しキャラ完全再現: 個性・話し方・知識を精密に再現
バーチャルアシスタント: 3D表示で親しみやすい対話

🧠 レリバンスエンジニアリング技術の威力

従来のAI: 汎用的な回答しかできない
レリバンス技術適用後: 企業・キャラクター固有の知識で高精度回答

// レリバンスエンジニアリング実装例
const relevanceEngine = new RelevanceEngine({
  vectorDB: 'pgvector',
  embeddings: 'OpenAI',
  reranking: true,
  contextOptimization: true
});

// 社内文書から最適な回答を生成
const contextualResponse = await relevanceEngine.generateResponse({
  query: userMessage,
  domain: 'company_specific',
  personality: 'character_profile'
});

🌐 本番環境への展開

Vercelでのデプロイ

Vercelにアカウント作成
GitHubリポジトリを接続
環境変数を設定：
- OPENAI_API_KEY: OpenAI APIキー
デプロイ実行

環境変数の設定

# Vercelの環境変数設定
OPENAI_API_KEY=your_production_api_key
NEXT_PUBLIC_APP_URL=https://your-app.vercel.app

📊 パフォーマンス最適化

1. API呼び出しの最適化

// リクエストのデバウンス
const debouncedSendMessage = useCallback(
  debounce(sendMessage, 300),
  [sendMessage]
);

2. メモ化による再レンダリング防止

const ChatMessage = React.memo(({ message }: { message: Message }) => {
  // メッセージコンポーネントの最適化
});

🔍 トラブルシューティング

よくある問題と解決方法

1. GPT-5-mini特有のパラメータエラー

Error: Unsupported parameter: 'max_tokens' is not supported with this model

解決方法: max_tokens → max_completion_tokens に変更

2. 温度設定エラー

Error: 'temperature' does not support 0.7 with this model. Only the default (1) value is supported

解決方法: temperatureパラメータを削除（GPT-5-miniではデフォルト値のみ）

3. APIキーエラー

Error: Missing credentials. Please pass an `apiKey`

解決方法: .env.localファイルが正しく設定されているか確認

4. 組織認証エラー

Error: Your organization must be verified to generate reasoning summaries

解決方法: 高度なパラメータ（reasoning.summary等）を削除

5. 高額な料金請求

予防方法:

使用量制限の設定
定期的な使用量監視
テスト時の注意深い使用

📈 実際の使用例

ビジネス活用例

カスタマーサポート: 初期対応の自動化
教育ツール: 学習サポートチャットボット
コンテンツ生成: ブログ記事やアイデアの生成支援
プロトタイピング: AI機能の検証・デモ

学習・研究活用例

AI技術の学習: 実際のAI APIの動作理解
フロントエンド開発: React/Next.jsの実践的学習
UI/UX設計: チャットインターフェースの設計学習

🏢 企業向け本格AIソリューション開発のご相談

💼 レリバンスエンジニアリング専門家による企業DX支援

この基本チャットアプリから発展させた企業専用AIソリューションの開発をお考えの方は、ぜひご相談ください。

🚀 提供可能なサービス

🤖 AIキャラクター・AI社員システム開発
- RAG + 音声 + 3Dキャラクター統合
- 社内特化型AI（営業・人事・技術サポート）
- 推しキャラクター完全再現システム
🧠 レリバンスエンジニアリング技術
- Google AI・ChatGPT・Claude統合開発
- ベクトル検索による高精度RAG実装
- 企業固有知識の完全学習システム
📊 企業向けAI統合プラットフォーム
- マルチAI統合システム
- リアルタイム処理・分析
- セキュリティ完全対応

🌟 実績紹介

企業会議情報統合分析システム: 意思決定効率300%向上
AIコンテンツジェネレーター: 制作時間90%短縮
医療管理システム: 業務効率180%向上

📞 お問い合わせ

SNAMO - レリバンスエンジニアリング専門家

🌐 ポートフォリオ: https://snamo.jp/
⏰ 無料相談: 24時間以内に返信

💡 まとめ

この記事では、初心者向けの基本AIチャットアプリを作成しましたが、これは企業レベルのAIソリューション構築の土台となります。

🎯 この記事で学んだこと

✅ AIチャットの基礎: Next.js + OpenAI API
✅ 拡張可能な設計: RAG・音声・3D統合への道筋
✅ 企業向け応用: AI社員・AIキャラクター開発の可能性
✅ レリバンス技術: 高精度AI実装のアプローチ

🚀 次のレベルへ

RAG統合: 社内文書学習システム
音声機能: リアルな対話体験
3Dキャラクター: 視覚的なAI体験
企業導入: 実ビジネスでの活用

🔗 参考リンク

完成コード: https://github.com/nobu-suzuki345/gpt5-mini-chat-app
企業向けAI開発相談: https://snamo.jp/
OpenAI API: https://platform.openai.com/docs
Next.js 15: https://nextjs.org/docs

最後まで読んでいただき、ありがとうございました！

このチュートリアルが、あなたのAI開発の第一歩になれば幸いです。

💬 実装に関するご質問について

この記事の実装内容について技術的な質問やサポートが必要な場合は、SNAMOまでお気軽にお問い合わせください。レリバンスエンジニアリング専門家として、丁寧にサポートいたします。

企業向けAIソリューション開発をお考えの方は、https://snamo.jp/ からお気軽にご相談ください！

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up