'use client'; import { useState, useEffect } from 'react'; import { Terminal, Check, ArrowRight } from 'lucide-react'; const ADAPTERS = [ { label: 'Claude Code', color: '#D97757', x: 35, y: 30, logo: '/logos/claude.svg' }, { label: 'Codex', color: '#10A37F', x: 185, y: 30, logo: 'openai' }, { label: 'Amp', color: '#F59E0B', x: 35, y: 115, logo: '/logos/amp.svg' }, { label: 'OpenCode', color: '#8B5CF6', x: 185, y: 115, logo: 'opencode' }, { label: 'Pi', color: '#38BDF8', x: 110, y: 200, logo: '/logos/pi.svg' }, ]; function UniversalAPIDiagram() { const [activeIndex, setActiveIndex] = useState(0); useEffect(() => { const interval = setInterval(() => { setActiveIndex((prev) => (prev + 1) % ADAPTERS.length); }, 2000); return () => clearInterval(interval); }, []); return (
{/* Background Grid */}
{/* Dynamic Background Glow */}
{/* YOUR APP NODE */} Your App {/* HTTP/SSE LINE */} HTTP / SSE {/* SANDBOX BOUNDARY */} SANDBOX {/* SANDBOX AGENT SDK */} Sandbox Agent Server {/* PROVIDER ADAPTERS */} {ADAPTERS.map((p, i) => { const isActive = i === activeIndex; return ( {p.logo === 'openai' ? ( ) : p.logo === 'opencode' ? ( ) : ( )} {p.label} ); })} {/* Active Agent Label */} CONNECTED TO {ADAPTERS[activeIndex].label.toUpperCase()}
); } const CopyInstallButton = () => { const [copied, setCopied] = useState(false); const installCommand = 'npx skills add rivet-dev/skills -s sandbox-agent'; const handleCopy = async () => { try { await navigator.clipboard.writeText(installCommand); setCopied(true); setTimeout(() => setCopied(false), 2000); } catch (err) { console.error('Failed to copy:', err); } }; return ( ); }; export function Hero() { return (

Run Coding Agents in Sandboxes.
Control Them Over HTTP.

The Sandbox Agent SDK is a server that runs inside your sandbox. Your app connects remotely to control Claude Code, Codex, OpenCode, Amp, or Pi — streaming events, handling permissions, managing sessions.

); }