diff --git a/addons-web-sdk/samples/hello-world-react-ts-vite/src/components/Game.tsx b/addons-web-sdk/samples/hello-world-react-ts-vite/src/components/Game.tsx
deleted file mode 100644
index 1972d4a..0000000
--- a/addons-web-sdk/samples/hello-world-react-ts-vite/src/components/Game.tsx
+++ /dev/null
@@ -1,10 +0,0 @@
-function Game() {
-  return (
-    <>
-      <div>This is the Add-on Main Stage. Everyone in the call can see this.</div>
-      <div>Hello, world!</div>
-    </>
-  )
-}
-
-export default Game;
diff --git a/addons-web-sdk/samples/hello-world-react-ts-vite/src/components/MainStage.tsx b/addons-web-sdk/samples/hello-world-react-ts-vite/src/components/MainStage.tsx
new file mode 100644
index 0000000..0425e4b
--- /dev/null
+++ b/addons-web-sdk/samples/hello-world-react-ts-vite/src/components/MainStage.tsx
@@ -0,0 +1,32 @@
+import { useEffect } from 'react';
+import { meet } from '@googleworkspace/meet-addons/meet.addons';
+import { CLOUD_PROJECT_NUMBER } from '../constants';
+
+/**
+ * See: https://developers.google.com/meet/add-ons/guides/overview#main-stage
+ */
+function MainStage() {
+  useEffect(() => {
+    /**
+     * Prepares the Add-on Main Stage Client, which signals that the add-on has
+     * successfully launched in the main stage.
+     */
+    async function initializeMainStage() {
+      const session = await meet.addon.createAddonSession({
+        cloudProjectNumber: CLOUD_PROJECT_NUMBER,
+      });
+      await session.createSidePanelClient();
+    }
+    initializeMainStage();
+  }, []);
+
+
+  return (
+    <>
+      <div>This is the Add-on Main Stage. Everyone in the call can see this.</div>
+      <div>Hello, world!</div>
+    </>
+  )
+}
+
+export default MainStage;
diff --git a/addons-web-sdk/samples/hello-world-react-ts-vite/src/components/Setup.tsx b/addons-web-sdk/samples/hello-world-react-ts-vite/src/components/SidePanel.tsx
similarity index 78%
rename from addons-web-sdk/samples/hello-world-react-ts-vite/src/components/Setup.tsx
rename to addons-web-sdk/samples/hello-world-react-ts-vite/src/components/SidePanel.tsx
index b26cc11..be60cb4 100644
--- a/addons-web-sdk/samples/hello-world-react-ts-vite/src/components/Setup.tsx
+++ b/addons-web-sdk/samples/hello-world-react-ts-vite/src/components/SidePanel.tsx
@@ -2,9 +2,13 @@ import { useEffect, useState } from 'react';
 import { meet } from '@googleworkspace/meet-addons/meet.addons';
 import { CLOUD_PROJECT_NUMBER, MAIN_STAGE_URL } from '../constants';
 
-function Setup() {
+/**
+ * See: https://developers.google.com/meet/add-ons/guides/overview#side-panel
+ */
+function SidePanel() {
   const [sidePanelClient, setSidePanelClient] = useState(null);
 
+  // Launches the main stage when the main button is clicked.
   async function startCollaboration(e) {
     if (!sidePanelClient) {
       throw new Error("Side Panel is not yet initialized!");
@@ -13,6 +17,9 @@ function Setup() {
   }
 
   useEffect(() => {
+    /**
+     * Prepares the Add-on Side Panel Client.
+     */
     async function setUpAddon() {
       const session = await meet.addon.createAddonSession({
         cloudProjectNumber: CLOUD_PROJECT_NUMBER,
@@ -30,4 +37,4 @@ function Setup() {
   )
 }
 
-export default Setup;
+export default SidePanel;
diff --git a/addons-web-sdk/samples/hello-world-react-ts-vite/src/mainStage.tsx b/addons-web-sdk/samples/hello-world-react-ts-vite/src/mainStage.tsx
index ee56f1b..a5ea490 100644
--- a/addons-web-sdk/samples/hello-world-react-ts-vite/src/mainStage.tsx
+++ b/addons-web-sdk/samples/hello-world-react-ts-vite/src/mainStage.tsx
@@ -1,9 +1,10 @@
 import { StrictMode } from 'react'
 import { createRoot } from 'react-dom/client'
-import Game from './components/Game.tsx'
+import MainStage from './components/MainStage.tsx'
 
+// Renders the MainStage as a React component.
 createRoot(document.getElementById('root')!).render(
   <StrictMode>
-    <Game />
+    <MainStage />
   </StrictMode>,
-)
\ No newline at end of file
+)
diff --git a/addons-web-sdk/samples/hello-world-react-ts-vite/src/sidePanel.tsx b/addons-web-sdk/samples/hello-world-react-ts-vite/src/sidePanel.tsx
index 7e24337..b26ef5f 100644
--- a/addons-web-sdk/samples/hello-world-react-ts-vite/src/sidePanel.tsx
+++ b/addons-web-sdk/samples/hello-world-react-ts-vite/src/sidePanel.tsx
@@ -1,9 +1,10 @@
 import { StrictMode } from 'react'
 import { createRoot } from 'react-dom/client'
-import Setup from './components/Setup.tsx'
+import SidePanel from './components/SidePanel.tsx'
 
+// Renders the SidePanel as a React component.
 createRoot(document.getElementById('root')!).render(
   <StrictMode>
-    <Setup />
+    <SidePanel />
   </StrictMode>,
-)
\ No newline at end of file
+)