クイックスタート

プロジェクトを作成する

このクイックスタートでは、ブラウザで利用できる音声エージェントを作成します。新しいプロジェクトを試したい場合は、Next.js や Vite をお試しください。
Terminal window
```
npm create vite@latest my-project --template vanilla-ts
```
Agents SDK をインストールする
Terminal window
```
npm install @openai/agents 'zod@<=3.25.67'
```
代わりにブラウザ用の単体パッケージである @openai/agents-realtime をインストールすることもできます。
クライアントのエフェメラルトークンを生成する

このアプリケーションはユーザーのブラウザで動作するため、Realtime API を介してモデルへ安全に接続する方法が必要です。そのために、エフェメラルクライアントキーをバックエンドサーバーで生成します。テスト目的であれば、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 エージェントは 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 エージェントのコードを含むページへアクセスしてください。マイクのアクセス許可を求めるダイアログが表示されます。許可すると、エージェントと会話を始められます。
Terminal window
```
npm run dev
```

次のステップ

ここからは、独自の音声エージェントの設計と構築を進めましょう。音声エージェントは通常のエージェントと多くの機能を共有していますが、いくつか固有の機能もあります。

音声エージェントに以下を追加する方法を学ぶ
異なるトランスポート層についてさらに学ぶ