Web guide - Intelligent Media Services - Alibaba Cloud Documentation Center

This topic describes how to integrate the Real-time Conversational AI agent into your web app.

Note

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

Source code

Download link

You can 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 relevant API operations on your AppServer or deploy the provided server source code. For more information, see Deploy a project.

Run the demo

After you download the source code, go to the React directory.
In the React directory, run the npm install command to install dependencies.
Open the src/runConfig.ts file and modify the address of your AppServer and agent ID if needed.

// 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 the npm run dev command to start the local service.