Use development token source instead of deprecated sandbox

README.md

@@ -37,17 +37,24 @@ The app is configured to connect to the LiveKit homepage agent by default, which
 
 To switch from the default agent to your own, you first need a LiveKit agent to speak with. For a no-code setup, use the [Agent Builder](https://docs.livekit.io/agents/start/builder/). For more customization, try our starter agent for [Python](https://github.com/livekit-examples/agent-starter-python), [Node.js](https://github.com/livekit-examples/agent-starter-node), or [create your own from scratch](https://docs.livekit.io/agents/start/voice-ai/).
 
-Second, you need a token server. For development, the easiest option is the [sandbox token server](https://docs.livekit.io/frontends/authentication/tokens/sandbox-token-server/): enable it from your project's **Options** on the [Settings](https://cloud.livekit.io/projects/p_/settings/project) page in LiveKit Cloud and copy the `sandboxId`.
+Second, you need a token server. For development, the easiest option is the [development token server](https://docs.livekit.io/frontends/build/authentication/development-token-server/): turn on the **Development token server** switch on the [Settings](https://cloud.livekit.io/projects/p_/settings/project) page in LiveKit Cloud and copy the **Token server ID**.
 
-Then edit `sandboxID` in `hooks/useConnection.tsx`:
+Then edit `tokenServerId` in `hooks/useConnection.tsx`:
 
 ```ts
-const sandboxID = 'your id here';
+const tokenServerId = '<your-token-server-id>';
 ```
 
+> [!NOTE]
+> The development token server is for prototyping only: any client can request a token with any permissions. See [Token generation](#token-generation) before you ship.
+>
+> This setting was previously called the *sandbox token server*.
+
 ## Token generation
 
-In a production environment, you will be responsible for developing a solution to [generate tokens for your users](https://docs.livekit.io/home/server/generating-tokens/) which is integrated with your authentication solution. You should disable the token server and modify `hooks/useConnectionDetails.ts` to use your own token server.
+In a production environment, you will be responsible for developing a solution to [generate tokens for your users](https://docs.livekit.io/home/server/generating-tokens/) that integrates with your authentication system.
+
+You should turn off the development token server and replace `TokenSource.developmentTokenServer` in `hooks/useConnection.tsx` with `TokenSource.endpoint` pointing at your own token server, or a `TokenSource.custom` implementation.
 
 ## Contributing
 

hooks/useConnection.tsx

@@ -2,8 +2,11 @@ import { TokenSource, TokenSourceBase, TokenSourceResponseObject } from 'livekit
 import { createContext, useContext, useMemo, useState } from 'react';
 import { SessionProvider, useSession } from '@livekit/components-react';
 
-// TODO: Add your Sandbox ID here
-const sandboxID = '';
+// TODO: Add your development token server ID here.
+// Find it on your LiveKit Cloud project's Settings page under "Development token server".
+// See https://docs.livekit.io/frontends/build/authentication/development-token-server/
+// (This setting was previously called the sandbox token server.)
+const tokenServerId = '';
 
 // The name of the agent you wish to be dispatched.
 const agentName = undefined
@@ -47,8 +50,8 @@ export function ConnectionProvider({ children }: ConnectionProviderProps) {
   const [isConnectionActive, setIsConnectionActive] = useState(false);
 
   const tokenSource = useMemo(() => {
-    if (sandboxID) {
-      return TokenSource.sandboxTokenServer(sandboxID)
+    if (tokenServerId) {
+      return TokenSource.developmentTokenServer(tokenServerId)
     } else if (hardcodedUrl && hardcodedToken) {
       return TokenSource.literal(
         {
@@ -59,7 +62,7 @@ export function ConnectionProvider({ children }: ConnectionProviderProps) {
     } else {
       return TokenSource.endpoint(homepageAgentUrl)
     }
-  }, [sandboxID, hardcodedUrl, hardcodedToken])
+  }, [tokenServerId, hardcodedUrl, hardcodedToken])
 
   const session = useSession(
     tokenSource,

package.json

@@ -20,9 +20,9 @@
     "@config-plugins/react-native-webrtc": "^15.0.2",
     "@expo/vector-icons": "^15.0.3",
     "@livekit/components-react": "2.9.21",
-    "@livekit/react-native": "^2.12.0",
+    "@livekit/react-native": "^3.0.0",
     "@livekit/react-native-expo-plugin": "^1.0.3",
-    "@livekit/react-native-webrtc": "^144.1.2",
+    "@livekit/react-native-webrtc": "^144.2.0",
     "@react-navigation/bottom-tabs": "^7.2.0",
     "@react-navigation/native": "^7.0.14",
     "expo": "^57.0.0",
@@ -35,7 +35,7 @@
     "expo-status-bar": "~57.0.1",
     "expo-symbols": "~57.0.3",
     "expo-system-ui": "~57.0.4",
-    "livekit-client": "^2.21.0",
+    "livekit-client": "^2.22.3",
     "react": "19.2.3",
     "react-dom": "19.2.3",
     "react-native": "0.86.3",

taskfile.yaml

@@ -5,13 +5,13 @@ tasks:
   post_create:
     desc: "Runs after this template is instantiated as a Sandbox or Bootstrap"
     vars:
-      TOKEN_FILE: "hooks/useConnection.ts"
+      TOKEN_FILE: "hooks/useConnection.tsx"
     cmds:
-      - echo -e "Setting up sandbox..."
+      - echo -e "Setting up development token server..."
       - platforms: [darwin]
-        cmd: sed -i "" "s/sandboxID = ''/sandboxID = '{{.LIVEKIT_SANDBOX_ID}}'/g" "{{.ROOT_DIR}}/{{.TOKEN_FILE}}"
+        cmd: sed -i "" "s/tokenServerId = ''/tokenServerId = '{{.LIVEKIT_TOKEN_SERVER_ID | default .LIVEKIT_SANDBOX_ID}}'/g" "{{.ROOT_DIR}}/{{.TOKEN_FILE}}"
       - platforms: [linux, windows]
-        cmd: sed -i "s/sandboxID = ''/sandboxID = '{{.LIVEKIT_SANDBOX_ID}}'/g" "{{.ROOT_DIR}}/{{.TOKEN_FILE}}"
+        cmd: sed -i "s/tokenServerId = ''/tokenServerId = '{{.LIVEKIT_TOKEN_SERVER_ID | default .LIVEKIT_SANDBOX_ID}}'/g" "{{.ROOT_DIR}}/{{.TOKEN_FILE}}"
       - echo -e "\nYour React-Native voice assistant is ready to go!\n"
 
       - echo -e "Install the dependencies by running \"npm install\""