クイックスタート
-
プロジェクトを作成する
このクイックスタートでは、ブラウザで利用できる音声エージェントを作成します。新しいプロジェクトを試したい場合は、
Next.js
やVite
を使用してみてください。Terminal window npm create vite@latest my-project --template vanilla-ts -
Agents SDK をインストールする
Terminal window npm install @openai/agentsブラウザ専用パッケージとして
@openai/agents-realtime
をインストールすることもできます。 -
クライアントのエフェメラルトークンを生成する
このアプリケーションはユーザーのブラウザで動作するため、Realtime API を介してモデルへ安全に接続する方法が必要です。そのために、バックエンドサーバーで生成される ephemeral client key を使用します。テスト目的であれば、
curl
と通常の OpenAI API キーを使ってキーを生成することも可能です。Terminal window curl -X POST https://api.openai.com/v1/realtime/sessions \-H "Authorization: Bearer $OPENAI_API_KEY" \-H "Content-Type: application/json" \-d '{"model": "gpt-4o-realtime-preview-2025-06-03"}'レスポンスには後で接続に使用する
client_secret.value
が含まれます。このキーは短時間しか有効ではないため、再生成が必要になります。 -
最初のエージェントを作成する
新しい
RealtimeAgent
の作成方法は、通常のAgent
とほとんど同じです。import { RealtimeAgent } from '@openai/agents-realtime';const agent = new RealtimeAgent({name: 'Assistant',instructions: 'You are a helpful assistant.',}); -
セッションを作成する
通常のエージェントと異なり、Voice Agent は
RealtimeSession
内で継続的に動作し、会話やモデルへの接続を管理します。このセッションは音声処理、割り込み処理など、後ほど説明する多くのライフサイクル機能も担います。import { RealtimeSession } from '@openai/agents-realtime';const session = new RealtimeSession(agent, {model: 'gpt-4o-realtime-preview-2025-06-03',});RealtimeSession
のコンストラクターは最初の引数としてagent
を受け取ります。このエージェントがユーザーと最初に対話できるエージェントになります。 -
セッションに接続する
先ほど生成したクライアントのエフェメラルトークンを渡してセッションに接続します。
await session.connect({ apiKey: '<client-api-key>' });これによりブラウザで WebRTC を使用して Realtime API に接続し、マイクとスピーカーが自動的に設定されます。
RealtimeSession
をバックエンドサーバー(Node.js など)で実行している場合、SDK は自動的に WebSocket を利用します。さまざまなトランスポートレイヤーについては リアルタイムトランスポート ガイドを参照してください。 -
すべてをまとめる
import { RealtimeAgent, RealtimeSession } from '@openai/agents/realtime';const agent = new RealtimeAgent({name: 'Assistant',instructions: 'You are a helpful assistant.',});const session = new RealtimeSession(agent);// Automatically connects your microphone and audio output// in the browser via WebRTC.await session.connect({apiKey: '<client-api-key>',}); -
エンジンを起動して話しかける
Web サーバーを起動し、新しい Realtime Agent のコードを含むページへアクセスしてください。マイクのアクセス許可を求めるダイアログが表示されるはずです。許可すると、エージェントと会話を始められます。
Terminal window npm run dev
次のステップ
Section titled “次のステップ”ここからは独自の音声エージェントを設計・構築できます。音声エージェントは通常のエージェントと多くの共通機能を持ちつつ、独自の機能も備えています。
-
音声エージェントに次の機能を追加する方法
-
さまざまなトランスポートレイヤーについて詳しく学ぶ