-
-# Web Voice Assistant
-
-This is a starter template for [LiveKit Agents](https://docs.livekit.io/agents) that provides a simple voice interface using the [LiveKit JavaScript SDK](https://github.com/livekit/client-sdk-js). It supports [voice](https://docs.livekit.io/agents/start/voice-ai), [transcriptions](https://docs.livekit.io/agents/build/text/), and [virtual avatars](https://docs.livekit.io/agents/integrations/avatar).
-
-This template is built with Next.js and is free for you to use or modify as you see fit.
-s
-
-
-## Getting started
-
-> [!TIP]
-> If you'd like to try this application without modification, you can deploy an instance in just a few clicks with [LiveKit Cloud Sandbox](https://cloud.livekit.io/projects/p_/sandbox/templates/voice-assistant-frontend).
-
-Run the following command to automatically clone this template.
-
-```bash
-lk app create --template voice-assistant-frontend
-```
-
-Then run the app with:
-
-```bash
-pnpm install
-pnpm dev
-```
-
-And open http://localhost:3000 in your browser.
-
-You'll also need an agent to speak with. Try our [Voice AI Quickstart](https://docs.livekit.io/start/voice-ai) for the easiest way to get started.
-
-> [!NOTE]
-> If you need to modify the LiveKit project credentials used, you can edit `.env.local` (copy from `.env.example` if you don't have one) to suit your needs.
-
-## Contributing
-
-This template is open source and we welcome contributions! Please open a PR or issue through GitHub, and don't forget to join us in the [LiveKit Community Slack](https://livekit.io/join-slack)!
diff --git a/base-frontend-template/app-config.ts b/base-frontend-template/app-config.ts
deleted file mode 100644
index 9ec7ede2..00000000
--- a/base-frontend-template/app-config.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-import type { AppConfig } from './lib/types';
-
-export const APP_CONFIG_DEFAULTS: AppConfig = {
- companyName: 'LiveKit',
- pageTitle: 'LiveKit Voice Agent',
- pageDescription: 'A voice agent built with LiveKit',
-
- supportsChatInput: true,
- supportsVideoInput: true,
- supportsScreenShare: true,
-
- logo: '/lk-logo.svg',
- accent: '#002cf2',
- logoDark: '/lk-logo-dark.svg',
- accentDark: '#1fd5f9',
- startButtonText: 'Start call',
-};
diff --git a/base-frontend-template/components/app.tsx b/base-frontend-template/components/app.tsx
deleted file mode 100644
index 9de4bcbd..00000000
--- a/base-frontend-template/components/app.tsx
+++ /dev/null
@@ -1,107 +0,0 @@
-'use client';
-
-import { useEffect, useMemo, useState } from 'react';
-import { Room, RoomEvent } from 'livekit-client';
-import { motion } from 'motion/react';
-import { RoomAudioRenderer, RoomContext, StartAudio } from '@livekit/components-react';
-import { toastAlert } from '@/components/alert-toast';
-import { SessionView } from '@/components/session-view';
-import { Toaster } from '@/components/ui/sonner';
-import { Welcome } from '@/components/welcome';
-import useConnectionDetails from '@/hooks/useConnectionDetails';
-import type { AppConfig } from '@/lib/types';
-
-const MotionWelcome = motion.create(Welcome);
-const MotionSessionView = motion.create(SessionView);
-
-interface AppProps {
- appConfig: AppConfig;
-}
-
-export function App({ appConfig }: AppProps) {
- const [sessionStarted, setSessionStarted] = useState(false);
- const { supportsChatInput, supportsVideoInput, supportsScreenShare, startButtonText } = appConfig;
-
- const capabilities = {
- supportsChatInput,
- supportsVideoInput,
- supportsScreenShare,
- };
-
- const { connectionDetails, refreshConnectionDetails } = useConnectionDetails();
-
- const room = useMemo(() => new Room(), []);
-
- useEffect(() => {
- const onDisconnected = () => {
- setSessionStarted(false);
- refreshConnectionDetails();
- };
- const onMediaDevicesError = (error: Error) => {
- toastAlert({
- title: 'Encountered an error with your media devices',
- description: `${error.name}: ${error.message}`,
- });
- };
- room.on(RoomEvent.MediaDevicesError, onMediaDevicesError);
- room.on(RoomEvent.Disconnected, onDisconnected);
- return () => {
- room.off(RoomEvent.Disconnected, onDisconnected);
- room.off(RoomEvent.MediaDevicesError, onMediaDevicesError);
- };
- }, [room, refreshConnectionDetails]);
-
- useEffect(() => {
- if (sessionStarted && room.state === 'disconnected' && connectionDetails) {
- Promise.all([
- room.localParticipant.setMicrophoneEnabled(true, undefined, {
- preConnectBuffer: true,
- }),
- room.connect(connectionDetails.serverUrl, connectionDetails.participantToken),
- ]).catch((error) => {
- toastAlert({
- title: 'There was an error connecting to the agent',
- description: `${error.name}: ${error.message}`,
- });
- });
- }
- return () => {
- room.disconnect();
- };
- }, [room, sessionStarted, connectionDetails]);
-
- return (
- <>
-
-
- {messages.map((message: ReceivedChatMessage) => (
-
-
- ))}
-
-
-
- {/* skrim */}
-
-
-
-
-
-
-
-
- 0 ? 0 : 0.8,
- duration: messages.length > 0 ? 0.2 : 0.5,
- },
- }}
- aria-hidden={messages.length > 0}
- className={cn(
- 'absolute inset-x-0 -top-12 text-center',
- sessionStarted && messages.length === 0 && 'pointer-events-none'
- )}
- >
-
-
-
- {/* skrim */}
-
- - Agent is listening, ask it a question -
-