Skip to content

Commit 87e8dab

Browse files
NathanFlurryNathanFlurry
committed
feat: add AI SDK example, update hero snippet, and add PostHog analytics
1 parent 62ab792 commit 87e8dab

6 files changed

Lines changed: 230 additions & 57 deletions

File tree

‎docs/docs.json‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,13 @@
1515
"light": "/logo.svg",
1616
"dark": "/logo.svg"
1717
},
18+
"integrations": {
19+
"posthog": {
20+
"apiKey": "phc_6kfTNEAVw7rn1LA51cO3D69FefbKupSWFaM7OUgEpEo",
21+
"apiHost": "https://ph.rivet.gg",
22+
"sessionRecording": true
23+
}
24+
},
1825
"colors": {
1926
"primary": "#CC0000",
2027
"light": "#FF3333",

‎examples/ai-sdk/package.json‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
{
2+
"name": "@libsandbox/example-ai-sdk",
3+
"private": true,
4+
"type": "module",
5+
"scripts": {
6+
"dev": "tsx src/index.ts"
7+
},
8+
"dependencies": {
9+
"secure-exec": "workspace:*",
10+
"ai": "^6.0.116",
11+
"@ai-sdk/anthropic": "^3.0.58",
12+
"@ai-sdk/openai": "^3.0.41",
13+
"zod": "^3.24.0"
14+
},
15+
"devDependencies": {
16+
"tsx": "^4.19.2"
17+
}
18+
}

‎examples/ai-sdk/src/index.ts‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
import { generateText, stepCountIs, tool } from "ai";
2+
import { anthropic } from "@ai-sdk/anthropic";
3+
import { NodeRuntime, createNodeDriver, createNodeRuntimeDriverFactory } from "secure-exec";
4+
import { z } from "zod";
5+
6+
const runtime = new NodeRuntime({
7+
systemDriver: createNodeDriver({
8+
permissions: {
9+
fs: () => ({ allow: true }),
10+
network: () => ({ allow: true }),
11+
},
12+
}),
13+
runtimeDriverFactory: createNodeRuntimeDriverFactory(),
14+
memoryLimit: 64,
15+
cpuTimeLimitMs: 5000,
16+
});
17+
18+
const { text } = await generateText({
19+
model: anthropic("claude-sonnet-4-6"),
20+
prompt: "Calculate the first 20 fibonacci numbers",
21+
stopWhen: stepCountIs(5),
22+
tools: {
23+
execute: tool({
24+
description: "Run JavaScript in a secure sandbox. Assign the result to module.exports to return data.",
25+
inputSchema: z.object({ code: z.string() }),
26+
execute: async ({ code }) => runtime.run(code),
27+
}),
28+
},
29+
});
30+
31+
console.log(text);

‎packages/website/src/components/Hero.tsx‎

Lines changed: 54 additions & 57 deletions
Original file line numberDiff line numberDiff line change
@@ -6,35 +6,37 @@ import { ArrowRight, Terminal, Check, ChevronDown } from "lucide-react";
66
import { CopyButton } from "./ui/CopyButton";
77
import { LightningBackground } from "./ui/LightningBackground";
88

9-
const codeRaw = `import { generateText, tool } from "ai";
9+
const codeRaw = `import { generateText, stepCountIs, tool } from "ai";
1010
import { anthropic } from "@ai-sdk/anthropic";
1111
import { NodeRuntime, createNodeDriver, createNodeRuntimeDriverFactory } from "secure-exec";
1212
import { z } from "zod";
1313
1414
const runtime = new NodeRuntime({
15-
systemDriver: createNodeDriver({ permissions: { fs: true, network: true } }),
15+
systemDriver: createNodeDriver({
16+
permissions: {
17+
fs: () => ({ allow: true }),
18+
network: () => ({ allow: true }),
19+
},
20+
}),
1621
runtimeDriverFactory: createNodeRuntimeDriverFactory(),
1722
memoryLimit: 64,
1823
cpuTimeLimitMs: 5000,
1924
});
2025
21-
const result = await generateText({
22-
model: anthropic("claude-sonnet-4-20250514"),
26+
const { text } = await generateText({
27+
model: anthropic("claude-sonnet-4-6"),
28+
prompt: "Calculate the first 20 fibonacci numbers",
29+
stopWhen: stepCountIs(5),
2330
tools: {
2431
execute: tool({
25-
description: "Run JavaScript in a secure sandbox",
26-
parameters: z.object({ code: z.string() }),
27-
execute: async ({ code }) => {
28-
const logs: string[] = [];
29-
const res = await runtime.exec(code, {
30-
onStdio: (e) => logs.push(e.message),
31-
});
32-
return { exitCode: res.code, output: logs.join("\\n") };
33-
},
32+
description: "Run JavaScript in a secure sandbox. Assign the result to module.exports to return data.",
33+
inputSchema: z.object({ code: z.string() }),
34+
execute: async ({ code }) => runtime.run(code),
3435
}),
3536
},
36-
prompt: "Calculate the first 20 fibonacci numbers",
37-
});`;
37+
});
38+
39+
console.log(text);`;
3840

3941
function CodeBlock() {
4042
return (
@@ -49,6 +51,8 @@ function CodeBlock() {
4951
<span className="text-zinc-300">{" { "}</span>
5052
<span className="text-white">generateText</span>
5153
<span className="text-zinc-300">, </span>
54+
<span className="text-white">stepCountIs</span>
55+
<span className="text-zinc-300">, </span>
5256
<span className="text-white">tool</span>
5357
<span className="text-zinc-300">{" } "}</span>
5458
<span className="text-purple-400">from</span>
@@ -99,11 +103,21 @@ function CodeBlock() {
99103
{"\n"}
100104
<span className="text-zinc-300">{" systemDriver: "}</span>
101105
<span className="text-blue-400">createNodeDriver</span>
102-
<span className="text-zinc-300">{"({ permissions: { fs: "}</span>
106+
<span className="text-zinc-300">{"({"}</span>
107+
{"\n"}
108+
<span className="text-zinc-300">{" permissions: {"}</span>
109+
{"\n"}
110+
<span className="text-zinc-300">{" fs: () => ({ allow: "}</span>
103111
<span className="text-orange-400">true</span>
104-
<span className="text-zinc-300">{", network: "}</span>
112+
<span className="text-zinc-300">{" }),"}</span>
113+
{"\n"}
114+
<span className="text-zinc-300">{" network: () => ({ allow: "}</span>
105115
<span className="text-orange-400">true</span>
106-
<span className="text-zinc-300">{" } }),"}</span>
116+
<span className="text-zinc-300">{" }),"}</span>
117+
{"\n"}
118+
<span className="text-zinc-300">{" },"}</span>
119+
{"\n"}
120+
<span className="text-zinc-300">{" }),"}</span>
107121
{"\n"}
108122
<span className="text-zinc-300">{" runtimeDriverFactory: "}</span>
109123
<span className="text-blue-400">createNodeRuntimeDriverFactory</span>
@@ -123,7 +137,7 @@ function CodeBlock() {
123137
<span className="text-zinc-500">// Expose as an AI SDK tool</span>
124138
{"\n"}
125139
<span className="text-purple-400">const</span>
126-
<span className="text-zinc-300"> result = </span>
140+
<span className="text-zinc-300">{" { text } = "}</span>
127141
<span className="text-purple-400">await</span>
128142
<span className="text-zinc-300"> </span>
129143
<span className="text-blue-400">generateText</span>
@@ -132,7 +146,17 @@ function CodeBlock() {
132146
<span className="text-zinc-300">{" model: "}</span>
133147
<span className="text-blue-400">anthropic</span>
134148
<span className="text-zinc-300">{"("}</span>
135-
<span className="text-green-400">"claude-sonnet-4-20250514"</span>
149+
<span className="text-green-400">"claude-sonnet-4-6"</span>
150+
<span className="text-zinc-300">{"),"}</span>
151+
{"\n"}
152+
<span className="text-zinc-300">{" prompt: "}</span>
153+
<span className="text-green-400">"Calculate the first 20 fibonacci numbers"</span>
154+
<span className="text-zinc-300">,</span>
155+
{"\n"}
156+
<span className="text-zinc-300">{" stopWhen: "}</span>
157+
<span className="text-blue-400">stepCountIs</span>
158+
<span className="text-zinc-300">{"("}</span>
159+
<span className="text-orange-400">5</span>
136160
<span className="text-zinc-300">{"),"}</span>
137161
{"\n"}
138162
<span className="text-zinc-300">{" tools: {"}</span>
@@ -142,58 +166,31 @@ function CodeBlock() {
142166
<span className="text-zinc-300">{"({"}</span>
143167
{"\n"}
144168
<span className="text-zinc-300">{" description: "}</span>
145-
<span className="text-green-400">"Run JavaScript in a secure sandbox"</span>
169+
<span className="text-green-400">"Run JavaScript in a secure sandbox. Assign the result to module.exports to return data."</span>
146170
<span className="text-zinc-300">,</span>
147171
{"\n"}
148-
<span className="text-zinc-300">{" parameters: z."}</span>
172+
<span className="text-zinc-300">{" inputSchema: z."}</span>
149173
<span className="text-blue-400">object</span>
150174
<span className="text-zinc-300">{"({ code: z."}</span>
151175
<span className="text-blue-400">string</span>
152176
<span className="text-zinc-300">{"() }),"}</span>
153177
{"\n"}
154178
<span className="text-zinc-300">{" execute: "}</span>
155179
<span className="text-purple-400">async</span>
156-
<span className="text-zinc-300">{" ({ code }) => {"}</span>
157-
{"\n"}
158-
<span className="text-zinc-300">{" "}</span>
159-
<span className="text-purple-400">const</span>
160-
<span className="text-zinc-300">{" logs: "}</span>
161-
<span className="text-blue-400">string</span>
162-
<span className="text-zinc-300">{"[] = [];"}</span>
163-
{"\n"}
164-
<span className="text-zinc-300">{" "}</span>
165-
<span className="text-purple-400">const</span>
166-
<span className="text-zinc-300">{" res = "}</span>
167-
<span className="text-purple-400">await</span>
168-
<span className="text-zinc-300">{" runtime."}</span>
169-
<span className="text-blue-400">exec</span>
170-
<span className="text-zinc-300">{"(code, {"}</span>
171-
{"\n"}
172-
<span className="text-zinc-300">{" onStdio: (e) => logs."}</span>
173-
<span className="text-blue-400">push</span>
174-
<span className="text-zinc-300">{"(e.message),"}</span>
175-
{"\n"}
176-
<span className="text-zinc-300">{" });"}</span>
177-
{"\n"}
178-
<span className="text-zinc-300">{" "}</span>
179-
<span className="text-purple-400">return</span>
180-
<span className="text-zinc-300">{" { exitCode: res.code, output: logs."}</span>
181-
<span className="text-blue-400">join</span>
182-
<span className="text-zinc-300">{"("}</span>
183-
<span className="text-green-400">"\\n"</span>
184-
<span className="text-zinc-300">{") };"}</span>
185-
{"\n"}
186-
<span className="text-zinc-300">{" },"}</span>
180+
<span className="text-zinc-300">{" ({ code }) => runtime."}</span>
181+
<span className="text-blue-400">run</span>
182+
<span className="text-zinc-300">{"(code),"}</span>
187183
{"\n"}
188184
<span className="text-zinc-300">{" }),"}</span>
189185
{"\n"}
190186
<span className="text-zinc-300">{" },"}</span>
191187
{"\n"}
192-
<span className="text-zinc-300">{" prompt: "}</span>
193-
<span className="text-green-400">"Calculate the first 20 fibonacci numbers"</span>
194-
<span className="text-zinc-300">,</span>
195-
{"\n"}
196188
<span className="text-zinc-300">{"});"}</span>
189+
{"\n\n"}
190+
<span className="text-white">console</span>
191+
<span className="text-zinc-300">.</span>
192+
<span className="text-blue-400">log</span>
193+
<span className="text-zinc-300">(text);</span>
197194
</code>
198195
</pre>
199196
</div>

‎packages/website/src/layouts/Layout.astro‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -62,6 +62,15 @@ const structuredData = {
6262
<meta name="twitter:description" content={description} />
6363

6464
<script type="application/ld+json" set:html={JSON.stringify(structuredData)} />
65+
66+
<script>
67+
!function(t,e){var o,n,p,r;e.__SV||(window.posthog=e,e._i=[],e.init=function(i,s,a){function g(t,e){var o=e.split(".");2==o.length&&(t=t[o[0]],e=o[1]),t[e]=function(){t.push([e].concat(Array.prototype.slice.call(arguments,0)))}}(p=t.createElement("script")).type="text/javascript",p.async=!0,p.src=s.api_host+"/static/array.js",(r=t.getElementsByTagName("script")[0]).parentNode.insertBefore(p,r);var u=e;for(void 0!==a?u=e[a]=[]:a="posthog",u.people=u.people||[],u.toString=function(t){var e="posthog";return"posthog"!==a&&(e+="."+a),t||(e+=" (stub)"),e},u.people.toString=function(){return u.toString(1)+".people (stub)"},o="init capture register register_once register_for_session unregister opt_in_capturing opt_out_capturing has_opted_in_capturing has_opted_out_capturing reset isFeatureEnabled getFeatureFlag getFeatureFlagPayload reloadFeatureFlags group updateEarlyAccessFeatureEnrollment getEarlyAccessFeatures getActiveMatchingSurveys getSurveys onFeatureFlags onSessionId".split(" "),n=0;n<o.length;n++)g(u,o[n]);e._i.push([i,s,a])},e.__SV=1)}(document,window.posthog||[]);
68+
posthog.init('phc_6kfTNEAVw7rn1LA51cO3D69FefbKupSWFaM7OUgEpEo', {
69+
api_host: 'https://ph.rivet.gg',
70+
capture_pageview: true,
71+
capture_pageleave: true,
72+
});
73+
</script>
6574
</head>
6675
<body class="min-h-screen bg-background text-foreground antialiased">
6776
<slot />

0 commit comments

Comments
 (0)