【免费下载链接】agent-starter-reactA complete voice AI frontend app for LiveKit Agents with Next.js项目地址https://gitcode.com/gh_mirrors/ag/agent-starter-react点击查看免费下载agent-starter-react 是一个基于 Next.js 的完整语音AI前端应用专为 LiveKit Agents 打造。本文带你零配置、不写代码一键把 agent-starter-react 部署到LiveKit Cloud Sandbox几分钟内就能和一个能听、能看、能聊的语音 AI 开始对话无需准备服务器也无需填写任何环境变量。语音AI功能一览这个模板能做什么agent-starter-react 是 LiveKit 官方风格的 React 启动模板开箱即用的能力包括 ️实时语音对话与 LiveKit Agents 实时语音交互带音频波形反馈摄像头视频流把你的摄像头画面传给 Agent屏幕共享让 Agent看到你的屏幕5 种音频可视化样式bar、grid、radial、wave、aura一键切换虚拟形象Avatar集成明暗主题跟随系统偏好自动切换可定制品牌公司名、Logo、主题色、按钮文案均可配置技术栈上它由 Next.js 驱动UI 采用 Agents UI 组件 LiveKit JavaScript SDK完整说明见 README.mdSandbox 机制说明见 TEMPLATE.md。LiveKit Cloud Sandbox 一键部署步骤零配置Sandbox 的核心理念是LiveKit 帮你托管一个应用实例并给你一个专属、可分享的访问地址。所有使用同一 LiveKit 项目凭据运行的 Agent 都会自动加入会话——你可以快速迭代 Agent 原型并随时把链接发给同事体验。具体只需三步 登录控制台在浏览器打开 LiveKit Cloud 控制台cloud.livekit.io登录并进入你的项目选择模板进入项目的Sandbox 模板库找到agent-starter-react模板点击部署一键部署稍等片刻即可获得专属访问 URL直接在浏览器里和语音 AI 通话。整个过程不写一行代码、不改一个配置——这正是零配置的含义LiveKit 凭据、Token 签发、环境注入全部由平台代劳你只需体验。部署后你会看到什么打开部署后的页面流程非常直观欢迎页显示品牌 Logo 与 Start call 按钮未连接会话时停留在 welcome-view.tsx通话主界面点击开始通话后进入会话视图中央是音频可视化器默认bar样式随 Agent 语音跳动右下角是视频磁贴底部控制栏集成了麦克风、摄像头、屏幕共享与聊天入口实时字幕/聊天语音转写会同步显示在聊天区。业务逻辑集中在components/app目录入口是 components/app/app.tsx状态与行为的管理都在这里完成。本地运行git clone 快速搭建开发环境如果想进一步修改也可以把项目克隆到本地运行只需 4 条命令 git clone https://gitcode.com/gh_mirrors/ag/agent-starter-react cd agent-starter-react pnpm install pnpm dev启动后在浏览器打开 http://localhost:3000 即可。本地运行的注意事项应用自带一个开发用的 Token 路由 app/api/token/route.ts它从.env.local读取LIVEKIT_API_KEY、LIVEKIT_API_SECRET、LIVEKIT_URL三个变量没有.env.local时可参考 README 中的.env.example配置该路由仅在开发环境生效生产环境会直接抛出错误提醒你补充鉴权层。关键文件相对路径速览 文件作用README.md项目总览、功能清单与完整配置参考TEMPLATE.mdSandbox 部署与本地安装说明app-config.ts品牌、文案、主题色、音频可视化器预设components/app/app.tsx应用入口与 LiveKit 会话初始化app/api/token/route.ts本地开发用的参与 Token 签发路由package.json依赖与pnpm dev等脚本定义想换 Logo、改主题色或切换可视化样式只需编辑 app-config.ts 中的logo、accent、audioVisualizerType等字段无需深入组件源码。部署注意事项与常见问题前端只是壳Sandbox 部署的是语音界面你还需要一个可对话的 AgentLiveKit 提供 Python / Node.js 的 Agent 启动模板也可从零自建AGENT_NAME留空启用自动分发Agent dispatch填写则指定 Agent 名称进行显式分发对应 app-config.ts 中的agentNamesandboxId仅用于 LiveKit Cloud Sandbox 环境本地开发时不生效组件更新模板组件可随时通过pnpm shadcn:install拉取最新版本覆盖前会询问避免丢失你的定制。写在最后agent-starter-react 把从 0 到语音 AI 应用的门槛压到了最低Sandbox 一键部署适合快速演示与分享git clone pnpm dev适合深度定制。建议先通过 Sandbox 体验完整流程再克隆仓库动手改 Logo 和主题色——你会发现一个可分享的语音 AI 前端真的只需几分钟 ⚡。赞分享【免费下载链接】agent-starter-reactA complete voice AI frontend app for LiveKit Agents with Next.js项目地址https://gitcode.com/gh_mirrors/ag/agent-starter-react点击查看免费下载相关推荐让 Agent 替你跑完一次逆向REA 和 Hopper、Ghidra、IDA 到底差在哪让 Agent 替你跑完一次逆向REA 和 Hopper、Ghidra、IDA 到底差在哪 拿到一个目标 App想弄清它的离线搜索是怎么实现的可流程还是一逆向工程MCP 服务AI 技能华为昇腾优化的6层蒸馏RoBERTa模型完全指南ChongqingAscend/distilroberta-base快速上手教程华为昇腾优化的6层蒸馏RoBERTa模型完全指南ChongqingAscend/distilroberta base快速上手教程 想要在华为昇腾AI处理器上高从零到生产Google Cloud Agent Starter Pack 极速部署指南从零到生产Google Cloud Agent Starter Pack 极速部署指南 你还在为GenAI代理开发踩这些坑吗 ✅ 30分钟完成从环境配置到生人工智能AI Agent开发工具代码生成RAG上一篇3大突破OmenSuperHub如何让惠普暗影精灵用户实现硬件性能自由下一篇UniHacker 完整教程3 步免许可证修补 Unity覆盖 4.x 到 2022.1 全版本创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考