アプリにOpenAI APIを組み込む方法

OpenAI APIを組み込むには、OpenAIのプロジェクトでAPIキーを作成し、OPENAI_API_KEY という名前でサーバー側のシークレットとして保存したうえで、自分のサーバー上のルートから、OpenAIの公式SDKを使ってAPIを呼び出します。ブラウザのコードから直接呼び出してはいけません。2026年9月時点で、OpenAIのクイックスタートでは、新しいプロジェクトの出発点としてResponses APIが紹介されています。公開前には利用上限を設定し、返信の長さに上限を設け、ユーザーごとに機能の呼び出し頻度を制限し、レート制限のエラーはリトライで処理してください。

このガイドでは、セットアップ、リクエストの流れ、AIビルダー向けのプロンプト、キーの漏えいや無駄な費用につながるミスを扱います。OpenAIの詳細は、2026年9月時点の公式ドキュメントに基づいています。一般的な概念（トークン、コンテキストウィンドウ、料金）については、まずLLM APIの使い方をお読みください。

作れるもの

• アプリ内のチャットアシスタント（AIチャットボットアプリの作り方）
• 「要約する」「書き直す」「返信を下書きする」ボタン
• 自由記述からの構造化データの抽出。メールを注文に変換する、サポートチケットにタグを付けるなど
• 自社のコンテンツに対する検索と質問応答
• 画像生成、音声などのメディア機能（利用可能なモデルによります）

その他のアイデアは、アプリにAI機能を追加する方法にあります。

OpenAIアカウントのセットアップ

1. OpenAIのプラットフォームでアカウントとプロジェクトを作成します。OpenAIの本番運用のベストプラクティスでは、ステージング用と本番用でプロジェクトを分けることが推奨されています。そうすれば、それぞれに別のキーと上限を設定できます。
2. プロジェクトのAPIキーを作成します。OpenAIは、有効期限を設定し、定期的にキーをローテーションすることを推奨しています。
3. 上限ページで支出アラートとハードな支出上限を設定します。OpenAIのガイドによると、アラートは利用額が一定を超えると通知し、ハードリミットは月間の上限を強制します。
4. 課金を追加します。OpenAIのレート制限のドキュメントでは、利用量の段階（ティア）が説明されています。支払いが増えるほど、上限は自動的に引き上げられます。

リクエストの流れ

ブラウザ  ->  自分のサーバーのルート  ->  OpenAI API
          <-  （ストリーミングされた）返信  <-

1. ユーザーがボタンをクリックするか、メッセージを送る。
2. ブラウザが、自分のルート（例：POST /api/summarise）を呼び出す。
3. サーバーが、ユーザーがログインしていて、その機能の利用が許可されているかを確認する。
4. サーバーがリクエストを組み立てる。指示、ユーザーの入力、タスクに必要なデータベース上のデータを含めます。
5. 環境変数のキーを使ってOpenAIを呼び出す。OpenAIのSDKは OPENAI_API_KEY を自動で読み込みます。
6. 返信をストリーミングするか、そのまま返し、トークン使用量を記録する。

OpenAIの公式SDKパッケージは、JavaScript/TypeScript（npm）とPython（pip）のどちらも openai という名前です。

モデルの選び方

OpenAIは、価格と速度が異なる複数のモデルを提供しており、そのラインアップは頻繁に変わります。まずは小さく安価なモデルから始め、実際の例で品質を測定し、必要な場合にだけ上位のモデルに移ってください。モデル名は設定値かシークレットに入れておき、コードを書き換えずに変更できるようにしておきましょう。現在の料金は、OpenAIの料金ページで確認してください。

選択肢とトレードオフ

AIビルダーに与えるプロンプト

最初の機能の例：

チケットページに「要約」ボタンを追加してください。ボタンはサーバーのルート POST /api/summarise を呼び出します。このルートでは、ユーザーがログインしていることを確認し、チケットを読み込んだうえで、公式の openai SDKとシークレット OPENAI_API_KEY を使って、OpenAI Responses APIを呼び出してください。モデル名はシークレット OPENAI_MODEL から読み込みます。指示は「3つの箇条書きで要約し、その後に短い返信案を提案してください。注文番号を作り出さないでください。」とします。出力の長さに上限を設け、返信はページにストリーミングし、キーがブラウザに送られないようにしてください。

ガードレール：

各ユーザーのAIリクエストを1時間あたり30件に制限し、その記録はデータベースに保存してください。リクエストごとに、ユーザーIDと機能名とともに、入力トークンと出力トークンを記録してください。OpenAIから429が返ってきた場合は、Retry-After ヘッダーを尊重し、指数バックオフとジッター（ランダムなずれ）を加えて最大3回までリトライしてください。それでも失敗したら、「AIが混み合っています。1分ほどでお試しください。」と表示してください。その他の失敗には、わかりやすいエラーを表示し、ページの他の部分は動き続けるようにしてください。

エラーと上限への対処

OpenAIは、リクエスト数（分あたり）やトークン数（分あたり）など、複数の方法でレート制限を計測しており、どれかが先に上限に達すると制限にかかります。上限を超えると、APIは Retry-After ヘッダーの付いた 429 を返します。OpenAIのドキュメントでは、この値を最低限の待ち時間として扱い、クライアントが一斉にリトライしないように、少しランダムな遅延を加えるよう勧めています。

次のことにも備えてください。

• タイムアウト。 長い生成には時間がかかります。ストリーミングと適切な出力上限が助けになります。
• プロバイダーの障害。 AI機能は、ページ全体を壊さずに、穏当に失敗するようにしてください。
• 不適切な出力。 構造化された出力は、保存する前に検証してください。モデルの出力を、コード側のチェックなしに重要な操作のトリガーにしてはいけません。

よくあるミス

• フロントエンドやリポジトリにキーを置く。 ブラウザのコードは公開されているため、漏えいしたキーは数分で悪用される可能性があります。APIキーを安全に保つ方法を参照してください。
• 支出上限がない。 ループや悪意のあるユーザーによって、気づかないうちに大きな請求が発生することがあります。
• ユーザーごとの上限がない。 プロバイダーの上限は自分の財布を守りますが、他のユーザーを守るものではありません。
• セキュリティをプロンプトに頼る。 ユーザーは「前の指示を無視してください」と入力できます。権限はサーバー側のコードで管理してください。
• 必要以上に送る。 文書全体や長い履歴は、コストを何倍にもします。タスクに必要なものだけを送りましょう。
• モデル名をコードに直接書く。 モデルは更新され、廃止されます。設定値にしてください。
• 個人情報を送ることを深く考えない。 OpenAIのデータ利用規約を読み、機能に必要な情報だけを送ってください。

チェックリスト

• テスト用と本番用で、OpenAIのプロジェクト（またはキー）を分けている
• キーはサーバー側のシークレットとして保存し、ブラウザのコードやリポジトリには入れていない
• 支出アラートとハードな支出上限を設定している
• すべての呼び出しは自分のサーバーを経由し、ユーザーの権限を確認している
• 出力の長さに上限を設け、モデル名は設定で変更できる
• アプリ側でユーザーごとのレート制限を設けている
• 429を、Retry-After、バックオフ、ジッターを使って処理している
• わかりやすいエラー表示があり、AIなしでもページが動く
• 機能ごとにトークン使用量を記録している
• 長い入力、空の入力、悪意のある入力でテストしている

MythexでOpenAI APIを使う

Mythexで作るアプリのAI機能は、自分のOpenAIキーを使い、料金はMythexのビルドクレジットではなく、自分のOpenAIアカウントに請求されます。OPENAI_API_KEY は、/secrets、プロジェクト設定、またはエージェントがキーを必要としたときに表示されるシークレットカードから、プロジェクトのシークレットとして追加してください。その後、上記のようなプロンプトを使って機能を説明します。公開中のアプリでシークレットを変更したら、再度公開して反映させてください。ドキュメントのレシピ自分のAPIキーでAI機能を追加するにはスターター用のプロンプトがあり、チャット内のシークレットではシークレットカードについて説明しています。プロバイダーを比較しているなら、Claude APIの組み込み方法もご覧ください。

よくある質問