import { useState } from "react"; import { Button, Surface, Text } from "@cloudflare/kumo"; import { DemoWrapper } from "../../layout"; import { CodeExplanation, LogPanel, type CodeSection } from "../../components"; import { useLogs } from "../../hooks"; type LayerId = "think" | "workspace" | "codemode" | "git" | "extensions"; const layers: Array<{ id: LayerId; name: string; role: string; details: string[]; }> = [ { id: "think", name: "Think", role: "Opinionated chat loop", details: [ "Owns the AI SDK streamText call", "Persists messages in Durable Object SQLite", "Supports client tools, resumable streams, and lifecycle hooks" ] }, { id: "workspace", name: "Workspace", role: "Durable virtual filesystem", details: [ "Stores files in SQLite with optional R2 spillover", "Gives the model read/write/list/search tools", "Survives refreshes and follow-up turns" ] }, { id: "codemode", name: "Codemode + Shell", role: "Sandboxed state programs", details: [ "Runs JavaScript in an isolated Worker", "Exposes state.* instead of shell commands", "Lets agents perform multi-file edits transactionally" ] }, { id: "git", name: "Git Tools", role: "Version control over virtual files", details: [ "Uses isomorphic-git against the Workspace filesystem", "Can inject hidden auth for clone/fetch/push", "Keeps secrets out of model-visible tool inputs" ] }, { id: "extensions", name: "Extensions", role: "Loadable assistant capabilities", details: [ "Think can load extension manifests", "Extensions can provide tools and hook subscriptions", "Worker Loader can isolate extension code" ] } ]; const flow = [ [ "user_message", { text: "Rename foo to bar across /src and summarize changes" } ], ["think_before_turn", { contextBlocks: ["workspace tree", "recent files"] }], ["workspace_search", { query: "foo", matches: 3 }], ["codemode_execute", { code: "state.replaceInFiles(...)", sandboxed: true }], ["workspace_diff", { filesChanged: 2 }], ["assistant_response", { summary: "Renamed foo to bar in two files." }] ]; const codeSections: CodeSection[] = [ { title: "Use Think when you want a full assistant", description: "Think is the high-level agent base class: chat protocol, persistence, stream resumption, client tools, workspace tools, and lifecycle hooks.", code: `import { Think } from "@cloudflare/think"; import { createWorkersAI } from "workers-ai-provider"; export class Assistant extends Think { getModel() { return createWorkersAI({ binding: this.env.AI })( "@cf/moonshotai/kimi-k2.6" ); } getSystemPrompt() { return "You are a helpful coding assistant."; } }` }, { title: "Back the assistant with a Workspace", description: "Workspace is a durable virtual filesystem. Think exposes workspace tools automatically, and lower-level agents can wire it into their own tools.", code: `import { Workspace } from "@cloudflare/shell"; export class Assistant extends Think { override workspace = new Workspace({ sql: this.ctx.storage.sql, r2: this.env.R2, name: () => this.name }); }` }, { title: "Run structured state programs instead of shell", description: "Shell is not bash. It runs JavaScript in an isolated Worker and gives code a typed state object for filesystem operations.", code: `import { DynamicWorkerExecutor, resolveProvider } from "@cloudflare/codemode"; import { stateTools } from "@cloudflare/shell/workers"; const executor = new DynamicWorkerExecutor({ loader: this.env.LOADER }); await executor.execute( \`async () => { const preview = await state.replaceInFiles("src/**/*.ts", "foo", "bar", { dryRun: true }); return preview; }\`, [resolveProvider(stateTools(this.workspace))] );` } ]; export function ThinkShellDemo() { const [selectedId, setSelectedId] = useState("think"); const { logs, addLog, clearLogs } = useLogs(); const selected = layers.find((layer) => layer.id === selectedId) ?? layers[0]; const simulate = () => { clearLogs(); flow.forEach(([type, payload], index) => { window.setTimeout( () => addLog("in", type as string, payload), index * 300 ); }); }; return ( Think is the higher-level assistant runtime; Shell and Workspace give that assistant durable files and safe structured execution. Together they are the SDK path for coding assistants, workspace agents, and multi-step tool-using products. } >

Assistant Stack

{layers.map((layer) => ( ))}

{selected.name}

{selected.role}

{selected.details.map((detail) => (

{detail}

))}

Simulated Workspace Turn

This is the kind of turn Think + Shell is designed for: gather context, operate on durable files, run sandboxed state code, then return a diff-aware answer.

Full Examples

{[ ["Assistant product shell", "examples/assistant"], ["Workspace chat", "examples/workspace-chat"], ["Shell package", "packages/shell"], ["Think package", "packages/think"] ].map(([label, path]) => (

{label} {path}

))}

); }