'use client'; import { useState, useEffect } from 'react'; import { motion } from 'framer-motion'; import { Terminal, Check, ArrowRight } from 'lucide-react'; const ADAPTERS = [ { label: 'Claude Code', color: '#D97757', x: 20, y: 70, logo: '/logos/claude.svg' }, { label: 'Codex', color: '#10A37F', x: 132, y: 70, logo: 'openai' }, { label: 'Pi', color: '#06B6D4', x: 244, y: 70, logo: 'pi' }, { label: 'Amp', color: '#F59E0B', x: 76, y: 155, logo: '/logos/amp.svg' }, { label: 'OpenCode', color: '#8B5CF6', x: 188, y: 155, logo: 'opencode' }, ]; function UniversalAPIDiagram() { const [activeIndex, setActiveIndex] = useState(0); useEffect(() => { const interval = setInterval(() => { setActiveIndex((prev) => (prev + 1) % ADAPTERS.length); }, 2000); return () => clearInterval(interval); }, []); return (
{/* Background Dots - color changes with active adapter */}
{/* YOUR APP NODE - Glass dark effect with backdrop blur */}
Your App
{/* HTTP/SSE LINE */} HTTP / SSE {/* SANDBOX BOUNDARY - Glass dark effect with backdrop blur */}
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.logo === 'pi' ? ( ) : ( )} {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 shortCommand = 'npx skills add rivet-dev/skills'; const handleCopy = async () => { try { await navigator.clipboard.writeText(installCommand); setCopied(true); setTimeout(() => setCopied(false), 2000); } catch (err) { console.error('Failed to copy:', err); } }; return (
Give this to your coding agent
); }; export function Hero() { const [scrollOpacity, setScrollOpacity] = useState(1); const [isMobile, setIsMobile] = useState(false); useEffect(() => { const updateViewportMode = () => { const mobile = window.innerWidth < 1024; setIsMobile(mobile); if (mobile) { setScrollOpacity(1); } }; const handleScroll = () => { if (window.innerWidth < 1024) { setScrollOpacity(1); return; } const scrollY = window.scrollY; const windowHeight = window.innerHeight; const fadeStart = windowHeight * 0.15; const fadeEnd = windowHeight * 0.5; const opacity = 1 - Math.min(1, Math.max(0, (scrollY - fadeStart) / (fadeEnd - fadeStart))); setScrollOpacity(opacity); }; updateViewportMode(); handleScroll(); window.addEventListener('resize', updateViewportMode); window.addEventListener('scroll', handleScroll); return () => { window.removeEventListener('resize', updateViewportMode); window.removeEventListener('scroll', handleScroll); }; }, []); return (
{/* Background gradient */}
{/* Main content */}
{/* Left side - Text content */}
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. Read the Docs
{/* Right side - Diagram */}
); }