mirror of
https://github.com/harivansh-afk/sandbox-agent.git
synced 2026-04-16 17:01:06 +00:00
chore(site): update wording, add GetStarted section, fix code samples
This commit is contained in:
Nicholas Kissel
Nathan Flurry
parent
edea1887e5
commit
5ff6f6790e
6 changed files with 256 additions and 97 deletions
|
|
@ -44,7 +44,7 @@ export function FeatureGrid() {
|
|||
<div className="mb-16">
|
||||
<h2 className="mb-6 text-3xl font-medium tracking-tight text-white md:text-5xl">
|
||||
Full feature coverage. <br />
|
||||
<span className="text-zinc-500">Solving the fundamental friction points.</span>
|
||||
<span className="text-zinc-500">Available as an HTTP API or TypeScript SDK.</span>
|
||||
</h2>
|
||||
<p className="text-lg leading-relaxed text-zinc-400">
|
||||
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() {
|
|||
<text x="80" y="52" fill="white" textAnchor="middle" fontSize="14" fontWeight="800">Sandbox Agent SDK</text>
|
||||
</g>
|
||||
|
||||
{/* Provider Nodes with Logos */}
|
||||
{/* Provider Nodes with Logos - Vertical Layout (centered) */}
|
||||
{/* Claude */}
|
||||
<g transform="translate(620, 60)">
|
||||
<rect width="140" height="60" rx="10" fill="#111" stroke="#222" strokeWidth="1" />
|
||||
<foreignObject x="25" y="15" width="30" height="30">
|
||||
<img
|
||||
src="/logos/claude.svg"
|
||||
alt="Claude"
|
||||
className="w-full h-full"
|
||||
/>
|
||||
<g transform="translate(620, 50)">
|
||||
<rect width="140" height="80" rx="10" fill="#111" stroke="#222" strokeWidth="1" />
|
||||
<foreignObject x="0" y="10" width="140" height="32">
|
||||
<div className="flex justify-center">
|
||||
<img src="/logos/claude.svg" alt="Claude" className="h-8 w-8" />
|
||||
</div>
|
||||
</foreignObject>
|
||||
<text x="85" y="35" fill="#999" textAnchor="middle" fontSize="12" fontWeight="600">Claude</text>
|
||||
<text x="70" y="62" fill="#999" textAnchor="middle" fontSize="11" fontWeight="600">Claude Code</text>
|
||||
</g>
|
||||
|
||||
{/* OpenAI */}
|
||||
<g transform="translate(620, 150)">
|
||||
<rect width="140" height="60" rx="10" fill="#111" stroke="#222" strokeWidth="1" />
|
||||
<g transform="translate(25, 15) scale(1.25)">
|
||||
<path d="M22.2819 9.8211a5.9847 5.9847 0 0 0-.5157-4.9108 6.0462 6.0462 0 0 0-6.5098-2.9A6.0651 6.0651 0 0 0 4.9807 4.1818a5.9847 5.9847 0 0 0-3.9977 2.9 6.0462 6.0462 0 0 0 .7427 7.0966 5.98 5.98 0 0 0 .511 4.9107 6.051 6.051 0 0 0 6.5146 2.9001A5.9847 5.9847 0 0 0 13.2599 24a6.0557 6.0557 0 0 0 5.7718-4.2058 5.9894 5.9894 0 0 0 3.9977-2.9001 6.0557 6.0557 0 0 0-.7475-7.0729zm-9.022 12.6081a4.4755 4.4755 0 0 1-2.8764-1.0408l.1419-.0804 4.7783-2.7582a.7948.7948 0 0 0 .3927-.6813v-6.7369l2.02 1.1686a.071.071 0 0 1 .038.052v5.5826a4.504 4.504 0 0 1-4.4945 4.4944zm-9.6607-4.1254a4.4708 4.4708 0 0 1-.5346-3.0137l.142.0852 4.783 2.7582a.7712.7712 0 0 0 .7806 0l5.8428-3.3685v2.3324a.0804.0804 0 0 1-.0332.0615L9.74 19.9502a4.4992 4.4992 0 0 1-6.1408-1.6464zM2.3408 7.8956a4.485 4.485 0 0 1 2.3655-1.9728V11.6a.7664.7664 0 0 0 .3879.6765l5.8144 3.3543-2.0201 1.1685a.0757.0757 0 0 1-.071 0l-4.8303-2.7865A4.504 4.504 0 0 1 2.3408 7.872zm16.5963 3.8558L13.1038 8.364 15.1192 7.2a.0757.0757 0 0 1 .071 0l4.8303 2.7913a4.4944 4.4944 0 0 1-.6765 8.1042v-5.6772a.79.79 0 0 0-.407-.667zm2.0107-3.0231l-.142-.0852-4.7735-2.7818a.7759.7759 0 0 0-.7854 0L9.409 9.2297V6.8974a.0662.0662 0 0 1 .0284-.0615l4.8303-2.7866a4.4992 4.4992 0 0 1 6.6802 4.66zM8.3065 12.863l-2.02-1.1638a.0804.0804 0 0 1-.038-.0567V6.0742a4.4992 4.4992 0 0 1 7.3757-3.4537l-.142.0805L8.704 5.459a.7948.7948 0 0 0-.3927.6813zm1.0976-2.3654l2.602-1.4998 2.6069 1.4998v2.9994l-2.5974 1.4997-2.6067-1.4997Z" fill="#ffffff" />
|
||||
</g>
|
||||
<text x="85" y="35" fill="#999" textAnchor="middle" fontSize="12" fontWeight="600">OpenAI</text>
|
||||
{/* Codex */}
|
||||
<g transform="translate(620, 140)">
|
||||
<rect width="140" height="80" rx="10" fill="#111" stroke="#222" strokeWidth="1" />
|
||||
<foreignObject x="0" y="10" width="140" height="32">
|
||||
<div className="flex justify-center">
|
||||
<svg className="h-8 w-8" viewBox="0 0 24 24" fill="none">
|
||||
<path d="M22.2819 9.8211a5.9847 5.9847 0 0 0-.5157-4.9108 6.0462 6.0462 0 0 0-6.5098-2.9A6.0651 6.0651 0 0 0 4.9807 4.1818a5.9847 5.9847 0 0 0-3.9977 2.9 6.0462 6.0462 0 0 0 .7427 7.0966 5.98 5.98 0 0 0 .511 4.9107 6.051 6.051 0 0 0 6.5146 2.9001A5.9847 5.9847 0 0 0 13.2599 24a6.0557 6.0557 0 0 0 5.7718-4.2058 5.9894 5.9894 0 0 0 3.9977-2.9001 6.0557 6.0557 0 0 0-.7475-7.0729zm-9.022 12.6081a4.4755 4.4755 0 0 1-2.8764-1.0408l.1419-.0804 4.7783-2.7582a.7948.7948 0 0 0 .3927-.6813v-6.7369l2.02 1.1686a.071.071 0 0 1 .038.052v5.5826a4.504 4.504 0 0 1-4.4945 4.4944zm-9.6607-4.1254a4.4708 4.4708 0 0 1-.5346-3.0137l.142.0852 4.783 2.7582a.7712.7712 0 0 0 .7806 0l5.8428-3.3685v2.3324a.0804.0804 0 0 1-.0332.0615L9.74 19.9502a4.4992 4.4992 0 0 1-6.1408-1.6464zM2.3408 7.8956a4.485 4.485 0 0 1 2.3655-1.9728V11.6a.7664.7664 0 0 0 .3879.6765l5.8144 3.3543-2.0201 1.1685a.0757.0757 0 0 1-.071 0l-4.8303-2.7865A4.504 4.504 0 0 1 2.3408 7.872zm16.5963 3.8558L13.1038 8.364 15.1192 7.2a.0757.0757 0 0 1 .071 0l4.8303 2.7913a4.4944 4.4944 0 0 1-.6765 8.1042v-5.6772a.79.79 0 0 0-.407-.667zm2.0107-3.0231l-.142-.0852-4.7735-2.7818a.7759.7759 0 0 0-.7854 0L9.409 9.2297V6.8974a.0662.0662 0 0 1 .0284-.0615l4.8303-2.7866a4.4992 4.4992 0 0 1 6.6802 4.66zM8.3065 12.863l-2.02-1.1638a.0804.0804 0 0 1-.038-.0567V6.0742a4.4992 4.4992 0 0 1 7.3757-3.4537l-.142.0805L8.704 5.459a.7948.7948 0 0 0-.3927.6813zm1.0976-2.3654l2.602-1.4998 2.6069 1.4998v2.9994l-2.5974 1.4997-2.6067-1.4997Z" fill="#ffffff" />
|
||||
</svg>
|
||||
</div>
|
||||
</foreignObject>
|
||||
<text x="70" y="62" fill="#999" textAnchor="middle" fontSize="11" fontWeight="600">Codex</text>
|
||||
</g>
|
||||
|
||||
{/* Devin */}
|
||||
<g transform="translate(620, 240)">
|
||||
<rect width="140" height="60" rx="10" fill="#111" stroke="#222" strokeWidth="1" />
|
||||
<foreignObject x="25" y="15" width="30" height="30">
|
||||
<img
|
||||
src="https://mintcdn.com/cognitionai/k89q9Lsp7DOurdC0/logo/devin.png?fit=max&auto=format&n=k89q9Lsp7DOurdC0&q=85&s=e83fbc727ea2cae8f1b80442fa772c50"
|
||||
alt="Devin"
|
||||
className="w-full h-full"
|
||||
/>
|
||||
{/* OpenCode */}
|
||||
<g transform="translate(620, 230)">
|
||||
<rect width="140" height="80" rx="10" fill="#111" stroke="#222" strokeWidth="1" />
|
||||
<foreignObject x="0" y="10" width="140" height="32">
|
||||
<div className="flex justify-center">
|
||||
<svg className="h-8 w-auto" viewBox="0 0 32 40" fill="none">
|
||||
<path d="M24 32H8V16H24V32Z" fill="#4B4646"/>
|
||||
<path d="M24 8H8V32H24V8ZM32 40H0V0H32V40Z" fill="#F1ECEC"/>
|
||||
</svg>
|
||||
</div>
|
||||
</foreignObject>
|
||||
<text x="85" y="35" fill="#999" textAnchor="middle" fontSize="12" fontWeight="600">Devin</text>
|
||||
<text x="70" y="62" fill="#999" textAnchor="middle" fontSize="11" fontWeight="600">OpenCode</text>
|
||||
</g>
|
||||
|
||||
{/* Amp / Custom */}
|
||||
<g transform="translate(620, 330)">
|
||||
<rect width="140" height="60" rx="10" fill="#111" stroke="#222" strokeWidth="1" />
|
||||
<foreignObject x="25" y="15" width="30" height="30">
|
||||
<img
|
||||
src="/logos/amp.svg"
|
||||
alt="Amp"
|
||||
className="w-full h-full"
|
||||
/>
|
||||
{/* Amp */}
|
||||
<g transform="translate(620, 320)">
|
||||
<rect width="140" height="80" rx="10" fill="#111" stroke="#222" strokeWidth="1" />
|
||||
<foreignObject x="0" y="12" width="140" height="28">
|
||||
<div className="flex justify-center">
|
||||
<img src="/logos/amp.svg" alt="Amp" className="h-6 w-auto" style={{ filter: 'brightness(0) invert(1)' }} />
|
||||
</div>
|
||||
</foreignObject>
|
||||
<text x="85" y="35" fill="#999" textAnchor="middle" fontSize="12" fontWeight="600">Amp</text>
|
||||
<text x="70" y="62" fill="#999" textAnchor="middle" fontSize="11" fontWeight="600">Amp</text>
|
||||
</g>
|
||||
</svg>
|
||||
</div>
|
||||
|
|
|
|||
155
frontend/packages/website/src/components/GetStarted.tsx
Normal file
155
frontend/packages/website/src/components/GetStarted.tsx
Normal file
|
|
@ -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 (
|
||||
<section id="get-started" className="relative overflow-hidden border-t border-white/5 py-32">
|
||||
<div className="relative z-10 mx-auto max-w-7xl px-6">
|
||||
<div className="mb-16 text-center">
|
||||
<h2 className="mb-4 text-3xl font-medium tracking-tight text-white md:text-5xl">
|
||||
Get Started
|
||||
</h2>
|
||||
<p className="text-lg text-zinc-400">
|
||||
Choose the installation method that works best for your use case.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 gap-6 md:grid-cols-3">
|
||||
{/* Option 1: SDK */}
|
||||
<div className="group relative flex flex-col overflow-hidden rounded-2xl border border-white/5 bg-zinc-900/30 p-6 backdrop-blur-sm transition-colors duration-500 hover:bg-zinc-900/50">
|
||||
<div className="absolute left-0 right-0 top-0 z-10 h-[1px] bg-gradient-to-r from-transparent via-white/20 to-transparent" />
|
||||
<div className="pointer-events-none absolute inset-0 bg-[radial-gradient(circle_at_top_left,rgba(59,130,246,0.15)_0%,transparent_50%)] opacity-0 transition-opacity duration-500 group-hover:opacity-100" />
|
||||
<div className="pointer-events-none absolute left-0 top-0 z-20 h-24 w-24 rounded-tl-2xl border-l border-t border-blue-500 opacity-0 transition-opacity duration-500 [mask-image:linear-gradient(135deg,black_0%,transparent_50%)] group-hover:opacity-100" />
|
||||
|
||||
<div className="relative z-10 mb-4 flex items-center gap-3">
|
||||
<div className="flex h-10 w-10 items-center justify-center rounded-lg bg-blue-500/10 text-blue-400 transition-all duration-300 group-hover:bg-blue-500/20 group-hover:shadow-[0_0_15px_rgba(59,130,246,0.5)]">
|
||||
<Code className="h-5 w-5" />
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="text-lg font-semibold text-white">TypeScript SDK</h3>
|
||||
<p className="text-xs text-zinc-500">Embed in your application</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p className="relative z-10 mb-4 text-sm leading-relaxed text-zinc-400">
|
||||
Import the SDK directly into your Node.js or browser application. Full type safety and streaming support.
|
||||
</p>
|
||||
|
||||
<div className="relative z-10 mt-auto">
|
||||
<div className="overflow-hidden rounded-lg border border-white/5 bg-black/50">
|
||||
<div className="flex items-center justify-between border-b border-white/5 bg-white/5 px-3 py-2">
|
||||
<span className="text-[10px] font-medium text-zinc-500">example.ts</span>
|
||||
<CopyButton text={sdkCode} />
|
||||
</div>
|
||||
<pre className="overflow-x-auto p-3 font-mono text-[11px] leading-relaxed text-zinc-300">
|
||||
<code>{sdkCode}</code>
|
||||
</pre>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Option 2: Sandbox */}
|
||||
<div className="group relative flex flex-col overflow-hidden rounded-2xl border border-white/5 bg-zinc-900/30 p-6 backdrop-blur-sm transition-colors duration-500 hover:bg-zinc-900/50">
|
||||
<div className="absolute left-0 right-0 top-0 z-10 h-[1px] bg-gradient-to-r from-transparent via-white/20 to-transparent" />
|
||||
<div className="pointer-events-none absolute inset-0 bg-[radial-gradient(circle_at_top_left,rgba(34,197,94,0.15)_0%,transparent_50%)] opacity-0 transition-opacity duration-500 group-hover:opacity-100" />
|
||||
<div className="pointer-events-none absolute left-0 top-0 z-20 h-24 w-24 rounded-tl-2xl border-l border-t border-green-500 opacity-0 transition-opacity duration-500 [mask-image:linear-gradient(135deg,black_0%,transparent_50%)] group-hover:opacity-100" />
|
||||
|
||||
<div className="relative z-10 mb-4 flex items-center gap-3">
|
||||
<div className="flex h-10 w-10 items-center justify-center rounded-lg bg-green-500/10 text-green-400 transition-all duration-300 group-hover:bg-green-500/20 group-hover:shadow-[0_0_15px_rgba(34,197,94,0.5)]">
|
||||
<Cloud className="h-5 w-5" />
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="text-lg font-semibold text-white">Cloud Sandbox</h3>
|
||||
<p className="text-xs text-zinc-500">Run in isolated environment</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p className="relative z-10 mb-4 text-sm leading-relaxed text-zinc-400">
|
||||
Spin up a sandboxed environment with E2B, Daytona, or Vercel. Secure isolation with full network access.
|
||||
</p>
|
||||
|
||||
<div className="relative z-10 mt-auto">
|
||||
<div className="overflow-hidden rounded-lg border border-white/5 bg-black/50">
|
||||
<div className="flex items-center justify-between border-b border-white/5 bg-white/5 px-3 py-2">
|
||||
<span className="text-[10px] font-medium text-zinc-500">terminal</span>
|
||||
<CopyButton text={sandboxCommand} />
|
||||
</div>
|
||||
<div className="p-3 font-mono text-[11px] text-zinc-300">
|
||||
<span className="text-zinc-500">$ </span>
|
||||
<span className="text-green-400">{sandboxCommand}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="mt-3 flex flex-wrap gap-2">
|
||||
{['E2B', 'Daytona', 'Vercel', 'Docker'].map((provider) => (
|
||||
<span
|
||||
key={provider}
|
||||
className="rounded-md border border-white/5 bg-zinc-800/50 px-2 py-1 text-[10px] font-mono text-zinc-400"
|
||||
>
|
||||
{provider}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Option 3: Build from Source */}
|
||||
<div className="group relative flex flex-col overflow-hidden rounded-2xl border border-white/5 bg-zinc-900/30 p-6 backdrop-blur-sm transition-colors duration-500 hover:bg-zinc-900/50">
|
||||
<div className="absolute left-0 right-0 top-0 z-10 h-[1px] bg-gradient-to-r from-transparent via-white/20 to-transparent" />
|
||||
<div className="pointer-events-none absolute inset-0 bg-[radial-gradient(circle_at_top_left,rgba(245,158,11,0.15)_0%,transparent_50%)] opacity-0 transition-opacity duration-500 group-hover:opacity-100" />
|
||||
<div className="pointer-events-none absolute left-0 top-0 z-20 h-24 w-24 rounded-tl-2xl border-l border-t border-amber-500 opacity-0 transition-opacity duration-500 [mask-image:linear-gradient(135deg,black_0%,transparent_50%)] group-hover:opacity-100" />
|
||||
|
||||
<div className="relative z-10 mb-4 flex items-center gap-3">
|
||||
<div className="flex h-10 w-10 items-center justify-center rounded-lg bg-amber-500/10 text-amber-400 transition-all duration-300 group-hover:bg-amber-500/20 group-hover:shadow-[0_0_15px_rgba(245,158,11,0.5)]">
|
||||
<GitBranch className="h-5 w-5" />
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="text-lg font-semibold text-white">Build from Source</h3>
|
||||
<p className="text-xs text-zinc-500">Full control</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p className="relative z-10 mb-4 text-sm leading-relaxed text-zinc-400">
|
||||
Clone the repo and build with Cargo. Customize, contribute, or embed directly in your Rust project.
|
||||
</p>
|
||||
|
||||
<div className="relative z-10 mt-auto">
|
||||
<div className="overflow-hidden rounded-lg border border-white/5 bg-black/50">
|
||||
<div className="flex items-center justify-between border-b border-white/5 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 text-zinc-300">
|
||||
<code>{sourceCommands}</code>
|
||||
</pre>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
|
@ -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() {
|
|||
</div>
|
||||
<div className="font-mono text-xs text-zinc-500">example_agent.ts</div>
|
||||
</div>
|
||||
<div className="p-6 font-mono text-sm leading-relaxed">
|
||||
<div className="overflow-x-auto p-6 font-mono text-sm leading-relaxed">
|
||||
<CodeLine num="01">
|
||||
<span className="text-purple-400">import</span>{' '}
|
||||
<span className="text-white">{'{ SandboxAgent }'}</span>{' '}
|
||||
<span className="text-purple-400">from</span>{' '}
|
||||
<span className="text-green-400">"@sandbox/sdk"</span>;
|
||||
<span className="text-purple-400">const</span>
|
||||
<span className="text-white"> agents = </span>
|
||||
<span className="text-purple-400">await</span>
|
||||
<span className="text-white"> client.</span>
|
||||
<span className="text-blue-400">listAgents</span>
|
||||
<span className="text-white">();</span>
|
||||
</CodeLine>
|
||||
<div className="h-4" />
|
||||
<CodeLine num="02">
|
||||
<span className="text-zinc-500">// Start Claude Code with E2B</span>
|
||||
<span className="text-purple-400">await</span>
|
||||
<span className="text-white"> client.</span>
|
||||
<span className="text-blue-400">createSession</span>
|
||||
<span className="text-white">(</span>
|
||||
<span className="text-green-400">"demo"</span>
|
||||
<span className="text-white">{", {"}</span>
|
||||
</CodeLine>
|
||||
<CodeLine num="03">
|
||||
<span className="text-purple-400">const</span>{' '}
|
||||
<span className="text-white">agent = </span>
|
||||
<span className="text-purple-400">await</span>{' '}
|
||||
<span className="text-white">SandboxAgent.</span>
|
||||
<span className="text-blue-400">spawn</span>
|
||||
<span className="text-white">{'({'}</span>
|
||||
<span className="text-white">{" agent: "}</span>
|
||||
<span className="text-green-400">"codex"</span>
|
||||
<span className="text-white">,</span>
|
||||
</CodeLine>
|
||||
<CodeLine num="04">
|
||||
<span className="text-white"> provider: </span>
|
||||
<span className="text-green-400">"e2b"</span>,
|
||||
<span className="text-white">{" agentMode: "}</span>
|
||||
<span className="text-green-400">"default"</span>
|
||||
<span className="text-white">,</span>
|
||||
</CodeLine>
|
||||
<CodeLine num="05">
|
||||
<span className="text-white"> engine: </span>
|
||||
<span className="text-green-400">"claude-code"</span>
|
||||
<span className="text-white">{" permissionMode: "}</span>
|
||||
<span className="text-green-400">"plan"</span>
|
||||
<span className="text-white">,</span>
|
||||
</CodeLine>
|
||||
<CodeLine num="06">
|
||||
<span className="text-white">{'}'});</span>
|
||||
<span className="text-white">{"});"}</span>
|
||||
</CodeLine>
|
||||
<div className="h-4" />
|
||||
<CodeLine num="07">
|
||||
<span className="text-purple-400">const</span>{' '}
|
||||
<span className="text-white">transcript = </span>
|
||||
<span className="text-purple-400">await</span>{' '}
|
||||
<span className="text-white">agent.</span>
|
||||
<span className="text-blue-400">getTranscript</span>
|
||||
<span className="text-white">();</span>
|
||||
<span className="text-purple-400">await</span>
|
||||
<span className="text-white"> client.</span>
|
||||
<span className="text-blue-400">postMessage</span>
|
||||
<span className="text-white">(</span>
|
||||
<span className="text-green-400">"demo"</span>
|
||||
<span className="text-white">{", { message: "}</span>
|
||||
<span className="text-green-400">"Hello from the SDK."</span>
|
||||
<span className="text-white">{" });"}</span>
|
||||
</CodeLine>
|
||||
<div className="h-4" />
|
||||
<CodeLine num="08">
|
||||
<span className="text-purple-400">for await</span>
|
||||
<span className="text-white"> (</span>
|
||||
<span className="text-purple-400">const</span>
|
||||
<span className="text-white"> event </span>
|
||||
<span className="text-purple-400">of</span>
|
||||
<span className="text-white"> client.</span>
|
||||
<span className="text-blue-400">streamEvents</span>
|
||||
<span className="text-white">(</span>
|
||||
<span className="text-green-400">"demo"</span>
|
||||
<span className="text-white">{", { offset: "}</span>
|
||||
<span className="text-amber-400">0</span>
|
||||
<span className="text-white">{" })) {"}</span>
|
||||
</CodeLine>
|
||||
<CodeLine num="09">
|
||||
<span className="text-white">{" console."}</span>
|
||||
<span className="text-blue-400">log</span>
|
||||
<span className="text-white">(event.type, event.data);</span>
|
||||
</CodeLine>
|
||||
<CodeLine num="10">
|
||||
<span className="text-white">{"}"}</span>
|
||||
</CodeLine>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -116,35 +148,10 @@ export function Hero() {
|
|||
|
||||
function CodeLine({ num, children }: { num: string; children: React.ReactNode }) {
|
||||
return (
|
||||
<div className="flex gap-4">
|
||||
<div className="flex gap-4 whitespace-nowrap">
|
||||
<span className="text-zinc-600 select-none">{num}</span>
|
||||
{children}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function DaytonaLogo() {
|
||||
return (
|
||||
<a href="https://daytona.io" target="_blank" rel="noopener noreferrer" className="opacity-60 hover:opacity-100 transition-opacity">
|
||||
<img src="/logos/daytona.svg" alt="Daytona" className="h-6 w-auto" style={{ filter: 'brightness(0) invert(1)' }} />
|
||||
</a>
|
||||
);
|
||||
}
|
||||
|
||||
function E2BLogo() {
|
||||
return (
|
||||
<a href="https://e2b.dev" target="_blank" rel="noopener noreferrer" className="opacity-60 hover:opacity-100 transition-opacity">
|
||||
<img src="/logos/e2b.svg" alt="E2B" className="h-7 w-auto" style={{ filter: 'brightness(0) invert(1)' }} />
|
||||
</a>
|
||||
);
|
||||
}
|
||||
|
||||
function VercelLogo() {
|
||||
return (
|
||||
<a href="https://vercel.com/docs/sandbox" target="_blank" rel="noopener noreferrer" className="opacity-60 hover:opacity-100 transition-opacity flex items-center gap-2">
|
||||
<svg viewBox="0 0 24 24" className="h-7 w-7 fill-current text-white">
|
||||
<path d="M24 22.525H0l12-21.05 12 21.05z"/>
|
||||
</svg>
|
||||
</a>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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';
|
|||
<main>
|
||||
<Hero client:load />
|
||||
<FeatureGrid client:visible />
|
||||
<GetStarted client:visible />
|
||||
<FAQ client:visible />
|
||||
<CTASection client:visible />
|
||||
</main>
|
||||
<Footer client:visible />
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue