Remove sandbox code from agent-starter-react

.env.example

@@ -7,7 +7,3 @@ LIVEKIT_URL=wss://<project-subdomain>.livekit.cloud
 # Leave AGENT_NAME blank to enable automatic dispatch
 # Provide an agent name to enable explicit dispatch
 AGENT_NAME=
-
-# Internally used environment variables
-NEXT_PUBLIC_APP_CONFIG_ENDPOINT=
-SANDBOX_ID=

README.md

@@ -19,7 +19,7 @@ Also available for:
 - Multiple audio visualizer styles (`bar`, `grid`, `radial`, `wave`, `aura`)
 - Virtual avatar integration
 - Light/dark theme switching with system preference detection
-- Customizable branding, colors, and UI text via configuration
+- Customizable branding, colors, and UI text
 
 This template is built with Next.js and is free for you to use or modify as you see fit.
 
@@ -102,56 +102,11 @@ You'll also need an agent to speak with. Try our starter agent for [Python](http
 
 ## Configuration
 
-This starter is designed to be flexible so you can adapt it to your specific agent use case. You can easily configure it to work with different types of inputs and outputs:
-
-#### Example: App configuration (`app-config.ts`)
-
-```ts
-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,
-  isPreConnectBufferEnabled: true,
-
-  logo: '/lk-logo.svg',
-  accent: '#002cf2',
-  logoDark: '/lk-logo-dark.svg',
-  accentDark: '#1fd5f9',
-  startButtonText: 'Start call',
-
-  // optional: audio visualization configuration
-  // audioVisualizerColor: '#002cf2',
-  // audioVisualizerColorDark: '#1fd5f9',
-  // audioVisualizerType: 'bar',
-  // audioVisualizerBarCount: 5,
-  // audioVisualizerType: 'radial',
-  // audioVisualizerRadialBarCount: 24,
-  // audioVisualizerRadialRadius: 100,
-  // audioVisualizerType: 'grid',
-  // audioVisualizerGridRowCount: 25,
-  // audioVisualizerGridColumnCount: 25,
-  // audioVisualizerType: 'wave',
-  // audioVisualizerWaveLineWidth: 3,
-  // audioVisualizerType: 'aura',
-  // audioVisualizerAuraColorShift: 0.3,
-
-  // agent dispatch configuration
-  agentName: undefined,
-
-  // LiveKit Cloud Sandbox configuration
-  sandboxId: undefined,
-};
-```
-
-You can update these values in [`app-config.ts`](./app-config.ts) to customize branding, features, and UI text for your deployment.
+This starter is designed to be flexible so you can adapt it to your specific agent use case. Branding, feature toggles, and UI text are set directly in the components that use them — see [`app/layout.tsx`](./app/layout.tsx) for branding (logo, colors, page title/description) and [`components/app/view-controller.tsx`](./components/app/view-controller.tsx) for feature toggles and the audio visualizer.
 
 #### Audio visualizer presets
 
-Set `audioVisualizerType` in [`app-config.ts`](./app-config.ts) to switch visualizer styles:
+Set `audioVisualizerType` in [`components/app/view-controller.tsx`](./components/app/view-controller.tsx) to switch visualizer styles:
 
 - `bar` (default): vertical bars with optional `audioVisualizerBarCount`
 - `grid`: dot grid with `audioVisualizerGridRowCount` and `audioVisualizerGridColumnCount`
@@ -161,10 +116,6 @@ Set `audioVisualizerType` in [`app-config.ts`](./app-config.ts) to switch visual
 
 Use `audioVisualizerColor` to set a shared accent color across all visualizer modes.
 
-> [!NOTE]
-> The `sandboxId` is for the LiveKit Cloud Sandbox environment.
-> It is not used for local development.
-
 #### Environment Variables
 
 You'll also need to configure your LiveKit credentials in `.env.local` (copy `.env.example` if you don't have one):

app/layout.tsx

@@ -1,10 +1,8 @@
 import { Public_Sans } from 'next/font/google';
 import localFont from 'next/font/local';
-import { headers } from 'next/headers';
 import { ThemeProvider } from '@/components/app/theme-provider';
 import { ThemeToggle } from '@/components/app/theme-toggle';
 import { cn } from '@/lib/shadcn/utils';
-import { getAppConfig, getStyles } from '@/lib/utils';
 import '@/styles/globals.css';
 
 const publicSans = Public_Sans({
@@ -43,12 +41,7 @@ interface RootLayoutProps {
   children: React.ReactNode;
 }
 
-export default async function RootLayout({ children }: RootLayoutProps) {
-  const hdrs = await headers();
-  const appConfig = await getAppConfig(hdrs);
-  const styles = getStyles(appConfig);
-  const { pageTitle, pageDescription, companyName, logo, logoDark } = appConfig;
-
+export default function RootLayout({ children }: RootLayoutProps) {
   return (
     <html
       lang="en"
@@ -60,9 +53,10 @@ export default async function RootLayout({ children }: RootLayoutProps) {
       )}
     >
       <head>
-        {styles && <style>{styles}</style>}
-        <title>{pageTitle}</title>
-        <meta name="description" content={pageDescription} />
+        <style>{`:root { --primary: #002cf2; --primary-hover: color-mix(in srgb, #002cf2 80%, #000); }
+.dark { --primary: #1fd5f9; --primary-hover: color-mix(in srgb, #1fd5f9 80%, #000); }`}</style>
+        <title>LiveKit Voice Agent</title>
+        <meta name="description" content="A voice agent built with LiveKit" />
       </head>
       <body className="overflow-x-hidden">
         <ThemeProvider
@@ -79,11 +73,11 @@ export default async function RootLayout({ children }: RootLayoutProps) {
               className="scale-100 transition-transform duration-300 hover:scale-110"
             >
               {/* eslint-disable-next-line @next/next/no-img-element */}
-              <img src={logo} alt={`${companyName} Logo`} className="block size-6 dark:hidden" />
+              <img src="/lk-logo.svg" alt="LiveKit Logo" className="block size-6 dark:hidden" />
               {/* eslint-disable-next-line @next/next/no-img-element */}
               <img
-                src={logoDark ?? logo}
-                alt={`${companyName} Logo`}
+                src="/lk-logo-dark.svg"
+                alt="LiveKit Logo"
                 className="hidden size-6 dark:block"
               />
             </a>