Web integration guide for Real-time Conversational AI - Intelligent Media Services

Integrate the Real-time Conversational AI agent into your web app.

Note

To quickly test an AI agent, see Integrate an AI agent via code snippet.

Source code

Download link

Download the source code from GitHub.

Directory structure

.
└── React
    ├── README.md
    ├── eslint.config.js
    ├── index.html     // For PCs
    ├── mobile.html    // For mobile phones
    ├── package.json
    ├── src
    │   ├── Mobile     // Mobile UI
    │   ├── PC         // PC UI
    │   ├── common     // Common method
    │   ├── controller
    │   ├── interface.ts
    │   ├── runConfig.ts  // Runtime configurations
    │   ├── service
    │   └── vite-env.d.ts
    ├── tsconfig.app.json
    ├── tsconfig.json
    └── vite.config.ts

Before you begin

Develop the required API operations on your AppServer, or deploy the provided server source code. For more information, see Deploy a project.

Run the demo

Go to the React directory.
Run npm install to install dependencies.
In src/runConfig.ts, set the AppServer address and agent ID.

// src/runConfig.ts
const runConfig: AICallRunConfig = {
  // should be modified to region of your agent
  region: 'cn-shanghai',
  appServer: 'Your AppServer address',
  voiceAgentId: 'Your voice agent ID',
  avatarAgentId: 'Your avatar agent ID',
  visionAgentId: 'Your vision agent ID',
  // callTemplateConfig: callTemplateConfig,
};

Region name	Region ID
China (Hangzhou)	cn-hangzhou
China (Shanghai)	cn-shanghai
China (Beijing)	cn-beijing
China (Shenzhen)	cn-shenzhen
Singapore	ap-southeast-1

Run npm run dev to start the development server.