use a seesion id to key the sandbox instance

Author: threepointone

examples/openai-agents/package.json

@@ -15,6 +15,7 @@
   "type": "module",
   "dependencies": {
     "@openai/agents": "^0.3.2",
+    "nanoid": "^3.3.11",
     "react": "^19.2.0",
     "react-dom": "^19.2.0"
   },

examples/openai-agents/src/app.tsx

@@ -5,6 +5,7 @@ import type {
   CommandResult,
   FileOperationResult
 } from '@cloudflare/sandbox/openai';
+import { nanoid } from 'nanoid';
 
 interface Response {
   naturalResponse: string | null;
@@ -19,14 +20,30 @@ interface Message {
   timestamp: number;
 }
 
+/**
+ * Get or create a session ID for this user.
+ * The session ID is stored in localStorage and persists across browser sessions.
+ */
+function getOrCreateSessionId(): string {
+  let sessionId = localStorage.getItem('session-id');
+
+  if (!sessionId) {
+    sessionId = nanoid(8);
+    localStorage.setItem('session-id', sessionId);
+  }
+
+  return sessionId;
+}
+
 const STORAGE_KEY = 'openai-agents-history';
 
 async function makeApiCall(input: string): Promise<Response> {
   try {
     const response = await fetch('/run', {
       method: 'POST',
       headers: {
-        'Content-Type': 'application/json'
+        'Content-Type': 'application/json',
+        'X-Session-Id': getOrCreateSessionId()
       },
       body: JSON.stringify({ input })
     });

examples/openai-agents/src/index.ts

@@ -30,7 +30,11 @@ function getErrorStack(error: unknown): string | undefined {
   return undefined;
 }
 
-async function handleRunRequest(request: Request, env: Env): Promise<Response> {
+async function handleRunRequest(
+  request: Request,
+  env: Env,
+  sessionId: string
+): Promise<Response> {
   console.debug('[openai-example]', 'handleRunRequest called', {
     method: request.method,
     url: request.url
@@ -58,9 +62,9 @@ async function handleRunRequest(request: Request, env: Env): Promise<Response> {
 
     // Get sandbox instance (reused for both shell and editor)
     console.debug('[openai-example]', 'Getting sandbox instance', {
-      sessionId: 'workspace-session'
+      sandboxId: `session-${sessionId}`
     });
-    const sandbox = getSandbox(env.Sandbox, 'workspace-session');
+    const sandbox = getSandbox(env.Sandbox, `session-${sessionId}`);
 
     // Create shell (automatically collects results)
     console.debug('[openai-example]', 'Creating SandboxShell');
@@ -163,8 +167,18 @@ export default {
       method: request.method
     });
 
+    const sessionId = request.headers.get('X-Session-Id');
+    console.log({ sessionId });
+    if (!sessionId) {
+      return new Response('Missing X-Session-Id header', { status: 400 });
+    }
+
+    if (url.pathname === '/.well-known/appspecific/com.chrome.devtools.json') {
+      return Response.json({});
+    }
+
     if (url.pathname === '/run' && request.method === 'POST') {
-      return handleRunRequest(request, env);
+      return handleRunRequest(request, env, sessionId);
     }
 
     console.warn('[openai-example]', 'Route not found', {