React hooks and components for the EnclaveJS streaming runtime
npm install @enclave-vm/react
> React hooks and components for the EnclaveJS streaming runtime
The @enclave-vm/react package provides React bindings for EnclaveJS, including hooks for code execution, connection management, and pre-built components for common use cases like code editors and output displays.
- React Hooks: useEnclave, useExecution, useSession hooks
- Context Provider: Share client instance across components
- TypeScript Support: Full type definitions
- SSR Compatible: Works with Next.js and other SSR frameworks
- Suspense Ready: Built-in support for React Suspense
``bash`
npm install @enclave-vm/react @enclave-vm/clientor
yarn add @enclave-vm/react @enclave-vm/clientor
pnpm add @enclave-vm/react @enclave-vm/client
`tsx
import { EnclaveProvider, useEnclave } from '@enclave-vm/react';
function App() {
return (
);
}
function CodeRunner() {
const { execute, isConnected, isExecuting } = useEnclave();
const [result, setResult] = useState(null);
const runCode = async () => {
const res = await execute(
const user = await callTool('getUser', { id: 1 });
return user.name;
);
setResult(res.value);
};
return (
Hooks
$3
Main hook for interacting with the EnclaveJS runtime:
tsx
import { useEnclave } from '@enclave-vm/react';function MyComponent() {
const {
// Connection
isConnected,
connect,
disconnect,
// Execution
execute,
stream,
isExecuting,
// Session
sessionId,
createSession,
destroySession,
// Events
onToolCall,
onToolResult,
onLog,
onError,
} = useEnclave();
// Subscribe to tool calls
useEffect(() => {
const unsubscribe = onToolCall((call) => {
console.log('Tool called:', call.name);
});
return unsubscribe;
}, [onToolCall]);
return
{isConnected ? 'Connected' : 'Disconnected'};
}
`$3
Hook for managing individual code executions:
tsx
import { useExecution } from '@enclave-vm/react';function ExecutionComponent() {
const { execute, result, error, isLoading, toolCalls } = useExecution();
return (
{isLoading &&
Executing...}
{error && Error: {error.message}}
{result && Result: {JSON.stringify(result.value)}}
Tool Calls:
{toolCalls.map((call) => (
{call.name}: {JSON.stringify(call.args)}
))}
);
}
`$3
Hook for persistent session management:
tsx
import { useSession } from '@enclave-vm/react';function SessionComponent() {
const { session, create, destroy, execute, isActive } = useSession();
useEffect(() => {
create({ timeout: 60000 });
return () => destroy();
}, []);
if (!isActive) return
No active session; return (
Session: {session.id}
);
}
`Provider Options
tsx
import { EnclaveProvider } from '@enclave-vm/react';function App() {
return (
auth={{ token: 'your-token' }}
autoConnect={true}
reconnect={{
enabled: true,
maxAttempts: 5,
}}
onConnected={() => console.log('Connected!')}
onDisconnected={() => console.log('Disconnected')}
onError={(error) => console.error(error)}
>
);
}
`Streaming Results
Handle streaming execution with real-time updates:
tsx
import { useEnclave } from '@enclave-vm/react';function StreamingComponent() {
const { stream } = useEnclave();
const [items, setItems] = useState([]);
const runStreaming = async () => {
setItems([]);
await stream(
,
{
onYield: (value) => {
setItems((prev) => [...prev, value]);
},
},
);
}; return (
{items.map((item, i) => (
- {JSON.stringify(item)}
))}
);
}
`Error Boundaries
Use with React error boundaries:
tsx
import { EnclaveErrorBoundary } from '@enclave-vm/react';function App() {
return (
Something went wrong: {error.message}
)}
>
);
}
`Server Components (Next.js)
For Next.js App Router, use client components:
tsx
// components/code-runner.tsx
'use client';import { EnclaveProvider, useEnclave } from '@enclave-vm/react';
export function CodeRunner() {
return (
);
}
``| Package | Description |
| ------------------------------------------- | --------------------------------- |
| @enclave-vm/types | Type definitions and Zod schemas |
| @enclave-vm/client | Browser/Node.js client SDK |
| @enclave-vm/stream | Streaming protocol implementation |
| @enclave-vm/runtime | Standalone runtime worker |
Apache-2.0