diff --git a/docs/docs.json b/docs/docs.json index dddabed..35ec97c 100644 --- a/docs/docs.json +++ b/docs/docs.json @@ -21,7 +21,7 @@ { "label": "Discord", "icon": "discord", - "href": "https://rivet.dev/discord" + "href": "https://discord.gg/auCecybynK" }, { "label": "GitHub", diff --git a/frontend/packages/website/public/og.png b/frontend/packages/website/public/og.png new file mode 100644 index 0000000..3a74fc3 Binary files /dev/null and b/frontend/packages/website/public/og.png differ diff --git a/frontend/packages/website/src/components/CTASection.tsx b/frontend/packages/website/src/components/CTASection.tsx index 082e6d7..5328b84 100644 --- a/frontend/packages/website/src/components/CTASection.tsx +++ b/frontend/packages/website/src/components/CTASection.tsx @@ -5,14 +5,13 @@ import { motion, AnimatePresence } from 'framer-motion'; import { ArrowRight, Terminal, Check } from 'lucide-react'; const CTA_TITLES = [ - 'Control any coding agent with one SDK.', - 'Claude Code, Codex, OpenCode, Amp — unified.', - 'Swap agents without refactoring.', - 'Universal events. Universal sessions.', - 'Stream, store, and replay agent transcripts.', - 'Human-in-the-loop, built in.', - 'One SDK. Every coding agent.', - 'Deploy anywhere. Same API everywhere.', + 'Run coding agents in sandboxes. Control them over HTTP.', + 'A server inside your sandbox. An API for your app.', + 'Claude Code, Codex, OpenCode, Amp — one HTTP API.', + 'Your app connects remotely. The coding agent runs isolated.', + 'Streaming events. Handling permissions. Managing sessions.', + 'Install with curl. Connect over HTTP. Control any coding agent.', + 'The bridge between your app and sandboxed coding agents.', ]; function AnimatedCTATitle() { @@ -72,7 +71,6 @@ const CopyInstallButton = () => { export function CTASection() { return (
-
- Universal SDK for coding agents.
- Control Claude Code, Codex, OpenCode, and Amp with one API. + A server that runs inside isolated environments.
+ Your app connects remotely to control any coding agent.

- Common questions about the Coding Agent SDK. + Common questions about running agents in sandboxes.

diff --git a/frontend/packages/website/src/components/FeatureGrid.tsx b/frontend/packages/website/src/components/FeatureGrid.tsx index c5bcdca..ede7386 100644 --- a/frontend/packages/website/src/components/FeatureGrid.tsx +++ b/frontend/packages/website/src/components/FeatureGrid.tsx @@ -2,40 +2,6 @@ import { Workflow, Server, Database, Download, Globe } from 'lucide-react'; import { FeatureIcon } from './ui/FeatureIcon'; -import { CopyButton } from './ui/CopyButton'; - -function AgentLogo({ name, color, src }: { name: string; color: string; src?: string }) { - return ( -
- {src ? ( - {name} - ) : ( -
- {name[0]} -
- )} - {name} -
- ); -} - -function ProviderLogo({ name, src }: { name: string; src?: string }) { - return ( -
- {src ? ( - {name} - ) : ( -
- D -
- )} - {name} -
- ); -} export function FeatureGrid() { return ( @@ -43,216 +9,90 @@ export function FeatureGrid() {

- Full feature coverage. + How it works.

- Available as an HTTP API or TypeScript SDK. + A server runs inside your sandbox. Your app connects over HTTP to control any coding agent.

-
- {/* Universal Agent API - Span 7 cols */} -
+
+ {/* Universal Agent API - Span full width */} +
{/* Top Shine Highlight */}
{/* Top Left Reflection/Glow */}
{/* Sharp Edge Highlight */}
- +
-

Universal Agent API

-

+

Claude Code, Codex, OpenCode, and Amp each have different APIs. We provide a single, unified interface to control them all.

- -
-
- {/* Subtle Background Grid */} -
- - - - {/* Glow effect for active lines */} - - - - - - - {/* Define curved paths with their respective brand colors */} - {(() => { - const curvedPaths = [ - { d: "M480 225 C540 225, 560 90, 620 90", label: "Claude", color: "#d97757" }, - { d: "M480 225 C540 225, 560 180, 620 180", label: "OpenAI", color: "#ffffff" }, - { d: "M480 225 C540 225, 560 270, 620 270", label: "OpenCode", color: "#10B981" }, - { d: "M480 225 C540 225, 560 360, 620 360", label: "Amp", color: "#F59E0B" } - ]; - - return ( - <> - {/* Connection Lines */} - - {/* App -> Agent (Straight) */} - - - {/* Agent -> Providers (Curved) */} - {curvedPaths.map((path, i) => ( - - ))} - - - {/* High-Performance Tracers */} - {/* Blue Tracer: App to SDK */} - - - - - - {/* Colored Tracers: SDK to Providers (following curves and matching brand colors) */} - {curvedPaths.map((path, i) => ( - - - - - ))} - - ); - })()} - - {/* Nodes */} - {/* App Node */} - - - Client App - - - {/* Central SDK Node */} - - - Sandbox Agent SDK - - - {/* Provider Nodes with Logos - Vertical Layout (centered) */} - {/* Claude */} - - - -
- Claude -
- - Claude Code - - - {/* Codex */} - - - -
- - - -
- - Codex - - - {/* OpenCode */} - - - -
- - - - -
- - OpenCode - - - {/* Amp */} - - - -
- Amp -
- - Amp - - -
-
- - {/* Server Mode - Span 5 cols */} -
+ {/* Streaming Events */} +
{/* Top Shine Highlight */}
{/* Top Left Reflection/Glow */}
{/* Sharp Edge Highlight */}
- +
- -

Server Mode

+

Streaming Events

- Run as an HTTP server anywhere. One command to bridge coding agents to your - application. + Real-time SSE stream of everything the agent does. Persist to your storage, replay sessions, audit everything.

-
- $ sandbox-agent server -
- {/* Universal Schema - Span 5 cols */} -
+ {/* Handling Permissions */} +
{/* Top Shine Highlight */}
{/* Top Left Reflection/Glow */}
{/* Sharp Edge Highlight */}
- +
- -

Universal Schema

+

Handling Permissions

- Standardized session schema that covers all features of all agents. Includes tool calls, permission requests, file edits, etc. + Approve or deny tool executions remotely over HTTP. Human-in-the-loop flows work seamlessly across the network.

- {/* Automatic Agent Installation - Span 8 cols */} -
+ {/* Managing Sessions */} +
{/* Top Shine Highlight */}
{/* Top Left Reflection/Glow */} @@ -260,67 +100,43 @@ export function FeatureGrid() { {/* Sharp Edge Highlight */}
-
-
- -

Automatic Agent Installation

-
-

- Agents are automatically installed on first use. No manual setup required. -

-
-
-
- {['Claude Code', 'Codex', 'OpenCode', 'Amp'].map((agent) => ( - - {agent} - - ))} -
+
+ +

Managing Sessions

+

+ Create sessions, send messages, persist transcripts. Full session lifecycle management over HTTP. +

- {/* Provider Agnostic - Span 4 cols */} -
+ {/* Runs Inside Any Sandbox */} +
{/* Top Shine Highlight */}
{/* Top Left Reflection/Glow */}
{/* Sharp Edge Highlight */}
- +
- -

Provider Agnostic

+

Runs Inside Any Sandbox

- Run locally, in Docker, or deploy to E2B, Daytona, and Vercel. Same SDK everywhere. + Lightweight static binary. One curl command to install inside E2B, Daytona, Vercel Sandboxes, or Docker.

-
- {['Local', 'Docker', 'E2B', 'Daytona', 'Vercel', 'Netlify'].map((provider) => ( - - {provider} - - ))} -
diff --git a/frontend/packages/website/src/components/Hero.tsx b/frontend/packages/website/src/components/Hero.tsx index f0691ea..324da2a 100644 --- a/frontend/packages/website/src/components/Hero.tsx +++ b/frontend/packages/website/src/components/Hero.tsx @@ -1,11 +1,158 @@ 'use client'; -import { useState } from 'react'; +import { useState, useEffect } from 'react'; import { Terminal, Check, ArrowRight } from 'lucide-react'; +const ADAPTERS = [ + { label: 'Claude Code', color: '#D97757', x: 35, y: 70, logo: '/logos/claude.svg' }, + { label: 'Codex', color: '#10A37F', x: 185, y: 70, logo: 'openai' }, + { label: 'Amp', color: '#F59E0B', x: 35, y: 155, logo: '/logos/amp.svg' }, + { label: 'OpenCode', color: '#8B5CF6', x: 185, 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 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} + )} +
+ + + {p.label} + + + ); + })} + + {/* Active Agent Label */} + + CONNECTED TO {ADAPTERS[activeIndex].label.toUpperCase()} + + + + +
+ ); +} + const CopyInstallButton = () => { const [copied, setCopied] = useState(false); - const installCommand = 'npx skills add https://sandboxagent.dev/docs'; + const installCommand = 'SandboxAgent.connect({ endpoint: "..." })'; const handleCopy = async () => { try { @@ -35,11 +182,11 @@ export function Hero() {

- Universal API for
- Coding Agents + Run Coding Agents in Sandboxes.
+ Control Them Over HTTP.

- One SDK to control Claude Code, Codex, OpenCode, and Amp. Unified events, session management, and human-in-the-loop. Swap agents with zero refactoring. + The Sandbox Agent SDK is a server that runs inside your sandbox. Your app connects remotely to control Claude Code, Codex, OpenCode, or Amp — streaming events, handling permissions, managing sessions.

@@ -54,83 +201,11 @@ export function Hero() {
-
-
-
-
-
-
-
-
-
-
-
example_agent.ts
-
- 
-                  
-                    const
-                     agents = 
-                    await
-                     client.
-                    listAgents
-                    ();
-                    {"\n\n"}
-                    await
-                     client.
-                    createSession
-                    (
-                    "demo"
-                    {", {"}
-                    {"\n"}
-                    {"  agent: "}
-                    "codex"
-                    ,
-                    {"\n"}
-                    {"  agentMode: "}
-                    "default"
-                    ,
-                    {"\n"}
-                    {"  permissionMode: "}
-                    "plan"
-                    ,
-                    {"\n"}
-                    {"});"}
-                    {"\n\n"}
-                    await
-                     client.
-                    postMessage
-                    (
-                    "demo"
-                    {", { message: "}
-                    "Hello from the SDK."
-                    {" });"}
-                    {"\n\n"}
-                    for await
-                     (
-                    const
-                     event 
-                    of
-                     client.
-                    streamEvents
-                    (
-                    "demo"
-                    {", { offset: "}
-                    0
-                    {" })) {"}
-                    {"\n"}
-                    {"  console."}
-                    log
-                    (event.type, event.data);
-                    {"\n"}
-                    {"}"}
-                  
-
-
-
+
+
); } - diff --git a/frontend/packages/website/src/components/PainPoints.tsx b/frontend/packages/website/src/components/PainPoints.tsx index e345a29..7b26db4 100644 --- a/frontend/packages/website/src/components/PainPoints.tsx +++ b/frontend/packages/website/src/components/PainPoints.tsx @@ -1,124 +1,31 @@ 'use client'; import { motion } from 'framer-motion'; +import { X, Check } from 'lucide-react'; const frictions = [ { number: '01', - title: 'Fragmented Agent Scaffolds', - description: - 'Claude Code, Codex, OpenCode, and Amp each have proprietary APIs. Swapping agents means rewriting your entire integration.', - solution: 'Unified control plane for all agent engines.', - visual: ( -
-
-
- Claude Bridge -
-
-
- Amp Bridge -
-
-
- API -
-
-
- 01{' '} - agent - . - spawn - ( - "claude-code" - ) -
-
- 02{' '} - agent - . - spawn - ( - "amp" - ) -
-
// Exactly same methods
-
-
- ), + title: 'Coding Agents Need Sandboxes', + problem: + "You can't let AI execute arbitrary code on your production servers. Coding agents need isolated environments, but existing SDKs assume local execution.", + solution: 'A server that runs inside the sandbox and exposes HTTP/SSE.', accentColor: 'orange', }, { number: '02', - title: 'Deploy Anywhere', - description: - "Whether you're running locally, in Docker, or with E2B, Daytona, and Vercel — you shouldn't need different integration code for each.", - solution: 'One SDK, any environment. Deploy locally or to any cloud provider with a single config change.', - visual: ( -
-
-
- E2B -
-
+
-
- Daytona -
-
+
-
- Vercel -
-
-
-
# Works with all providers
-
- SANDBOX_PROVIDER - = - "daytona" -
-
-
- ), + title: 'Every Coding Agent is Different', + problem: + 'Claude Code, Codex, OpenCode, and Amp each have proprietary APIs, event formats, and behaviors. Swapping coding agents means rewriting your entire integration.', + solution: 'One HTTP API. Write your code once, swap coding agents with a config change.', accentColor: 'purple', }, { number: '03', - title: 'Transient State', - description: - 'Transcripts and session data are usually lost when the agent process ends. Debugging and replay become impossible.', - solution: 'Standardized session JSON. Stream events to your own storage in real-time.', - visual: ( -
-
-
# Session persisted automatically
-
-
- "events" - : [ -
-
- {'{ '} - "type" - : - "tool_call" - {' }'} -
-
- {'{ '} - "type" - : - "message" - {' }'} -
-
]
-
-
- - Streaming to Rivet Actors -
-
-
- ), + title: 'Sessions Are Ephemeral', + problem: + 'Coding agent transcripts live in the sandbox. When the process ends, you lose everything. Debugging and replay become impossible.', + solution: 'Universal event schema streams to your storage. Persist to Postgres or Rivet, replay later, audit everything.', accentColor: 'blue', }, ]; @@ -156,11 +63,10 @@ export function PainPoints() { className="mb-16" >

- Integrating coding agents is hard. + Running coding agents remotely is hard.

- Every agent has its own API, event format, and session model. Swapping agents means - rewriting your entire integration. + Coding agents need sandboxes, but existing SDKs assume local execution. SSH breaks, CLI wrappers are fragile, and building from scratch means reimplementing everything for each coding agent.

@@ -192,20 +98,31 @@ export function PainPoints() { className={`pointer-events-none absolute left-0 top-0 z-20 h-24 w-24 rounded-tl-2xl border-l border-t ${styles.border} opacity-0 transition-opacity duration-500 [mask-image:linear-gradient(135deg,black_0%,transparent_50%)] group-hover:opacity-100`} /> -
+
{/* Title */} -

{friction.title}

+

{friction.title}

- {/* Description */} -

{friction.description}

- - {/* Solution */} -
-

{friction.solution}

+ {/* Problem */} +
+
+
+ +
+ Problem +
+

{friction.problem}

- {/* Visual */} - {friction.visual} + {/* Solution */} +
+
+
+ +
+ Solution +
+

{friction.solution}

+
); diff --git a/frontend/packages/website/src/layouts/Layout.astro b/frontend/packages/website/src/layouts/Layout.astro index 97e3873..8e7f8e6 100644 --- a/frontend/packages/website/src/layouts/Layout.astro +++ b/frontend/packages/website/src/layouts/Layout.astro @@ -22,12 +22,12 @@ const { title, description = "Universal SDK for coding agents. Control Claude Co - - - - + + + + - + diff --git a/frontend/packages/website/src/pages/index.astro b/frontend/packages/website/src/pages/index.astro index c383311..da607db 100644 --- a/frontend/packages/website/src/pages/index.astro +++ b/frontend/packages/website/src/pages/index.astro @@ -2,6 +2,7 @@ import Layout from '../layouts/Layout.astro'; import { Navigation } from '../components/Navigation'; import { Hero } from '../components/Hero'; +import { PainPoints } from '../components/PainPoints'; import { FeatureGrid } from '../components/FeatureGrid'; import { GetStarted } from '../components/GetStarted'; import { Inspector } from '../components/Inspector'; @@ -9,11 +10,12 @@ import { FAQ } from '../components/FAQ'; import { Footer } from '../components/Footer'; --- - +
+