OpenAI Realtime API Next.js: リアルタイムの音声対話AIアプリケーションを構築するためのNext.jsテンプレート

はじめに

OpenAIリアルタイムAPI Next.jsは、Next.jsフレームワークをベースとしたオープンソースプロジェクトです。このプロジェクトは、OpenAIのリアルタイムAPIとWebRTC技術を統合し、モダンなUIコンポーネントと機能を呼び出すツールを提供します。このテンプレートを使用することで、開発者は多言語ローカライズによるリアルタイムの音声会話をサポートする音声AIアプリケーションを簡単に作成することができます。このプロジェクトには、コードの品質と保守性を確保するための厳格なTypeScriptの型安全性とeslintルールも含まれています。

オンラインデモ：https://openai-rt-shadcn.vercel.app/

機能一覧

• Next.jsフレームワークNext.jsを使ったサーバーサイドレンダリングとAPIルーティング。
• 近代化されたUITailwind CSSとFramer Motion、shadcn/uiコンポーネントを使用したアニメーションデザイン。
• WebRTCのサポートWebRTC の処理を抽象化し、リアルタイムオーディオダイアログの実装を簡単にするフックを提供します。
• ツールコールリアルタイムAPIと連動したクライアントサイドツールの使用方法を示す5つのサンプル関数が含まれています。
• 多言語ローカリゼーション文字列とボイスエージェントが適用される言語（英語、スペイン語、フランス語、中国語）の選択をサポート。
• タイプセーフティTypeScriptを使用し、厳格なeslintルールに従うこと。

ヘルプの使用

設置プロセス

1. クローン倉庫

   git clone https://github.com/cameronking4/openai-realtime-api-nextjs.git
cd openai-realtime-api-nextjs

2. 環境設定 ルート・ディレクトリに環境ファイルを作成し、OpenAI API キーを追加します：

   OPENAI_API_KEY=your-openai-api-key

3. 依存関係のインストール Node.jsを使用している場合：

   npmインストール

Denoを使用する場合：

   デノインストール

4. アプリケーションの実行 Node.jsを使用している場合：

   npm run dev

Denoを使用する場合：

   denoタスクスタート

アプリケーションはhttp://localhost:3000.

使用方法

1. アプリケーションを開く ブラウザで開くhttp://localhost:3000.
2. 音声を選択 音声を選択し、オーディオセッションを開始します。
3. ツールコール このプロジェクトでは、クライアント側でツールを呼び出す方法を示す5つのサンプル関数を提供している：
   • 現在時刻現在時刻を取得します。
   • パーティーモードパーティーモードに切り替える。
   • 変更背景背景を変更します。
   • ローンチウェブサイトサイトを立ち上げる。
   • コピー・トゥ・クリップボードクリップボードにコピー
4. 多言語サポート アプリケーション文字列と音声エージェントの多言語ローカリゼーションは、異なる言語を選択することで実現できます。

ヴェルセルへの配備

1. ワンクリック配備 Vercelプラットフォームを使えば、アプリケーションはワンクリックでデプロイできる。
2. 環境変数の設定 Vercelのプロジェクト設定で、OpenAIのAPIキーを追加します。

ライセンス

このプロジェクトはMITライセンスの下でオープンソースである。詳細はLICENSEファイルを参照のこと。

礼状

APIとモデルを提供してくれたOpenAI、Next.jsフレームワーク、スタイリングしてくれたTailwind CSS、インスピレーションを与えてくれたSimon Willisonのブログに感謝する。