在Web端使用含UI集成方案接入AI实时互动消息对话智能体-智能媒体服务-阿里云

通过阅读本文，您可以了解如何在Web端接入AI实时互动消息对话智能体。

源码说明

说明

当前消息通话仅支持手机版UI。

源码下载

源码结构

.
└── React
  ├── README.md
  ├── eslint.config.js
  ├── index.html       // PC版入口
  ├── mobile.html      // 手机版入口
  ├── package.json
  ├── src
  │   ├── Mobile       // 手机版UI实现
  │   ├── PC           // PC版UI实现
  │   ├── common       // 公共业务方法
  │   ├── controller   // 方案业务逻辑接口与实现
  │   ├── service      // 与服务端相关交互
  │   └── vite-env.d.ts
  ├── tsconfig.app.json
  ├── tsconfig.json
  └── vite.config.ts

环境要求

Node 18以上
NPM 10以上

前提条件

已在您的服务端上开发了相关接口或直接部署提供的Server源码，搭建步骤请参见项目部署。

跑通 Demo

源码下载后，进入React目录。
在React目录下，执行npm install，安装依赖。

打开文件src/service/interface.ts，修改服务端域名。

// src/controller/service/interface.ts
const APP_SERVER = '你的应用服务器域名';

打开文件 src/App.tsx，修改消息通话智能体的Id。

const defaultChatAgentId = '你的消息通话智能体的Id';

执行命令npm run dev，启动本地服务。
访问 http://localhost:5173/mobile 体验消息对话智能体。