An AI chat agent with a persistent virtual filesystem. Demonstrates a Workspace from @cloudflare/computer integrated with AIChatAgent from @cloudflare/ai-chat, using Computer's AI SDK tools for file work and a Dynamic Worker backend for running code.
- Workspace tools —
createAITools()gives the modelread,ls,find,grep,write,edit, anddelete, plusexecbecause the Workspace has a backend - Code execution —
execruns a JavaScript module against the workspace in a Dynamic Worker, withnode:fs/promisesand git through thews:gitmodule - Persistent storage — Files survive across conversations (backed by Durable Object SQLite)
- File browser sidebar — Browse workspace contents alongside the chat
- Streaming responses — Uses Workers AI with streaming via the AI SDK
npm install
npm startimport { AIChatAgent } from "@cloudflare/ai-chat";
import { Workspace } from "@cloudflare/computer";
import { WorkerJavaScriptBackend } from "@cloudflare/computer/backends/worker-javascript";
import { createGitClient } from "@cloudflare/computer/git";
import { createGitModule } from "@cloudflare/computer/modules/git";
import { createAITools } from "@cloudflare/computer/tools/ai-sdk";
export class WorkspaceChatAgent extends AIChatAgent {
workspace = new Workspace({
storage: this.ctx.storage,
git: createGitClient(),
backends: [
new WorkerJavaScriptBackend({
id: "js",
loader: this.env.LOADER,
access: "read-write",
modules: { "ws:git": createGitModule({ allowNetwork: true }) }
})
]
});
async onChatMessage(_onFinish, options) {
return streamText({
model,
messages: await convertToModelMessages(this.messages),
tools: createAITools({ workspace: this.workspace })
}).toUIMessageStreamResponse();
}
}- "Create a hello world HTML page at /workspace/index.html"
- "Show me what files are in the workspace"
- "Create a Node.js project with package.json and src/index.ts"
- "Find all .ts files in the workspace"
- "Rename
footobaracross every file in /workspace/src" - "Initialise a git repo, commit everything, and show me the log"