diff --git a/app/ui/layout.tsx b/app/ui/layout.tsx
index c7202785..67b0967a 100644
--- a/app/ui/layout.tsx
+++ b/app/ui/layout.tsx
@@ -1,20 +1,23 @@
-import * as React from 'react';
 import { headers } from 'next/headers';
-import { SessionProvider } from '@/components/app/session-provider';
+import { AppSessionProvider } from '@/hooks/useAppSession';
 import { getAppConfig } from '@/lib/utils';
 
-export default async function ComponentsLayout({ children }: { children: React.ReactNode }) {
+interface LayoutProps {
+  children: React.ReactNode;
+}
+
+export default async function Layout({ children }: LayoutProps) {
   const hdrs = await headers();
   const appConfig = await getAppConfig(hdrs);
 
   return (
-    <SessionProvider appConfig={appConfig}>
+    <AppSessionProvider appConfig={appConfig}>
       <div className="bg-muted/20 min-h-svh p-8">
         <div className="mx-auto max-w-3xl space-y-8">
           <header className="space-y-2">
             <h1 className="text-5xl font-bold tracking-tight">LiveKit UI</h1>
             <p className="text-muted-foreground max-w-80 leading-tight text-pretty">
-              A set of UI components for building LiveKit-powered voice experiences.
+              A set of UI Layouts for building LiveKit-powered voice experiences.
             </p>
             <p className="text-muted-foreground max-w-prose text-balance">
               Built with{' '}
@@ -37,6 +40,6 @@ export default async function ComponentsLayout({ children }: { children: React.R
           <main className="space-y-20">{children}</main>
         </div>
       </div>
-    </SessionProvider>
+    </AppSessionProvider>
   );
 }
diff --git a/components/app/app.tsx b/components/app/app.tsx
index b390e062..9514664b 100644
--- a/components/app/app.tsx
+++ b/components/app/app.tsx
@@ -2,9 +2,9 @@
 
 import { RoomAudioRenderer, StartAudio } from '@livekit/components-react';
 import type { AppConfig } from '@/app-config';
-import { SessionProvider } from '@/components/app/session-provider';
 import { ViewController } from '@/components/app/view-controller';
 import { Toaster } from '@/components/livekit/toaster';
+import { AppSessionProvider } from '@/hooks/useAppSession';
 
 interface AppProps {
   appConfig: AppConfig;
@@ -12,13 +12,13 @@ interface AppProps {
 
 export function App({ appConfig }: AppProps) {
   return (
-    <SessionProvider appConfig={appConfig}>
+    <AppSessionProvider appConfig={appConfig}>
       <main className="grid h-svh grid-cols-1 place-content-center">
-        <ViewController />
+        <ViewController appConfig={appConfig} />
       </main>
       <StartAudio label="Start Audio" />
       <RoomAudioRenderer />
       <Toaster />
-    </SessionProvider>
+    </AppSessionProvider>
   );
 }
diff --git a/components/app/chat-transcript.tsx b/components/app/chat-transcript.tsx
index b67d0a67..8a897182 100644
--- a/components/app/chat-transcript.tsx
+++ b/components/app/chat-transcript.tsx
@@ -1,7 +1,7 @@
 'use client';
 
 import { AnimatePresence, type HTMLMotionProps, motion } from 'motion/react';
-import { type ReceivedChatMessage } from '@livekit/components-react';
+import { type ReceivedMessage } from '@livekit/components-react';
 import { ChatEntry } from '@/components/livekit/chat-entry';
 
 const MotionContainer = motion.create('div');
@@ -50,7 +50,7 @@ const MESSAGE_MOTION_PROPS = {
 
 interface ChatTranscriptProps {
   hidden?: boolean;
-  messages?: ReceivedChatMessage[];
+  messages?: ReceivedMessage[];
 }
 
 export function ChatTranscript({
@@ -62,10 +62,9 @@ export function ChatTranscript({
     <AnimatePresence>
       {!hidden && (
         <MotionContainer {...CONTAINER_MOTION_PROPS} {...props}>
-          {messages.map(({ id, timestamp, from, message, editTimestamp }: ReceivedChatMessage) => {
+          {messages.map(({ id, timestamp, from, message }: ReceivedMessage) => {
             const locale = navigator?.language ?? 'en-US';
             const messageOrigin = from?.isLocal ? 'local' : 'remote';
-            const hasBeenEdited = !!editTimestamp;
 
             return (
               <MotionChatEntry
@@ -74,7 +73,6 @@ export function ChatTranscript({
                 timestamp={timestamp}
                 message={message}
                 messageOrigin={messageOrigin}
-                hasBeenEdited={hasBeenEdited}
                 {...MESSAGE_MOTION_PROPS}
               />
             );
diff --git a/components/app/preconnect-message.tsx b/components/app/preconnect-message.tsx
index 719c3813..f28044ea 100644
--- a/components/app/preconnect-message.tsx
+++ b/components/app/preconnect-message.tsx
@@ -1,7 +1,7 @@
 'use client';
 
 import { AnimatePresence, motion } from 'motion/react';
-import { type ReceivedChatMessage } from '@livekit/components-react';
+import { type ReceivedMessage } from '@livekit/components-react';
 import { ShimmerText } from '@/components/livekit/shimmer-text';
 import { cn } from '@/lib/utils';
 
@@ -32,7 +32,7 @@ const VIEW_MOTION_PROPS = {
 };
 
 interface PreConnectMessageProps {
-  messages?: ReceivedChatMessage[];
+  messages?: ReceivedMessage[];
   className?: string;
 }
 
diff --git a/components/app/session-provider.tsx b/components/app/session-provider.tsx
deleted file mode 100644
index 1906f4ca..00000000
--- a/components/app/session-provider.tsx
+++ /dev/null
@@ -1,41 +0,0 @@
-'use client';
-
-import { createContext, useContext, useMemo } from 'react';
-import { RoomContext } from '@livekit/components-react';
-import { APP_CONFIG_DEFAULTS, type AppConfig } from '@/app-config';
-import { useRoom } from '@/hooks/useRoom';
-
-const SessionContext = createContext<{
-  appConfig: AppConfig;
-  isSessionActive: boolean;
-  startSession: () => void;
-  endSession: () => void;
-}>({
-  appConfig: APP_CONFIG_DEFAULTS,
-  isSessionActive: false,
-  startSession: () => {},
-  endSession: () => {},
-});
-
-interface SessionProviderProps {
-  appConfig: AppConfig;
-  children: React.ReactNode;
-}
-
-export const SessionProvider = ({ appConfig, children }: SessionProviderProps) => {
-  const { room, isSessionActive, startSession, endSession } = useRoom(appConfig);
-  const contextValue = useMemo(
-    () => ({ appConfig, isSessionActive, startSession, endSession }),
-    [appConfig, isSessionActive, startSession, endSession]
-  );
-
-  return (
-    <RoomContext.Provider value={room}>
-      <SessionContext.Provider value={contextValue}>{children}</SessionContext.Provider>
-    </RoomContext.Provider>
-  );
-};
-
-export function useSession() {
-  return useContext(SessionContext);
-}
diff --git a/components/app/session-view.tsx b/components/app/session-view.tsx
index 460baea1..fd36e252 100644
--- a/components/app/session-view.tsx
+++ b/components/app/session-view.tsx
@@ -2,6 +2,7 @@
 
 import React, { useEffect, useRef, useState } from 'react';
 import { motion } from 'motion/react';
+import { useSessionMessages } from '@livekit/components-react';
 import type { AppConfig } from '@/app-config';
 import { ChatTranscript } from '@/components/app/chat-transcript';
 import { PreConnectMessage } from '@/components/app/preconnect-message';
@@ -10,15 +11,12 @@ import {
   AgentControlBar,
   type ControlBarControls,
 } from '@/components/livekit/agent-control-bar/agent-control-bar';
-import { useChatMessages } from '@/hooks/useChatMessages';
-import { useConnectionTimeout } from '@/hooks/useConnectionTimout';
-import { useDebugMode } from '@/hooks/useDebug';
+import { useAppSession } from '@/hooks/useAppSession';
 import { cn } from '@/lib/utils';
 import { ScrollArea } from '../livekit/scroll-area/scroll-area';
 
 const MotionBottom = motion.create('div');
 
-const IN_DEVELOPMENT = process.env.NODE_ENV !== 'production';
 const BOTTOM_VIEW_MOTION_PROPS = {
   variants: {
     visible: {
@@ -58,6 +56,7 @@ export function Fade({ top = false, bottom = false, className }: FadeProps) {
     />
   );
 }
+
 interface SessionViewProps {
   appConfig: AppConfig;
 }
@@ -66,10 +65,8 @@ export const SessionView = ({
   appConfig,
   ...props
 }: React.ComponentProps<'section'> & SessionViewProps) => {
-  useConnectionTimeout(200_000);
-  useDebugMode({ enabled: IN_DEVELOPMENT });
-
-  const messages = useChatMessages();
+  const { session, isSessionActive, endSession } = useAppSession();
+  const { messages } = useSessionMessages(session);
   const [chatOpen, setChatOpen] = useState(false);
   const scrollAreaRef = useRef<HTMLDivElement>(null);
 
@@ -90,6 +87,11 @@ export const SessionView = ({
     }
   }, [messages]);
 
+  const handleDisconnect = () => {
+    // pass false so we can manually end the session when the exit animation completes
+    endSession(false);
+  };
+
   return (
     <section className="bg-background relative z-10 h-full w-full overflow-hidden" {...props}>
       {/* Chat Transcript */}
@@ -100,7 +102,7 @@ export const SessionView = ({
         )}
       >
         <Fade top className="absolute inset-x-4 top-0 h-40" />
-        <ScrollArea ref={scrollAreaRef} className="px-4 pt-40 pb-[150px] md:px-6 md:pb-[180px]">
+        <ScrollArea ref={scrollAreaRef} className="px-4 pt-40 pb-[150px] md:px-6 md:pb-[200px]">
           <ChatTranscript
             hidden={!chatOpen}
             messages={messages}
@@ -122,7 +124,12 @@ export const SessionView = ({
         )}
         <div className="bg-background relative mx-auto max-w-2xl pb-3 md:pb-12">
           <Fade bottom className="absolute inset-x-0 top-0 h-4 -translate-y-full" />
-          <AgentControlBar controls={controls} onChatOpenChange={setChatOpen} />
+          <AgentControlBar
+            controls={controls}
+            isSessionActive={isSessionActive}
+            onDisconnect={handleDisconnect}
+            onChatOpenChange={setChatOpen}
+          />
         </div>
       </MotionBottom>
     </section>
diff --git a/components/app/view-controller.tsx b/components/app/view-controller.tsx
index 4519c44f..89714bfc 100644
--- a/components/app/view-controller.tsx
+++ b/components/app/view-controller.tsx
@@ -1,11 +1,16 @@
 'use client';
 
-import { useRef } from 'react';
-import { AnimatePresence, motion } from 'motion/react';
-import { useRoomContext } from '@livekit/components-react';
-import { useSession } from '@/components/app/session-provider';
+import { useCallback } from 'react';
+import { AnimatePresence, type AnimationDefinition, motion } from 'motion/react';
+import { useSessionContext } from '@livekit/components-react';
+import { AppConfig } from '@/app-config';
 import { SessionView } from '@/components/app/session-view';
 import { WelcomeView } from '@/components/app/welcome-view';
+import { useAgentErrors } from '@/hooks/useAgentErrors';
+import { useAppSession } from '@/hooks/useAppSession';
+import { useDebugMode } from '@/hooks/useDebug';
+
+const IN_DEVELOPMENT = process.env.NODE_ENV !== 'production';
 
 const MotionWelcomeView = motion.create(WelcomeView);
 const MotionSessionView = motion.create(SessionView);
@@ -28,20 +33,26 @@ const VIEW_MOTION_PROPS = {
   },
 };
 
-export function ViewController() {
-  const room = useRoomContext();
-  const isSessionActiveRef = useRef(false);
-  const { appConfig, isSessionActive, startSession } = useSession();
+interface ViewControllerProps {
+  appConfig: AppConfig;
+}
+
+export function ViewController({ appConfig }: ViewControllerProps) {
+  const session = useSessionContext();
+  const { isSessionActive, startSession } = useAppSession();
 
-  // animation handler holds a reference to stale isSessionActive value
-  isSessionActiveRef.current = isSessionActive;
+  useDebugMode({ enabled: IN_DEVELOPMENT });
+  useAgentErrors();
 
-  // disconnect room after animation completes
-  const handleAnimationComplete = () => {
-    if (!isSessionActiveRef.current && room.state !== 'disconnected') {
-      room.disconnect();
-    }
-  };
+  const handleAnimationComplete = useCallback(
+    (definition: AnimationDefinition) => {
+      // manually end the session when the exit animation completes
+      if (definition === 'hidden') {
+        session.end();
+      }
+    },
+    [session]
+  );
 
   return (
     <AnimatePresence mode="wait">
@@ -50,7 +61,7 @@ export function ViewController() {
         <MotionWelcomeView
           key="welcome"
           {...VIEW_MOTION_PROPS}
-          startButtonText={appConfig.startButtonText}
+          startButtonText={appConfig?.startButtonText ?? ''}
           onStartCall={startSession}
         />
       )}
diff --git a/components/livekit/agent-control-bar/agent-control-bar.tsx b/components/livekit/agent-control-bar/agent-control-bar.tsx
index 1b53b1c4..22dc7d4e 100644
--- a/components/livekit/agent-control-bar/agent-control-bar.tsx
+++ b/components/livekit/agent-control-bar/agent-control-bar.tsx
@@ -4,7 +4,6 @@ import { type HTMLAttributes, useCallback, useState } from 'react';
 import { Track } from 'livekit-client';
 import { useChat, useRemoteParticipants } from '@livekit/components-react';
 import { ChatTextIcon, PhoneDisconnectIcon } from '@phosphor-icons/react/dist/ssr';
-import { useSession } from '@/components/app/session-provider';
 import { TrackToggle } from '@/components/livekit/agent-control-bar/track-toggle';
 import { Button } from '@/components/livekit/button';
 import { Toggle } from '@/components/livekit/toggle';
@@ -23,8 +22,8 @@ export interface ControlBarControls {
 }
 
 export interface AgentControlBarProps extends UseInputControlsProps {
+  isSessionActive?: boolean;
   controls?: ControlBarControls;
-  onDisconnect?: () => void;
   onChatOpenChange?: (open: boolean) => void;
   onDeviceError?: (error: { source: Track.Source; error: Error }) => void;
 }
@@ -36,6 +35,7 @@ export function AgentControlBar({
   controls,
   saveUserChoices = true,
   className,
+  isSessionActive = false,
   onDisconnect,
   onDeviceError,
   onChatOpenChange,
@@ -45,8 +45,6 @@ export function AgentControlBar({
   const participants = useRemoteParticipants();
   const [chatOpen, setChatOpen] = useState(false);
   const publishPermissions = usePublishPermissions();
-  const { isSessionActive, endSession } = useSession();
-
   const {
     micTrackRef,
     cameraToggle,
@@ -70,11 +68,6 @@ export function AgentControlBar({
     [onChatOpenChange, setChatOpen]
   );
 
-  const handleDisconnect = useCallback(async () => {
-    endSession();
-    onDisconnect?.();
-  }, [endSession, onDisconnect]);
-
   const visibleControls = {
     leave: controls?.leave ?? true,
     microphone: controls?.microphone ?? publishPermissions.microphone,
@@ -164,7 +157,7 @@ export function AgentControlBar({
         {visibleControls.leave && (
           <Button
             variant="destructive"
-            onClick={handleDisconnect}
+            onClick={onDisconnect}
             disabled={!isSessionActive}
             className="font-mono"
           >
diff --git a/components/livekit/alert-toast.tsx b/components/livekit/alert-toast.tsx
index 0d09ccb8..239638f3 100644
--- a/components/livekit/alert-toast.tsx
+++ b/components/livekit/alert-toast.tsx
@@ -22,7 +22,7 @@ export function AlertToast(props: ToastProps) {
   const { title, description, id } = props;
 
   return (
-    <Alert onClick={() => sonnerToast.dismiss(id)} className="bg-accent">
+    <Alert onClick={() => sonnerToast.dismiss(id)} className="bg-accent w-full md:w-[364px]">
       <WarningIcon weight="bold" />
       <AlertTitle>{title}</AlertTitle>
       {description && <AlertDescription>{description}</AlertDescription>}
diff --git a/hooks/useAgentErrors.tsx b/hooks/useAgentErrors.tsx
new file mode 100644
index 00000000..16c7a707
--- /dev/null
+++ b/hooks/useAgentErrors.tsx
@@ -0,0 +1,44 @@
+import { useEffect } from 'react';
+import { useAgent } from '@livekit/components-react';
+import { toastAlert } from '@/components/livekit/alert-toast';
+import { useAppSession } from './useAppSession';
+
+export function useAgentErrors() {
+  const agent = useAgent();
+  const { isSessionActive, endSession } = useAppSession();
+
+  useEffect(() => {
+    if (isSessionActive && agent.state === 'failed') {
+      const reasons = agent.failureReasons;
+
+      toastAlert({
+        title: 'Session ended',
+        description: (
+          <>
+            {reasons.length > 1 && (
+              <ul className="list-inside list-disc">
+                {reasons.map((reason) => (
+                  <li key={reason}>{reason}</li>
+                ))}
+              </ul>
+            )}
+            {reasons.length === 1 && <p className="w-full">{reasons[0]}</p>}
+            <p className="w-full">
+              <a
+                target="_blank"
+                rel="noopener noreferrer"
+                href="https://docs.livekit.io/agents/start/voice-ai/"
+                className="whitespace-nowrap underline"
+              >
+                See quickstart guide
+              </a>
+              .
+            </p>
+          </>
+        ),
+      });
+
+      endSession();
+    }
+  }, [agent, isSessionActive, endSession]);
+}
diff --git a/hooks/useAppSession.tsx b/hooks/useAppSession.tsx
new file mode 100644
index 00000000..e0e989cc
--- /dev/null
+++ b/hooks/useAppSession.tsx
@@ -0,0 +1,115 @@
+'use client';
+
+import { createContext, useContext, useMemo, useState } from 'react';
+import { TokenSource } from 'livekit-client';
+import { SessionProvider, type UseSessionReturn, useSession } from '@livekit/components-react';
+import type { AppConfig } from '@/app-config';
+
+interface AppSessionContextType {
+  session?: UseSessionReturn;
+  isSessionActive: boolean;
+  startSession: (startSession?: boolean) => void;
+  endSession: (endSession?: boolean) => void;
+}
+
+const AppSessionContext = createContext<AppSessionContextType>({
+  session: undefined,
+  isSessionActive: false,
+  startSession: () => {},
+  endSession: () => {},
+});
+
+export function useAppSession() {
+  const ctx = useContext(AppSessionContext);
+  if (!ctx) {
+    throw new Error('useAppSession must be used within a AppSessionProvider');
+  }
+  return ctx;
+}
+
+interface AppSessionProviderProps {
+  appConfig: AppConfig;
+  children: React.ReactNode;
+}
+
+export function AppSessionProvider({ appConfig, children }: AppSessionProviderProps) {
+  const [isSessionActive, setIsSessionActive] = useState(false);
+
+  const tokenSource = useMemo(() => {
+    if (typeof process.env.NEXT_PUBLIC_CONN_DETAILS_ENDPOINT === 'string') {
+      return TokenSource.custom(async () => {
+        const url = new URL(process.env.NEXT_PUBLIC_CONN_DETAILS_ENDPOINT!, window.location.origin);
+
+        try {
+          const res = await fetch(url.toString(), {
+            method: 'POST',
+            headers: {
+              'Content-Type': 'application/json',
+              'X-Sandbox-Id': appConfig.sandboxId ?? '',
+            },
+            body: JSON.stringify({
+              room_config: appConfig.agentName
+                ? {
+                    agents: [{ agent_name: appConfig.agentName }],
+                  }
+                : undefined,
+            }),
+          });
+          return await res.json();
+        } catch (error) {
+          console.error('Error fetching connection details:', error);
+          throw new Error('Error fetching connection details!');
+        }
+      });
+    }
+
+    return TokenSource.endpoint('/api/connection-details');
+  }, [appConfig]);
+
+  const sessionOptions = useMemo(
+    () => (appConfig.agentName ? { agentName: appConfig.agentName } : undefined),
+    [appConfig]
+  );
+
+  const session = useSession(tokenSource, sessionOptions);
+
+  const value = useMemo(
+    () => ({
+      isSessionActive,
+      /**
+       * Start the application session and optionally start the agent session.
+       *
+       * @param startSession - Whether to start the agent session automatically. Default is true.
+       * If startSession is passed in asfalse, you are opting to manually start the session.
+       */
+      startSession: (startSession = true) => {
+        setIsSessionActive(true);
+        if (startSession) {
+          session.start();
+        }
+      },
+      /**
+       * End the application session and optionally end the agent session.
+       *
+       * @param endSession - Whether to end the agent session automatically. Default is true.
+       * If endSession is passed in as false, you are opting to manually end the session.
+       */
+      endSession: (endSession = true) => {
+        setIsSessionActive(false);
+        if (endSession) {
+          session.end();
+        }
+      },
+    }),
+    // session object is not a stable reference
+    // TODO: add session object to dependencies
+    /* eslint-disable-next-line react-hooks/exhaustive-deps */
+    [isSessionActive]
+  );
+
+  return (
+    <SessionProvider session={session}>
+      <AppSessionContext.Provider value={value}>{children}</AppSessionContext.Provider>
+    </SessionProvider>
+  );
+}
diff --git a/hooks/useChatMessages.ts b/hooks/useChatMessages.ts
deleted file mode 100644
index 5cad96a8..00000000
--- a/hooks/useChatMessages.ts
+++ /dev/null
@@ -1,39 +0,0 @@
-import { useMemo } from 'react';
-import { Room } from 'livekit-client';
-import {
-  type ReceivedChatMessage,
-  type TextStreamData,
-  useChat,
-  useRoomContext,
-  useTranscriptions,
-} from '@livekit/components-react';
-
-function transcriptionToChatMessage(textStream: TextStreamData, room: Room): ReceivedChatMessage {
-  return {
-    id: textStream.streamInfo.id,
-    timestamp: textStream.streamInfo.timestamp,
-    message: textStream.text,
-    from:
-      textStream.participantInfo.identity === room.localParticipant.identity
-        ? room.localParticipant
-        : Array.from(room.remoteParticipants.values()).find(
-            (p) => p.identity === textStream.participantInfo.identity
-          ),
-  };
-}
-
-export function useChatMessages() {
-  const chat = useChat();
-  const room = useRoomContext();
-  const transcriptions: TextStreamData[] = useTranscriptions();
-
-  const mergedTranscriptions = useMemo(() => {
-    const merged: Array<ReceivedChatMessage> = [
-      ...transcriptions.map((transcription) => transcriptionToChatMessage(transcription, room)),
-      ...chat.chatMessages,
-    ];
-    return merged.sort((a, b) => a.timestamp - b.timestamp);
-  }, [transcriptions, chat.chatMessages, room]);
-
-  return mergedTranscriptions;
-}
diff --git a/hooks/useConnectionTimout.tsx b/hooks/useConnectionTimout.tsx
deleted file mode 100644
index 7a7c12f2..00000000
--- a/hooks/useConnectionTimout.tsx
+++ /dev/null
@@ -1,45 +0,0 @@
-import { useEffect } from 'react';
-import { type AgentState, useRoomContext, useVoiceAssistant } from '@livekit/components-react';
-import { toastAlert } from '@/components/livekit/alert-toast';
-
-function isAgentAvailable(agentState: AgentState) {
-  return agentState == 'listening' || agentState == 'thinking' || agentState == 'speaking';
-}
-
-export function useConnectionTimeout(timout = 20_000) {
-  const room = useRoomContext();
-  const { state: agentState } = useVoiceAssistant();
-
-  useEffect(() => {
-    const timeout = setTimeout(() => {
-      if (!isAgentAvailable(agentState)) {
-        const reason =
-          agentState === 'connecting'
-            ? 'Agent did not join the room. '
-            : 'Agent connected but did not complete initializing. ';
-
-        toastAlert({
-          title: 'Session ended',
-          description: (
-            <p className="w-full">
-              {reason}
-              <a
-                target="_blank"
-                rel="noopener noreferrer"
-                href="https://docs.livekit.io/agents/start/voice-ai/"
-                className="whitespace-nowrap underline"
-              >
-                See quickstart guide
-              </a>
-              .
-            </p>
-          ),
-        });
-
-        room.disconnect();
-      }
-    }, timout);
-
-    return () => clearTimeout(timeout);
-  }, [agentState, room, timout]);
-}
diff --git a/hooks/useRoom.ts b/hooks/useRoom.ts
deleted file mode 100644
index 177a5d55..00000000
--- a/hooks/useRoom.ts
+++ /dev/null
@@ -1,108 +0,0 @@
-import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import { Room, RoomEvent, TokenSource } from 'livekit-client';
-import { AppConfig } from '@/app-config';
-import { toastAlert } from '@/components/livekit/alert-toast';
-
-export function useRoom(appConfig: AppConfig) {
-  const aborted = useRef(false);
-  const room = useMemo(() => new Room(), []);
-  const [isSessionActive, setIsSessionActive] = useState(false);
-
-  useEffect(() => {
-    function onDisconnected() {
-      setIsSessionActive(false);
-    }
-
-    function onMediaDevicesError(error: Error) {
-      toastAlert({
-        title: 'Encountered an error with your media devices',
-        description: `${error.name}: ${error.message}`,
-      });
-    }
-
-    room.on(RoomEvent.Disconnected, onDisconnected);
-    room.on(RoomEvent.MediaDevicesError, onMediaDevicesError);
-
-    return () => {
-      room.off(RoomEvent.Disconnected, onDisconnected);
-      room.off(RoomEvent.MediaDevicesError, onMediaDevicesError);
-    };
-  }, [room]);
-
-  useEffect(() => {
-    return () => {
-      aborted.current = true;
-      room.disconnect();
-    };
-  }, [room]);
-
-  const tokenSource = useMemo(
-    () =>
-      TokenSource.custom(async () => {
-        const url = new URL(
-          process.env.NEXT_PUBLIC_CONN_DETAILS_ENDPOINT ?? '/api/connection-details',
-          window.location.origin
-        );
-
-        try {
-          const res = await fetch(url.toString(), {
-            method: 'POST',
-            headers: {
-              'Content-Type': 'application/json',
-              'X-Sandbox-Id': appConfig.sandboxId ?? '',
-            },
-            body: JSON.stringify({
-              room_config: appConfig.agentName
-                ? {
-                    agents: [{ agent_name: appConfig.agentName }],
-                  }
-                : undefined,
-            }),
-          });
-          return await res.json();
-        } catch (error) {
-          console.error('Error fetching connection details:', error);
-          throw new Error('Error fetching connection details!');
-        }
-      }),
-    [appConfig]
-  );
-
-  const startSession = useCallback(() => {
-    setIsSessionActive(true);
-
-    if (room.state === 'disconnected') {
-      const { isPreConnectBufferEnabled } = appConfig;
-      Promise.all([
-        room.localParticipant.setMicrophoneEnabled(true, undefined, {
-          preConnectBuffer: isPreConnectBufferEnabled,
-        }),
-        tokenSource
-          .fetch({ agentName: appConfig.agentName })
-          .then((connectionDetails) =>
-            room.connect(connectionDetails.serverUrl, connectionDetails.participantToken)
-          ),
-      ]).catch((error) => {
-        if (aborted.current) {
-          // Once the effect has cleaned up after itself, drop any errors
-          //
-          // These errors are likely caused by this effect rerunning rapidly,
-          // resulting in a previous run `disconnect` running in parallel with
-          // a current run `connect`
-          return;
-        }
-
-        toastAlert({
-          title: 'There was an error connecting to the agent',
-          description: `${error.name}: ${error.message}`,
-        });
-      });
-    }
-  }, [room, appConfig, tokenSource]);
-
-  const endSession = useCallback(() => {
-    setIsSessionActive(false);
-  }, []);
-
-  return { room, isSessionActive, startSession, endSession };
-}
diff --git a/package.json b/package.json
index 0c43a95f..35b7380c 100644
--- a/package.json
+++ b/package.json
@@ -11,7 +11,7 @@
     "format:check": "prettier --check ."
   },
   "dependencies": {
-    "@livekit/components-react": "^2.9.15",
+    "@livekit/components-react": "0.0.0-20251021151641",
     "@livekit/protocol": "^1.40.0",
     "@phosphor-icons/react": "^2.1.8",
     "@radix-ui/react-select": "^2.2.5",
@@ -29,7 +29,7 @@
     "next-themes": "^0.4.6",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
-    "sonner": "^2.0.3",
+    "sonner": "^2.0.7",
     "tailwind-merge": "^3.3.0"
   },
   "devDependencies": {
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 2a20acd1..69872980 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -9,8 +9,8 @@ importers:
   .:
     dependencies:
       '@livekit/components-react':
-        specifier: ^2.9.15
-        version: 2.9.15(@livekit/krisp-noise-filter@0.2.16(livekit-client@2.15.8(@types/dom-mediacapture-record@1.0.22)))(livekit-client@2.15.8(@types/dom-mediacapture-record@1.0.22))(react-dom@19.1.1(react@19.1.1))(react@19.1.1)(tslib@2.8.1)
+        specifier: 0.0.0-20251021151641
+        version: 0.0.0-20251021151641(@livekit/krisp-noise-filter@0.2.16(livekit-client@2.15.8(@types/dom-mediacapture-record@1.0.22)))(livekit-client@2.15.8(@types/dom-mediacapture-record@1.0.22))(react-dom@19.1.1(react@19.1.1))(react@19.1.1)(tslib@2.8.1)
       '@livekit/protocol':
         specifier: ^1.40.0
         version: 1.41.0
@@ -63,7 +63,7 @@ importers:
         specifier: ^19.0.0
         version: 19.1.1(react@19.1.1)
       sonner:
-        specifier: ^2.0.3
+        specifier: ^2.0.7
         version: 2.0.7(react-dom@19.1.1(react@19.1.1))(react@19.1.1)
       tailwind-merge:
         specifier: ^3.3.0
@@ -397,19 +397,19 @@ packages:
   '@jridgewell/trace-mapping@0.3.30':
     resolution: {integrity: sha512-GQ7Nw5G2lTu/BtHTKfXhKHok2WGetd4XYcVKGx00SjAk8GMwgJM3zr6zORiPGuOE+/vkc90KtTosSSvaCjKb2Q==}
 
-  '@livekit/components-core@0.12.10':
-    resolution: {integrity: sha512-lSGci8c8IB/qCi42g1tzNtDGpnBWH1XSSk/OA9Lzk7vqOG0LlkwD3zXfBeKfO2eWFmYRfrZ2GD59GaH2NtTgag==}
+  '@livekit/components-core@0.0.0-20251021151641':
+    resolution: {integrity: sha512-rvFLcJoKjqt7O/v8qbc8BWVUoi/y2kXY6JTxUZ8Vj5BSAYQfUCa2XTpJmSqf+wdt1XGT+9764+DrECPBSz5wbw==}
     engines: {node: '>=18'}
     peerDependencies:
-      livekit-client: ^2.13.3
+      livekit-client: ^2.15.8
       tslib: ^2.6.2
 
-  '@livekit/components-react@2.9.15':
-    resolution: {integrity: sha512-b+gA0sRJHMsyr/BoMBoY1vSXQmP3h5NmxZTUt+VG8xjzCYDjmUuiDUrKVwMIUoy1vK9I6uNfo+hp6qbLo84jfQ==}
+  '@livekit/components-react@0.0.0-20251021151641':
+    resolution: {integrity: sha512-8PlutF/UYX1+2Rp5J6gzUj8kySohqPOiVNYr7aUmRmIJqcbya/jA1mT5lrweGYGgD2Z8PEib1bntfpGiqmfq6Q==}
     engines: {node: '>=18'}
     peerDependencies:
       '@livekit/krisp-noise-filter': ^0.2.12 || ^0.3.0
-      livekit-client: ^2.13.3
+      livekit-client: ^2.15.8
       react: '>=18'
       react-dom: '>=18'
       tslib: ^2.6.2
@@ -2833,7 +2833,7 @@ snapshots:
       '@jridgewell/resolve-uri': 3.1.2
       '@jridgewell/sourcemap-codec': 1.5.5
 
-  '@livekit/components-core@0.12.10(livekit-client@2.15.8(@types/dom-mediacapture-record@1.0.22))(tslib@2.8.1)':
+  '@livekit/components-core@0.0.0-20251021151641(livekit-client@2.15.8(@types/dom-mediacapture-record@1.0.22))(tslib@2.8.1)':
     dependencies:
       '@floating-ui/dom': 1.6.13
       livekit-client: 2.15.8(@types/dom-mediacapture-record@1.0.22)
@@ -2841,10 +2841,12 @@ snapshots:
       rxjs: 7.8.2
       tslib: 2.8.1
 
-  '@livekit/components-react@2.9.15(@livekit/krisp-noise-filter@0.2.16(livekit-client@2.15.8(@types/dom-mediacapture-record@1.0.22)))(livekit-client@2.15.8(@types/dom-mediacapture-record@1.0.22))(react-dom@19.1.1(react@19.1.1))(react@19.1.1)(tslib@2.8.1)':
+  '@livekit/components-react@0.0.0-20251021151641(@livekit/krisp-noise-filter@0.2.16(livekit-client@2.15.8(@types/dom-mediacapture-record@1.0.22)))(livekit-client@2.15.8(@types/dom-mediacapture-record@1.0.22))(react-dom@19.1.1(react@19.1.1))(react@19.1.1)(tslib@2.8.1)':
     dependencies:
-      '@livekit/components-core': 0.12.10(livekit-client@2.15.8(@types/dom-mediacapture-record@1.0.22))(tslib@2.8.1)
+      '@livekit/components-core': 0.0.0-20251021151641(livekit-client@2.15.8(@types/dom-mediacapture-record@1.0.22))(tslib@2.8.1)
       clsx: 2.1.1
+      events: 3.3.0
+      jose: 6.1.0
       livekit-client: 2.15.8(@types/dom-mediacapture-record@1.0.22)
       react: 19.1.1
       react-dom: 19.1.1(react@19.1.1)