mirror of
https://github.com/harivansh-afk/sandbox-agent.git
synced 2026-04-15 04:03:31 +00:00
cf7e2a92c6
* SDK sandbox provisioning: built-in providers, docs restructure, and quickstart overhaul - Add built-in sandbox providers (local, docker, e2b, daytona, vercel, cloudflare) to the TypeScript SDK so users import directly instead of passing client instances - Restructure docs: rename architecture to orchestration-architecture, add new architecture page for server overview, improve getting started flow - Rewrite quickstart to be TypeScript-first with provider CodeGroup and custom provider accordion - Update all examples to use new provider APIs - Update persist drivers and foundry for new SDK surface Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> * Fix SDK typecheck errors and update persist drivers for insertEvent signature - Fix insertEvent call in client.ts to pass sessionId as first argument - Update Daytona provider create options to use Partial type (image has default) - Update StrictUniqueSessionPersistDriver in tests to match new insertEvent signature - Sync persist packages, openapi spec, and docs with upstream changes Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> * Add Modal and ComputeSDK built-in providers, update examples and docs - Add `sandbox-agent/modal` provider using Modal SDK with node:22-slim image - Add `sandbox-agent/computesdk` provider using ComputeSDK's unified sandbox API - Update Modal and ComputeSDK examples to use new SDK providers - Update Modal and ComputeSDK deploy docs with provider-based examples - Add Modal to quickstart CodeGroup and docs.json navigation - Add provider test entries for Modal and ComputeSDK - Remove old standalone example files (modal.ts, computesdk.ts) Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> * Fix Modal provider: pre-install agents in image, fire-and-forget exec for server - Pre-install agents in Dockerfile commands so they are cached across creates - Use fire-and-forget exec (no wait) to keep server alive in Modal sandbox - Add memoryMiB option (default 2GB) to avoid OOM during agent install Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> * Sync upstream changes: multiplayer docs, logos, openapi spec, foundry config Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> * SDK: Add ensureServer() for automatic server recovery Add ensureServer() to SandboxProvider interface to handle cases where the sandbox-agent server stops or goes to sleep. The SDK now calls this method after 3 consecutive health-check failures, allowing providers to restart the server if needed. Most built-in providers (E2B, Daytona, Vercel, Modal, ComputeSDK) implement this. Docker and Cloudflare manage server lifecycle differently, and Local uses managed child processes. Also update docs for quickstart, architecture, multiplayer, and session persistence; mark persist-* packages as deprecated; and add ensureServer implementations to all applicable providers. Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com> * wip --------- Co-authored-by: Claude Opus 4.6 <noreply@anthropic.com>
253 lines
11 KiB
TypeScript
253 lines
11 KiB
TypeScript
"use client";
|
|
|
|
import { motion } from "framer-motion";
|
|
import { Code, Server, GitBranch } from "lucide-react";
|
|
import { CopyButton } from "./ui/CopyButton";
|
|
|
|
const sdkCodeRaw = `import { SandboxAgent } from "sandbox-agent";
|
|
import { local } from "sandbox-agent/local";
|
|
|
|
const client = await SandboxAgent.start({
|
|
sandbox: local(),
|
|
});
|
|
|
|
await client.createSession("my-session", {
|
|
agent: "claude-code",
|
|
});
|
|
|
|
await client.postMessage("my-session", {
|
|
message: "Hello, world!",
|
|
});
|
|
|
|
for await (const event of client.streamEvents("my-session")) {
|
|
console.log(event.type, event.data);
|
|
}`;
|
|
|
|
function SdkCodeHighlighted() {
|
|
return (
|
|
<pre className="overflow-x-auto p-3 font-mono text-[11px] leading-relaxed">
|
|
<code>
|
|
<span className="text-purple-400">import</span>
|
|
<span className="text-zinc-300">{" { "}</span>
|
|
<span className="text-white">SandboxAgent</span>
|
|
<span className="text-zinc-300">{" } "}</span>
|
|
<span className="text-purple-400">from</span>
|
|
<span className="text-zinc-300"> </span>
|
|
<span className="text-green-400">"sandbox-agent"</span>
|
|
<span className="text-zinc-300">;</span>
|
|
{"\n"}
|
|
<span className="text-purple-400">import</span>
|
|
<span className="text-zinc-300">{" { "}</span>
|
|
<span className="text-white">local</span>
|
|
<span className="text-zinc-300">{" } "}</span>
|
|
<span className="text-purple-400">from</span>
|
|
<span className="text-zinc-300"> </span>
|
|
<span className="text-green-400">"sandbox-agent/local"</span>
|
|
<span className="text-zinc-300">;</span>
|
|
{"\n\n"}
|
|
<span className="text-purple-400">const</span>
|
|
<span className="text-zinc-300"> client = </span>
|
|
<span className="text-purple-400">await</span>
|
|
<span className="text-zinc-300"> SandboxAgent.</span>
|
|
<span className="text-blue-400">start</span>
|
|
<span className="text-zinc-300">{"({"}</span>
|
|
{"\n"}
|
|
<span className="text-zinc-300">{" sandbox: local(),"}</span>
|
|
{"\n"}
|
|
<span className="text-zinc-300">{"});"}</span>
|
|
{"\n\n"}
|
|
<span className="text-purple-400">await</span>
|
|
<span className="text-zinc-300"> client.</span>
|
|
<span className="text-blue-400">createSession</span>
|
|
<span className="text-zinc-300">(</span>
|
|
<span className="text-green-400">"my-session"</span>
|
|
<span className="text-zinc-300">{", {"}</span>
|
|
{"\n"}
|
|
<span className="text-zinc-300">{" agent: "}</span>
|
|
<span className="text-green-400">"claude-code"</span>
|
|
<span className="text-zinc-300">,</span>
|
|
{"\n"}
|
|
<span className="text-zinc-300">{"});"}</span>
|
|
{"\n\n"}
|
|
<span className="text-purple-400">await</span>
|
|
<span className="text-zinc-300"> client.</span>
|
|
<span className="text-blue-400">postMessage</span>
|
|
<span className="text-zinc-300">(</span>
|
|
<span className="text-green-400">"my-session"</span>
|
|
<span className="text-zinc-300">{", {"}</span>
|
|
{"\n"}
|
|
<span className="text-zinc-300">{" message: "}</span>
|
|
<span className="text-green-400">"Hello, world!"</span>
|
|
<span className="text-zinc-300">,</span>
|
|
{"\n"}
|
|
<span className="text-zinc-300">{"});"}</span>
|
|
{"\n\n"}
|
|
<span className="text-purple-400">for await</span>
|
|
<span className="text-zinc-300"> (</span>
|
|
<span className="text-purple-400">const</span>
|
|
<span className="text-zinc-300"> event </span>
|
|
<span className="text-purple-400">of</span>
|
|
<span className="text-zinc-300"> client.</span>
|
|
<span className="text-blue-400">streamEvents</span>
|
|
<span className="text-zinc-300">(</span>
|
|
<span className="text-green-400">"my-session"</span>
|
|
<span className="text-zinc-300">{")) {"}</span>
|
|
{"\n"}
|
|
<span className="text-zinc-300">{" console."}</span>
|
|
<span className="text-blue-400">log</span>
|
|
<span className="text-zinc-300">(event.type, event.data);</span>
|
|
{"\n"}
|
|
<span className="text-zinc-300">{"}"}</span>
|
|
</code>
|
|
</pre>
|
|
);
|
|
}
|
|
|
|
const sandboxCommand = `curl -fsSL https://releases.rivet.dev/sandbox-agent/0.3.x/install.sh | sh`;
|
|
|
|
const sourceCommands = `git clone https://github.com/rivet-dev/sandbox-agent
|
|
cd sandbox-agent
|
|
cargo run -p sandbox-agent --release`;
|
|
|
|
export function GetStarted() {
|
|
return (
|
|
<section id="get-started" className="border-t border-white/10 py-48">
|
|
<div className="mx-auto max-w-7xl px-6">
|
|
<div className="mb-12">
|
|
<motion.h2
|
|
initial={{ opacity: 0, y: 20 }}
|
|
whileInView={{ opacity: 1, y: 0 }}
|
|
viewport={{ once: true }}
|
|
transition={{ duration: 0.5 }}
|
|
className="mb-2 text-2xl font-normal tracking-tight text-white md:text-4xl"
|
|
>
|
|
Get Started
|
|
</motion.h2>
|
|
<motion.p
|
|
initial={{ opacity: 0, y: 20 }}
|
|
whileInView={{ opacity: 1, y: 0 }}
|
|
viewport={{ once: true }}
|
|
transition={{ duration: 0.5, delay: 0.1 }}
|
|
className="max-w-xl text-base leading-relaxed text-zinc-500"
|
|
>
|
|
Choose the installation method that works best for your use case.
|
|
</motion.p>
|
|
</div>
|
|
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 20 }}
|
|
whileInView={{ opacity: 1, y: 0 }}
|
|
viewport={{ once: true }}
|
|
transition={{ duration: 0.5 }}
|
|
className="grid grid-cols-1 gap-4 md:grid-cols-3"
|
|
>
|
|
{/* Option 1: SDK */}
|
|
<div className="group flex flex-col rounded-xl border border-white/10 bg-white/[0.02] p-6 transition-colors hover:border-white/20">
|
|
<div className="mb-4 flex items-center gap-3">
|
|
<div className="text-zinc-500">
|
|
<Code className="h-4 w-4" />
|
|
</div>
|
|
<div>
|
|
<h3 className="text-base font-normal text-white">TypeScript SDK</h3>
|
|
<p className="text-xs text-zinc-500">Embed in your application</p>
|
|
</div>
|
|
</div>
|
|
|
|
<p className="mb-4 text-sm leading-relaxed text-zinc-500">
|
|
Import the TypeScript SDK directly into your Node or browser application. Full type safety and streaming support.
|
|
</p>
|
|
|
|
<div className="flex-1 flex flex-col">
|
|
<div className="overflow-hidden rounded-lg border border-white/10 bg-[#0c0c0e] flex-1 flex flex-col">
|
|
<div className="flex items-center justify-between border-b border-white/10 bg-white/5 px-3 py-2">
|
|
<span className="text-[10px] font-medium text-zinc-500">example.ts</span>
|
|
<CopyButton text={sdkCodeRaw} />
|
|
</div>
|
|
<SdkCodeHighlighted />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Option 2: HTTP API */}
|
|
<div className="group flex flex-col rounded-xl border border-white/10 bg-white/[0.02] p-6 transition-colors hover:border-white/20">
|
|
<div className="mb-4 flex items-center gap-3">
|
|
<div className="text-zinc-500">
|
|
<Server className="h-4 w-4" />
|
|
</div>
|
|
<div>
|
|
<h3 className="text-base font-normal text-white">HTTP API</h3>
|
|
<p className="text-xs text-zinc-500">Run as a server</p>
|
|
</div>
|
|
</div>
|
|
|
|
<p className="mb-4 text-sm leading-relaxed text-zinc-500">
|
|
Run as an HTTP server and connect from any language. Deploy to E2B, Daytona, Vercel, or your own infrastructure.
|
|
</p>
|
|
|
|
<div className="flex-1 flex flex-col">
|
|
<div className="overflow-hidden rounded-lg border border-white/10 bg-[#0c0c0e] flex-1 flex flex-col">
|
|
<div className="flex items-center justify-between border-b border-white/10 bg-white/5 px-3 py-2">
|
|
<span className="text-[10px] font-medium text-zinc-500">terminal</span>
|
|
<CopyButton text={sandboxCommand} />
|
|
</div>
|
|
<pre className="overflow-x-auto p-3 font-mono text-[11px] leading-relaxed flex-1">
|
|
<code>
|
|
<span className="text-zinc-500">$ </span>
|
|
<span className="text-zinc-300">curl -fsSL \</span>
|
|
{"\n"}
|
|
<span className="text-zinc-300">{" "}</span>
|
|
<span className="text-green-400">https://releases.rivet.dev/sandbox-agent/0.3.x/install.sh</span>
|
|
<span className="text-zinc-300"> | </span>
|
|
<span className="text-blue-400">sh</span>
|
|
</code>
|
|
</pre>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Option 3: Open Source */}
|
|
<div className="group flex flex-col rounded-xl border border-white/10 bg-white/[0.02] p-6 transition-colors hover:border-white/20">
|
|
<div className="mb-4 flex items-center gap-3">
|
|
<div className="text-zinc-500">
|
|
<GitBranch className="h-4 w-4" />
|
|
</div>
|
|
<div>
|
|
<h3 className="text-base font-normal text-white">Open Source</h3>
|
|
<p className="text-xs text-zinc-500">Full control</p>
|
|
</div>
|
|
</div>
|
|
|
|
<p className="mb-4 text-sm leading-relaxed text-zinc-500">
|
|
Clone the repo and build with Cargo. Customize, contribute, or embed directly in your Rust project.
|
|
</p>
|
|
|
|
<div className="flex-1 flex flex-col">
|
|
<div className="overflow-hidden rounded-lg border border-white/10 bg-[#0c0c0e] flex-1 flex flex-col">
|
|
<div className="flex items-center justify-between border-b border-white/10 bg-white/5 px-3 py-2">
|
|
<span className="text-[10px] font-medium text-zinc-500">terminal</span>
|
|
<CopyButton text={sourceCommands} />
|
|
</div>
|
|
<pre className="overflow-x-auto p-3 font-mono text-[11px] leading-relaxed flex-1">
|
|
<code>
|
|
<span className="text-zinc-500">$ </span>
|
|
<span className="text-blue-400">git clone</span>
|
|
<span className="text-zinc-300"> </span>
|
|
<span className="text-green-400">https://github.com/rivet-dev/sandbox-agent</span>
|
|
{"\n"}
|
|
<span className="text-zinc-500">$ </span>
|
|
<span className="text-blue-400">cd</span>
|
|
<span className="text-zinc-300"> sandbox-agent</span>
|
|
{"\n"}
|
|
<span className="text-zinc-500">$ </span>
|
|
<span className="text-blue-400">cargo run</span>
|
|
<span className="text-zinc-300"> -p sandbox-agent --release</span>
|
|
</code>
|
|
</pre>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</motion.div>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|