openai
diff --git a/‎README.md
+6-2 b/‎README.md
+6-2
diff --git a/‎client/entry-client.jsx
+11 b/‎client/entry-client.jsx
+11
diff --git a/‎client/entry-server.jsx
+12 b/‎client/entry-server.jsx
+12
diff --git a/‎client/index.html
+3-14 b/‎client/index.html
+3-14
@@ -24,11 +24,15 @@ npm run dev
 
 This should start the console application on [http://localhost:3000](http://localhost:3000).
 
-_Note:_ The `server.js` file uses [@fastify/vite](https://fastify-vite.dev/) to build and serve the React frontend contained in the [`/client`](./client) folder. You can find the configuration in the [`vite.config.js`](./vite.config.js) file.
+This application is a minimal template that uses [express](https://expressjs.com/) to serve the React frontend contained in the [`/client`](./client) folder. The server is configured to use [vite](https://vitejs.dev/) to build the React frontend.
+
+This application shows how to send and receive Realtime API events over the WebRTC data channel and configure client-side function calling. You can also view the JSON payloads for client and server events using the logging panel in the UI.
+
+For a more comprehensive example, see the [OpenAI Realtime Agents](https://github.com/openai/openai-realtime-agents) demo built with Next.js, using an agentic architecture inspired by [OpenAI Swarm](https://github.com/openai/swarm).
 
 ## Previous WebSockets version
 
-The previous version of this application that used WebSockets on the client (not recommended in client-side browsers) [can be found here](https://github.com/openai/openai-realtime-console/tree/websockets).
+The previous version of this application that used WebSockets on the client (not recommended in browsers) [can be found here](https://github.com/openai/openai-realtime-console/tree/websockets).
 
 ## License
 
 
@@ -0,0 +1,11 @@
+import { StrictMode } from "react";
+import ReactDOM from "react-dom/client";
+import App from "./components/App";
+import "./base.css";
+
+ReactDOM.hydrateRoot(
+  document.getElementById("root"),
+  <StrictMode>
+    <App />
+  </StrictMode>,
+);
@@ -0,0 +1,12 @@
+import { StrictMode } from "react";
+import { renderToString } from "react-dom/server";
+import App from "./components/App";
+
+export function render() {
+  const html = renderToString(
+    <StrictMode>
+      <App />
+    </StrictMode>,
+  );
+  return { html };
+}
@@ -8,22 +8,11 @@
     <link rel="icon" href="/assets/openai-logomark.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <link rel="stylesheet" href="/base.css" />
-    <link
-      rel="stylesheet"
-      href="https://unpkg.com/[email protected]/dist/leaflet.css"
-      integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ=="
-      crossorigin=""
-    />
-    <script
-      src="https://unpkg.com/[email protected]/dist/leaflet.js"
-      integrity="sha512-gZwIG9x3wUXg2hdXF6+rVkLF/0Vi9U8D2Ntg4Ga5I5BZpVkVxlJWbSQtXPSiUTtC0TjtGOmxa1AJPuV0CPthew=="
-      crossorigin=""
-    ></script>
     <!-- head -->
   </head>
   <body>
-    <div id="root"><!-- element --></div>
+    <div id="root"><!--ssr-outlet--></div>
+    <!-- hydration -->
+    <script type="module" src="./entry-client.jsx"></script>
   </body>
-  <!-- hydration -->
-  <script type="module" src="/:mount.js"></script>
 </html>