import { createRoot } from "react-dom/client"; import { useAgent } from "agents/react"; import { useAgentChat, type AITool } from "@cloudflare/ai-chat/react"; import { IframeSandboxExecutor, createBrowserCodeTool, type JsonSchemaExecutableToolDescriptors } from "@cloudflare/codemode/browser"; import { isToolUIPart } from "ai"; import { useCallback, useEffect, useMemo, useRef, useState } from "react"; import { Streamdown } from "streamdown"; import { code } from "@streamdown/code"; import { Badge, Button, Empty, InputArea, PoweredByCloudflare, Surface, Text } from "@cloudflare/kumo"; import { CheckCircleIcon, CircleNotchIcon, CodeIcon, LightningIcon, PaperPlaneRightIcon, TerminalIcon, TrashIcon, WarningCircleIcon, MoonIcon, SunIcon } from "@phosphor-icons/react"; import "./styles.css"; type Project = { id: number; name: string }; type Task = { id: number; projectId: number; title: string; done: boolean }; type ToolPart = { type: string; state?: string; errorText?: string; input?: { code?: string; [key: string]: unknown }; output?: { code?: string; result?: unknown; logs?: string[] }; }; const store = { projects: [] as Project[], tasks: [] as Task[] }; const browserTools: JsonSchemaExecutableToolDescriptors = { getPageInfo: { description: "Get information about the current browser page", inputSchema: { type: "object", properties: {}, required: [] }, execute: async () => ({ title: document.title, url: location.href }) }, createProject: { description: "Create a project in browser memory", inputSchema: { type: "object", properties: { name: { type: "string", description: "Project name" } }, required: ["name"] }, execute: async (args) => { const project = { id: store.projects.length + 1, name: String(args.name) }; store.projects.push(project); return project; } }, listProjects: { description: "List browser-memory projects", inputSchema: { type: "object", properties: {}, required: [] }, execute: async () => store.projects }, createTask: { description: "Create a task in browser memory", inputSchema: { type: "object", properties: { projectId: { type: "number", description: "Project ID" }, title: { type: "string", description: "Task title" } }, required: ["projectId", "title"] }, execute: async (args) => { const task = { id: store.tasks.length + 1, projectId: Number(args.projectId), title: String(args.title), done: false }; store.tasks.push(task); return task; } }, listTasks: { description: "List browser-memory tasks, optionally by project", inputSchema: { type: "object", properties: { projectId: { type: "number", description: "Project ID" } }, required: [] }, execute: async (args) => { const projectId = args.projectId == null ? undefined : Number(args.projectId); return projectId == null ? store.tasks : store.tasks.filter((task) => task.projectId === projectId); } }, updateTask: { description: "Update a browser-memory task", inputSchema: { type: "object", properties: { id: { type: "number", description: "Task ID" }, title: { type: "string", description: "New title" }, done: { type: "boolean", description: "Whether the task is done" } }, required: ["id"] }, execute: async (args) => { const task = store.tasks.find((item) => item.id === Number(args.id)); if (!task) return { error: "Task not found" }; if (args.title != null) task.title = String(args.title); if (args.done != null) task.done = Boolean(args.done); return task; } } }; function extractFunctionCalls(code?: string): string[] { if (!code) return []; return [ ...new Set( code.match(/codemode\.(\w+)/g)?.map((m) => m.replace("codemode.", "")) ?? [] ) ]; } function ToolCard({ part }: { part: ToolPart }) { const [expanded, setExpanded] = useState(true); const calls = extractFunctionCalls(part.output?.code ?? part.input?.code); const hasError = part.state === "output-error" || !!part.errorText; const isDone = part.state === "output-available"; const isRunning = !isDone && !hasError; return ( {expanded && (

{part.output?.code && (

Code

                {part.output.code}

)} {part.output?.result !== undefined && (

Result

                {JSON.stringify(part.output.result, null, 2)}

)} {part.output?.logs?.length ? (

Console

                {part.output.logs.join("\n")}

) : null} {part.errorText && (

{part.errorText}

)}

)} ); } function ModeToggle() { const [mode, setMode] = useState( () => localStorage.getItem("theme") || "light" ); useEffect(() => { document.documentElement.setAttribute("data-mode", mode); document.documentElement.style.colorScheme = mode; localStorage.setItem("theme", mode); }, [mode]); return (

{messages.length === 0 && ( } title="Try browser codemode" description="Ask: Create a project named Alpha, add two tasks, then list everything." /> )} {messages.map((message) => { const isUser = message.role === "user"; return (

{message.parts.map((part, idx) => { if (part.type === "text") { return ( {part.text} ); } if (isToolUIPart(part)) { return ( ); } return null; })}

); })}

); } createRoot(document.getElementById("root")!).render();