OpenAI Realtime API + MCPサーバーで音声チャットに機能追加したい

TL; DR

• ローカルMCPサーバーを呼び出せる音声チャットアプリを作成
• 音声チャットにはOpenAI Realtime APIを使用
• MCPサーバー登録のため、ローカルサーバー経由でtools一覧を取得、OpenAI APIへ連携

はじめに

7/10に、GPT-Liveが一般公開されました。

単なる音声入力、音声読み上げではなく、しゃべっている途中で被せて相槌を打ったり返事をしたりできます。
「えっと」「あの」等フィラーが入り、間合いも自然で、本当に人間と通話しているような感覚に陥ります。AIの新たな時代を感じますね（驚き屋）

さっそく雑談をしてみると、「初対面の人が、盛り上がらない会話に気を遣って話を広げてくれてる感」が強くてダメージを受けました（コミュ障）

ところで、GPT-LiveにMCPサーバーを組み込んで、しゃべりながら調べ物や作業をしてもらうことはできないでしょうか？
これ以上フリートークをするとただでさえ少ないコミュ力が枯渇してしまうので、 何か目的のある会話がしたいです。

残念ながら現時点ではChatGPT上のGPT-Liveではできませんが、同様の機能の「OpenAI Realtime API」を使ったアプリを自前で実装すれば、MCPサーバーと連携させることが可能です。

本記事では、ローカルで起動し、MCPサーバーが使える音声チャットアプリを実装してみましたので紹介します。

作ったもの

というわけで作りました。
嘘です。GPTが設計してClaude Codeが実装しました。

ローカルで起動する音声チャットアプリです。MCPサーバーを登録し呼び出すことができます。

動作確認：明日の最高気温

さっそく動かしてみます。まずは比較としてMCPサーバーなしで起動します。
明日の最高気温を聞いてみましょう。

予想通り、モデルの知識だけでは答えられません。

（※動画が貼れないので代わりに会話の文字起こしのスクショだけ載せていますが、実際にはすべて音声でやり取りしています）

MCPサーバー導入

では、MCPサーバーを入れて実際の天気に答えられるようにしてみましょう。

天気取得には、MCPチュートリアルの以下のサーバーを使用します。

クローンしたら、MCPサーバーをチャットアプリ側に登録します。

mcp-config.json

{
  "mcpServers": {
    "memory": {
      "command": "npx",
      "args": ["-y", "@modelcontextprotocol/server-memory"]
    },
+    "weather": {
+      "command": "uv",
+      "args": [
+        "--directory",
+        "/path/to/quickstart-resources/weather-server-python",
+        "run",
+        "weather.py"
+      ]
+    }
  }
}

あとは起動するだけです。MCPサーバーを利用すべきかどうかは、LLM側で判断してくれます。

改めて聞いてみました。

MCPサーバーがアメリカの天気しか対応していないことを知らずグダっていましたが¹、 実際の情報を取得して答えられています。

費用

しゃべる分量にも寄りますが、↑の例だと$0.2でした。使いすぎ注意

構成

最後にアプリ内部の構成と実装についても軽く紹介します。

アプリは以下の構成からなります。

• フロントエンド：UI画面
• ローカルサーバー：MCPサーバー呼び出しの仲介、登録されているMCPサーバーの一覧を返却
• OpenAI APIサーバー：公式のAPIサーバー

本来はAPIサーバー側でMCPサーバーと連携する必要がありますが、ローカルのMCPサーバーをOpenAI の公式サーバーへ登録することはできません。
そこで、MCPサーバーの仲介用にローカルサーバーを用意します。フロントエンドでローカルサーバーから取得したMCP tools一覧情報をOpenAI APIサーバーへ渡すことで、セッション中どのtoolを呼び出すか判断ができるようになります。同様に、MCPサーバーへのリクエスト方法もローカルサーバーが管理しています。

web/src/lib/useVoiceSession.ts

      // ローカルサーバー localhost:3001/api/tools で取得したMCP tools一覧
      const [token, bridgeTools] = await Promise.all([fetchSessionToken(), fetchTools()]);
      setTools(bridgeTools);

      const agent = new RealtimeAgent({
        name: "voice-mcp-bridge",
        instructions: INSTRUCTIONS,
        // MCPツール一覧をagentに教える
        // （toRealtimeToolはtool呼び出し関数。ローカルサーバー経由でMCPサーバーへリクエスト）
        tools: bridgeTools.map(toRealtimeTool),
      });

音声通信のRealtime APIは、通常通りOpenAI APIサーバーへリクエストしています。

おわりに

以上、MCPサーバーで機能拡張できる音声チャットツールの紹介でした。

他のMCPサーバーと組み合わせることで、タイピングいらずで色々な作業がはかどるのではと考えています。
この実装自体はまだ実用段階ではありません（実用に足る構成かどうか検証できてません）が、いろいろ実験してみたいと思います。

ゆくゆくは公式のChatGPTでMCPサーバーと連携できるようになってほしい！（わがまま）

1. MCPサーバーは、アメリカ海洋大気庁のAPI（https://www.weather.gov/ ）を使用しています。 ↩