Multi-Provider Demo
{actionData?.success && (
Executed on {actionData.provider} in {actionData.executionTime}ms
{actionData.result}
)} {actionData?.error && (
Error: {actionData.error}
)}
); } ``` ### Real-time Execution with EventSource [Section titled “Real-time Execution with EventSource”](#real-time-execution-with-eventsource) ``` // app/routes/api.stream.tsx import { compute } from 'computesdk'; import { e2b } from '@computesdk/e2b'; import type { LoaderFunctionArgs } from '@remix-run/node'; export async function loader({ request }: LoaderFunctionArgs) { const url = new URL(request.url); const code = url.searchParams.get('code'); if (!code) { return new Response('Code parameter is required', { status: 400 }); } const stream = new ReadableStream({ async start(controller) { const encoder = new TextEncoder(); try { controller.enqueue(encoder.encode('data: {"type":"start","message":"Starting execution..."}\n\n')); const sandbox = await compute.sandbox.create({ provider: e2b({ apiKey: process.env.E2B_API_KEY! }) }); controller.enqueue(encoder.encode('data: {"type":"progress","message":"Sandbox created"}\n\n')); const result = await sandbox.runCode(code); controller.enqueue(encoder.encode(`data: ${JSON.stringify({ type: 'result', stdout: result.stdout, stderr: result.stderr, executionTime: result.executionTime })}\n\n`)); await compute.sandbox.destroy(sandbox.sandboxId); controller.enqueue(encoder.encode('data: {"type":"complete","message":"Execution completed"}\n\n')); controller.close(); } catch (error: any) { controller.enqueue(encoder.encode(`data: ${JSON.stringify({ type: 'error', message: error.message })}\n\n`)); controller.close(); } } }); return new Response(stream, { headers: { 'Content-Type': 'text/event-stream', 'Cache-Control': 'no-cache', 'Connection': 'keep-alive' } }); } ``` ``` // app/routes/stream-demo.tsx import { useState, useEffect, useRef } from 'react'; export default function StreamDemo() { const [code, setCode] = useState('print("Hello Stream!")'); const [output, setOutput] = useState