AITuberKitでRealtime APIを使って、AIとリアルタイムに会話してみた

こんにちは、開発のシカくんです。

「AIと喋って会話する。」

これを実現するためには、生成AIと会話するアプリを作ることになります。ですが、STT（音声→テキスト）→ GPT（応答生成）→ TTS（テキスト→音声）のそれぞれの処理を繋げる必要があるため、開発のハードルが高くなりがちです。

AITuberKitはこれらを一括で提供し、簡単にリアルタイム対話を実現できます。

今回は、「AITuberKitのRealtime API機能」と、「Azure OpenAIのRealtime API」とを組み合わせて、リアルタイムに音声で会話するプロトタイプを構築してみました。

Azure OpenAIのRealtime APIのデプロイ

まずは、Azure OpenAIでAzure AI Foundryのページを開き、Realtime APIのモデルをデプロイします。

リージョンはEastUS2（eastus2）です。以下のdeployment名とapi-version名で、Realtime APIのエンドポイントを作成しておきます。

deployment名：gpt-4o-mini-realtime-preview
api-version名：2024-10-01-preview

AIとリアルタイムに会話するプロトタイプの構築

ローカル環境のMacBook Pro（M2）上でAITuberKitを用いて、AITuberKitのクイックスタートを参考に、Azure OpenAIのRealtime APIと連携するプロトタイプを構築しました。

要件の確認

まずはシステムの要件を確認します。AITuberKitでは、以下のソフトウェアが必要です。

Node.js: ^20.0.0
npm: ^10.0.0

ローカル環境の確認

今回の開発マシンMacBook Pro（M2）では、Node.js（v22.11.0）とnpm（v11.0.0）が、すでにインストールされていました。

% node -v
v22.11.0

% npm -v
11.0.0

AITuberKitのインストール

ここからは、AITuberKitのインストールを順番に進めていきます。

リポジトリのクローン

ローカル環境にソースコードを取得するため、AITuberKitのリポジトリをクローンします。

% git clone https://github.com/tegnike/aituber-kit.git
% cd aituber-kit

パッケージのインストール

AITuberKitのバージョン要件よりもバージョンが進んでいましたが、ひとまず、nodeとnpmのバージョンを変えずに、そのままでインストールできるかを確認したら、やはりエラーが。。

npm warn EBADENGINE Unsupported engine {
npm warn EBADENGINE   package: 'aituber-kit@0.1.0',
npm warn EBADENGINE   required: { node: '^20.0.0' },
npm warn EBADENGINE   current: { node: 'v22.11.0', npm: '11.0.0' }
npm warn EBADENGINE }
npm warn deprecated inflight@1.0.6: This module is not supported, and leaks memory. Do not use it. Check out lru-cache if you want a good and tested way to coalesce async requests by a key value, which is much more comprehensive and powerful.
npm warn deprecated rimraf@3.0.2: Rimraf versions prior to v4 are no longer supported
npm warn deprecated glob@7.2.3: Glob versions prior to v9 are no longer supported
npm warn deprecated glob@7.2.3: Glob versions prior to v9 are no longer supported
npm warn deprecated glob@7.2.3: Glob versions prior to v9 are no longer supported
npm warn deprecated glob@7.2.3: Glob versions prior to v9 are no longer supported
npm warn deprecated glob@7.2.3: Glob versions prior to v9 are no longer supported
npm warn deprecated boolean@3.2.0: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.
npm warn deprecated node-domexception@1.0.0: Use your platform's native DOMException instead
npm warn deprecated npmlog@5.0.1: This package is no longer supported.
npm warn deprecated react-beautiful-dnd@13.1.1: react-beautiful-dnd is now deprecated. Context and options: https://github.com/atlassian/react-beautiful-dnd/issues/2672
npm warn deprecated gauge@3.0.2: This package is no longer supported.
npm warn deprecated domexception@4.0.0: Use your platform's native DOMException instead
npm warn deprecated are-we-there-yet@2.0.0: This package is no longer supported.
npm warn deprecated eslint@8.57.1: This version is no longer supported. Please see https://eslint.org/version-support for other options.
npm warn deprecated abab@2.0.6: Use your platform's native atob() and btoa() methods instead
npm warn deprecated @humanwhocodes/config-array@0.13.0: Use @eslint/config-array instead
npm warn deprecated @humanwhocodes/object-schema@2.0.3: Use @eslint/object-schema instead
npm error code 1
npm error path /Users/kurojica/Documents/project/aituberkit/aituber-kit/node_modules/canvas
npm error command failed
npm error command sh -c node-pre-gyp install --fallback-to-build --update-binary
npm error Failed to execute '/usr/local/bin/node /Users/kurojica/.npm-global/lib/node_modules/npm/node_modules/node-gyp/bin/node-gyp.js configure --fallback-to-build --update-binary --module=/Users/kurojica/Documents/project/aituberkit/aituber-kit/node_modules/canvas/build/Release/canvas.node --module_name=canvas --module_path=/Users/kurojica/Documents/project/aituberkit/aituber-kit/node_modules/canvas/build/Release --napi_version=9 --node_abi_napi=napi --napi_build_version=0 --node_napi_label=node-v127' (1)
npm error node-pre-gyp info it worked if it ends with ok
npm error node-pre-gyp info using node-pre-gyp@1.0.11
npm error node-pre-gyp info using node@22.11.0 | darwin | arm64
npm error (node:16745) [DEP0040] DeprecationWarning: The `punycode` module is deprecated. Please use a userland alternative instead.
npm error (Use `node --trace-deprecation ...` to show where the warning was created)
npm error node-pre-gyp http GET https://github.com/Automattic/node-canvas/releases/download/v2.11.2/canvas-v2.11.2-node-v127-darwin-unknown-arm64.tar.gz
npm error node-pre-gyp ERR! install response status 404 Not Found on https://github.com/Automattic/node-canvas/releases/download/v2.11.2/canvas-v2.11.2-node-v127-darwin-unknown-arm64.tar.gz 
npm error node-pre-gyp WARN Pre-built binaries not installable for canvas@2.11.2 and node@22.11.0 (node-v127 ABI, unknown) (falling back to source compile with node-gyp) 
npm error node-pre-gyp WARN Hit error response status 404 Not Found on https://github.com/Automattic/node-canvas/releases/download/v2.11.2/canvas-v2.11.2-node-v127-darwin-unknown-arm64.tar.gz 
npm error gyp info it worked if it ends with ok
npm error gyp info using node-gyp@11.0.0
npm error gyp info using node@22.11.0 | darwin | arm64
npm error gyp info ok 
npm error gyp info it worked if it ends with ok
npm error gyp info using node-gyp@11.0.0
npm error gyp info using node@22.11.0 | darwin | arm64
npm error gyp info find Python using Python version 3.13.5 found at "/opt/homebrew/opt/python@3.13/bin/python3.13"
npm error gyp info spawn /opt/homebrew/opt/python@3.13/bin/python3.13
npm error gyp info spawn args [
npm error gyp info spawn args '/Users/kurojica/.npm-global/lib/node_modules/npm/node_modules/node-gyp/gyp/gyp_main.py',
npm error gyp info spawn args 'binding.gyp',
npm error gyp info spawn args '-f',
npm error gyp info spawn args 'make',
npm error gyp info spawn args '-I',
npm error gyp info spawn args '/Users/kurojica/Documents/project/aituberkit/aituber-kit/node_modules/canvas/build/config.gypi',
npm error gyp info spawn args '-I',
npm error gyp info spawn args '/Users/kurojica/.npm-global/lib/node_modules/npm/node_modules/node-gyp/addon.gypi',
npm error gyp info spawn args '-I',
npm error gyp info spawn args '/Users/kurojica/Library/Caches/node-gyp/22.11.0/include/node/common.gypi',
npm error gyp info spawn args '-Dlibrary=shared_library',
npm error gyp info spawn args '-Dvisibility=default',
npm error gyp info spawn args '-Dnode_root_dir=/Users/kurojica/Library/Caches/node-gyp/22.11.0',
npm error gyp info spawn args '-Dnode_gyp_dir=/Users/kurojica/.npm-global/lib/node_modules/npm/node_modules/node-gyp',
npm error gyp info spawn args '-Dnode_lib_file=/Users/kurojica/Library/Caches/node-gyp/22.11.0/<(target_arch)/node.lib',
npm error gyp info spawn args '-Dmodule_root_dir=/Users/kurojica/Documents/project/aituberkit/aituber-kit/node_modules/canvas',
npm error gyp info spawn args '-Dnode_engine=v8',
npm error gyp info spawn args '--depth=.',
npm error gyp info spawn args '--no-parallel',
npm error gyp info spawn args '--generator-output',
npm error gyp info spawn args 'build',
npm error gyp info spawn args '-Goutput_dir=.'
npm error gyp info spawn args ]
npm error Package pixman-1 was not found in the pkg-config search path.
npm error Perhaps you should add the directory containing `pixman-1.pc'
npm error to the PKG_CONFIG_PATH environment variable
npm error Package 'pixman-1' not found
npm error gyp: Call to 'pkg-config pixman-1 --libs' returned exit status 1 while in binding.gyp. while trying to load binding.gyp
npm error gyp ERR! configure error 
npm error gyp ERR! stack Error: `gyp` failed with exit code: 1
npm error gyp ERR! stack at ChildProcess.<anonymous> (/Users/kurojica/.npm-global/lib/node_modules/npm/node_modules/node-gyp/lib/configure.js:317:18)
npm error gyp ERR! stack at ChildProcess.emit (node:events:518:28)
npm error gyp ERR! stack at ChildProcess._handle.onexit (node:internal/child_process:293:12)
npm error gyp ERR! System Darwin 22.5.0
npm error gyp ERR! command "/usr/local/bin/node" "/Users/kurojica/.npm-global/lib/node_modules/npm/node_modules/node-gyp/bin/node-gyp.js" "configure" "--fallback-to-build" "--update-binary" "--module=/Users/kurojica/Documents/project/aituberkit/aituber-kit/node_modules/canvas/build/Release/canvas.node" "--module_name=canvas" "--module_path=/Users/kurojica/Documents/project/aituberkit/aituber-kit/node_modules/canvas/build/Release" "--napi_version=9" "--node_abi_napi=napi" "--napi_build_version=0" "--node_napi_label=node-v127"
npm error gyp ERR! cwd /Users/kurojica/Documents/project/aituberkit/aituber-kit/node_modules/canvas
npm error gyp ERR! node -v v22.11.0
npm error gyp ERR! node-gyp -v v11.0.0
npm error gyp ERR! not ok 
npm error node-pre-gyp ERR! build error 
npm error node-pre-gyp ERR! stack Error: Failed to execute '/usr/local/bin/node /Users/kurojica/.npm-global/lib/node_modules/npm/node_modules/node-gyp/bin/node-gyp.js configure --fallback-to-build --update-binary --module=/Users/kurojica/Documents/project/aituberkit/aituber-kit/node_modules/canvas/build/Release/canvas.node --module_name=canvas --module_path=/Users/kurojica/Documents/project/aituberkit/aituber-kit/node_modules/canvas/build/Release --napi_version=9 --node_abi_napi=napi --napi_build_version=0 --node_napi_label=node-v127' (1)
npm error node-pre-gyp ERR! stack     at ChildProcess.<anonymous> (/Users/kurojica/Documents/project/aituberkit/aituber-kit/node_modules/@mapbox/node-pre-gyp/lib/util/compile.js:89:23)
npm error node-pre-gyp ERR! stack     at ChildProcess.emit (node:events:518:28)
npm error node-pre-gyp ERR! stack     at maybeClose (node:internal/child_process:1104:16)
npm error node-pre-gyp ERR! stack     at ChildProcess._handle.onexit (node:internal/child_process:304:5)
npm error node-pre-gyp ERR! System Darwin 22.5.0
npm error node-pre-gyp ERR! command "/usr/local/bin/node" "/Users/kurojica/Documents/project/aituberkit/aituber-kit/node_modules/.bin/node-pre-gyp" "install" "--fallback-to-build" "--update-binary"
npm error node-pre-gyp ERR! cwd /Users/kurojica/Documents/project/aituberkit/aituber-kit/node_modules/canvas
npm error node-pre-gyp ERR! node -v v22.11.0
npm error node-pre-gyp ERR! node-pre-gyp -v v1.0.11
npm error node-pre-gyp ERR! not ok
npm error A complete log of this run can be found in: /Users/kurojica/.npm/_logs/2025-06-23T16_45_25_094Z-debug-0.log

上記のエラーは、以下が原因となります。

Node.jsとnpmの要件バージョンとの違いでエラー
npm install時に canvasパッケージのビルドでエラー
node-canvas のバイナリが ARM（Apple Silicon）用に提供されておらず見つからないエラー

nvmでバージョンのダウングレード

エラーを解消するために、プロジェクトで指定されているバージョン（Node.js：^20.0.0、npm：^10.0.0）で、ローカル環境を更新していきます。

以下のコマンドでnvmをインストールします。

% curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.3/install.sh | bash

インストール後、現在のターミナルで以下のコマンドを実行して、nvmを有効にします。

% export NVM_DIR="$([ -z "${XDG_CONFIG_HOME-}" ] && printf %s "${HOME}/.nvm" || printf %s "${XDG_CONFIG_HOME}/nvm")"
[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh"

指定されたNode.jsとnpmのバージョンをインストール

nvmでNode.jsの指定バージョンをインストールします。

% nvm install 20
% nvm use 20

npmのバージョンを10.8.1に更新します。

% npm install -g npm@10.8.1

指定したバージョンがインストールされたことを確認します。

% node -v
v20.19.3

% npm -v
10.8.2

canvasの依存解消

依存するパッケージをインストールして、canvasの依存関係を解消します。

必要な依存パッケージをHomebrewでインストールします。

% brew install pkg-config cairo pango libpng jpeg giflib librsvg pixman

PKG_CONFIG_PATHを設定します。恒久的に設定したい場合は ~/.zshrc または ~/.bash_profile に追記してください。

pixman-1.pc のパスが認識されていない場合、以下のようにパスを一時的に通します：
% export PKG_CONFIG_PATH="/opt/homebrew/lib/pkgconfig:$PKG_CONFIG_PATH"

canvasを再度インストールします。

% npm install canvas

ブラウザでAIとリアルタイムに会話

環境変数の設定

.env.exampleファイルを.envにコピーし、環境変数を設定します。

% cp .env.example .env

Webサーバーの起動

ローカル環境でWebサーバーを起動して、ブラウザからアクセスできるようにします。

% npm run dev          

> aituber-kit@0.1.0 dev
> next dev

  ▲ Next.js 14.2.30
  - Local:        http://localhost:3000
  - Environments: .env

 ✓ Starting...
 ✓ Ready in 6.5s
 ○ Compiling / ...
 ✓ Compiled / in 6.4s (1680 modules)
 ✓ Compiled in 297ms (1680 modules)
 GET / 200 in 7882ms

ブラウザからのアクセス

ブラウザで http://localhost:3000 を開いて、AITuberKitを使い始めることができます。

ブラウザでのAI設定

AITuberKitのブラウザ左上の設定アイコンで、「AI設定」を開き、Azure OpenAIのRealtime APIの値を設定します。

AIサービスを選択：Azure OpenAI
Azure OpenAI APIキー：XXXXXXXXXXX
Azure Endpoint：wss://{RESOURCE_NAME}.cognitiveservices.azure.com/openai/realtime?api-version={API_VERSION}&deployment={DEPLOYMENT_NAME}
API_VERSION：2024-10-01-preview
DEPLOYMENT_NAME：gpt-4o-mini-realtime-preview
リアルタイムAPIモード：状態ON

リアルタイムな会話の仕方

キーボードのoptionキーを押している間に、音声入力の受け付け状態になります。この状態で喋り終わったあとにoptionキーを離すと、Realtime APIに音声入力した内容が送信されます。

まとめ

AITuberKitのRealtime APIは、音声ベースのAI会話アプリを迅速にプロトタイピングする上で非常に便利なツールです。1秒から2秒位で音声の回答が返ってくるので、自然な会話ができました。