人工智能AI Agent多模态语音AI 应用【免费下载链接】ten-frameworkOpen-source framework for conversational voice AI agents项目地址https://gitcode.com/TEN-framework/ten-framework点击查看免费下载导读本文以 voice-assistant-sip-plivo 示例 中的前端工程为讲解对象介绍如何在 TEN Framework 的语音 AI Agent 项目中搭建一个基于 Next.js 14 TypeScript Tailwind CSS 的呼叫控制 Web 前端。该前端负责与后端的 Plivo SIP 语音服务通信支持外呼Outbound Call、模拟来电Inbound Call、实时呼叫状态与 WebSocket 连接状态展示以及呼叫挂断管理。阅读本文后你将能够独立完成该前端的环境搭建、环境变量配置、开发服务器启动并理解其与后端 tenapp 服务、配置服务之间的 API 交互链路进而可在此基础上二次开发属于自己的呼叫控制面板。前端在整个语音 Agent 中的角色在 TEN Framework 的 voice-assistant-sip-plivo 示例中整体架构分为四层前端frontend本文主角一个 Next.js 单页应用提供人机交互界面Plivo 配置服务server基于 FastAPI 的配置服务为前端提供/api/config接口见 server/plivo_server.pytenapp 服务tenapp承载 TEN Agent 运行时与 Plivo 呼叫逻辑的服务暴露呼叫的增删查等 RESTful 接口见 tenapp/ten_packages/extension/main_python/server.pyTEN Agent 图graph在 tenapp/property.json 中定义的voice_assistant预置图串联 STTDeepgram→ LLMOpenAI→ TTSElevenLabs的实时语音流水线。前端通过浏览器发起 HTTP 请求驱动后端的 Plivo 呼叫创建与终止后端的streamid_adapter等扩展则负责将 Plivo 的 WebSocket 音频流转入 TEN 图进行语音对话处理。功能特性根据 frontend/README.md 的说明该前端提供以下核心能力功能说明外呼输入电话号码与开场消息向后端发起外呼请求模拟来电入呼通过弹窗输入电话号码模拟并展示来电通知实时状态展示呼叫状态queued / ringing / in-progress / completed / failed 等以及 WebSocket 连接状态呼叫管理通话进行中可一键结束Hang Up当前呼叫这些功能在 app/page.tsx 中通过三个核心状态驱动activeCall当前活跃呼叫、serverConfig服务端配置挂载时通过/api/config拉取以及error错误提示。页面顶部标题栏中标注 “Powered by TEN Framework”表明该前端运行于 TEN Framework 的 Agent 生态中见 app/layout.tsx。实现细节该前端工程由 Twilio 版本迁移而来代码中仍保留 “Twilio Voice Assistant” 等命名但其对接的后端已是 Plivo 服务。前端接口中使用call_sid字段名而后端实际返回call_uuid二者在语义上对应阅读源码时需注意这一命名差异。安装与环境配置1. 安装依赖cd frontend npm install仓库中同时提供了bun.lock与package-lock.json因此也可以使用 Bun 安装。依赖清单见 frontend/package.json核心依赖包括next14.0.0React 框架react/react-dom^18.2.0axios^1.6.0HTTP 客户端lucide-react^0.292.0图标库开发依赖typescript^5.2.0、tailwindcss^3.3.5、eslint等2. 配置环境变量创建.env.local文件# Twilio Server Configuration NEXT_PUBLIC_TWILIO_SERVER_URLhttp://localhost:8080或直接复制示例文件cp .env.example .env.local该变量在 frontend/app/api.ts 中被读取作为TwilioAPI客户端默认的配置服务地址同时该文件还支持第二个环境变量NEXT_PUBLIC_TENAPP_SERVER_URLhttp://localhost:9000用于指定 tenapp 呼叫服务地址。若未设置二者分别回退到http://localhost:8080与http://localhost:9000。此外 frontend/next.config.js 中还注册了服务端侧TWILIO_SERVER_URL环境变量默认http://localhost:8080。为方便快速上手仓库内置了 frontend/start.sh 启动脚本它会自动检查node_modules是否已安装并在缺少.env.local时自动创建默认配置NEXT_PUBLIC_TWILIO_SERVER_URLhttp://localhost:8080随后执行npm run dev。3. 启动开发服务器npm run dev应用默认运行于 http://localhost:3000。package.json中预置了四个脚本命令dev开发、build构建、start生产启动、lint代码检查。项目结构解析前端工程的目录结构如下frontend/ ├── app/ │ ├── globals.css # 全局样式 │ ├── layout.tsx # 根布局含页头与全局容器 │ ├── page.tsx # 主页面状态编排与区块布局 │ └── api.ts # API 服务TwilioAPI 客户端与类型定义 ├── components/ │ ├── CallStatus.tsx # 呼叫状态组件轮询 挂断 │ ├── InboundCallModal.tsx # 来电弹窗组件 │ └── OutboundCallForm.tsx # 外呼表单组件 ├── package.json # 依赖与脚本 ├── tailwind.config.js # Tailwind 配置 ├── tsconfig.json # TypeScript 配置 └── next.config.js # Next.js 配置各核心模块的职责与实现要点如下主页面app/page.tsx页面采用双栏网格布局lg:grid-cols-2左侧为外呼区右侧为模拟来电区呼叫进行中时页面底部渲染CallStatus状态卡片。组件挂载后通过twilioAPI.getConfig()拉取服务端配置失败时回退到一组默认值含twilio_from_number、server_port、tenapp_url、media_ws_url等字段保证页面在配置服务不可用时仍能渲染。API 客户端app/api.ts这是前端与后端通信的核心层TwilioAPI类维护两个服务地址twilioServerUrl配置服务地址默认NEXT_PUBLIC_TWILIO_SERVER_URL仅用于GET /api/configtenappServerUrltenapp 呼叫服务地址默认NEXT_PUBLIC_TENAPP_SERVER_URL用于呼叫的增删查与健康检查。requestT()私有方法封装了统一的fetch调用通过useTenapp标志切换 base URL。导出的接口类型包括CallResponse、CallInfo、CallListResponse、ServerConfig、HealthResponse与CreateCallRequest覆盖了呼叫生命周期中涉及的全部数据结构。文件末尾导出单例twilioAPI同时保留TwilioAPI类供自定义实例使用。外呼表单components/OutboundCallForm.tsx包含电话号码typetel必填要求带国家区号与开场消息默认文案 “Hello, this is a call from the AI assistant.”两个输入项。提交时校验号码非空后回调onCall若存在活跃呼叫则按钮切换为红色 “Hang Up Call”点击触发onHangUp。来电弹窗components/InboundCallModal.tsx以全屏遮罩 居中卡片呈现 “Incoming Call” 通知展示来电号码fromNumber并提示“呼叫正被自动处理”。主页面通过handleInboundCallNotification以配置中的twilio_from_number默认1234567890模拟一次来电通知。状态组件components/CallStatus.tsx以callSid为依赖挂载后立即拉取一次呼叫信息并每 5 秒轮询GET /api/call/{call_sid}刷新状态见组件中的setInterval(fetchCallInfo, 5000)。状态图标与文案覆盖queued排队、ringing振铃、in-progress通话中、completed已完成、failed失败、busy占线、no-answer未接等枚举。面板展示 Call ID、电话号码、状态、WebSocket 连接状态has_websocket与创建时间仅当状态为in-progress时显示 “End Call” 挂断按钮点击后调用DELETE /api/call/{call_sid}并回调onCallEnd清空活跃呼叫。前端与后端的 API 契约前端通过以下端点与后端通信见 frontend/README.md 与 app/api.ts方法端点用途目标服务POST/api/call创建呼叫外呼tenapp 服务GET/api/call/{call_sid}获取呼叫信息tenapp 服务DELETE/api/call/{call_sid}结束呼叫tenapp 服务GET/api/calls列出所有呼叫tenapp 服务GET/api/config获取服务端配置配置服务twilio serverGET/health健康检查tenapp 服务这些端点在仓库中的后端实现均有对应落点tenapp 侧 FastAPI 服务 server.py 中实现了POST /api/call调用 PlivoRestClient.calls.create发起外呼并记录会话、DELETE /api/call/{call_uuid}调用plivo_client.calls.delete挂断、GET /api/call/{call_uuid}查询会话状态以及GET /api/calls列出活跃会话另有/webhook/answer与/webhook/status两个 Plivo 回调端点配置服务 server/plivo_server.py 实现了GET /api/config返回server_port、tenapp_port、tenapp_url、public_server_url、use_https、use_wss等字段前端据此得知真实服务地址与协议。注意前端请求的{call_sid}在语义上对应后端 Plivo 的{call_uuid}GET /api/calls在前端期望返回{calls, total}而后端实际返回{success, active_calls, calls}字段略有出入二次开发时建议以后端实际响应为准详见 server.py。使用说明外呼流程在 “Outbound Calls” 区域输入完整电话号码含国家区号如1234567890可选修改默认开场消息点击 “Initiate Outbound Call” 按钮发起外呼。发起后页面进入 “Dialing...” 加载态成功后activeCall被赋值并渲染状态卡片。模拟来电流程点击 “Simulate Inbound Call” 按钮在弹出对话框中确认来电号码弹窗展示 “Incoming Call” 通知呼叫由后端自动处理。呼叫管理呼叫开始后页面底部显示实时呼叫状态与 WebSocket 连接状态每 5 秒刷新通话进行中点击 “End Call” 按钮即可终止呼叫。与后端一起运行前端本身不能独立工作需要与完整的 voice-assistant-sip-plivo 后端配合。整体运行方式见示例根目录 README.md在.env中配置 PlivoPLIVO_AUTH_ID/PLIVO_AUTH_TOKEN/PLIVO_FROM_NUMBER/PLIVO_PUBLIC_SERVER_URL、DeepgramDEEPGRAM_API_KEY、OpenAIOPENAI_API_KEY与 ElevenLabsELEVENLABS_TTS_KEY凭证执行task install安装 Python 依赖与前端组件本地联调时通过./start-with-ngrok.sh暴露公网地址Plivo 回调与 WebSocket 音频流需要公网可达执行task run启动后端。启动后访问前端http://localhost:3000API 服务http://localhost:9000TMAN Designerhttp://localhost:49483语音 Agent 的图配置位于 tenapp/property.json其中stt节点使用deepgram_asr_python采样率 8000适配电话音频、llm节点使用openai_llm2_python、tts节点使用elevenlabs_tts2_pythonmain_control节点持有 Plivo 凭证并监听plivo_server_port: 9000。图内streamid_adapter负责在 Plivo WebSocket 流与 TEN 图音频帧之间做流 ID 适配message_collector与可选的weatherapi_tool_python则提供消息收集与天气工具能力。技术栈一览技术用途Next.js 14React 应用框架App Router 目录结构TypeScript静态类型保障接口类型集中于app/api.tsTailwind CSS原子化样式框架btn-primary、input-field等自定义类Axios / fetchHTTP 客户端api.ts实际使用原生 fetch 封装Lucide React图标库电话、消息、状态图标等小结与扩展方向本文完整梳理了 TEN Framework 语音 AgentPlivo SIP 版前端工程从安装配置到 API 交互的完整链路。该前端采用组件化与类型化设计呼叫状态通过轮询驱动逻辑清晰、易于替换后端地址或扩展新的呼叫能力。如需自定义 Agent 的 STT / LLM / TTS 模块或调整图结构可借助 TMAN Designer 修改 tenapp/property.json前端无需改动即可继续工作如需接入其他 SIP 运营商可参考前端 API 契约与 server.py 的呼叫实现进行适配。赞分享人工智能AI Agent多模态语音AI 应用【免费下载链接】ten-frameworkOpen-source framework for conversational voice AI agents项目地址https://gitcode.com/TEN-framework/ten-framework点击查看免费下载相关推荐基于 TEN-framework 构建支持 Telnyx SIP 入站/出站呼叫的实时语音助手基于 TEN framework 构建支持 Telnyx SIP 入站/出站呼叫的实时语音助手 本文是一份针对 TEN framework 开源仓库中 voic人工智能AI Agent多模态语音AI 应用TEN Framework Live2D 语音助手前端实战指南基于 Next.js 15 与 Agora RTC/RTM 的实时角色交互界面TEN Framework Live2D 语音助手前端实战指南基于 Next.js 15 与 Agora RTC/RTM 的实时角色交互界面 导读 本文围绕人工智能AI Agent多模态语音AI 应用TEN Framework RTM Transport 示例实战基于 Agora RTC 与 RTM 双通道的语音助手架构TEN Framework RTM Transport 示例实战基于 Agora RTC 与 RTM 双通道的语音助手架构 导读 rtm transport人工智能AI Agent多模态语音AI 应用创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
