diff --git a/app/routes/room.$roomId.tsx b/app/routes/room.$roomId.tsx
index b86887e..73790a3 100644
--- a/app/routes/room.$roomId.tsx
+++ b/app/routes/room.$roomId.tsx
@@ -38,7 +38,7 @@ export const loader: LoaderFunction = async (args) => {
   return {};
 };
 
-export default function Room() {
+function RoomContent() {
   const { user } = useUser();
   const params = useParams();
   const roomId = params.roomId;
@@ -477,3 +477,15 @@ export default function Room() {
     );
   }
 }
+
+export default function Room() {
+  const client = new Ably.Realtime.Promise({
+    authUrl: "/api/ably",
+  });
+
+  return (
+    <AblyProvider client={client}>
+      <RoomContent />
+    </AblyProvider>
+  );
+}