【免费下载链接】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 和 React 19 构建的语音AI前端完整模板专为 LiveKit Agents 实时语音框架打造。它把语音对话、音视频流、屏幕共享、虚拟形象等能力封装成开箱即用的 Web 界面让你不用从零搭建 UI几分钟内就能跑通一个可对话的语音 AI 应用。为什么需要这个语音AI前端模板很多开发者会问后端 Agent 写好了前端界面怎么做如果自行开发WebSocket 连接管理、音频可视化、麦克风/摄像头控制、深浅色主题……每一项都要花时间从零写起往往需要数周。agent-starter-react 直接给出了答案完整语音 UI欢迎页、通话页、消息转写、控制栏一应俱全官方组件加持基于 LiveKit 官方 Agents UI 组件与 JavaScript SDK 封装代码规范可长期维护高度可定制品牌、配色、功能开关全部集中在一个配置文件里跨端生态同系列还有 Android、Flutter、Swift、React Native 版本可对照参考快速开始三步跑通语音AI应用一键获取项目从仓库克隆代码git clone https://gitcode.com/gh_mirrors/ag/agent-starter-react cd agent-starter-react如果你已经安装了 LiveKit CLI也可以用模板命令自动创建lk app create --template agent-starter-react最快配置方法填入 LiveKit 凭证在项目根目录创建.env.local文件可参考.env.example填入你的 LiveKit 项目凭证LIVEKIT_API_KEYyour_livekit_api_key LIVEKIT_API_SECRETyour_livekit_api_secret LIVEKIT_URLhttps://your-livekit-server-url这三个参数用于服务端签发接入用的 JWT 凭证签发逻辑见 app/api/token/route.ts。启动开发服务器pnpm install pnpm dev打开http://localhost:3000即可看到欢迎页点击 Start call 按钮开始与语音 Agent 通话。 小提醒浏览器默认阻止自动播放音频。若连接后没有声音页面会出现Start Audio按钮点击一次即可恢复播放。该按钮由 components/agents-ui/start-audio-button.tsx 实现。7大核心功能详解功能一实时语音对话核心交互流程由 components/app/view-controller.tsx 驱动未连接时显示欢迎页连接后自动平滑切换到通话视图。欢迎页中的声波图标与 Start call 按钮定义在 components/app/welcome-view.tsx。通话中支持双向实时语音AI 回复会以聊天气泡形式实时呈现控制栏内还带文字输入框可以打字 说话混合交流。功能二5款音频可视化特效模板内置五种音频可视化样式改一行配置即可切换样式效果可调参数bar默认竖向声波条audioVisualizerBarCountradial环形声波audioVisualizerRadialBarCount、audioVisualizerRadialRadiusgrid点阵网格audioVisualizerGridRowCount/GridColumnCountwave示波器波形audioVisualizerWaveLineWidthaura着色器光晕audioVisualizerAuraColorShift五种样式分别实现在 agent-audio-visualizer-bar.tsx、agent-audio-visualizer-grid.tsx、agent-audio-visualizer-radial.tsx、agent-audio-visualizer-wave.tsx 和 agent-audio-visualizer-aura.tsx 中还可通过audioVisualizerColor统一设定主题色。功能三摄像头视频流将supportsVideoInput设为true后控制栏会显示摄像头开关。打开后本地摄像头画面以小窗悬浮形式展示Agent 侧也能订阅视频轨道——配合视觉模型即可实现看得见的 AI 对话。功能四屏幕共享supportsScreenShare开启后控制栏提供屏幕共享按钮见 agent-control-bar.tsx。这一能力非常适合AI 看图讲解类场景把演示文稿或代码页面共享给 Agent 实时解读。功能五虚拟形象Virtual Avatar集成模板原生支持 LiveKit 虚拟形象方案当会话中出现虚拟形象的视频轨道时主画面区域会自动渲染该视频流布局逻辑见 tile-view.tsx让语音 AI 拥有数字人面孔。功能六深浅色主题自动切换通过next-themes实现 Light / Dark 双主题并自动跟随系统偏好。主题提供器位于 components/app/theme-provider.tsx切换按钮在 components/app/theme-toggle.tsx。音频可视化特效也支持为深色模式单独指定颜色。功能七一键品牌定制所有外观与功能开关都集中在 app-config.ts例如companyName: LiveKit, pageTitle: LiveKit Voice Agent, logo: /lk-logo.svg, accent: #002cf2, startButtonText: Start call, supportsChatInput: true, supportsVideoInput: true, supportsScreenShare: true,改公司名、换 Logo、调主题色、关屏幕共享……全部只动这一个文件无需修改组件代码。项目结构速览agent-starter-react/ ├── app/ # Next.js 应用入口与 Token API ├── components/ │ ├── agents-ui/ # Agents UI 组件可视化、控制栏、转写 │ ├── ai-elements/ # AI 消息元素对话气泡、闪烁提示 │ ├── app/ # 业务逻辑视图控制、欢迎页、主题 │ └── ui/ # shadcn/ui 基础组件 ├── hooks/ # 音频可视化与控制栏 Hook ├── lib/ # 工具函数 └── app-config.ts # 全局配置业务状态集中在components/app/目录入口组合见 components/app/app.tsx而 shadcn 风格的 UI 组件源码就在本地components/下你可以像改普通文件一样改样式和逻辑。升级组件只需执行pnpm shadcn:installCLI 在覆盖文件前会先询问避免丢失你的自定义改动。更多说明见 README.md。进阶部署LiveKit Cloud Sandbox如果只想快速体验而不想本地折腾可以直接把模板部署到 LiveKit Cloud Sandbox获得一个可分享的 URL。与同一 LiveKit 项目下运行的 Agent 会自动加入房间方便你快速迭代原型并把链接直接发给同事演示沙箱参数sandboxId在 app-config.ts 中配置。常见问题 FAQQ点 Start call 后为什么没有声音A浏览器自动播放策略所致点击页面上出现的Start Audio按钮即可。Q如何指定连接的 AgentA在.env.local中设置AGENT_NAME可显式分发到指定 Agent留空则走自动分发。Q生产环境要注意什么Aapp/api/token/route.ts 中的 Token 接口仅限开发环境生产部署前务必补充鉴权层。总结agent-starter-react 把语音 AI 前端从数周工作量压缩到几分钟一个配置文件搞定品牌定制五种可视化特效随选摄像头、屏幕共享、虚拟形象开箱即用。配合 LiveKit Agents它是目前上手实时语音 AI 应用最快的前端模板之一。赞分享【免费下载链接】agent-starter-reactA complete voice AI frontend app for LiveKit Agents with Next.js项目地址https://gitcode.com/gh_mirrors/ag/agent-starter-react点击查看免费下载相关推荐Sunshine 游戏串流完整指南自托管串流从安装到客厅大屏一次学会Sunshine 游戏串流完整指南自托管串流从安装到客厅大屏一次学会 Sunshine 是一款免费开源的 自托管游戏串流 服务器它装在你自己的电脑上把游戏Edge Side Include 注入检测指南ActiveScan 如何发现 ESI 注入漏洞Edge Side Include 注入检测指南ActiveScan 如何发现 ESI 注入漏洞 Edge Side IncludeESI注入是一种隐网络安全应用安全Builder.IO终极指南7大核心功能彻底改变前端开发Builder.IO终极指南7大核心功能彻底改变前端开发 Builder.IO是一款功能强大的拖放式无头CMSHeadless CMS专为React、V前端低代码CMS上一篇PhanTap 项目安装与使用教程下一篇终极指南如何在普通显卡上生成1025帧长视频 - ComfyUI-WanVideoWrapper完整教程创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考