TEN Agent RTM 传输示例前端 Playground本地开发、联调与容器化部署指南【免费下载链接】ten-frameworkOpen-source framework for conversational voice AI agents项目地址: https://gitcode.com/TEN-framework/ten-framework本指南以 frontend/README.md 为骨架系统讲解 TEN Agent 的 RTM 传输示例rtm-transport所附带的前端 Playground它是什么、采用怎样的技术栈、如何在本地完成依赖安装与启动以及如何与 Ten Agent 后端联调、如何构建成 Docker 镜像发布。读完本文你将能够独立把该前端跑起来并通过源码理解它与 RTC/RTM 双传输 Agent 之间的调用关系。Playground 是什么rtm-transport是 TEN Agent 仓库中一个演示双传输架构的语音助手示例同时使用 Agora RTC实时音频与 Agora RTM实时消息用于文本/数据来构建更丰富的实时通信能力。而本文主角——位于 frontend/ 的 Playground正是这个示例的本地 Web 前端官方定位为 Local playground for Ten Agent负责提供 Agent 的交互界面语音通话、实时字幕、消息聊天等。从仓库结构看该前端与后端配套关系如下目录/文件作用frontend/Next.js 前端 Playground默认端口 3000tenapp/property.jsonTEN Agent 图定义RTC/RTM/STT/LLM/TTS 节点编排ai_agents/server/Go 编写的 API Server默认端口 8080负责启动/停止 AgentTaskfile.yml一键安装、运行、发布的任务编排技术栈与工程结构Playground 前端基于Next.js React TypeScript shadcn/ui Redux Toolkit并集成了 Agora 官方 Web SDK。虽然 README 徽章标注为 Next.js 15 / React 18但仓库实际 package.json 中锁定的是next 16.0.7、react 19.2.0运行前以实际文件为准即可。核心依赖一览取自 package.json通信agora-rtc-sdk-ng实时音视频、agora-rtm实时消息、axiosHTTP状态管理reduxjs/toolkitreact-reduxreduxUI 体系radix-ui/react-*系列原语 tailwindcsslucide-reactsonner通知react-hook-formzod业务扩展trulience/react-sdk数字人 Avatar、protobufjsSTT 消息序列化开发工具typescript、biomejs/biomelint/格式化、protobufjs-cli源码目录的核心模块frontend/src/ ├── app/api/agents/start/route.tsx # 启动 Agent 的 Next.js API 路由 ├── common/ # 常量、图配置、请求封装、存储工具 ├── components/ # Agent(音视频)、Chat、Dynamic、Layout、ui 等组件 ├── manager/rtc/ manager/rtm/ # Agora RTC 与 RTM 封装 ├── protobuf/SttMessage.proto # STT 消息 proto 定义 └── store/ # Redux 全局状态其中 manager/rtc/ 与 manager/rtm/ 分别封装了 RTC 音视频与 RTM 消息能力与后端双传输架构一一对应。前置条件按 frontend/README.md 要求本地开发需要Node.js 20package.json的engines字段同样声明了该下限pnpm 9.12.3可通过corepack enable启用 Corepack 后使用对应版本此外Playground 只是壳它依赖已启动的 Ten Agent 服务端。README 明确要求先按照示例根 README 的指引启动 Ten Agent 开发容器/服务即 rtm-transport/README.md 中的环境变量与 Setup 部分AgoraAGORA_APP_IDRTC 与 RTM 共用必填、AGORA_APP_CERTIFICATE可选DeepgramDEEPGRAM_API_KEYSTT必填OpenAIOPENAI_API_KEYLLM必填OPENAI_MODEL、OPENAI_PROXY_URL可选ElevenLabsELEVENLABS_TTS_KEYTTS必填可选WEATHERAPI_API_KEY天气工具本地开发安装依赖并启动安装依赖# 进入前端目录 cd ai_agents/agents/examples/rtm-transport/frontend # 启用 corepack按需 corepack enable # 安装依赖 pnpm install启动开发服务器pnpm dev该命令实际执行的是next dev --turbopack见 package.json 的scripts启动后访问http://localhost:3000即可打开 Playground 界面。使用 Taskfile 一键启动推荐示例根目录的 Taskfile.yml 封装了完整链路task install依次执行tman install拉取 TEN 扩展包、安装 Python 依赖、安装前端依赖、构建 Go API Servertask run并行启动 TMAN Designer:49483、前端:3000、API Server:8080cd ai_agents/agents/examples/rtm-transport task install task run注意Taskfile 中前端依赖使用bunbun install --verbose、bun run dev与 README 的 pnpm 方式二选一即可效果等价。三个服务端口服务地址Playground 前端http://localhost:3000API Serverhttp://localhost:8080TMAN Designerhttp://localhost:49483前端如何与 Agent 后端联调启动 Agent 的 API 路由前端通过 Next.js 路由 src/app/api/agents/start/route.tsx 代理请求读取环境变量AGENT_SERVER_URL向前端本地接口发起POST /start将request_id、channel_name、user_uid、graph_name、properties透传给 Go API Server。因此运行前必须配置AGENT_SERVER_URL指向 API Server默认 http://localhost:8080否则接口会返回 Environment variables are not available。前端配置项src/common/constant.ts 中维护了 UI 侧的默认选项DEFAULT_OPTIONSchannel频道名、userName、userId、appId、token用于 RTC/RTM 入会GRAPH_OPTIONS预置va_openai_azure语音 Agent与camera_va_openai_azure带视觉对应后端图的名称LANGUAGE_OPTIONS/VOICE_OPTIONS语言en-US/zh-CN/ko-KR/ja-JP与音色male/female选择这些参数最终经POST /start提交后端按 tenapp/property.json 中定义的预置图voice_assistant拉起整套 Agent。RTM 传输示例的图编排后端上下文虽然前端只是交互层但理解它服务的图能帮助你排查联调问题。voice_assistant图的节点与连接见 tenapp/property.json体现了双传输的关键设计音频流RTCagora_rtc (输入音频) → streamid_adapter (按 stream_id 注入 session_id 元数据) → stt (Deepgram ASR) → llm (OpenAI) → tts (ElevenLabs) → agora_rtc (输出音频)消息流RTM RTC 数据通道message_collector2 (接收 message 数据) → 将文本分块为 base64 → 经 agora_rtc 数据通道发送 → agora_rtm 发送 rtm_message_event 给 main_control关键扩展一览扩展作用agora_rtc实时音频流与数据通道agora_rtm低延迟文本/数据消息streamid_adapter将 RTC 的 stream_id 转为 session_id实现多用户分路 ASRmessage_collector2收集文本消息、分块并排队投递块间隔 40msmain_control编排 Agent 生命周期并接收 RTM 消息其中 RTC 侧的channel为ten_agent_test、本地stream_id为 1234、订阅远端remote_stream_id为 123——前端连接时需与这些值保持一致或通过 token 动态覆盖。agora_rtm节点配置了channel_type: message、user_id: 1234与rtm_enabled: truetoken 在启动时动态覆盖。生产构建与 Docker 部署前端独立镜像frontend/Dockerfile 采用bun Next.js standalone的多阶段构建deps阶段安装依赖 →builder阶段执行bun run build→runner阶段仅拷贝.next/standalone与.next/static以非 root 用户运行暴露3000端口。与之配套next.config.mjs 开启了output: standalone这是该镜像能够轻量化的前提。整体示例镜像示例根 README 提供了把整个 rtm-transport前端 API Server tenapp打包成镜像的方式需在 Docker 容器外执行cd ai_agents docker build -f agents/examples/rtm-transport/Dockerfile -t rtm-transport-app . docker run --rm -it --env-file .env -p 8080:8080 -p 3000:3000 rtm-transport-app启动后访问 http://localhost:3000前端与 http://localhost:8080API Server.env文件需包含前面列出的 Agora / Deepgram / OpenAI / ElevenLabs 凭据。常用脚本与自定义扩展package.json 提供的脚本命令作用pnpm dev启动开发服务器next dev --turbopackpnpm build生产构建next buildpnpm start以生产模式启动next startpnpm lint使用 Biome 检查并自动修复biome check --writepnpm proto由 SttMessage.proto 重新生成SttMessage.jspbjs关于自定义示例采用模块化设计可通过 TMAN Designerhttp://localhost:49483可视化替换 STT / LLM / TTS 供应商前端选择图与参数后即会生效无需改动 Playground 代码。若涉及 proto 变更记得在改动SttMessage.proto后执行pnpm proto重新生成绑定。小结本指南围绕 frontend/README.md 展开覆盖了 Playground 的定位、技术栈、本地开发pnpm install/pnpm dev、与 Agent 后端的联调机制以及 Docker 化部署路径并结合 package.json、route.tsx、property.json 等源码给出了可验证的细节。你可以据此快速搭建起一套基于 Agora RTC RTM 双传输的语音 Agent 调试环境并进一步探索多用户分路 ASR、音视频 文本混合交互等高级玩法。【免费下载链接】ten-frameworkOpen-source framework for conversational voice AI agents项目地址: https://gitcode.com/TEN-framework/ten-framework创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
企业数字化 ERP 产品动态
相关推荐
Python深度学习中文语音识别毕设实战：从原理到高分落地 简介：这是一套面向计算机专业毕业设计的中文语音识别系统源码包，采用深度学习方法实现，适合正在做语音识别方向课程设计、毕业设计或项目实战的学生。源码已经过本地编译调试，评审得分98分，具备较好的完整性、规范性与… · 2026/9/23 20:02:28
InfoSphere 数据备份自动化：定时任务与云存储集成 InfoSphere 数据备份自动化：定时任务与云存储集成
1. 数据备份的痛点与解决方案
你是否还在手动执行数据库备份？面对以下挑战：
定期备份容易遗漏或忘记执行备份文件分散存储难以管理手动传输到云存储效率低下缺乏备份状态监控和失败通知
Info… · 2026/9/23 20:02:21
基于PyQt的本地图像语义分割工具箱：8个深度学习模型对比实践 简介：基于Python与PyQt框架实现的图像语义分割软件，内置八种主流分割模型，附带完整工程源代码和详细说明文档，主要面向计算机、人工智能、自动化、电子信息等专业的在校学生与开发者，既可支撑毕业设计、课程设计&#… · 2026/9/23 20:02:21
3种直播网站排名算法图解原理，面试别再只背公式 3种直播网站排名算法图解原理，面试别再只背公式 面试被问“直播房间排序怎么做的”，你只能憋出一句“按热度排”？面试官眼神瞬间冷掉，追问：“热度怎么算？实时性怎么保证？冷启动怎么办？”你大脑一片空白。这不只是背不出八股文，是根本没看懂底层逻辑… · 2026/9/23 20:49:24
科研文献高效检索与管理全攻略 1. 学术资源获取的痛点与解决方案作为一名在科研领域摸爬滚打多年的研究者，我深知查找国外期刊论文时那种"大海捞针"的无力感。记得刚开始做研究时，我常常花上整天时间在各大平台间切换，却找不到几篇真正相关的文献。直到后来掌握了… · 2026/9/23 20:49:18
重型颚式破碎机设计与优化关键技术解析 1. 项目概述：重型颚式破碎机的工业价值复摆颚式破碎机作为矿山、建材、冶金等领域的核心破碎设备，其设计合理性直接影响生产线效率和运营成本。PE12001500这个型号代表进料口尺寸为1200mm1500mm，属于大型粗碎设备，每小时处理能力可… · 2026/9/23 20:49:18
Yii 2 Gii 代码生成器实战指南：从启用模块到自动生成完整 CRUD 应用 后端Web框架 【免费下载链接】yii2 Yii 2: The Fast, Secure and Professional PHP Framework 项目地址： https://gitcode.com/gh_mirrors/yi/yii2 点击查看 免费下载 Gii 是 Yii 2 官方提供的可视化代码生成器，能够根据数据库表结构自动生成 Active Re… · 2026/9/23 20:49:11
3招搞定手机怎么下载微信面试难题实战项目解析 3招搞定手机怎么下载微信面试难题实战项目解析 面试被问“手机怎么下载微信”背后的原理，90%的人答不上来。别笑，这看似弱智的问题，实则是考察你对移动应用分发机制、安全校验及网络协议理解的试金石。我带过不少校招新人，他们背了八股文，却连一个A… · 2026/9/23 0:00:03
你有新短消息请注意查收：3个新手避坑指南搞定消息系统选型 你有新短消息请注意查收：3个新手避坑指南搞定消息系统选型 面试被问“高并发下如何保证消息不丢失”，你张口就是“用Redis”，结果面试官追问“如果Redis宕机了怎么办”，你瞬间卡壳。这种场景太常见了，很多新手在背八股文时，只记住了技术名词… · 2026/9/23 0:00:29
