An error occurred while executing the AI API

[shilik]

vercel にデプロイして、OPENAIやDifyのAPI keyを入れて試してみましたが、
下図のようなエラーが出てきました。どうしたらいいか　ご教示いただけるとありがたいです。

[github-actions]

Issue分析結果:

[
  {
    "file_path": "src/pages/index.tsx",
    "reason": "このファイルはアプリケーションのメインコンポーネントを含み、AIチャットとAPIの統合を行っています。エラーはおそらくここで発生している可能性が高いです。"
  },
  {
    "file_path": "src/features/chat/aiChatFactory.ts",
    "reason": "このファイルは様々なAIサービスとの通信を管理しています。APIキーの問題はここで処理される可能性があります。"
  },
  {
    "file_path": "src/features/chat/openAiChat.ts",
    "reason": "OpenAI APIとの通信を処理するこのファイルは、APIキーに関連するエラーの原因となる可能性があります。"
  },
  {
    "file_path": "src/features/chat/difyChat.ts",
    "reason": "Dify APIとの通信を処理するこのファイルも、APIキーに関連するエラーの原因となる可能性があります。"
  },
  {
    "file_path": "src/components/settings.tsx",
    "reason": "このコンポーネントはAPIキーの設定を含む設定画面を提供しています。APIキーの入力や保存に問題がある可能性があります。"
  },
  {
    "file_path": ".env",
    "reason": "環境変数ファイルにAPIキーが正しく設定されていない可能性があります。"
  },
  {
    "file_path": "next.config.js",
    "reason": "Next.jsの設定ファイルで、環境変数の設定や公開に問題がある可能性があります。"
  },
  {
    "file_path": "src/pages/api/chat.ts",
    "reason": "このAPIルートハンドラーがAIサービスとの通信を処理しており、エラーの原因となる可能性があります。"
  },
  {
    "file_path": "src/components/menu.tsx",
    "reason": "このコンポーネントはAPIキーの入力や設定変更を扱っており、エラーの原因となる可能性があります。"
  },
  {
    "file_path": "src/features/messages/speakCharacter.ts",
    "reason": "このファイルはキャラクターの発話処理を行っており、APIとの連携で問題が発生している可能性があります。"
  },
  {
    "file_path": "src/components/messageInputContainer.tsx",
    "reason": "ユーザー入力とAI応答の処理を行うこのコンポーネントで、APIエラーが発生している可能性があります。"
  },
  {
    "file_path": "src/pages/_app.tsx",
    "reason": "アプリケーションのルートコンポーネントで、グローバルな設定やエラーハンドリングに問題がある可能性があります。"
  },
  {
    "file_path": "package.json",
    "reason": "依存関係やスクリプトの設定に問題がある可能性があります。特にAPIクライアントライブラリのバージョンが適切でない可能性があります。"
  },
  {
    "file_path": "src/components/chatLog.tsx",
    "reason": "チャットログの表示を担当するこのコンポーネントで、APIエラーメッセージの表示に問題がある可能性があります。"
  },
  {
    "file_path": "src/features/constants/systemPromptConstants.ts",
    "reason": "システムプロンプトの設定に問題があり、APIリクエストが失敗している可能性があります。"
  }
]

コード改善案:

このプロジェクトは、AIチャットボットアプリケーションのようです。Issueの内容から、VercelにデプロイしたときにAI APIの実行でエラーが発生していることがわかります。主な問題は、環境変数の設定やAPI keyの扱いに関連している可能性が高いです。

コードを分析すると、以下の点が気になります：

1. 環境変数の管理が適切に行われていない可能性がある。
2. APIキーの取り扱いが安全でない可能性がある。
3. エラーハンドリングが十分でない箇所がある。
4. Vercelへのデプロイ時の設定が適切でない可能性がある。

これらの問題に対して、いくつかの改善案を提案します。

1. 環境変数の適切な管理 説明: .envファイルに直接APIキーを記述するのは安全性の観点から問題があります。代わりに、Vercelの環境変数設定機能を使用することで、セキュリティを向上させることができます。

改善後のコード例:

# .env
NEXT_PUBLIC_SELECT_AI_SERVICE=openai
OPENAI_API_KEY=${OPENAI_API_KEY}

VercelのダッシュボードでOPENAI_API_KEYを設定します。

2. APIキーの安全な取り扱い
   説明: クライアントサイドでAPIキーを直接使用するのは危険です。代わりに、サーバーサイドAPIルートを作成し、そこでAPIキーを使用することで、セキュリティを向上させることができます。

   改善後のコード例:

   // pages/api/chat.ts
   import { NextApiRequest, NextApiResponse } from 'next'
   import OpenAI from 'openai'
   
   const openai = new OpenAI(process.env.OPENAI_API_KEY)
   
   export default async function handler(req: NextApiRequest, res: NextApiResponse) {
     if (req.method === 'POST') {
       try {
         const { message } = req.body
         const response = await openai.chat.completions.create({
           model: "gpt-3.5-turbo",
           messages: [{ role: "user", content: message }],
         })
         res.status(200).json(response.choices[0].message)
       } catch (error) {
         res.status(500).json({ error: 'Error calling OpenAI API' })
       }
     } else {
       res.setHeader('Allow', ['POST'])
       res.status(405).end(`Method ${req.method} Not Allowed`)
     }
   }
   

3. エラーハンドリングの改善
   説明: APIコールにおいて、より詳細なエラーハンドリングを実装することで、デバッグが容易になり、ユーザーにも適切なフィードバックを提供できます。

   改善後のコード例:

   // src/features/chat/aiChatFactory.ts
   export async function getAIChatResponseStream(
     service: AIService,
     messages: Message[]
   ): Promise<ReadableStream<string> | null> {
     try {
       const ss = settingsStore.getState()
       // ... existing code ...
     } catch (error) {
       console.error('Error in getAIChatResponseStream:', error)
       throw new Error(`Failed to get AI chat response: ${error.message}`)
     }
   }
   

4. Vercelデプロイ設定の確認
   説明: next.config.jsファイルでVercelデプロイ時の設定を適切に行うことで、環境変数の読み込みなどの問題を解決できる可能性があります。

   改善後のコード例:

   // next.config.js
   /** @type {import('next').NextConfig} */
   const nextConfig = {
     reactStrictMode: true,
     env: {
       OPENAI_API_KEY: process.env.OPENAI_API_KEY,
     },
     // ... other configs
   }
   
   module.exports = nextConfig
   

5. デバッグ情報の追加
   説明: 開発環境でのデバッグを容易にするため、より詳細なログ出力を追加することができます。

   改善後のコード例:

   // src/features/chat/aiChatFactory.ts
   export async function getAIChatResponseStream(
     service: AIService,
     messages: Message[]
   ): Promise<ReadableStream<string> | null> {
     console.log(`Attempting to get AI chat response for service: ${service}`)
     console.log('Messages:', messages)
     // ... existing code ...
   }
   

これらの改善を実施することで、以下の効果が期待できます：

1. セキュリティの向上: APIキーの安全な管理により、不正アクセスのリスクを低減できます。
2. エラーハンドリングの強化: より詳細なエラー情報により、問題の迅速な特定と解決が可能になります。
3. デバッグの容易さ: 追加のログ出力により、開発とトラブルシューティングが容易になります。
4. デプロイの安定性: Vercel設定の最適化により、環境変数の問題を解決し、安定したデプロイが可能になります。

これらの改善により、アプリケーションの信頼性と保守性が向上し、Issueで報告されているような問題の発生リスクを低減することができます。また、将来の機能拡張や問題解決も容易になることが期待されます。

[tegnike]

@shilik
報告ありがとうございます。
このエラーが出るときにweb開発者コンソール(F12で表示される)にどのような表示が出るか確認いただけますでしょうか？

[shilik]

まず、以下のようなエラーが出てきて
Request URL:https://xxxxx-xxx-psi.vercel.app/apilaichat
Request Method:POST
Status Code:• 308 Permanent Redirect
Remote Address:76.76.21.164:443
Referrer Policy: strict-origin-when-cross-origin
次に
Status Code: 500 Internal Server Error
http://localhost:50021/audio_query?speaker=46&text=%20An%20error%20occurred%20while%20executing%20the%20AI%20API

となりました。

[tegnike]

500エラーが出ているみたいですね。
現在のブランチはいつのバージョンを使用しているか教えていただくことはできますか？

また、可能であればvercelのURLを教えていただけると嬉しいです。
※ 環境変数でキーを設定していると私に漏れてしまう可能性があるので共有不要です。
※ そうでないなら私のキーを使用して確認します。
※ 念の為DiscordのDMで共有いただくと良いかと思います。

[shilik]

現在のブランチは今日git pullしてからのバージョンですので、最新のバージョンだと思います。
Discordに加入しようと思ったら、以下の図が出てきました。

[tegnike]

mainの最新だからv1.42.1ですかね？理解しました。

あ、DiscordはDMを想定していましたが期限切れてるのは気づきませんでした…。修正しておきます。
Twitterのほうが簡単かもですね、https://x.com/tegnike こちらからDMいただけるとありがたいです🙇‍♀