livekit-examples/agent-starter-react

解決的問題

為開發語音驅動的 AI 代理的開發者提供即用型的前端啟動模板。無需從零開始建構複雜的即時通訊介面，而是提供預建構的 UI 組件，支援語音互動、影片串流與虛擬化身。

工作原理

此模板基於 Next.js 建構，使用 LiveKit JavaScript SDK 與專用的 Agents UI 組件庫。它連接到 LiveKit 會話以處理即時音訊與影片串流，並管理從歡迎畫面到活躍代理會話的狀態轉換。開發者可透過修改設定檔（app-config.ts）或直接修改專案目錄中的 Shadcn 基礎組件來自訂外觀與感受。

適用對象

希望快速部署專業使用者介面的前端開發者與 AI 工程師，用於其基於 LiveKit 的語音 AI 代理。

主要亮點

• 即時互動：支援語音、轉錄與虛擬化身。
• 可自訂 UI：包含多種音訊視覺化樣式（條狀、網格、徑向、波浪、光暈）以及亮/暗主題支援。
• 媒體功能：整合支援攝影機影片串流與螢幕共享。
• 開發者友善：使用 Next.js 與 Shadcn UI，便於元件自訂與更新。