diff --git a/frontend/packages/website/public/logos/amp.svg b/frontend/packages/website/public/logos/amp.svg index b578b1f..c2dfe36 100644 --- a/frontend/packages/website/public/logos/amp.svg +++ b/frontend/packages/website/public/logos/amp.svg @@ -1 +1 @@ - + \ No newline at end of file diff --git a/frontend/packages/website/public/logos/opencode.svg b/frontend/packages/website/public/logos/opencode.svg index 842a2a7..c2404f2 100644 --- a/frontend/packages/website/public/logos/opencode.svg +++ b/frontend/packages/website/public/logos/opencode.svg @@ -1,5 +1 @@ - - - - - + \ No newline at end of file diff --git a/frontend/packages/website/src/components/FeatureGrid.tsx b/frontend/packages/website/src/components/FeatureGrid.tsx index d2b0c22..9be697b 100644 --- a/frontend/packages/website/src/components/FeatureGrid.tsx +++ b/frontend/packages/website/src/components/FeatureGrid.tsx @@ -44,7 +44,7 @@ export function FeatureGrid() {

Full feature coverage.
- Solving the fundamental friction points. + Available as an HTTP API or TypeScript SDK.

Everything you need to integrate coding agents in record time. @@ -98,7 +98,7 @@ export function FeatureGrid() { 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: "Devin", color: "#10B981" }, + { 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" } ]; @@ -146,53 +146,54 @@ export function FeatureGrid() { Sandbox Agent SDK - {/* Provider Nodes with Logos */} + {/* Provider Nodes with Logos - Vertical Layout (centered) */} {/* Claude */} - - - - Claude + + + +

+ Claude +
- Claude + Claude Code - {/* OpenAI */} - - - - - - OpenAI + {/* Codex */} + + + +
+ + + +
+ + Codex - {/* Devin */} - - - - Devin + {/* OpenCode */} + + + +
+ + + + +
- Devin + OpenCode - {/* Amp / Custom */} - - - - Amp + {/* Amp */} + + + +
+ Amp +
- Amp + Amp
diff --git a/frontend/packages/website/src/components/GetStarted.tsx b/frontend/packages/website/src/components/GetStarted.tsx new file mode 100644 index 0000000..21761e7 --- /dev/null +++ b/frontend/packages/website/src/components/GetStarted.tsx @@ -0,0 +1,155 @@ +'use client'; + +import { Code, Cloud, GitBranch } from 'lucide-react'; +import { CopyButton } from './ui/CopyButton'; + +const sdkCode = `import { SandboxAgent } from "sandbox-agent"; + +const client = await SandboxAgent.start(); + +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); +}`; + +const sandboxCommand = `curl -sSL https://sandboxagent.dev/install | 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 ( +
+
+
+

+ Get Started +

+

+ Choose the installation method that works best for your use case. +

+
+ +
+ {/* Option 1: SDK */} +
+
+
+
+ +
+
+ +
+
+

TypeScript SDK

+

Embed in your application

+
+
+ +

+ Import the SDK directly into your Node.js or browser application. Full type safety and streaming support. +

+ +
+
+
+ example.ts + +
+ 
+                  {sdkCode}
+
+
+
+
+ + {/* Option 2: Sandbox */} +
+
+
+
+ +
+
+ +
+
+

Cloud Sandbox

+

Run in isolated environment

+
+
+ +

+ Spin up a sandboxed environment with E2B, Daytona, or Vercel. Secure isolation with full network access. +

+ +
+
+
+ terminal + +
+
+ $ + {sandboxCommand} +
+
+
+ {['E2B', 'Daytona', 'Vercel', 'Docker'].map((provider) => ( + + {provider} + + ))} +
+
+
+ + {/* Option 3: Build from Source */} +
+
+
+
+ +
+
+ +
+
+

Build from Source

+

Full control

+
+
+ +

+ Clone the repo and build with Cargo. Customize, contribute, or embed directly in your Rust project. +

+ +
+
+
+ terminal + +
+ 
+                  {sourceCommands}
+
+
+
+
+
+
+
+ ); +} diff --git a/frontend/packages/website/src/components/Hero.tsx b/frontend/packages/website/src/components/Hero.tsx index 16cfdb4..40175a4 100644 --- a/frontend/packages/website/src/components/Hero.tsx +++ b/frontend/packages/website/src/components/Hero.tsx @@ -5,7 +5,7 @@ import { Terminal, Check, ArrowRight } from 'lucide-react'; const CopyInstallButton = () => { const [copied, setCopied] = useState(false); - const installCommand = 'npx rivet-dev/sandbox-agent'; + const installCommand = 'npx skills add https://sandboxagent.dev/docs'; const handleCopy = async () => { try { @@ -66,43 +66,75 @@ export function Hero() {
example_agent.ts
-
+
- import{' '} - {'{ SandboxAgent }'}{' '} - from{' '} - "@sandbox/sdk"; + const + agents = + await + client. + listAgents + (); +
- // Start Claude Code with E2B + await + client. + createSession + ( + "demo" + {", {"} - const{' '} - agent = - await{' '} - SandboxAgent. - spawn - {'({'} + {" agent: "} + "codex" + , - provider: - "e2b", + {" agentMode: "} + "default" + , - engine: - "claude-code" + {" permissionMode: "} + "plan" + , - {'}'}); + {"});"}
- const{' '} - transcript = - await{' '} - agent. - getTranscript - (); + await + client. + postMessage + ( + "demo" + {", { message: "} + "Hello from the SDK." + {" });"} + +
+ + for await + ( + const + event + of + client. + streamEvents + ( + "demo" + {", { offset: "} + 0 + {" })) {"} + + + {" console."} + log + (event.type, event.data); + + + {"}"}
@@ -116,35 +148,10 @@ export function Hero() { function CodeLine({ num, children }: { num: string; children: React.ReactNode }) { return ( -
+
{num} {children}
); } -function DaytonaLogo() { - return ( - - Daytona - - ); -} - -function E2BLogo() { - return ( - - E2B - - ); -} - -function VercelLogo() { - return ( - - - - - - ); -} diff --git a/frontend/packages/website/src/pages/index.astro b/frontend/packages/website/src/pages/index.astro index b578271..e9fb43b 100644 --- a/frontend/packages/website/src/pages/index.astro +++ b/frontend/packages/website/src/pages/index.astro @@ -3,8 +3,8 @@ import Layout from '../layouts/Layout.astro'; import { Navigation } from '../components/Navigation'; import { Hero } from '../components/Hero'; import { FeatureGrid } from '../components/FeatureGrid'; +import { GetStarted } from '../components/GetStarted'; import { FAQ } from '../components/FAQ'; -import { CTASection } from '../components/CTASection'; import { Footer } from '../components/Footer'; --- @@ -14,8 +14,8 @@ import { Footer } from '../components/Footer';
+ -