このトピックでは、リアルタイム対話型 AI エージェントを Web アプリに統合する方法について説明します。
説明
AI エージェントをすばやくテストするには、「コード スニペットによるエージェントの統合」をご参照ください。
ソースコード
ダウンロード リンク
GitHub からソースコードをダウンロードできます。
ディレクトリ構造
.
└── React
├── README.md
├── eslint.config.js
├── index.html // PC 用
├── mobile.html // 携帯電話用
├── package.json
├── src
│ ├── Mobile // モバイル UI
│ ├── PC // PC UI
│ ├── common // 共通メソッド
│ ├── controller
│ ├── interface.ts
│ ├── runConfig.ts // 実行時構成
│ ├── service
│ └── vite-env.d.ts
├── tsconfig.app.json
├── tsconfig.json
└── vite.config.ts始める前に
AppServer で関連する API 操作を開発するか、提供されているサーバー ソースコードをデプロイします。 詳細については、「プロジェクトのデプロイ」をご参照ください。
デモを実行する
ソースコードをダウンロードした後、React ディレクトリに移動します。
React ディレクトリで、
npm installコマンドを実行して依存関係をインストールします。src/runConfig.tsファイルを開き、必要に応じて AppServer のアドレスと エージェント ID を変更します。
// src/runConfig.ts
const runConfig: AICallRunConfig = {
// should be modified to region of your agent // エージェントのリージョンに変更する必要があります
region: 'cn-shanghai',
appServer: 'Your AppServer address', // AppServer のアドレス
voiceAgentId: 'Your voice agent ID', // 音声エージェント ID
avatarAgentId: 'Your avatar agent ID', // アバター エージェント ID
visionAgentId: 'Your vision agent ID', // ビジョン エージェント ID
// callTemplateConfig: callTemplateConfig,
};リージョン名 | リージョン ID |
中国 (杭州) | cn-hangzhou |
中国 (上海) | cn-shanghai |
中国 (北京) | cn-beijing |
中国 (深圳) | cn-shenzhen |
シンガポール | ap-southeast-1 |
npm run devコマンドを実行してローカル サービスを開始します。