クイックスタート

プロジェクトセットアップと認証情報

プロジェクトの作成

このクイックスタートでは、ブラウザで使える音声エージェントを作成します。新規プロジェクトを試したい場合は、Next.js や Vite を使うことができます。
Terminal window
```
npm create vite@latest my-project -- --template vanilla-ts
```
Agents SDK のインストール（Zod v4 が必要）
Terminal window
```
npm install @openai/agents zod
```
代わりに、スタンドアロンのブラウザ用パッケージである @openai/agents-realtime をインストールすることもできます。
クライアントのエフェメラルトークンを生成

このアプリケーションはユーザーのブラウザで実行されるため、Realtime API を介してモデルに安全に接続する必要があります。そのために、バックエンドのサーバーで生成すべき ephemeral client key を使用できます。テスト目的では、curl と通常の OpenAI API キーを使ってキーを生成することもできます。
Terminal window
```
export OPENAI_API_KEY="sk-proj-...(your own key here)"
curl -X POST https://api.openai.com/v1/realtime/client_secrets \
   -H "Authorization: Bearer $OPENAI_API_KEY" \
   -H "Content-Type: application/json" \
   -d '{
     "session": {
       "type": "realtime",
       "model": "gpt-realtime"
     }
   }'
```
レスポンスにはトップレベルに “value” という文字列が含まれ、“ek_” プレフィックスで始まります。このエフェメラルキーを使って後で WebRTC 接続を確立できます。このキーは短時間のみ有効で、再生成が必要になる点に注意してください。

音声エージェントの作成と接続

最初のエージェントの作成

新しい RealtimeAgent の作成は、通常の エージェント の作成と非常によく似ています。

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-realtime',
});
```
RealtimeSession のコンストラクターは最初の引数として agent を受け取ります。このエージェントが、ユーザーが最初に対話できるエージェントになります。
セッションへの接続

セッションに接続するには、先ほど生成したクライアントのエフェメラルトークンを渡す必要があります。
```
await session.connect({ apiKey: 'ek_...(put your own key here)' });
```
これにより、ブラウザで WebRTC を使用して Realtime API へ接続し、マイクとスピーカーを自動的に音声入出力用に設定します。RealtimeSession をバックエンドのサーバー（たとえば Node.js）で実行している場合、SDK は自動的に WebSocket を接続として使用します。異なるトランスポート層の詳細は、リアルタイムトランスポートガイドで確認できます。

アプリの実行とテスト

すべてを組み合わせる

import { RealtimeAgent, RealtimeSession } from '@openai/agents/realtime';

export async function setupCounter(element: HTMLButtonElement) {
  // ....
  // for quickly start, you can append the following code to the auto-generated TS code

  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.
  try {
    await session.connect({
      // To get this ephemeral key string, you can run the following command or implement the equivalent on the server side:
      // curl -s -X POST https://api.openai.com/v1/realtime/client_secrets -H "Authorization: Bearer $OPENAI_API_KEY" -H "Content-Type: application/json" -d '{"session": {"type": "realtime", "model": "gpt-realtime"}}' | jq .value
      apiKey: 'ek_...(put your own key here)',
    });
    console.log('You are connected!');
  } catch (e) {
    console.error(e);
  }
}

起動して話しかける

Web サーバーを起動し、新しい Realtime Agent のコードを含むページにアクセスします。マイクへのアクセス許可を求めるリクエストが表示されるはずです。許可すると、エージェントに話しかけられるようになります。
Terminal window
```
npm run dev
```

次のステップ

ここから、独自の音声エージェントを設計・構築できます。音声エージェントには通常のエージェントと同様の機能が多く含まれますが、独自の機能もあります。

音声エージェントに以下を追加する方法
さまざまなトランスポート層の詳細