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