ComputeSDK Playground

Code Executor

setCode(e.target.value)} rows={10} cols={80} placeholder="Enter your code here..." /> <button onClick={executeCode} disabled={loading}> {loading ? 'Executing...' : 'Execute Code'} </button> {output && <pre className="output">{output}</pre>} </div> ); } ``` ``` --- // src/pages/react-playground.astro import CodeExecutor from '../components/CodeExecutor.tsx'; --- <html lang="en"> <head> <meta charset="utf-8" /> <title>React Playground</title> </head> <body> <CodeExecutor client:load /> </body> </html> ``` ## Advanced Examples [Section titled “Advanced Examples”](#advanced-examples) ### Data Analysis API [Section titled “Data Analysis API”](#data-analysis-api) ``` // src/pages/api/analyze.ts import type { APIRoute } from 'astro'; import { compute } from 'computesdk'; import { e2b } from '@computesdk/e2b'; export const POST: APIRoute = async ({ request }) => { try { const { csvData } = await request.json(); compute.setConfig({ provider: e2b({ apiKey: import.meta.env.E2B_API_KEY! }) }); const sandbox = await compute.sandbox.create({}); // Save CSV data await sandbox.filesystem.writeFile('/data/input.csv', csvData); // Process data const result = await sandbox.runCode(` import pandas as pd import json # Read and analyze data df = pd.read_csv('/data/input.csv') analysis = { 'rows': len(df), 'columns': len(df.columns), 'summary': df.describe().to_dict(), 'missing_values': df.isnull().sum().to_dict() } print(json.dumps(analysis, indent=2)) `); await compute.sandbox.destroy(sandbox.sandboxId); return new Response(JSON.stringify({ success: true, analysis: JSON.parse(result.stdout) }), { status: 200, headers: { 'Content-Type': 'application/json' } }); } catch (error: any) { return new Response(JSON.stringify({ success: false, error: error.message }), { status: 500, headers: { 'Content-Type': 'application/json' } }); } }; ``` ### File Upload Processing [Section titled “File Upload Processing”](#file-upload-processing) ``` // src/pages/api/upload.ts import type { APIRoute } from 'astro'; import { compute } from 'computesdk'; import { e2b } from '@computesdk/e2b'; export const POST: APIRoute = async ({ request }) => { try { const formData = await request.formData(); const file = formData.get('file') as File; if (!file) { return new Response(JSON.stringify({ success: false, error: 'No file provided' }), { status: 400, headers: { 'Content-Type': 'application/json' } }); } const fileContent = await file.text(); const sandbox = await compute.sandbox.create({ provider: e2b({ apiKey: import.meta.env.E2B_API_KEY! }) }); // Save uploaded file await sandbox.filesystem.writeFile(`/uploads/${file.name}`, fileContent); // Process file const result = await sandbox.runCode(` import os # Get file info file_path = '/uploads/${file.name}' file_size = os.path.getsize(file_path) with open(file_path, 'r') as f: content = f.read() lines = len(content.split('\\n')) chars = len(content) print(f"File: ${file.name}") print(f"Size: {file_size} bytes") print(f"Lines: {lines}") print(f"Characters: {chars}") `); await compute.sandbox.destroy(sandbox.sandboxId); return new Response(JSON.stringify({ success: true, info: result.stdout }), { status: 200, headers: { 'Content-Type': 'application/json' } }); } catch (error: any) { return new Response(JSON.stringify({ success: false, error: error.message }), { status: 500, headers: { 'Content-Type': 'application/json' } }); } }; ``` ### Multi-Provider Support [Section titled “Multi-Provider Support”](#multi-provider-support) ``` // src/pages/api/multi-provider.ts import type { APIRoute } from 'astro'; import { compute } from 'computesdk'; import { e2b } from '@computesdk/e2b'; import { vercel } from '@computesdk/vercel'; import { daytona } from '@computesdk/daytona'; export const POST: APIRoute = async ({ request }) => { try { const { provider: providerName, code, runtime } = await request.json(); let provider; switch (providerName) { case 'e2b': provider = e2b({ apiKey: import.meta.env.E2B_API_KEY! }); break; case 'vercel': provider = vercel({ token: import.meta.env.VERCEL_TOKEN! }); break; case 'daytona': provider = daytona({ apiKey: import.meta.env.DAYTONA_API_KEY! }); break; default: return new Response(JSON.stringify({ success: false, error: 'Invalid provider specified' }), { status: 400, headers: { 'Content-Type': 'application/json' } }); } const sandbox = await compute.sandbox.create({ provider }); try { const result = await sandbox.runCode(code, runtime); return new Response(JSON.stringify({ success: true, provider: providerName, result: result.stdout }), { status: 200, headers: { 'Content-Type': 'application/json' } }); } finally { await compute.sandbox.destroy(sandbox.sandboxId); } } catch (error: any) { return new Response(JSON.stringify({ success: false, error: error.message }), { status: 500, headers: { 'Content-Type': 'application/json' } }); } }; ``` ### Workflow API [Section titled “Workflow API”](#workflow-api) ``` // src/pages/api/workflow.ts import type { APIRoute } from 'astro'; import { compute } from 'computesdk'; import { e2b } from '@computesdk/e2b'; export const POST: APIRoute = async ({ request }) => { const sandbox = await compute.sandbox.create({ provider: e2b({ apiKey: import.meta.env.E2B_API_KEY! }) }); try { const steps: any[] = []; // Step 1: Setup environment await sandbox.filesystem.mkdir('/workspace'); const setupResult = await sandbox.runCommand('pip', ['install', 'requests', 'beautifulsoup4']); steps.push({ step: 1, action: 'setup', output: setupResult.stdout }); // Step 2: Fetch data const fetchResult = await sandbox.runCode(` import requests import json # Simulate data fetch data = {"message": "Hello World", "timestamp": "2024-01-01"} # Save to file with open('/workspace/data.json', 'w') as f: json.dump(data, f) print("Data fetched and saved") `); steps.push({ step: 2, action: 'fetch', output: fetchResult.stdout }); // Step 3: Process data const processResult = await sandbox.runCode(` import json with open('/workspace/data.json', 'r') as f: data = json.load(f) # Process data result = { 'original': data, 'processed': data['message'].upper(), 'length': len(data['message']) } print(json.dumps(result)) `); steps.push({ step: 3, action: 'process', result: JSON.parse(processResult.stdout) }); return new Response(JSON.stringify({ success: true, steps }), { status: 200, headers: { 'Content-Type': 'application/json' } }); } catch (error: any) { return new Response(JSON.stringify({ success: false, error: error.message }), { status: 500, headers: { 'Content-Type': 'application/json' } }); } finally { await compute.sandbox.destroy(sandbox.sandboxId); } }; ``` ## Best Practices [Section titled “Best Practices”](#best-practices) ### 1. Environment Variables [Section titled “1. Environment Variables”](#1-environment-variables) ``` // src/utils/env.ts export const getProvider = () => { if (import.meta.env.E2B_API_KEY) { return e2b({ apiKey: import.meta.env.E2B_API_KEY }); } if (import.meta.env.VERCEL_TOKEN) { return vercel({ token: import.meta.env.VERCEL_TOKEN, teamId: import.meta.env.VERCEL_TEAM_ID, projectId: import.meta.env.VERCEL_PROJECT_ID }); } if (import.meta.env.DAYTONA_API_KEY) { return daytona({ apiKey: import.meta.env.DAYTONA_API_KEY }); } throw new Error('No compute provider configured'); }; ``` ### 2. Error Handling [Section titled “2. Error Handling”](#2-error-handling) ``` // src/utils/error-handler.ts export const handleComputeError = (error: any): Response => { console.error('Sandbox error:', error); // Don't expose sensitive error details in production const message = import.meta.env.DEV ? error.message : 'Internal server error'; return new Response(JSON.stringify({ success: false, error: message }), { status: 500, headers: { 'Content-Type': 'application/json' } }); }; ``` ### 3. Input Validation [Section titled “3. Input Validation”](#3-input-validation) ``` // src/utils/validation.ts import { z } from 'zod'; export const executeSchema = z.object({ code: z.string().min(1).max(10000), runtime: z.enum(['python', 'node']), timeout: z.number().optional().default(30000) }); export const validateRequest = async (request: Request) => { try { const body = await request.json(); return executeSchema.parse(body); } catch (error) { throw new Error('Invalid request data'); } }; ``` ### 4. Resource Management [Section titled “4. Resource Management”](#4-resource-management) ``` // src/utils/sandbox-manager.ts export const withSandbox = async <T>( provider: any, callback: (sandbox: any) => Promise<T> ): Promise<T> => { const sandbox = await compute.sandbox.create({ provider }); try { return await callback(sandbox); } finally { await compute.sandbox.destroy(sandbox.sandboxId); } }; ``` ## Configuration [Section titled “Configuration”](#configuration) ### Astro Config [Section titled “Astro Config”](#astro-config) ``` // astro.config.mjs import { defineConfig } from 'astro/config'; import react from '@astrojs/react'; export default defineConfig({ integrations: [react()], output: 'server', adapter: /* your adapter */ }); ``` ### TypeScript Config [Section titled “TypeScript Config”](#typescript-config) ``` // tsconfig.json { "extends": "astro/tsconfigs/strict", "compilerOptions": { "types": ["astro/client"] } } ``` ## Deployment [Section titled “Deployment”](#deployment) ### Environment Variables [Section titled “Environment Variables”](#environment-variables) Set your environment variables in your deployment platform: ``` # Production environment variables E2B_API_KEY=your_production_e2b_key VERCEL_TOKEN=your_production_vercel_token VERCEL_TEAM_ID=your_team_id VERCEL_PROJECT_ID=your_project_id DAYTONA_API_KEY=your_production_daytona_key ``` ### Build Configuration [Section titled “Build Configuration”](#build-configuration) Ensure your build includes all necessary dependencies and environment variables are properly configured for your deployment platform. ## Troubleshooting [Section titled “Troubleshooting”](#troubleshooting) **Environment variables not loading?** * Check `.env` file exists and has correct format * Restart dev server after changes * Use `import.meta.env` to access variables in Astro * Ensure variables are not prefixed with `PUBLIC_` if they contain secrets **Sandbox creation fails?** * Verify API keys are correct and have proper format * Check provider-specific setup requirements * Monitor rate limits and quotas **Server-side only errors?** * ComputeSDK must run on server-side only (API endpoints) * Don’t import ComputeSDK in client-side components or scripts * Use API endpoints to bridge between client and ComputeSDK **Build errors?** * Ensure all ComputeSDK imports are in API routes only * Check that environment variables are properly typed * Verify provider packages are correctly installed **Client hydration issues?** * ComputeSDK operations should happen in API endpoints * Use `client:load` or other client directives appropriately for interactive components * Avoid server-side imports in client-side code

# Next.js

> Use ComputeSDK in Next.js applications

# ComputeSDK + Next.js [Section titled “ComputeSDK + Next.js”](#computesdk--nextjs) Use ComputeSDK to execute code in secure sandboxes from your Next.js API routes. ## Setup [Section titled “Setup”](#setup) ### 1. Install Dependencies [Section titled “1. Install Dependencies”](#1-install-dependencies) ``` npm install computesdk # Provider packages (install what you need) npm install @computesdk/e2b # E2B provider npm install @computesdk/vercel # Vercel provider npm install @computesdk/daytona # Daytona provider ``` ### 2. Configure Environment Variables [Section titled “2. Configure Environment Variables”](#2-configure-environment-variables) Create a `.env.local` file and add your provider credentials: ``` # E2B (get from e2b.dev) E2B_API_KEY=e2b_your_api_key_here # Vercel (recommended for Next.js apps deployed on Vercel) # Method 1: OIDC Token (recommended) vercel env pull # Downloads VERCEL_OIDC_TOKEN # Method 2: Traditional VERCEL_TOKEN=your_vercel_token_here VERCEL_TEAM_ID=your_team_id_here VERCEL_PROJECT_ID=your_project_id_here # Daytona (get from your Daytona instance) DAYTONA_API_KEY=your_daytona_api_key_here ``` ### 3. Run Development Server [Section titled “3. Run Development Server”](#3-run-development-server) ``` npm run dev ``` Navigate to <http://localhost:3000> ## Implementation [Section titled “Implementation”](#implementation) ### API Route with Request Handler [Section titled “API Route with Request Handler”](#api-route-with-request-handler) The simplest way to use ComputeSDK in Next.js is with the built-in request handler: ``` // app/api/compute/route.ts (App Router) import { handleComputeRequest } from 'computesdk'; import { e2b } from '@computesdk/e2b'; export async function POST(request: Request) { return handleComputeRequest({ request, provider: e2b({ apiKey: process.env.E2B_API_KEY }) }); } ``` ``` // pages/api/compute.ts (Pages Router) import { handleComputeRequest } from 'computesdk'; import { e2b } from '@computesdk/e2b'; export default async function handler(req: any, res: any) { const request = new Request(`http://localhost:3000${req.url}`, { method: req.method, headers: req.headers, body: JSON.stringify(req.body), }); const response = await handleComputeRequest({ request, provider: e2b({ apiKey: process.env.E2B_API_KEY }) }); const data = await response.json(); res.status(response.status).json(data); } ``` ### Custom API Route [Section titled “Custom API Route”](#custom-api-route) For more control, create a custom API route: ``` // app/api/sandbox/route.ts import { compute } from 'computesdk'; import { e2b } from '@computesdk/e2b'; export async function POST(request: Request) { try { const { code, runtime } = await request.json(); // Set provider compute.setConfig({ provider: e2b({ apiKey: process.env.E2B_API_KEY }) }); // Create sandbox and execute code const sandbox = await compute.sandbox.create({}); const result = await sandbox.runCode(code, runtime); // Clean up await compute.sandbox.destroy(sandbox.sandboxId); return Response.json({ success: true, stdout: result.stdout, stderr: result.stderr, executionTime: result.executionTime }); } catch (error) { return Response.json({ success: false, error: error instanceof Error ? error.message : 'Unknown error' }, { status: 500 }); } } ``` ### Frontend Integration [Section titled “Frontend Integration”](#frontend-integration) Call your API from React components: ``` // components/CodeExecutor.tsx 'use client'; import { useState } from 'react'; export default function CodeExecutor() { const [code, setCode] = useState('print("Hello World!")'); const [output, setOutput] = useState(''); const [loading, setLoading] = useState(false); const executeCode = async () => { setLoading(true); try { const response = await fetch('/api/compute', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ action: 'compute.sandbox.runCode', code, runtime: 'python' }) }); const data = await response.json(); if (data.success) { setOutput(data.result.stdout); } else { setOutput(`Error: ${data.error}`); } } catch (error) { setOutput(`Error: ${error.message}`); } finally { setLoading(false); } }; return ( <div className="p-4"> <h2 className="text-xl font-bold mb-4">Code Executor</h2> <textarea value={code} onChange={(e) => setCode(e.target.value)} className="w-full h-32 p-2 border rounded mb-4" placeholder="Enter your code here..." /> <button onClick={executeCode} disabled={loading} className="bg-blue-500 text-white px-4 py-2 rounded disabled:opacity-50" > {loading ? 'Executing...' : 'Execute Code'} </button> {output && ( <pre className="mt-4 p-4 bg-gray-100 rounded overflow-auto"> {output} </pre> )} </div> ); } ``` ### With Client-side Method [Section titled “With Client-side Method”](#with-client-side-method) Use the `@computesdk/ui` package for client-side methods: ``` npm install @computesdk/ui ``` ``` // components/HookExample.tsx 'use client'; import { useCompute } from '@computesdk/ui'; export default function HookExample() { const compute = useCompute({ apiEndpoint: '/api/compute', defaultRuntime: 'python' }); const executeCode = async () => { try { const sandbox = await compute.sandbox.create(); const result = await sandbox.runCode('print("Hello from hook!")'); console.log(result.result?.stdout); await sandbox.destroy(); } catch (error) { console.error('Execution failed:', error); } }; return ( <button onClick={executeCode}> Execute Code with Hook </button> ); } ``` ## Advanced Examples [Section titled “Advanced Examples”](#advanced-examples) ### Data Processing Pipeline [Section titled “Data Processing Pipeline”](#data-processing-pipeline) ``` // app/api/data-analysis/route.ts import { compute } from 'computesdk'; import { e2b } from '@computesdk/e2b'; export async function POST(request: Request) { try { const { csvData } = await request.json(); compute.setConfig({ provider: e2b({ apiKey: process.env.E2B_API_KEY }) }); const sandbox = await compute.sandbox.create({}); // Save CSV data await sandbox.filesystem.writeFile('/data/input.csv', csvData); // Process data const result = await sandbox.runCode(` import pandas as pd import json # Read and analyze data df = pd.read_csv('/data/input.csv') analysis = { 'rows': len(df), 'columns': len(df.columns), 'summary': df.describe().to_dict(), 'missing_values': df.isnull().sum().to_dict() } print(json.dumps(analysis, indent=2)) `); await compute.sandbox.destroy(sandbox.sandboxId); return Response.json({ success: true, analysis: JSON.parse(result.stdout) }); } catch (error) { return Response.json({ success: false, error: error.message }, { status: 500 }); } } ``` ### Multi-Step Workflow [Section titled “Multi-Step Workflow”](#multi-step-workflow) ``` // app/api/workflow/route.ts import { compute } from 'computesdk'; import { e2b } from '@computesdk/e2b'; export async function POST(request: Request) { const sandbox = await compute.sandbox.create({ provider: e2b({ apiKey: process.env.E2B_API_KEY }) }); try { // Step 1: Setup environment await sandbox.filesystem.mkdir('/workspace'); await sandbox.runCommand('pip', ['install', 'requests', 'beautifulsoup4']); // Step 2: Fetch and process data const fetchResult = await sandbox.runCode(` import requests import json from bs4 import BeautifulSoup # Fetch data (example) data = {"message": "Hello World", "timestamp": "2024-01-01"} # Save to file with open('/workspace/data.json', 'w') as f: json.dump(data, f) print("Data fetched and saved") `); // Step 3: Process and analyze const analysisResult = await sandbox.runCode(` import json with open('/workspace/data.json', 'r') as f: data = json.load(f) # Process data result = { 'original': data, 'processed': data['message'].upper(), 'length': len(data['message']) } print(json.dumps(result)) `); return Response.json({ success: true, steps: [ { step: 1, output: fetchResult.stdout }, { step: 2, result: JSON.parse(analysisResult.stdout) } ] }); } finally { await compute.sandbox.destroy(sandbox.sandboxId); } } ``` ## Best Practices [Section titled “Best Practices”](#best-practices) ### 1. Error Handling [Section titled “1. Error Handling”](#1-error-handling) ``` export async function POST(request: Request) { try { // ComputeSDK operations } catch (error) { console.error('Sandbox error:', error); return Response.json({ success: false, error: process.env.NODE_ENV === 'development' ? error.message : 'Internal server error' }, { status: 500 }); } } ``` ### 2. Input Validation [Section titled “2. Input Validation”](#2-input-validation) ``` import { z } from 'zod'; const schema = z.object({ code: z.string().min(1).max(10000), runtime: z.enum(['python', 'node']), timeout: z.number().optional() }); export async function POST(request: Request) { try { const body = await request.json(); const { code, runtime, timeout } = schema.parse(body); // Use validated inputs } catch (error) { return Response.json({ success: false, error: 'Invalid request data' }, { status: 400 }); } } ``` ### 3. Resource Management [Section titled “3. Resource Management”](#3-resource-management) ``` export async function POST(request: Request) { let sandbox = null; try { sandbox = await compute.sandbox.create({}); // Use sandbox } finally { // Always clean up if (sandbox) { await compute.sandbox.destroy(sandbox.sandboxId); } } } ``` ## Deployment [Section titled “Deployment”](#deployment) ### Vercel Deployment [Section titled “Vercel Deployment”](#vercel-deployment) 1. **Set environment variables** in Vercel Dashboard 2. **Use OIDC token** for Vercel provider (automatically available) 3. **Configure build settings** if needed ### Other Platforms [Section titled “Other Platforms”](#other-platforms) 1. **Ensure environment variables** are properly set 2. **Check provider availability** in your deployment environment 3. **Monitor resource usage** and sandbox quotas ### Troubleshooting [Section titled “Troubleshooting”](#troubleshooting) Running in the browser?: Not supported—use on the server (API routes only). Env variables not loaded?: Use .env.local, and restart dev server after changes. Permissions/capabilities vary between providers. See Provider Support Matrix. You’re ready to build secure, scalable LLM-driven or compute-heavy features with ComputeSDK in your Next.js apps!

# Nuxt

> Use ComputeSDK in Nuxt applications

# ComputeSDK + Nuxt [Section titled “ComputeSDK + Nuxt”](#computesdk--nuxt) Use ComputeSDK to execute code in secure sandboxes from your Nuxt server routes. ## Setup [Section titled “Setup”](#setup) ### 1. Install Dependencies [Section titled “1. Install Dependencies”](#1-install-dependencies) ``` npm install computesdk # Provider packages (install what you need) npm install @computesdk/e2b # E2B provider npm install @computesdk/vercel # Vercel provider npm install @computesdk/daytona # Daytona provider ``` ### 2. Configure Environment Variables [Section titled “2. Configure Environment Variables”](#2-configure-environment-variables) Create a `.env` file and add your provider credentials: ``` # E2B (get from e2b.dev) E2B_API_KEY=e2b_your_api_key_here # Vercel # Method 1: OIDC Token (recommended) vercel env pull # Downloads VERCEL_OIDC_TOKEN # Method 2: Traditional VERCEL_TOKEN=your_vercel_token_here VERCEL_TEAM_ID=your_team_id_here VERCEL_PROJECT_ID=your_project_id_here # Daytona (get from your Daytona instance) DAYTONA_API_KEY=your_daytona_api_key_here ``` ### 3. Run Development Server [Section titled “3. Run Development Server”](#3-run-development-server) ``` npm run dev ``` Navigate to <http://localhost:3000> ## Implementation [Section titled “Implementation”](#implementation) ### API Route with Request Handler [Section titled “API Route with Request Handler”](#api-route-with-request-handler) The simplest way to use ComputeSDK in Nuxt is with the built-in request handler: ``` // server/api/compute.post.ts import { handleComputeRequest } from 'computesdk' import { e2b } from '@computesdk/e2b' export default defineEventHandler(async (event) => { const computeRequest = await readBody(event) const response = await handleComputeRequest({ request: computeRequest, provider: e2b({ apiKey: process.env.E2B_API_KEY! }) }) if (!response.success) { throw createError({ statusCode: 500, statusMessage: response.error || 'Unknown error occurred' }) } return response }) ``` ### Custom API Route [Section titled “Custom API Route”](#custom-api-route) For more control, create a custom API route: ``` // server/api/sandbox.post.ts import { compute } from 'computesdk' import { e2b } from '@computesdk/e2b' export default defineEventHandler(async (event) => { try { const { code, runtime } = await readBody(event) // Set provider compute.setConfig({ provider: e2b({ apiKey: process.env.E2B_API_KEY! }) }) // Create sandbox and execute code const sandbox = await compute.sandbox.create({}) const result = await sandbox.runCode(code, runtime) // Clean up await compute.sandbox.destroy(sandbox.sandboxId) return { success: true, stdout: result.stdout, stderr: result.stderr, executionTime: result.executionTime } } catch (error: any) { throw createError({ statusCode: 500, statusMessage: error.message || 'Unknown error' }) } }) ``` ### Frontend Integration [Section titled “Frontend Integration”](#frontend-integration) Call your API from Vue components: ```  <script setup lang="ts"> const code = ref('print("Hello World!")') const output = ref('') const loading = ref(false) const executeCode = async () => { loading.value = true try { const response = await $fetch('/api/compute', { method: 'POST', body: { action: 'compute.sandbox.runCode', code: code.value, runtime: 'python' } }) if (response.success) { output.value = response.result.stdout } else { output.value = `Error: ${response.error}` } } catch (error: any) { output.value = `Error: ${error.message}` } finally { loading.value = false } } </script> <template> <div class="p-4"> <h2 class="text-xl font-bold mb-4">Code Executor</h2> <textarea v-model="code" class="w-full h-32 p-2 border rounded mb-4" placeholder="Enter your code here..." /> <button @click="executeCode" :disabled="loading" class="bg-blue-500 text-white px-4 py-2 rounded disabled:opacity-50" > {{ loading ? 'Executing...' : 'Execute Code' }} </button> <pre v-if="output" class="mt-4 p-4 bg-gray-100 rounded overflow-auto"> {{ output }} </pre> </div> </template> ``` ### Composables [Section titled “Composables”](#composables) Create reusable composables for ComputeSDK logic: ``` // composables/useCompute.ts export const useComputeProvider = () => { const config = useRuntimeConfig() const getProvider = () => { if (config.E2B_API_KEY) { return e2b({ apiKey: config.E2B_API_KEY }) } if (config.VERCEL_TOKEN) { return vercel({ token: config.VERCEL_TOKEN, teamId: config.VERCEL_TEAM_ID, projectId: config.VERCEL_PROJECT_ID }) } if (config.DAYTONA_API_KEY) { return daytona({ apiKey: config.DAYTONA_API_KEY }) } throw new Error('No compute provider configured') } return { getProvider } } ``` Use in your API routes: ``` // server/api/execute.post.ts export default defineEventHandler(async (event) => { const { getProvider } = useComputeProvider() const { code, runtime } = await readBody(event) compute.setConfig({ provider: getProvider() }) const sandbox = await compute.sandbox.create({}) try { const result = await sandbox.runCode(code, runtime) return { success: true, result } } finally { await compute.sandbox.destroy(sandbox.sandboxId) } }) ``` ## Advanced Examples [Section titled “Advanced Examples”](#advanced-examples) ### Data Processing Pipeline [Section titled “Data Processing Pipeline”](#data-processing-pipeline) ``` // server/api/analyze.post.ts export default defineEventHandler(async (event) => { const { csvData } = await readBody(event) compute.setConfig({ provider: e2b({ apiKey: process.env.E2B_API_KEY! }) }) const sandbox = await compute.sandbox.create({}) try { // Save CSV data await sandbox.filesystem.writeFile('/data/input.csv', csvData) // Process data const result = await sandbox.runCode(` import pandas as pd import json # Read and analyze data df = pd.read_csv('/data/input.csv') analysis = { 'rows': len(df), 'columns': len(df.columns), 'summary': df.describe().to_dict(), 'missing_values': df.isnull().sum().to_dict() } print(json.dumps(analysis, indent=2)) `) return { success: true, analysis: JSON.parse(result.stdout) } } finally { await compute.sandbox.destroy(sandbox.sandboxId) } }) ``` ### File Operations [Section titled “File Operations”](#file-operations) ``` // server/api/workspace.post.ts export default defineEventHandler(async (event) => { const { files } = await readBody(event) const sandbox = await compute.sandbox.create({ provider: e2b({ apiKey: process.env.E2B_API_KEY! }) }) try { // Create workspace await sandbox.filesystem.mkdir('/workspace') // Write multiple files for (const [filename, content] of Object.entries(files)) { await sandbox.filesystem.writeFile(`/workspace/${filename}`, content as string) } // Process files const result = await sandbox.runCode(` import os import json # List all files files = [] for root, dirs, filenames in os.walk('/workspace'): for filename in filenames: filepath = os.path.join(root, filename) with open(filepath, 'r') as f: files.append({ 'name': filename, 'size': os.path.getsize(filepath), 'content': f.read() }) print(json.dumps(files, indent=2)) `) return { success: true, files: JSON.parse(result.stdout) } } finally { await compute.sandbox.destroy(sandbox.sandboxId) } }) ``` ### Multi-Provider Support [Section titled “Multi-Provider Support”](#multi-provider-support) ``` // server/api/multi-provider.post.ts export default defineEventHandler(async (event) => { const { provider: providerName, code } = await readBody(event) let provider switch (providerName) { case 'e2b': provider = e2b({ apiKey: process.env.E2B_API_KEY! }) break case 'vercel': provider = vercel({ token: process.env.VERCEL_TOKEN! }) break case 'daytona': provider = daytona({ apiKey: process.env.DAYTONA_API_KEY! }) break default: throw createError({ statusCode: 400, statusMessage: 'Invalid provider specified' }) } const sandbox = await compute.sandbox.create({ provider }) try { const result = await sandbox.runCode(code) return { success: true, provider: providerName, result: result.stdout } } finally { await compute.sandbox.destroy(sandbox.sandboxId) } }) ``` ## Pages and Components [Section titled “Pages and Components”](#pages-and-components) ### Interactive Code Playground [Section titled “Interactive Code Playground”](#interactive-code-playground) ```  <script setup lang="ts"> const code = ref(` import pandas as pd import numpy as np # Create sample data data = {'A': [1, 2, 3], 'B': [4, 5, 6]} df = pd.DataFrame(data) print("DataFrame:") print(df) print(f"Sum: {df.sum().sum()}") `) const runtime = ref<'python' | 'node'>('python') const provider = ref('e2b') const output = ref('') const loading = ref(false) const executeCode = async () => { loading.value = true try { const response = await $fetch('/api/multi-provider', { method: 'POST', body: { provider: provider.value, code: code.value, runtime: runtime.value } }) output.value = response.result } catch (error: any) { output.value = `Error: ${error.message}` } finally { loading.value = false } } </script> <template> <div class="container mx-auto p-4"> <h1 class="text-2xl font-bold mb-6">ComputeSDK Playground</h1> <div class="grid grid-cols-1 lg:grid-cols-2 gap-6"> <div> <div class="mb-4 flex gap-4"> <select v-model="provider" class="px-3 py-2 border rounded"> <option value="e2b">E2B</option> <option value="vercel">Vercel</option> <option value="daytona">Daytona</option> </select> <select v-model="runtime" class="px-3 py-2 border rounded"> <option value="python">Python</option> <option value="node">Node.js</option> </select> </div> <textarea v-model="code" class="w-full h-96 p-4 font-mono text-sm border rounded" placeholder="Enter your code here..." /> <button @click="executeCode" :disabled="loading" class="mt-4 bg-blue-500 text-white px-6 py-2 rounded disabled:opacity-50" > {{ loading ? 'Executing...' : 'Execute Code' }} </button> </div> <div> <h3 class="text-lg font-semibold mb-4">Output</h3> <pre class="w-full h-96 p-4 bg-gray-100 rounded overflow-auto font-mono text-sm">{{ output || 'Output will appear here...' }}</pre> </div> </div> </div> </template> ``` ## Best Practices [Section titled “Best Practices”](#best-practices) ### 1. Error Handling [Section titled “1. Error Handling”](#1-error-handling) ``` // server/api/safe-execute.post.ts export default defineEventHandler(async (event) => { try { // ComputeSDK operations } catch (error: any) { console.error('Sandbox error:', error) throw createError({ statusCode: 500, statusMessage: process.dev ? error.message : 'Internal server error' }) } }) ``` ### 2. Input Validation [Section titled “2. Input Validation”](#2-input-validation) ``` // server/api/validate.post.ts import Joi from 'joi' const schema = Joi.object({ code: Joi.string().required().max(10000), runtime: Joi.string().valid('python', 'node').required(), timeout: Joi.number().optional().min(1000).max(300000) }) export default defineEventHandler(async (event) => { const body = await readBody(event) const { error, value } = schema.validate(body) if (error) { throw createError({ statusCode: 400, statusMessage: error.details[0].message }) } // Use validated data const { code, runtime, timeout } = value }) ``` ### 3. Resource Management [Section titled “3. Resource Management”](#3-resource-management) ``` // server/api/managed.post.ts export default defineEventHandler(async (event) => { let sandbox = null try { sandbox = await compute.sandbox.create({}) // Use sandbox } finally { // Always clean up if (sandbox) { await compute.sandbox.destroy(sandbox.sandboxId) } } }) ``` ### 4. Runtime Configuration [Section titled “4. Runtime Configuration”](#4-runtime-configuration) ``` // nuxt.config.ts export default defineNuxtConfig({ runtimeConfig: { // Server-side environment variables E2B_API_KEY: process.env.E2B_API_KEY, VERCEL_TOKEN: process.env.VERCEL_TOKEN, VERCEL_TEAM_ID: process.env.VERCEL_TEAM_ID, VERCEL_PROJECT_ID: process.env.VERCEL_PROJECT_ID, DAYTONA_API_KEY: process.env.DAYTONA_API_KEY, // Public keys (exposed to client-side) public: { // Add any public config here } } }) ``` ## Deployment [Section titled “Deployment”](#deployment) ### Environment Variables [Section titled “Environment Variables”](#environment-variables) Make sure to set your environment variables in your deployment platform: ``` # Production environment variables E2B_API_KEY=your_production_e2b_key VERCEL_TOKEN=your_production_vercel_token VERCEL_TEAM_ID=your_team_id VERCEL_PROJECT_ID=your_project_id DAYTONA_API_KEY=your_production_daytona_key ``` ### Platform-Specific Notes [Section titled “Platform-Specific Notes”](#platform-specific-notes) **Vercel:** * Use environment variables in Vercel Dashboard * OIDC token is automatically available in production **Netlify:** * Set variables in site settings * Use build hooks for redeployment **Generic Node.js hosting:** * Ensure all environment variables are properly set * Check provider availability in your deployment region ## Troubleshooting [Section titled “Troubleshooting”](#troubleshooting) **Environment variables not loading?** * Check `.env` file exists and has correct format * Restart dev server after changes * Verify runtime config in `nuxt.config.ts` **Sandbox creation fails?** * Verify API keys are correct * Check provider-specific setup requirements * Monitor rate limits and quotas **Server-side only errors?** * ComputeSDK must run on server-side only * Use server routes (`server/api/`) not client composables * Check import paths are correct **CORS issues?** * All ComputeSDK operations happen server-side * Frontend calls your API routes, not ComputeSDK directly

# Remix

> Use ComputeSDK in Remix applications

# ComputeSDK + Remix [Section titled “ComputeSDK + Remix”](#computesdk--remix) Use ComputeSDK to execute code in secure sandboxes from your Remix loaders and actions. ## Setup [Section titled “Setup”](#setup) ### 1. Install Dependencies [Section titled “1. Install Dependencies”](#1-install-dependencies) ``` npm install computesdk # Provider packages (install what you need) npm install @computesdk/e2b # E2B provider npm install @computesdk/vercel # Vercel provider npm install @computesdk/daytona # Daytona provider ``` ### 2. Configure Environment Variables [Section titled “2. Configure Environment Variables”](#2-configure-environment-variables) Create a `.env` file and add your provider credentials: ``` # E2B (get from e2b.dev) E2B_API_KEY=e2b_your_api_key_here # Vercel # Method 1: OIDC Token (recommended) vercel env pull # Downloads VERCEL_OIDC_TOKEN # Method 2: Traditional VERCEL_TOKEN=your_vercel_token_here VERCEL_TEAM_ID=your_team_id_here VERCEL_PROJECT_ID=your_project_id_here # Daytona (get from your Daytona instance) DAYTONA_API_KEY=your_daytona_api_key_here ``` ### 3. Run Development Server [Section titled “3. Run Development Server”](#3-run-development-server) ``` npm run dev ``` Navigate to <http://localhost:3000> ## Implementation [Section titled “Implementation”](#implementation) ### Action Route with Request Handler [Section titled “Action Route with Request Handler”](#action-route-with-request-handler) The simplest way to use ComputeSDK in Remix is with the built-in request handler: ``` // app/routes/api.compute.tsx import type { ActionFunctionArgs } from "@remix-run/node"; import { json } from "@remix-run/node"; import { handleComputeRequest } from "computesdk"; import { e2b } from "@computesdk/e2b"; export const action = async ({ request }: ActionFunctionArgs) => { const computeRequest = await request.json(); const response = await handleComputeRequest({ request: computeRequest, provider: e2b({ apiKey: process.env.E2B_API_KEY! }) }); if (!response.success) { throw json({ error: response.error || 'Unknown error' }, { status: 500 }); } return json(response); }; ``` ### Custom Action [Section titled “Custom Action”](#custom-action) For more control, create a custom action: ``` // app/routes/sandbox.tsx import type { ActionFunctionArgs } from "@remix-run/node"; import { json } from "@remix-run/node"; import { compute } from "computesdk"; import { e2b } from "@computesdk/e2b"; export const action = async ({ request }: ActionFunctionArgs) => { try { const { code, runtime } = await request.json(); // Set provider compute.setConfig({ provider: e2b({ apiKey: process.env.E2B_API_KEY! }) }); // Create sandbox and execute code const sandbox = await compute.sandbox.create({}); const result = await sandbox.runCode(code, runtime); // Clean up await compute.sandbox.destroy(sandbox.sandboxId); return json({ success: true, stdout: result.stdout, stderr: result.stderr, executionTime: result.executionTime }); } catch (error: any) { throw json({ success: false, error: error.message || 'Unknown error' }, { status: 500 }); } }; ``` ### Frontend Integration [Section titled “Frontend Integration”](#frontend-integration) Use Remix’s built-in data loading and forms: ``` // app/routes/playground.tsx import { useState } from "react"; import { Form, useActionData, useNavigation } from "@remix-run/react"; import type { ActionFunctionArgs } from "@remix-run/node"; import { json } from "@remix-run/node"; import { compute } from "computesdk"; import { e2b } from "@computesdk/e2b"; // Server action export const action = async ({ request }: ActionFunctionArgs) => { const formData = await request.formData(); const code = formData.get("code") as string; const runtime = formData.get("runtime") as string; if (!code) { return json({ error: "Code is required" }, { status: 400 }); } try { compute.setConfig({ provider: e2b({ apiKey: process.env.E2B_API_KEY! }) }); const sandbox = await compute.sandbox.create({}); const result = await sandbox.runCode(code, runtime); await compute.sandbox.destroy(sandbox.sandboxId); return json({ success: true, output: result.stdout, stderr: result.stderr }); } catch (error: any) { return json({ error: error.message }, { status: 500 }); } }; // React component export default function Playground() { const actionData = useActionData<typeof action>(); const navigation = useNavigation(); const [code, setCode] = useState('print("Hello World!")'); const isExecuting = navigation.state === "submitting"; return ( <div className="container mx-auto p-4"> <h1 className="text-2xl font-bold mb-6">Code Executor</h1> <Form method="post" className="space-y-4"> <div> <label htmlFor="runtime" className="block text-sm font-medium mb-2"> Runtime </label> <select name="runtime" id="runtime" className="border rounded px-3 py-2"> <option value="python">Python</option> <option value="node">Node.js</option> </select> </div> <div> <label htmlFor="code" className="block text-sm font-medium mb-2"> Code </label> <textarea name="code" id="code" value={code} onChange={(e) => setCode(e.target.value)} className="w-full h-32 p-3 font-mono text-sm border rounded" placeholder="Enter your code here..." /> </div> <button type="submit" disabled={isExecuting} className="bg-blue-500 text-white px-4 py-2 rounded disabled:opacity-50" > {isExecuting ? "Executing..." : "Execute Code"} </button> </Form> {actionData && ( <div className="mt-6"> {actionData.success ? ( <div> <h3 className="text-lg font-semibold mb-2">Output</h3> <pre className="bg-gray-100 p-4 rounded overflow-auto"> {actionData.output} </pre> {actionData.stderr && ( <> <h3 className="text-lg font-semibold mb-2 mt-4">Errors</h3> <pre className="bg-red-100 p-4 rounded overflow-auto"> {actionData.stderr} </pre> </> )} </div> ) : ( <div className="bg-red-100 p-4 rounded"> <h3 className="text-lg font-semibold text-red-800">Error</h3> <p className="text-red-700">{actionData.error}</p> </div> )} </div> )} </div> ); } ``` ### Using Loaders [Section titled “Using Loaders”](#using-loaders) You can also use loaders for read-only operations: ``` // app/routes/status.tsx import type { LoaderFunctionArgs } from "@remix-run/node"; import { json } from "@remix-run/node"; import { useLoaderData } from "@remix-run/react"; import { compute } from "computesdk"; import { e2b } from "@computesdk/e2b"; export const loader = async ({ request }: LoaderFunctionArgs) => { try { const sandbox = await compute.sandbox.create({ provider: e2b({ apiKey: process.env.E2B_API_KEY! }) }); const result = await sandbox.runCode(` import sys import platform print(f"Python version: {sys.version}") print(f"Platform: {platform.platform()}") print("System ready!") `); await compute.sandbox.destroy(sandbox.sandboxId); return json({ status: "ready", info: result.stdout }); } catch (error: any) { return json({ status: "error", error: error.message }); } }; export default function Status() { const data = useLoaderData<typeof loader>(); return ( <div className="p-4"> <h1 className="text-xl font-bold mb-4">System Status</h1> <div className={`p-4 rounded ${ data.status === "ready" ? "bg-green-100" : "bg-red-100" }`}> <p className="font-semibold"> Status: <span className={ data.status === "ready" ? "text-green-700" : "text-red-700" }> {data.status} </span> </p> {data.status === "ready" ? ( <pre className="mt-2 text-sm">{data.info}</pre> ) : ( <p className="mt-2 text-red-700">{data.error}</p> )} </div> </div> ); } ``` ## Advanced Examples [Section titled “Advanced Examples”](#advanced-examples) ### File Upload Processing [Section titled “File Upload Processing”](#file-upload-processing) ``` // app/routes/upload.tsx import type { ActionFunctionArgs } from "@remix-run/node"; import { json, unstable_parseMultipartFormData, unstable_createMemoryUploadHandler } from "@remix-run/node"; import { Form, useActionData, useNavigation } from "@remix-run/react"; import { compute } from "computesdk"; import { e2b } from "@computesdk/e2b"; export const action = async ({ request }: ActionFunctionArgs) => { try { const uploadHandler = unstable_createMemoryUploadHandler({ maxPartSize: 500_000, // 500kb }); const formData = await unstable_parseMultipartFormData( request, uploadHandler ); const file = formData.get("file") as File; if (!file) { return json({ error: "No file uploaded" }, { status: 400 }); } const content = await file.text(); const sandbox = await compute.sandbox.create({ provider: e2b({ apiKey: process.env.E2B_API_KEY! }) }); // Save file and process await sandbox.filesystem.writeFile(`/uploads/${file.name}`, content); const result = await sandbox.runCode(` import os file_path = '/uploads/${file.name}' file_size = os.path.getsize(file_path) with open(file_path, 'r') as f: content = f.read() lines = len(content.split('\\n')) chars = len(content) print(f"File: ${file.name}") print(f"Size: {file_size} bytes") print(f"Lines: {lines}") print(f"Characters: {chars}") `); await compute.sandbox.destroy(sandbox.sandboxId); return json({ success: true, info: result.stdout }); } catch (error: any) { return json({ error: error.message }, { status: 500 }); } }; export default function Upload() { const actionData = useActionData<typeof action>(); const navigation = useNavigation(); const isUploading = navigation.state === "submitting"; return ( <div className="p-4"> <h1 className="text-xl font-bold mb-4">File Upload & Analysis</h1> <Form method="post" encType="multipart/form-data"> <div className="mb-4"> <label htmlFor="file" className="block text-sm font-medium mb-2"> Choose file to analyze </label> <input type="file" name="file" id="file" required className="border rounded px-3 py-2" /> </div> <button type="submit" disabled={isUploading} className="bg-blue-500 text-white px-4 py-2 rounded disabled:opacity-50" > {isUploading ? "Analyzing..." : "Upload & Analyze"} </button> </Form> {actionData && ( <div className="mt-6"> {actionData.success ? ( <div> <h3 className="text-lg font-semibold mb-2">Analysis Results</h3> <pre className="bg-gray-100 p-4 rounded"> {actionData.info} </pre> </div> ) : ( <div className="bg-red-100 p-4 rounded"> <p className="text-red-700">{actionData.error}</p> </div> )} </div> )} </div> ); } ``` ### Data Analysis with CSV [Section titled “Data Analysis with CSV”](#data-analysis-with-csv) ``` // app/routes/analyze.tsx import type { ActionFunctionArgs } from "@remix-run/node"; import { json } from "@remix-run/node"; import { Form, useActionData, useNavigation } from "@remix-run/react"; import { compute } from "computesdk"; import { e2b } from "@computesdk/e2b"; export const action = async ({ request }: ActionFunctionArgs) => { try { const formData = await request.formData(); const csvData = formData.get("csvData") as string; if (!csvData) { return json({ error: "CSV data is required" }, { status: 400 }); } const sandbox = await compute.sandbox.create({ provider: e2b({ apiKey: process.env.E2B_API_KEY! }) }); // Save CSV and analyze await sandbox.filesystem.writeFile('/data/input.csv', csvData); const result = await sandbox.runCode(` import pandas as pd import json # Read and analyze data df = pd.read_csv('/data/input.csv') analysis = { 'rows': len(df), 'columns': len(df.columns), 'column_names': df.columns.tolist(), 'summary': df.describe().to_dict(), 'missing_values': df.isnull().sum().to_dict(), 'dtypes': df.dtypes.astype(str).to_dict() } print(json.dumps(analysis, indent=2)) `); await compute.sandbox.destroy(sandbox.sandboxId); return json({ success: true, analysis: JSON.parse(result.stdout) }); } catch (error: any) { return json({ error: error.message }, { status: 500 }); } }; export default function Analyze() { const actionData = useActionData<typeof action>(); const navigation = useNavigation(); const isAnalyzing = navigation.state === "submitting"; const sampleData = `name,age,city Alice,25,New York Bob,30,San Francisco Charlie,35,Chicago Diana,28,Boston`; return ( <div className="p-4"> <h1 className="text-xl font-bold mb-4">CSV Data Analysis</h1> <Form method="post"> <div className="mb-4"> <label htmlFor="csvData" className="block text-sm font-medium mb-2"> CSV Data </label> <textarea name="csvData" id="csvData" defaultValue={sampleData} className="w-full h-32 p-3 font-mono text-sm border rounded" placeholder="Paste your CSV data here..." required /> </div> <button type="submit" disabled={isAnalyzing} className="bg-blue-500 text-white px-4 py-2 rounded disabled:opacity-50" > {isAnalyzing ? "Analyzing..." : "Analyze Data"} </button> </Form> {actionData && ( <div className="mt-6"> {actionData.success ? ( <div> <h3 className="text-lg font-semibold mb-2">Analysis Results</h3> <div className="grid grid-cols-1 md:grid-cols-2 gap-4"> <div className="bg-blue-50 p-4 rounded"> <h4 className="font-semibold mb-2">Dataset Info</h4> <p>Rows: {actionData.analysis.rows}</p> <p>Columns: {actionData.analysis.columns}</p> <p>Column Names: {actionData.analysis.column_names.join(', ')}</p> </div> <div className="bg-green-50 p-4 rounded"> <h4 className="font-semibold mb-2">Missing Values</h4> <pre className="text-sm"> {JSON.stringify(actionData.analysis.missing_values, null, 2)} </pre> </div> </div> <div className="mt-4"> <h4 className="font-semibold mb-2">Statistical Summary</h4> <pre className="bg-gray-100 p-4 rounded text-xs overflow-auto"> {JSON.stringify(actionData.analysis.summary, null, 2)} </pre> </div> </div> ) : ( <div className="bg-red-100 p-4 rounded"> <p className="text-red-700">{actionData.error}</p> </div> )} </div> )} </div> ); } ``` ### Multi-Step Workflow [Section titled “Multi-Step Workflow”](#multi-step-workflow) ``` // app/routes/workflow.tsx import type { ActionFunctionArgs } from "@remix-run/node"; import { json } from "@remix-run/node"; import { Form, useActionData, useNavigation } from "@remix-run/react"; import { compute } from "computesdk"; import { e2b } from "@computesdk/e2b"; interface WorkflowStep { step: number; action: string; output?: string; result?: any; } export const action = async ({ request }: ActionFunctionArgs) => { const sandbox = await compute.sandbox.create({ provider: e2b({ apiKey: process.env.E2B_API_KEY! }) }); try { const steps: WorkflowStep[] = []; // Step 1: Setup environment await sandbox.filesystem.mkdir('/workspace'); const setupResult = await sandbox.runCommand('pip', ['install', 'requests', 'beautifulsoup4']); steps.push({ step: 1, action: 'setup', output: setupResult.stdout }); // Step 2: Fetch data const fetchResult = await sandbox.runCode(` import requests import json # Simulate data fetch data = {"message": "Hello World", "timestamp": "2024-01-01"} # Save to file with open('/workspace/data.json', 'w') as f: json.dump(data, f) print("Data fetched and saved") `); steps.push({ step: 2, action: 'fetch', output: fetchResult.stdout }); // Step 3: Process data const processResult = await sandbox.runCode(` import json with open('/workspace/data.json', 'r') as f: data = json.load(f) # Process data result = { 'original': data, 'processed': data['message'].upper(), 'length': len(data['message']) } print(json.dumps(result)) `); steps.push({ step: 3, action: 'process', result: JSON.parse(processResult.stdout) }); return json({ success: true, steps }); } catch (error: any) { return json({ error: error.message }, { status: 500 }); } finally { await compute.sandbox.destroy(sandbox.sandboxId); } }; export default function Workflow() { const actionData = useActionData<typeof action>(); const navigation = useNavigation(); const isRunning = navigation.state === "submitting"; return ( <div className="p-4"> <h1 className="text-xl font-bold mb-4">Multi-Step Workflow</h1> <Form method="post"> <button type="submit" disabled={isRunning} className="bg-green-500 text-white px-6 py-3 rounded disabled:opacity-50" > {isRunning ? "Running Workflow..." : "Start Workflow"} </button> </Form> {actionData && ( <div className="mt-6"> {actionData.success ? ( <div> <h3 className="text-lg font-semibold mb-4">Workflow Results</h3> {actionData.steps.map((step: WorkflowStep) => ( <div key={step.step} className="mb-4 p-4 border rounded"> <h4 className="font-semibold mb-2"> Step {step.step}: {step.action} </h4> {step.output && ( <pre className="bg-gray-100 p-2 rounded text-sm mb-2"> {step.output} </pre> )} {step.result && ( <pre className="bg-green-50 p-2 rounded text-sm"> {JSON.stringify(step.result, null, 2)} </pre> )} </div> ))} </div> ) : ( <div className="bg-red-100 p-4 rounded"> <p className="text-red-700">{actionData.error}</p> </div> )} </div> )} </div> ); } ``` ## Best Practices [Section titled “Best Practices”](#best-practices) ### 1. Error Handling [Section titled “1. Error Handling”](#1-error-handling) ``` // app/utils/compute-error-handler.ts import { json } from "@remix-run/node"; export const handleComputeError = (error: any) => { console.error('Sandbox error:', error); // Don't expose sensitive error details in production const message = process.env.NODE_ENV === 'development' ? error.message : 'Internal server error'; return json({ error: message }, { status: 500 }); }; ``` ### 2. Input Validation [Section titled “2. Input Validation”](#2-input-validation) ``` // app/utils/validation.ts import { json } from "@remix-run/node"; export const validateCode = (code: string) => { if (!code) { throw json({ error: "Code is required" }, { status: 400 }); } if (code.length > 10000) { throw json({ error: "Code too long (max 10,000 characters)" }, { status: 400 }); } return code; }; export const validateRuntime = (runtime: string) => { if (!['python', 'node'].includes(runtime)) { throw json({ error: "Invalid runtime" }, { status: 400 }); } return runtime as 'python' | 'node'; }; ``` ### 3. Resource Management [Section titled “3. Resource Management”](#3-resource-management) ``` // app/utils/sandbox-manager.ts import { compute } from "computesdk"; export const withSandbox = async <T>( provider: any, callback: (sandbox: any) => Promise<T> ): Promise<T> => { const sandbox = await compute.sandbox.create({ provider }); try { return await callback(sandbox); } finally { await compute.sandbox.destroy(sandbox.sandboxId); } }; ``` ### 4. Provider Configuration [Section titled “4. Provider Configuration”](#4-provider-configuration) ``` // app/utils/providers.ts import { e2b } from "@computesdk/e2b"; import { vercel } from "@computesdk/vercel"; import { daytona } from "@computesdk/daytona"; export const getProvider = () => { if (process.env.E2B_API_KEY) { return e2b({ apiKey: process.env.E2B_API_KEY }); } if (process.env.VERCEL_TOKEN) { return vercel({ token: process.env.VERCEL_TOKEN, teamId: process.env.VERCEL_TEAM_ID!, projectId: process.env.VERCEL_PROJECT_ID! }); } if (process.env.DAYTONA_API_KEY) { return daytona({ apiKey: process.env.DAYTONA_API_KEY }); } throw new Error('No compute provider configured'); }; ``` ## Deployment [Section titled “Deployment”](#deployment) ### Environment Variables [Section titled “Environment Variables”](#environment-variables) Set your environment variables in your deployment platform: ``` # Production environment variables E2B_API_KEY=your_production_e2b_key VERCEL_TOKEN=your_production_vercel_token VERCEL_TEAM_ID=your_team_id VERCEL_PROJECT_ID=your_project_id DAYTONA_API_KEY=your_production_daytona_key ``` ### Build Configuration [Section titled “Build Configuration”](#build-configuration) Ensure your Remix build is properly configured: ``` // remix.config.js export default { ignoredRouteFiles: ["**/.*"], serverModuleFormat: "cjs", serverPlatform: "node", serverMinify: false, // Add any other configuration specific to your deployment }; ``` ## Troubleshooting [Section titled “Troubleshooting”](#troubleshooting) **Environment variables not loading?** * Check `.env` file exists and has correct format * Restart dev server after changes * Verify environment variables are set in production **Sandbox creation fails?** * Verify API keys are correct and have proper format * Check provider-specific setup requirements * Monitor rate limits and quotas **Form submission issues?** * Ensure proper CSRF protection if enabled * Check request body parsing (JSON vs FormData) * Verify action routes are properly defined **Loader vs Action confusion?** * Use loaders for read-only operations (GET requests) * Use actions for mutations and code execution (POST/PUT/DELETE) * Remember loaders run on page load, actions run on form submission **Client hydration issues?** * ComputeSDK should only run server-side (loaders/actions) * Don’t import ComputeSDK in client-side components * Use Remix’s data loading patterns for client-server communication

# SvelteKit

> Use ComputeSDK in SvelteKit applications

# ComputeSDK + SvelteKit [Section titled “ComputeSDK + SvelteKit”](#computesdk--sveltekit) Use ComputeSDK to execute code in secure sandboxes from your SvelteKit server routes. ## Setup [Section titled “Setup”](#setup) ### 1. Install Dependencies [Section titled “1. Install Dependencies”](#1-install-dependencies) ``` npm install computesdk # Provider packages (install what you need) npm install @computesdk/e2b # E2B provider npm install @computesdk/vercel # Vercel provider npm install @computesdk/daytona # Daytona provider ``` ### 2. Configure Environment Variables [Section titled “2. Configure Environment Variables”](#2-configure-environment-variables) Create a `.env` file and add your provider credentials: ``` # E2B (get from e2b.dev) E2B_API_KEY=e2b_your_api_key_here # Vercel # Method 1: OIDC Token (recommended) vercel env pull # Downloads VERCEL_OIDC_TOKEN # Method 2: Traditional VERCEL_TOKEN=your_vercel_token_here VERCEL_TEAM_ID=your_team_id_here VERCEL_PROJECT_ID=your_project_id_here # Daytona (get from your Daytona instance) DAYTONA_API_KEY=your_daytona_api_key_here ``` ### 3. Run Development Server [Section titled “3. Run Development Server”](#3-run-development-server) ``` npm run dev ``` Navigate to <http://localhost:5173> ## Implementation [Section titled “Implementation”](#implementation) ### API Route with Request Handler [Section titled “API Route with Request Handler”](#api-route-with-request-handler) The simplest way to use ComputeSDK in SvelteKit is with the built-in request handler: ``` // src/routes/api/compute/+server.ts import { json, error } from '@sveltejs/kit'; import { handleComputeRequest } from 'computesdk'; import { e2b } from '@computesdk/e2b'; export const POST = async ({ request }: { request: Request }) => { const computeRequest = await request.json(); const response = await handleComputeRequest({ request: computeRequest, provider: e2b({ apiKey: process.env.E2B_API_KEY! }) }); if (!response.success) { throw error(500, response.error || 'Unknown error occurred'); } return json(response); }; ``` ### Custom API Route [Section titled “Custom API Route”](#custom-api-route) For more control, create a custom API route: ``` // src/routes/api/sandbox/+server.ts import { json, error } from '@sveltejs/kit'; import { compute } from 'computesdk'; import { e2b } from '@computesdk/e2b'; export const POST = async ({ request }) => { try { const { code, runtime } = await request.json(); // Set provider compute.setConfig({ provider: e2b({ apiKey: process.env.E2B_API_KEY! }) }); // Create sandbox and execute code const sandbox = await compute.sandbox.create({}); const result = await sandbox.runCode(code, runtime); // Clean up await compute.sandbox.destroy(sandbox.sandboxId); return json({ success: true, stdout: result.stdout, stderr: result.stderr, executionTime: result.executionTime }); } catch (err: any) { throw error(500, err.message || 'Unknown error'); } }; ``` ### Frontend Integration [Section titled “Frontend Integration”](#frontend-integration) Call your API from Svelte components: ```  <script lang="ts"> import { onMount } from 'svelte'; let code = 'print("Hello World!")'; let output = ''; let loading = false; let runtime: 'python' | 'node' = 'python'; const executeCode = async () => { loading = true; try { const response = await fetch('/api/compute', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ action: 'compute.sandbox.runCode', code, runtime }) }); const data = await response.json(); if (data.success) { output = data.result.stdout; } else { output = `Error: ${data.error}`; } } catch (err: any) { output = `Error: ${err.message}`; } finally { loading = false; } }; </script> <div class="container"> <h1>Code Executor</h1> <div class="controls"> <select bind:value={runtime}> <option value="python">Python</option> <option value="node">Node.js</option> </select> </div> <textarea bind:value={code} placeholder="Enter your code here..." rows="10" cols="80" >

{#if output}

{output}

{/if}

setCode(e.target.value)} rows={10} cols={50} /> <button onClick={executeCode} disabled={loading}> {loading ? 'Executing...' : 'Execute'} </button> {result && ( <pre> {result.success ? result.result?.stdout : result.error} </pre> )} </div> ) } ``` ### Vue Example [Section titled “Vue Example”](#vue-example) ``` import { ref, computed } from 'vue' import { useCompute, type ComputeResponse } from '@computesdk/ui' export function useCodeExecution() { const code = ref('print("Hello World!")') const result = ref<ComputeResponse | null>(null) const loading = ref(false) const compute = useCompute({ apiEndpoint: '/api/compute', defaultRuntime: 'python' }) const output = computed(() => { if (!result.value) return '' return result.value.success ? result.value.result?.stdout || '' : result.value.error || 'Unknown error' }) const execute = async () => { loading.value = true try { const sandbox = await compute.sandbox.create() result.value = await sandbox.runCode(code.value) await sandbox.destroy() } catch (error) { console.error('Execution failed:', error) } finally { loading.value = false } } return { code, result, loading, output, execute } } ``` ### Svelte Example [Section titled “Svelte Example”](#svelte-example) ``` import { writable } from 'svelte/store' import { useCompute, type ComputeResponse } from '@computesdk/ui' export const code = writable('print("Hello World!")') export const result = writable<ComputeResponse | null>(null) export const loading = writable(false) const compute = useCompute({ apiEndpoint: '/api/compute', defaultRuntime: 'python' }) export async function execute() { loading.set(true) try { const sandbox = await compute.sandbox.create() const response = await sandbox.runCode(get(code)) result.set(response) await sandbox.destroy() } catch (error) { console.error('Execution failed:', error) } finally { loading.set(false) } } ``` ## Terminal Integration [Section titled “Terminal Integration”](#terminal-integration) Real-time terminal with Server-Sent Events: ``` import { useCompute } from '@computesdk/ui' const compute = useCompute() // Create sandbox and terminal const sandbox = await compute.sandbox.create() const terminal = await sandbox.terminal.create({ command: 'bash', cols: 80, rows: 24 }) // Set up real-time output handler terminal.onData = (data: Uint8Array) => { const output = new TextDecoder().decode(data) console.log('Terminal output:', output) // Update your terminal UI here } // Send commands await terminal.write('echo "Hello Terminal!"\n') await terminal.write('ls -la\n') // Handle terminal resize await terminal.resize(120, 30) // Clean up await terminal.kill() await sandbox.destroy() ``` ## Filesystem Operations [Section titled “Filesystem Operations”](#filesystem-operations) ``` import { useCompute } from '@computesdk/ui' const compute = useCompute() const sandbox = await compute.sandbox.create() // Create project structure await sandbox.filesystem.mkdir('/project/data') await sandbox.filesystem.mkdir('/project/output') // Write files await sandbox.filesystem.writeFile('/project/data/input.txt', 'Hello World!') await sandbox.filesystem.writeFile('/project/script.py', ` with open('/project/data/input.txt', 'r') as f: content = f.read() with open('/project/output/result.txt', 'w') as f: f.write(f"Processed: {content.upper()}") print("Processing complete!") `) // Execute script const result = await sandbox.runCode(`exec(open('/project/script.py').read())`) console.log(result.result?.stdout) // Read results const output = await sandbox.filesystem.readFile('/project/output/result.txt') console.log('Result:', output.fileContent) // List files const files = await sandbox.filesystem.readdir('/project') console.log('Project files:', files.files) ``` ## Error Handling [Section titled “Error Handling”](#error-handling) ``` import { useCompute, APIError, isComputeError, getErrorMessage } from '@computesdk/ui' const compute = useCompute() try { const sandbox = await compute.sandbox.create() const result = await sandbox.runCode('invalid python code') if (isComputeError(result)) { console.error('Compute error:', getErrorMessage(result)) } else { console.log('Success:', result.result?.stdout) } } catch (error) { if (error instanceof APIError) { console.error('API Error:', error.message, 'Status:', error.status) } else { console.error('Unexpected error:', error) } } ``` ## Server-Side Integration [Section titled “Server-Side Integration”](#server-side-integration) Your server should implement the ComputeSDK request handler: ``` // /api/compute endpoint import { handleComputeRequest } from 'computesdk' import { e2b } from '@computesdk/e2b' export async function GET(request: Request) { return handleComputeRequest({ request, provider: e2b({ apiKey: process.env.E2B_API_KEY }) }) } export async function POST(request: Request) { return handleComputeRequest({ request, provider: e2b({ apiKey: process.env.E2B_API_KEY }) }) } ``` ## Examples [Section titled “Examples”](#examples) See the [ComputeSDK examples](https://github.com/computesdk/computesdk/tree/main/examples) for complete framework integrations: * [Next.js](https://github.com/computesdk/computesdk/tree/main/examples/nextjs) * [Nuxt](https://github.com/computesdk/computesdk/tree/main/examples/nuxt) * [SvelteKit](https://github.com/computesdk/computesdk/tree/main/examples/sveltekit) * [Remix](https://github.com/computesdk/computesdk/tree/main/examples/remix) * [Astro](https://github.com/computesdk/computesdk/tree/main/examples/astro)

# Server

> Server by Compute SDK.

![Compute SDK Server](/computesdk-server-light-mode.svg) ![Compute SDK Server](/computesdk-server-dark-mode.svg) $997 /year ### What’s included in Early Access? Early access exclusive onboarding Early access exclusive access to Campfire community API key + single domain license with wildcard support Images and binaries Easy installation (3 minute installation \[link on page]) The manifest files (via GitHub Repo) Continuous updates and support ### How do we get it? After purchase, we'll give you an API key and install instructions on how to use our command line utility to get started immediately. Get early access  Early Access ![Compute SDK Server](/computesdk-server-light-mode.svg) ![Compute SDK Server](/computesdk-server-dark-mode.svg) Code sandboxes you control A developer-first primitive to embed compute into your app, agent, or workflows. If you've needed to execute code safely in your applications, you already know the challenges. Instead of paying forever and sending your code to someone else's servers, you get the platform and run it on your own Kubernetes cluster. It's yours.  ### What is it? Our platform is a self-hosted code execution system that runs on your Kubernetes infrastructure. Easily spin up sandboxes, execute code safely, and integrate with your applications. Full Docker compatibility, language-agnostic execution, and enterprise security. And since you deploy it yourself on your own infrastructure, you control your data, your costs, and your compliance. ### But executing arbitrary code is risky Exactly. Running untrusted code can compromise your servers, steal data, or crash your applications. Most teams either avoid the problem entirely or cobble together unsafe solutions with Docker and crossed fingers. That's why we built a platform specifically for safe code execution - complete isolation, resource limits, and security policies that actually work. Companies are already using our platform to safely execute user code, AI-generated scripts, and automated workflows without the security nightmares. Take a closer look ![](https://tailwindcss.com/plus-assets/img/component-images/project-app-screenshot.png) Deploy on your own K8s cluster, scale automatically, monitor everything from your existing tools. ![](https://tailwindcss.com/plus-assets/img/component-images/project-app-screenshot.png) Simple REST API to create sandboxes, execute code, and retrieve results. Language-agnostic with full Docker support. ![](https://tailwindcss.com/plus-assets/img/component-images/project-app-screenshot.png) Complete process isolation, network policies, and resource limits. Your security policies, your infrastructure. ## It fits in a lot of places * **As your primary code execution backend. **Tired of paying month after month forever just to run user code? Slash your costs, deploy our platform, and make it your primary execution environment. * **For AI agents and LLM applications.** Give your AI agents the ability to execute code safely without sending sensitive data to third-party services. Perfect for code generation, data analysis, and automated workflows. * **For educational platforms.** Deploy sandboxes for student code execution, programming challenges, and interactive learning environments. Keep student code on your infrastructure. * **For enterprise applications.** Run customer code, process sensitive data, or execute workflows while maintaining complete control over security and compliance. * **For development tools.** Build CI/CD pipelines, testing environments, or code playgrounds that run entirely on your infrastructure. * **For data processing workflows.** Execute notebooks, run analytics, or process datasets without vendor lock-in or data egress fees. ## Deployment Our platform is designed for simple Kubernetes deployment. Use our CLI to get up and running in minutes, or deploy manually with Helm charts if you prefer full control. ``` # Install via our CLI (recommended) npm create compute ``` The platform runs on any Kubernetes cluster - on-premises, cloud (EKS, GKE, AKS), or managed services. Our CLI automatically configures ingress, monitoring, and security policies. But if you're technically sophisticated, you can also customize the entire deployment to fit your existing infrastructure. ## Frequently asked questions #### Just $997 per year, self-hosted, really? No per-execution fees? Yes, our platform is $997 per year per cluster deployment, not per execution or per user. No surprise bills, no usage limits, no data egress fees. You deploy it, you own the compute costs. Like buying a database instead of renting one. #### Does each developer have to install anything? Nope — one person (you, your DevOps team, etc.) deploys it to your Kubernetes cluster using our CLI or Helm charts. Once it's running, developers integrate via our REST API, SDKs, or existing tools. No client-side installation required. #### How do updates work? Do they cost extra? Each deployment can check for updates automatically via Helm or you can manage updates manually. Minor version updates (like from 1.0 to 1.1) are included. Major version upgrades may require a new license. You control when and how to upgrade. #### What languages and runtimes are supported? All of them. Our platform uses Docker containers, so any language or runtime that can run in Docker can run in our sandboxes. We provide pre-built images for popular languages and you can bring your own custom images. #### Is monitoring and observability included? Our platform integrates seamlessly with your existing monitoring stack (Prometheus, Grafana, DataDog, etc.). We expose standard metrics and logs through your cluster's monitoring setup - no separate dashboards to learn or vendor lock-in for observability. Your monitoring tools, your data. #### WCan we run this in air-gapped environments? Absolutely. Since everything runs on your infrastructure, our platform works perfectly in air-gapped networks without internet access. Excellent for regulated industries, government, or high-security environments. #### How does security and isolation work? Each sandbox runs in its own container with configurable resource limits, network policies, and filesystem isolation. Full support for Pod Security Standards, network segmentation, and integration with your existing security tools. #### Can we customize the execution environment? Yes! You get full control over the base images, installed packages, environment variables, and resource limits. Build your own images or extend our pre-built ones. #### What about compliance and data residency? Since everything runs on your infrastructure, you maintain complete control over data location, retention, and compliance requirements. GDPR, HIPAA, SOC 2 — whatever you need, you control. #### Can we integrate with our existing CI/CD pipeline? Absolutely. REST API, webhooks, and pre-built integrations for popular CI/CD tools. Use it as a step in your pipeline or as a backend for your development tools. #### What if we need support or have issues? Email support is included with annual licenses. That means help with deployment, configuration, scaling, and troubleshooting. We'll help you succeed, but we can't manage your Kubernetes cluster for you.  ![Compute SDK Server](/computesdk-server-light-mode.svg) ![Compute SDK Server](/computesdk-server-dark-mode.svg) $997 /year ### What’s included in Early Access? Early access exclusive onboarding Early access exclusive access to Campfire community API key + single domain license with wildcard support Images and binaries Easy installation (3 minute installation \[link on page]) The manifest files (via GitHub Repo) Continuous updates and support ### How do we get it? After purchase, we'll give you an API key and install instructions on how to use our command line utility to get started immediately. Get early access   [X ](https://x.com/computesdk)[GitHub ](https://github.com/computesdk/computesdk)  © 2025 ComputeSDK, Inc. All rights reserved.

# Installation

> Install ComputeSDK and set up providers

## Installation [Section titled “Installation”](#installation) ComputeSDK provides a unified abstraction layer for executing code in secure, isolated sandboxed environments across multiple cloud providers. ### Core SDK [Section titled “Core SDK”](#core-sdk) Install the core ComputeSDK package: ``` npm install computesdk ``` ### Provider Packages [Section titled “Provider Packages”](#provider-packages) ComputeSDK is modular - install only the providers you need: ``` # E2B provider - Full development environment npm install @computesdk/e2b # Vercel provider - Scalable serverless execution npm install @computesdk/vercel # Daytona provider - Development workspaces npm install @computesdk/daytona # Frontend integration (optional) npm install @computesdk/ui ``` ## Provider Setup [Section titled “Provider Setup”](#provider-setup) ### E2B - Full Development Environment [Section titled “E2B - Full Development Environment”](#e2b---full-development-environment) E2B provides full filesystem and terminal support with data science libraries: ``` export E2B_API_KEY=e2b_your_api_key_here ``` ### Vercel - Scalable Serverless Execution [Section titled “Vercel - Scalable Serverless Execution”](#vercel---scalable-serverless-execution) Vercel provides reliable execution with up to 45 minutes runtime: ``` # Method 1: OIDC Token (Recommended) vercel env pull # Downloads VERCEL_OIDC_TOKEN # Method 2: Traditional export VERCEL_TOKEN=your_vercel_token_here export VERCEL_TEAM_ID=your_team_id_here export VERCEL_PROJECT_ID=your_project_id_here ``` ### Daytona - Development Workspaces [Section titled “Daytona - Development Workspaces”](#daytona---development-workspaces) Daytona provides development workspace environments: ``` export DAYTONA_API_KEY=your_daytona_api_key_here ```