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），仅供参考