├── .env.example
├── app
    ├── favicon.ico
    ├── opengraph-image.png
    ├── twitter-image.png
    ├── api
    │   ├── kill-desktop
    │   │   └── route.ts
    │   └── chat
    │   │   └── route.ts
    ├── layout.tsx
    ├── globals.css
    └── page.tsx
├── postcss.config.mjs
├── public
    ├── vercel.svg
    ├── window.svg
    ├── file.svg
    ├── globe.svg
    └── next.svg
├── eslint.config.mjs
├── components.json
├── .gitignore
├── tsconfig.json
├── components
    ├── ui
    │   ├── label.tsx
    │   ├── sonner.tsx
    │   ├── input.tsx
    │   ├── resizable.tsx
    │   └── button.tsx
    ├── prompt-suggestions.tsx
    ├── input.tsx
    ├── project-info.tsx
    ├── icons.tsx
    └── message.tsx
├── lib
    ├── use-scroll-to-bottom.tsx
    ├── utils.ts
    └── e2b
    │   ├── utils.ts
    │   └── tool.ts
├── next.config.ts
├── package.json
└── README.md


/.env.example:
--------------------------------------------------------------------------------
1 | ANTHROPIC_API_KEY=
2 | E2B_API_KEY=
3 | 


--------------------------------------------------------------------------------
/app/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/vercel-labs/ai-sdk-computer-use/HEAD/app/favicon.ico


--------------------------------------------------------------------------------
/app/opengraph-image.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/vercel-labs/ai-sdk-computer-use/HEAD/app/opengraph-image.png


--------------------------------------------------------------------------------
/app/twitter-image.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/vercel-labs/ai-sdk-computer-use/HEAD/app/twitter-image.png


--------------------------------------------------------------------------------
/postcss.config.mjs:
--------------------------------------------------------------------------------
1 | const config = {
2 |   plugins: ["@tailwindcss/postcss"],
3 | };
4 | 
5 | export default config;
6 | 


--------------------------------------------------------------------------------
/public/vercel.svg:
--------------------------------------------------------------------------------
1 | <svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1155 1000"><path d="m577.3 0 577.4 1000H0z" fill="#fff"/></svg>


--------------------------------------------------------------------------------
/public/window.svg:
--------------------------------------------------------------------------------
1 | <svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill-rule="evenodd" clip-rule="evenodd" d="M1.5 2.5h13v10a1 1 0 0 1-1 1h-11a1 1 0 0 1-1-1zM0 1h16v11.5a2.5 2.5 0 0 1-2.5 2.5h-11A2.5 2.5 0 0 1 0 12.5zm3.75 4.5a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5M7 4.75a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0m1.75.75a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5" fill="#666"/></svg>


--------------------------------------------------------------------------------
/public/file.svg:
--------------------------------------------------------------------------------
1 | <svg fill="none" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path d="M14.5 13.5V5.41a1 1 0 0 0-.3-.7L9.8.29A1 1 0 0 0 9.08 0H1.5v13.5A2.5 2.5 0 0 0 4 16h8a2.5 2.5 0 0 0 2.5-2.5m-1.5 0v-7H8v-5H3v12a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1M9.5 5V2.12L12.38 5zM5.13 5h-.62v1.25h2.12V5zm-.62 3h7.12v1.25H4.5zm.62 3h-.62v1.25h7.12V11z" clip-rule="evenodd" fill="#666" fill-rule="evenodd"/></svg>


--------------------------------------------------------------------------------
/eslint.config.mjs:
--------------------------------------------------------------------------------
 1 | import { dirname } from "path";
 2 | import { fileURLToPath } from "url";
 3 | import { FlatCompat } from "@eslint/eslintrc";
 4 | 
 5 | const __filename = fileURLToPath(import.meta.url);
 6 | const __dirname = dirname(__filename);
 7 | 
 8 | const compat = new FlatCompat({
 9 |   baseDirectory: __dirname,
10 | });
11 | 
12 | const eslintConfig = [
13 |   ...compat.extends("next/core-web-vitals", "next/typescript"),
14 | ];
15 | 
16 | export default eslintConfig;
17 | 


--------------------------------------------------------------------------------
/components.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "$schema": "https://ui.shadcn.com/schema.json",
 3 |   "style": "new-york",
 4 |   "rsc": true,
 5 |   "tsx": true,
 6 |   "tailwind": {
 7 |     "config": "",
 8 |     "css": "app/globals.css",
 9 |     "baseColor": "zinc",
10 |     "cssVariables": true,
11 |     "prefix": ""
12 |   },
13 |   "aliases": {
14 |     "components": "@/components",
15 |     "utils": "@/lib/utils",
16 |     "ui": "@/components/ui",
17 |     "lib": "@/lib",
18 |     "hooks": "@/hooks"
19 |   },
20 |   "iconLibrary": "lucide"
21 | }


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 2 | 
 3 | # dependencies
 4 | /node_modules
 5 | /.pnp
 6 | .pnp.*
 7 | .yarn/*
 8 | !.yarn/patches
 9 | !.yarn/plugins
10 | !.yarn/releases
11 | !.yarn/versions
12 | 
13 | # testing
14 | /coverage
15 | 
16 | # next.js
17 | /.next/
18 | /out/
19 | 
20 | # production
21 | /build
22 | 
23 | # misc
24 | .DS_Store
25 | *.pem
26 | 
27 | # debug
28 | npm-debug.log*
29 | yarn-debug.log*
30 | yarn-error.log*
31 | .pnpm-debug.log*
32 | 
33 | # env files (can opt-in for committing if needed)
34 | .env
35 | .env.local
36 | 
37 | # vercel
38 | .vercel
39 | 
40 | # typescript
41 | *.tsbuildinfo
42 | next-env.d.ts
43 | .env*.local
44 | 


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "target": "ES2017",
 4 |     "lib": ["dom", "dom.iterable", "esnext"],
 5 |     "allowJs": true,
 6 |     "skipLibCheck": true,
 7 |     "strict": true,
 8 |     "noEmit": true,
 9 |     "esModuleInterop": true,
10 |     "module": "esnext",
11 |     "moduleResolution": "bundler",
12 |     "resolveJsonModule": true,
13 |     "isolatedModules": true,
14 |     "jsx": "preserve",
15 |     "incremental": true,
16 |     "plugins": [
17 |       {
18 |         "name": "next"
19 |       }
20 |     ],
21 |     "paths": {
22 |       "@/*": ["./*"]
23 |     }
24 |   },
25 |   "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
26 |   "exclude": ["node_modules"]
27 | }
28 | 


--------------------------------------------------------------------------------
/components/ui/label.tsx:
--------------------------------------------------------------------------------
 1 | "use client"
 2 | 
 3 | import * as React from "react"
 4 | import * as LabelPrimitive from "@radix-ui/react-label"
 5 | 
 6 | import { cn } from "@/lib/utils"
 7 | 
 8 | function Label({
 9 |   className,
10 |   ...props
11 | }: React.ComponentProps<typeof LabelPrimitive.Root>) {
12 |   return (
13 |     <LabelPrimitive.Root
14 |       data-slot="label"
15 |       className={cn(
16 |         "flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50",
17 |         className
18 |       )}
19 |       {...props}
20 |     />
21 |   )
22 | }
23 | 
24 | export { Label }
25 | 


--------------------------------------------------------------------------------
/lib/use-scroll-to-bottom.tsx:
--------------------------------------------------------------------------------
 1 | import { useEffect, useRef, type RefObject } from 'react';
 2 | 
 3 | export function useScrollToBottom(): [
 4 |   RefObject<HTMLDivElement>,
 5 |   RefObject<HTMLDivElement>,
 6 | ] {
 7 |   const containerRef = useRef<HTMLDivElement>(null);
 8 |   const endRef = useRef<HTMLDivElement>(null);
 9 | 
10 |   useEffect(() => {
11 |     const container = containerRef.current;
12 |     const end = endRef.current;
13 | 
14 |     if (container && end) {
15 |       const observer = new MutationObserver(() => {
16 |         end.scrollIntoView({ behavior: 'instant', block: 'end' });
17 |       });
18 | 
19 |       observer.observe(container, {
20 |         childList: true,
21 |         subtree: true,
22 |         attributes: true,
23 |         characterData: true,
24 |       });
25 | 
26 |       return () => observer.disconnect();
27 |     }
28 |   }, []);
29 | 
30 |   // @ts-expect-error error
31 |   return [containerRef, endRef];
32 | }


--------------------------------------------------------------------------------
/components/ui/sonner.tsx:
--------------------------------------------------------------------------------
 1 | "use client"
 2 | 
 3 | import { useTheme } from "next-themes"
 4 | import { Toaster as Sonner, ToasterProps } from "sonner"
 5 | 
 6 | const Toaster = ({ ...props }: ToasterProps) => {
 7 |   const { theme = "system" } = useTheme()
 8 | 
 9 |   return (
10 |     <Sonner
11 |       theme={theme as ToasterProps["theme"]}
12 |       className="toaster group"
13 |       toastOptions={{
14 |         classNames: {
15 |           toast:
16 |             "group toast group-[.toaster]:bg-background group-[.toaster]:text-foreground group-[.toaster]:border-border group-[.toaster]:shadow-lg",
17 |           description: "group-[.toast]:text-muted-foreground",
18 |           actionButton:
19 |             "group-[.toast]:bg-primary group-[.toast]:text-primary-foreground font-medium",
20 |           cancelButton:
21 |             "group-[.toast]:bg-muted group-[.toast]:text-muted-foreground font-medium",
22 |         },
23 |       }}
24 |       {...props}
25 |     />
26 |   )
27 | }
28 | 
29 | export { Toaster }
30 | 


--------------------------------------------------------------------------------
/app/api/kill-desktop/route.ts:
--------------------------------------------------------------------------------
 1 | import { killDesktop } from "@/lib/e2b/utils";
 2 | 
 3 | // Common handler for both GET and POST requests
 4 | async function handleKillDesktop(request: Request) {
 5 |   // Enable CORS to ensure this works across all browsers
 6 | 
 7 |   const { searchParams } = new URL(request.url);
 8 |   const sandboxId = searchParams.get("sandboxId");
 9 | 
10 |   console.log(`Kill desktop request received via ${request.method} for ID: ${sandboxId}`);
11 | 
12 |   if (!sandboxId) {
13 |     return new Response("No sandboxId provided", { status: 400 });
14 |   }
15 | 
16 |   try {
17 |     await killDesktop(sandboxId);
18 |     return new Response("Desktop killed successfully", { status: 200 });
19 |   } catch (error) {
20 |     console.error(`Failed to kill desktop with ID: ${sandboxId}`, error);
21 |     return new Response("Failed to kill desktop", { status: 500 });
22 |   }
23 | }
24 | 
25 | // Handle POST requests
26 | export async function POST(request: Request) {
27 |   return handleKillDesktop(request);
28 | }


--------------------------------------------------------------------------------
/public/globe.svg:
--------------------------------------------------------------------------------
1 | <svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><g clip-path="url(#a)"><path fill-rule="evenodd" clip-rule="evenodd" d="M10.27 14.1a6.5 6.5 0 0 0 3.67-3.45q-1.24.21-2.7.34-.31 1.83-.97 3.1M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16m.48-1.52a7 7 0 0 1-.96 0H7.5a4 4 0 0 1-.84-1.32q-.38-.89-.63-2.08a40 40 0 0 0 3.92 0q-.25 1.2-.63 2.08a4 4 0 0 1-.84 1.31zm2.94-4.76q1.66-.15 2.95-.43a7 7 0 0 0 0-2.58q-1.3-.27-2.95-.43a18 18 0 0 1 0 3.44m-1.27-3.54a17 17 0 0 1 0 3.64 39 39 0 0 1-4.3 0 17 17 0 0 1 0-3.64 39 39 0 0 1 4.3 0m1.1-1.17q1.45.13 2.69.34a6.5 6.5 0 0 0-3.67-3.44q.65 1.26.98 3.1M8.48 1.5l.01.02q.41.37.84 1.31.38.89.63 2.08a40 40 0 0 0-3.92 0q.25-1.2.63-2.08a4 4 0 0 1 .85-1.32 7 7 0 0 1 .96 0m-2.75.4a6.5 6.5 0 0 0-3.67 3.44 29 29 0 0 1 2.7-.34q.31-1.83.97-3.1M4.58 6.28q-1.66.16-2.95.43a7 7 0 0 0 0 2.58q1.3.27 2.95.43a18 18 0 0 1 0-3.44m.17 4.71q-1.45-.12-2.69-.34a6.5 6.5 0 0 0 3.67 3.44q-.65-1.27-.98-3.1" fill="#666"/></g><defs><clipPath id="a"><path fill="#fff" d="M0 0h16v16H0z"/></clipPath></defs></svg>


--------------------------------------------------------------------------------
/components/ui/input.tsx:
--------------------------------------------------------------------------------
 1 | import * as React from "react"
 2 | 
 3 | import { cn } from "@/lib/utils"
 4 | 
 5 | function Input({ className, type, ...props }: React.ComponentProps<"input">) {
 6 |   return (
 7 |     <input
 8 |       type={type}
 9 |       data-slot="input"
10 |       className={cn(
11 |         "border-input file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground flex h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
12 |         "focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[2px]",
13 |         "aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
14 |         className
15 |       )}
16 |       {...props}
17 |     />
18 |   )
19 | }
20 | 
21 | export { Input }
22 | 


--------------------------------------------------------------------------------
/app/layout.tsx:
--------------------------------------------------------------------------------
 1 | import type { Metadata } from "next";
 2 | import { Geist, Geist_Mono } from "next/font/google";
 3 | import "./globals.css";
 4 | import { Toaster } from "@/components/ui/sonner";
 5 | import { Analytics } from "@vercel/analytics/react"
 6 | 
 7 | const geistSans = Geist({
 8 |   variable: "--font-geist-sans",
 9 |   subsets: ["latin"],
10 | });
11 | 
12 | const geistMono = Geist_Mono({
13 |   variable: "--font-geist-mono",
14 |   subsets: ["latin"],
15 | });
16 | 
17 | export const metadata: Metadata = {
18 |   title: "AI SDK Computer Use Demo",
19 |   description: "A Next.js app that uses the AI SDK and Anthropic to create a computer using agent.",
20 | };
21 | 
22 | export default function RootLayout({
23 |   children,
24 | }: Readonly<{
25 |   children: React.ReactNode;
26 | }>) {
27 |   return (
28 |     <html lang="en">
29 |       <body
30 |         className={`${geistSans.variable} ${geistMono.variable} antialiased`}
31 |       >
32 |         {children}
33 |         <Toaster />
34 |         <Analytics />
35 |       </body>
36 |     </html>
37 |   );
38 | }
39 | 


--------------------------------------------------------------------------------
/next.config.ts:
--------------------------------------------------------------------------------
 1 | import type { NextConfig } from "next";
 2 | 
 3 | const nextConfig: NextConfig = {
 4 |   /* config options here */
 5 |   async headers() {
 6 |     return [
 7 |       {
 8 |         source: "/:path*",
 9 |         headers: [
10 |           {
11 |             key: "Content-Security-Policy",
12 |             value: [
13 |               "default-src 'self'",
14 |               "frame-src https://*.e2b.dev https://*.e2b.app https://va.vercel-scripts.com",
15 |               "frame-ancestors 'self' https://*.e2b.dev https://*.e2b.app",
16 |               "connect-src 'self' https://*.e2b.dev https://*.e2b.app",
17 |               "img-src 'self' data: https://*.e2b.dev https://*.e2b.app",
18 |               "script-src 'self' 'unsafe-inline' 'unsafe-eval' https://*.e2b.dev https://*.e2b.app https://va.vercel-scripts.com",
19 |               "style-src 'self' 'unsafe-inline'",
20 |             ].join("; "),
21 |           },
22 |           {
23 |             key: "X-Frame-Options",
24 |             value: "SAMEORIGIN",
25 |           },
26 |         ],
27 |       },
28 |     ];
29 |   },
30 | };
31 | 
32 | export default nextConfig;
33 | 


--------------------------------------------------------------------------------
/lib/utils.ts:
--------------------------------------------------------------------------------
 1 | import { UIMessage } from "ai";
 2 | import { clsx, type ClassValue } from "clsx";
 3 | import { twMerge } from "tailwind-merge";
 4 | 
 5 | export function cn(...inputs: ClassValue[]) {
 6 |   return twMerge(clsx(inputs));
 7 | }
 8 | 
 9 | export const ABORTED = "User aborted";
10 | 
11 | export const prunedMessages = (messages: UIMessage[]): UIMessage[] => {
12 |   if (messages.at(-1)?.role === "assistant") {
13 |     return messages;
14 |   }
15 | 
16 |   return messages.map((message) => {
17 |     // check if last message part is a tool invocation in a call state, then append a part with the tool result
18 |     message.parts = message.parts.map((part) => {
19 |       if (part.type === "tool-invocation") {
20 |         if (
21 |           part.toolInvocation.toolName === "computer" &&
22 |           part.toolInvocation.args.action === "screenshot"
23 |         ) {
24 |           return {
25 |             ...part,
26 |             toolInvocation: {
27 |               ...part.toolInvocation,
28 |               result: {
29 |                 type: "text",
30 |                 text: "Image redacted to save input tokens",
31 |               },
32 |             },
33 |           };
34 |         }
35 |         return part;
36 |       }
37 |       return part;
38 |     });
39 |     return message;
40 |   });
41 | };
42 | 


--------------------------------------------------------------------------------
/lib/e2b/utils.ts:
--------------------------------------------------------------------------------
 1 | "use server";
 2 | 
 3 | import { Sandbox } from "@e2b/desktop";
 4 | import { resolution } from "./tool";
 5 | 
 6 | export const getDesktop = async (id?: string) => {
 7 |   try {
 8 |     if (id) {
 9 |       const connected = await Sandbox.connect(id);
10 |       const isRunning = await connected.isRunning();
11 |       if (isRunning) {
12 |         // await connected.stream.start();
13 |         return connected;
14 |       }
15 |     }
16 | 
17 |     const desktop = await Sandbox.create({
18 |       resolution: [resolution.x, resolution.y], // Custom resolution
19 |       timeoutMs: 300000, // Container timeout in milliseconds
20 |     });
21 |     await desktop.stream.start();
22 |     return desktop;
23 |   } catch (error) {
24 |     console.error("Error in getDesktop:", error);
25 |     throw error;
26 |   }
27 | };
28 | 
29 | export const getDesktopURL = async (id?: string) => {
30 |   try {
31 |     const desktop = await getDesktop(id);
32 |     const streamUrl = desktop.stream.getUrl();
33 | 
34 |     return { streamUrl, id: desktop.sandboxId };
35 |   } catch (error) {
36 |     console.error("Error in getDesktopURL:", error);
37 |     throw error;
38 |   }
39 | };
40 | 
41 | export const killDesktop = async (id: string = "desktop") => {
42 |   const desktop = await getDesktop(id);
43 |   await desktop.kill();
44 | };
45 | 


--------------------------------------------------------------------------------
/public/next.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 394 80"><path fill="#000" d="M262 0h68.5v12.7h-27.2v66.6h-13.6V12.7H262V0ZM149 0v12.7H94v20.4h44.3v12.6H94v21h55v12.6H80.5V0h68.7zm34.3 0h-17.8l63.8 79.4h17.9l-32-39.7 32-39.6h-17.9l-23 28.6-23-28.6zm18.3 56.7-9-11-27.1 33.7h17.8l18.3-22.7z"/><path fill="#000" d="M81 79.3 17 0H0v79.3h13.6V17l50.2 62.3H81Zm252.6-.4c-1 0-1.8-.4-2.5-1s-1.1-1.6-1.1-2.6.3-1.8 1-2.5 1.6-1 2.6-1 1.8.3 2.5 1a3.4 3.4 0 0 1 .6 4.3 3.7 3.7 0 0 1-3 1.8zm23.2-33.5h6v23.3c0 2.1-.4 4-1.3 5.5a9.1 9.1 0 0 1-3.8 3.5c-1.6.8-3.5 1.3-5.7 1.3-2 0-3.7-.4-5.3-1s-2.8-1.8-3.7-3.2c-.9-1.3-1.4-3-1.4-5h6c.1.8.3 1.6.7 2.2s1 1.2 1.6 1.5c.7.4 1.5.5 2.4.5 1 0 1.8-.2 2.4-.6a4 4 0 0 0 1.6-1.8c.3-.8.5-1.8.5-3V45.5zm30.9 9.1a4.4 4.4 0 0 0-2-3.3 7.5 7.5 0 0 0-4.3-1.1c-1.3 0-2.4.2-3.3.5-.9.4-1.6 1-2 1.6a3.5 3.5 0 0 0-.3 4c.3.5.7.9 1.3 1.2l1.8 1 2 .5 3.2.8c1.3.3 2.5.7 3.7 1.2a13 13 0 0 1 3.2 1.8 8.1 8.1 0 0 1 3 6.5c0 2-.5 3.7-1.5 5.1a10 10 0 0 1-4.4 3.5c-1.8.8-4.1 1.2-6.8 1.2-2.6 0-4.9-.4-6.8-1.2-2-.8-3.4-2-4.5-3.5a10 10 0 0 1-1.7-5.6h6a5 5 0 0 0 3.5 4.6c1 .4 2.2.6 3.4.6 1.3 0 2.5-.2 3.5-.6 1-.4 1.8-1 2.4-1.7a4 4 0 0 0 .8-2.4c0-.9-.2-1.6-.7-2.2a11 11 0 0 0-2.1-1.4l-3.2-1-3.8-1c-2.8-.7-5-1.7-6.6-3.2a7.2 7.2 0 0 1-2.4-5.7 8 8 0 0 1 1.7-5 10 10 0 0 1 4.3-3.5c2-.8 4-1.2 6.4-1.2 2.3 0 4.4.4 6.2 1.2 1.8.8 3.2 2 4.3 3.4 1 1.4 1.5 3 1.5 5h-5.8z"/></svg>


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "ai-sdk-computer-use",
 3 |   "version": "0.1.0",
 4 |   "private": true,
 5 |   "scripts": {
 6 |     "dev": "next dev",
 7 |     "build": "next build",
 8 |     "start": "next start",
 9 |     "lint": "next lint"
10 |   },
11 |   "dependencies": {
12 |     "@ai-sdk/anthropic": "^1.1.15",
13 |     "@ai-sdk/react": "^1.1.21",
14 |     "@e2b/desktop": "^1.7.3",
15 |     "@radix-ui/react-label": "^2.1.2",
16 |     "@radix-ui/react-slot": "^1.1.2",
17 |     "@vercel/analytics": "^1.5.0",
18 |     "ai": "^4.1.54",
19 |     "class-variance-authority": "^0.7.1",
20 |     "clsx": "^2.1.1",
21 |     "fast-deep-equal": "^3.1.3",
22 |     "lucide-react": "^0.479.0",
23 |     "motion": "^12.4.10",
24 |     "next": "15.2.6",
25 |     "next-themes": "^0.4.5",
26 |     "react": "^19.0.1",
27 |     "react-dom": "^19.0.1",
28 |     "react-resizable-panels": "^2.1.7",
29 |     "sonner": "^2.0.1",
30 |     "streamdown": "^1.6.7",
31 |     "tailwind-merge": "^3.0.2",
32 |     "tailwindcss-animate": "^1.0.7",
33 |     "zod": "^3.24.2"
34 |   },
35 |   "devDependencies": {
36 |     "@eslint/eslintrc": "^3",
37 |     "@tailwindcss/postcss": "^4",
38 |     "@tailwindcss/typography": "^0.5.16",
39 |     "@types/node": "^20",
40 |     "@types/react": "^19",
41 |     "@types/react-dom": "^19",
42 |     "eslint": "^9",
43 |     "eslint-config-next": "15.2.6",
44 |     "tailwindcss": "^4",
45 |     "typescript": "^5"
46 |   }
47 | }
48 | 


--------------------------------------------------------------------------------
/components/prompt-suggestions.tsx:
--------------------------------------------------------------------------------
 1 | import { ArrowUpRight } from "lucide-react";
 2 | import { Button } from "./ui/button";
 3 | 
 4 | const suggestions = [
 5 |   {
 6 |     text: "Get the latest Vercel blog post",
 7 |     prompt: "Go to vercel.com/blog and get the latest post",
 8 |   },
 9 |   // {
10 |   //   text: "search google for cute dogs",
11 |   //   prompt: "Launch browser and search Google for labradoodle puppies. Show me images.",
12 |   // },
13 |   {
14 |     text: "Create a new text file",
15 |     prompt: "Open a text editor and create a new file called notes.txt and write 'we are so back!'",
16 |   },
17 |   // {
18 |   //   text: "Check system memory usage",
19 |   //   prompt: "Run the top command to show system resource usage",
20 |   // },
21 |   {
22 |     text: "Get the latest rauchg tweet",
23 |     prompt: "Go to twitter.com/rauchg and get the latest tweet",
24 |   },
25 |   // {
26 |   //   text: "What do you see",
27 |   //   prompt:
28 |   //     "Capture a screenshot of the current screen and tell me what you see",
29 |   // },
30 | ];
31 | 
32 | export const PromptSuggestions = ({
33 |   submitPrompt,
34 |   disabled,
35 | }: {
36 |   submitPrompt: (prompt: string) => void;
37 |   disabled: boolean;
38 | }) => {
39 |   return (
40 |     <div className="flex flex-wrap items-center gap-3 px-4">
41 |       {suggestions.map((suggestion, index) => (
42 |         <Button
43 |           key={index}
44 |           variant="pill"
45 |           size="pill"
46 |           onClick={() => submitPrompt(suggestion.prompt)}
47 |           disabled={disabled}
48 |         >
49 |           <span>
50 |             <span className="text-black text-sm">
51 |               {suggestion.text.toLowerCase()}
52 |             </span>
53 |           </span>
54 |           <ArrowUpRight className="ml-1 h-2 w-2 sm:h-3 sm:w-3 text-zinc-500 group-hover:opacity-70" />
55 |         </Button>
56 |       ))}
57 |     </div>
58 |   );
59 | };
60 | 


--------------------------------------------------------------------------------
/app/api/chat/route.ts:
--------------------------------------------------------------------------------
 1 | import { anthropic } from "@ai-sdk/anthropic";
 2 | import { streamText, UIMessage } from "ai";
 3 | import { killDesktop } from "@/lib/e2b/utils";
 4 | import { bashTool, computerTool } from "@/lib/e2b/tool";
 5 | import { prunedMessages } from "@/lib/utils";
 6 | 
 7 | // Allow streaming responses up to 30 seconds
 8 | export const maxDuration = 300;
 9 | 
10 | export async function POST(req: Request) {
11 |   const { messages, sandboxId }: { messages: UIMessage[]; sandboxId: string } =
12 |     await req.json();
13 |   try {
14 |     const result = streamText({
15 |       model: anthropic("claude-3-7-sonnet-20250219"), // Using Sonnet for computer use
16 |       system:
17 |         "You are a helpful assistant with access to a computer. " +
18 |         "Use the computer tool to help the user with their requests. " +
19 |         "Use the bash tool to execute commands on the computer. You can create files and folders using the bash tool. Always prefer the bash tool where it is viable for the task. " +
20 |         "Be sure to advise the user when waiting is necessary. " +
21 |         "If the browser opens with a setup wizard, YOU MUST IGNORE IT and move straight to the next step (e.g. input the url in the search bar).",
22 |       messages: prunedMessages(messages),
23 |       tools: { computer: computerTool(sandboxId), bash: bashTool(sandboxId) },
24 |       providerOptions: {
25 |         anthropic: { cacheControl: { type: "ephemeral" } },
26 |       },
27 |     });
28 | 
29 |     // Create response stream
30 |     const response = result.toDataStreamResponse({
31 |       // @ts-expect-error eheljfe
32 |       getErrorMessage(error) {
33 |         console.error(error);
34 |         return error;
35 |       },
36 |     });
37 | 
38 |     return response;
39 |   } catch (error) {
40 |     console.error("Chat API error:", error);
41 |     await killDesktop(sandboxId); // Force cleanup on error
42 |     return new Response(JSON.stringify({ error: "Internal Server Error" }), {
43 |       status: 500,
44 |       headers: { "Content-Type": "application/json" },
45 |     });
46 |   }
47 | }
48 | 


--------------------------------------------------------------------------------
/components/ui/resizable.tsx:
--------------------------------------------------------------------------------
 1 | "use client"
 2 | 
 3 | import * as React from "react"
 4 | import { GripVerticalIcon } from "lucide-react"
 5 | import * as ResizablePrimitive from "react-resizable-panels"
 6 | 
 7 | import { cn } from "@/lib/utils"
 8 | 
 9 | function ResizablePanelGroup({
10 |   className,
11 |   ...props
12 | }: React.ComponentProps<typeof ResizablePrimitive.PanelGroup>) {
13 |   return (
14 |     <ResizablePrimitive.PanelGroup
15 |       data-slot="resizable-panel-group"
16 |       className={cn(
17 |         "flex h-full w-full data-[panel-group-direction=vertical]:flex-col",
18 |         className
19 |       )}
20 |       {...props}
21 |     />
22 |   )
23 | }
24 | 
25 | function ResizablePanel({
26 |   ...props
27 | }: React.ComponentProps<typeof ResizablePrimitive.Panel>) {
28 |   return <ResizablePrimitive.Panel data-slot="resizable-panel" {...props} />
29 | }
30 | 
31 | function ResizableHandle({
32 |   withHandle,
33 |   className,
34 |   ...props
35 | }: React.ComponentProps<typeof ResizablePrimitive.PanelResizeHandle> & {
36 |   withHandle?: boolean
37 | }) {
38 |   return (
39 |     <ResizablePrimitive.PanelResizeHandle
40 |       data-slot="resizable-handle"
41 |       className={cn(
42 |         "bg-border focus-visible:ring-ring relative flex w-px items-center justify-center after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:ring-1 focus-visible:ring-offset-1 focus-visible:outline-hidden data-[panel-group-direction=vertical]:h-px data-[panel-group-direction=vertical]:w-full data-[panel-group-direction=vertical]:after:left-0 data-[panel-group-direction=vertical]:after:h-1 data-[panel-group-direction=vertical]:after:w-full data-[panel-group-direction=vertical]:after:-translate-y-1/2 data-[panel-group-direction=vertical]:after:translate-x-0 [&[data-panel-group-direction=vertical]>div]:rotate-90",
43 |         className
44 |       )}
45 |       {...props}
46 |     >
47 |       {withHandle && (
48 |         <div className="bg-border z-10 flex h-4 w-3 items-center justify-center rounded-xs border">
49 |           <GripVerticalIcon className="size-2.5" />
50 |         </div>
51 |       )}
52 |     </ResizablePrimitive.PanelResizeHandle>
53 |   )
54 | }
55 | 
56 | export { ResizablePanelGroup, ResizablePanel, ResizableHandle }
57 | 


--------------------------------------------------------------------------------
/components/input.tsx:
--------------------------------------------------------------------------------
 1 | import { ArrowUp } from "lucide-react";
 2 | import { Input as ShadcnInput } from "./ui/input";
 3 | 
 4 | interface InputProps {
 5 |   input: string;
 6 |   handleInputChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
 7 |   isInitializing: boolean;
 8 |   isLoading: boolean;
 9 |   status: string;
10 |   stop: () => void;
11 | }
12 | 
13 | export const Input = ({
14 |   input,
15 |   handleInputChange,
16 |   isInitializing,
17 |   isLoading,
18 |   status,
19 |   stop,
20 | }: InputProps) => {
21 |   return (
22 |     <div className="relative w-full">
23 |       <ShadcnInput
24 |         className="bg-secondary py-6 w-full rounded-xl pr-12"
25 |         value={input}
26 |         autoFocus
27 |         placeholder={"Tell me what to do..."}
28 |         onChange={handleInputChange}
29 |         disabled={isLoading || isInitializing}
30 |       />
31 |       {status === "streaming" || status === "submitted" ? (
32 |         <button
33 |           type="button"
34 |           onClick={stop}
35 |           className="cursor-pointer absolute right-2 top-1/2 -translate-y-1/2 rounded-full p-2 bg-black hover:bg-zinc-800 disabled:bg-zinc-300 disabled:cursor-not-allowed transition-colors"
36 |         >
37 |           <div className="animate-spin h-4 w-4">
38 |             <svg className="h-4 w-4 text-white" viewBox="0 0 24 24">
39 |               <circle
40 |                 className="opacity-25"
41 |                 cx="12"
42 |                 cy="12"
43 |                 r="10"
44 |                 stroke="currentColor"
45 |                 strokeWidth="4"
46 |                 fill="none"
47 |               />
48 |               <path
49 |                 className="opacity-75"
50 |                 fill="currentColor"
51 |                 d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
52 |               />
53 |             </svg>
54 |           </div>
55 |         </button>
56 |       ) : (
57 |         <button
58 |           type="submit"
59 |           disabled={isLoading || !input.trim() || isInitializing}
60 |           className="absolute right-2 top-1/2 -translate-y-1/2 rounded-full p-2 bg-black hover:bg-zinc-800 disabled:bg-zinc-300 disabled:cursor-not-allowed transition-colors"
61 |         >
62 |           <ArrowUp className="h-4 w-4 text-white" />
63 |         </button>
64 |       )}
65 |     </div>
66 |   );
67 | };
68 | 


--------------------------------------------------------------------------------
/components/ui/button.tsx:
--------------------------------------------------------------------------------
 1 | import * as React from "react"
 2 | import { Slot } from "@radix-ui/react-slot"
 3 | import { cva, type VariantProps } from "class-variance-authority"
 4 | 
 5 | import { cn } from "@/lib/utils"
 6 | 
 7 | const buttonVariants = cva(
 8 |   "cursor-pointer inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-[color,box-shadow] disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
 9 |   {
10 |     variants: {
11 |       variant: {
12 |         default:
13 |           "bg-primary text-primary-foreground shadow-xs hover:bg-primary/90",
14 |         destructive:
15 |           "bg-destructive text-white shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40",
16 |         outline:
17 |           "border border-input bg-background shadow-xs hover:bg-accent hover:text-accent-foreground",
18 |         secondary:
19 |           "bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80",
20 |         ghost: "hover:bg-accent hover:text-accent-foreground",
21 |         link: "text-primary underline-offset-4 hover:underline",
22 |         pill: "flex items-center justify-between px-2 rounded-lg py-1 bg-secondary text-sm hover:opacity-70 group transition-opacity duration-200 font-normal"
23 |       },
24 |       size: {
25 |         default: "h-9 px-4 py-2 has-[>svg]:px-3",
26 |         sm: "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",
27 |         lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
28 |         icon: "size-9",
29 |         pill: "h-8 text-sm"
30 |       },
31 |     },
32 |     defaultVariants: {
33 |       variant: "default",
34 |       size: "default",
35 |     },
36 |   }
37 | )
38 | 
39 | function Button({
40 |   className,
41 |   variant,
42 |   size,
43 |   asChild = false,
44 |   ...props
45 | }: React.ComponentProps<"button"> &
46 |   VariantProps<typeof buttonVariants> & {
47 |     asChild?: boolean
48 |   }) {
49 |   const Comp = asChild ? Slot : "button"
50 | 
51 |   return (
52 |     <Comp
53 |       data-slot="button"
54 |       className={cn(buttonVariants({ variant, size, className }))}
55 |       {...props}
56 |     />
57 |   )
58 | }
59 | 
60 | export { Button, buttonVariants }
61 | 


--------------------------------------------------------------------------------
/components/project-info.tsx:
--------------------------------------------------------------------------------
 1 | import { motion } from "motion/react";
 2 | import { VercelIcon } from "./icons";
 3 | import { ComputerIcon } from "lucide-react";
 4 | import Link from "next/link";
 5 | 
 6 | export const ProjectInfo = () => {
 7 |   return (
 8 |     <motion.div className="w-full px-4">
 9 |       <div className="rounded-lg border-border border p-6 flex flex-col gap-4 text-center text-base dark:text-zinc-400">
10 |         <p className="flex flex-row justify-center gap-4 items-center text-zinc-900 dark:text-zinc-50">
11 |           <VercelIcon size={16} />
12 |           <span>+</span>
13 |           <ComputerIcon />
14 |         </p>
15 |         <h3 className="text-center text-2xl font-bold">Computer Use Agent</h3>
16 |         <p>
17 |           This demo showcases a Computer Use Agent built with the{" "}
18 |           <StyledLink href="https://sdk.vercel.ai">AI SDK</StyledLink>,{" "}
19 |           <StyledLink href="https://www.anthropic.com/claude/sonnet">
20 |             Anthropic Claude Sonnet 3.7
21 |           </StyledLink>
22 |           , and <StyledLink href="https://e2b.dev">e2b desktop</StyledLink>.
23 |         </p>
24 |         <p>
25 |           {" "}
26 |           Learn more about{" "}
27 |           <Link
28 |             className="text-blue-500 dark:text-blue-400"
29 |             href="https://sdk.vercel.ai/docs/guides/computer-use"
30 |             target="_blank"
31 |           >
32 |             Computer Use{" "}
33 |           </Link>
34 |           with the AI SDK.
35 |         </p>
36 |       </div>
37 |     </motion.div>
38 |   );
39 | };
40 | 
41 | const StyledLink = ({
42 |   children,
43 |   href,
44 | }: {
45 |   children: React.ReactNode;
46 |   href: string;
47 | }) => {
48 |   return (
49 |     <Link
50 |       className="text-blue-500 dark:text-blue-400"
51 |       href={href}
52 |       target="_blank"
53 |     >
54 |       {children}
55 |     </Link>
56 |   );
57 | };
58 | 
59 | // const Code = ({ text }: { text: string }) => {
60 | //   return <code className="">{text}</code>;
61 | // };
62 | 
63 | export const DeployButton = () => {
64 |   return (
65 |     <Link
66 |       target="_blank"
67 |       href={`https://vercel.com/new/clone?project-name=AI+SDK+Computer+Use+Demo&repository-name=ai-sdk-computer-use&repository-url=https%3A%2F%2Fgithub.com%2Fvercel-labs%2Fai-sdk-computer-use&demo-title=AI+SDK+Computer+Use+Demo&demo-url=https%3A%2F%2Fai-sdk-computer-use.vercel.app%2F&demo-description=A+chatbot+application+built+with+Next.js+demonstrating+Anthropic+Claude+3.7+Sonnet%27s+computer+use+capabilities&env=ANTHROPIC_API_KEY,E2B_API_KEY`}
68 |       className="flex flex-row gap-2 items-center bg-zinc-900 px-3 py-2 rounded-md text-zinc-50 hover:bg-zinc-950 dark:bg-zinc-100 dark:text-zinc-900 dark:hover:bg-zinc-50"
69 |     >
70 |       <VercelIcon size={14} />
71 |       Deploy
72 |     </Link>
73 |   );
74 | };
75 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | <a href="https://ai-sdk-starter-groq.vercel.app">
 2 |   <h1 align="center">AI SDK Computer Use Demo</h1>
 3 | </a>
 4 | 
 5 | <p align="center">
 6 |   An open-source AI chatbot app template demonstrating Anthropic Claude 3.7 Sonnet's computer use capabilities, built with Next.js and the AI SDK by Vercel.
 7 | </p>
 8 | 
 9 | <p align="center">
10 |   <a href="#features"><strong>Features</strong></a> ·
11 |   <a href="#deploy-your-own"><strong>Deploy Your Own</strong></a> ·
12 |   <a href="#running-locally"><strong>Running Locally</strong></a> ·
13 |   <a href="#authors"><strong>Authors</strong></a>
14 | </p>
15 | <br/>
16 | 
17 | ## Features
18 | 
19 | - Streaming text responses powered by the [AI SDK by Vercel](https://sdk.vercel.ai/docs), allowing multiple AI providers to be used interchangeably with just a few lines of code.
20 | - Integration with Anthropic Claude 3.7 Sonnet's computer use tool and bash tool capabilities.
21 | - Sandbox environment with [e2b](https://e2b.dev) for secure execution.
22 | - [shadcn/ui](https://ui.shadcn.com/) components for a modern, responsive UI powered by [Tailwind CSS](https://tailwindcss.com).
23 | - Built with the latest [Next.js](https://nextjs.org) App Router.
24 | 
25 | ## Deploy Your Own
26 | 
27 | You can deploy your own version to Vercel by clicking the button below:
28 | 
29 | [![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?project-name=AI+SDK+Computer+Use+Demo&repository-name=ai-sdk-computer-use&repository-url=https%3A%2F%2Fgithub.com%2Fvercel-labs%2Fai-sdk-computer-use&demo-title=AI+SDK+Computer+Use+Demo&demo-url=https%3A%2F%2Fai-sdk-computer-use.vercel.app%2F&demo-description=A+chatbot+application+built+with+Next.js+demonstrating+Anthropic+Claude+3.7+Sonnet%27s+computer+use+capabilities&env=ANTHROPIC_API_KEY,E2B_API_KEY)
30 | 
31 | ## Running Locally
32 | 
33 | 1. Clone the repository and install dependencies:
34 | 
35 |    ```bash
36 |    npm install
37 |    # or
38 |    yarn install
39 |    # or
40 |    pnpm install
41 |    ```
42 | 
43 | 2. Install the [Vercel CLI](https://vercel.com/docs/cli):
44 | 
45 |    ```bash
46 |    npm i -g vercel
47 |    # or
48 |    yarn global add vercel
49 |    # or
50 |    pnpm install -g vercel
51 |    ```
52 | 
53 |    Once installed, link your local project to your Vercel project:
54 | 
55 |    ```bash
56 |    vercel link
57 |    ```
58 | 
59 |    After linking, pull your environment variables:
60 | 
61 |    ```bash
62 |    vercel env pull
63 |    ```
64 | 
65 |    This will create a `.env.local` file with all the necessary environment variables.
66 | 
67 | 3. Run the development server:
68 | 
69 |    ```bash
70 |    npm run dev
71 |    # or
72 |    yarn dev
73 |    # or
74 |    pnpm dev
75 |    ```
76 | 
77 | 4. Open [http://localhost:3000](http://localhost:3000) to view your new AI chatbot application.
78 | 
79 | ## Authors
80 | 
81 | This repository is maintained by the [Vercel](https://vercel.com) team and community contributors.
82 | 
83 | Contributions are welcome! Feel free to open issues or submit pull requests to enhance functionality or fix bugs.
84 | 


--------------------------------------------------------------------------------
/app/globals.css:
--------------------------------------------------------------------------------
  1 | @import "tailwindcss";
  2 | @source "../node_modules/streamdown/dist/*.js";
  3 | 
  4 | @plugin "tailwindcss-animate";
  5 | @plugin "@tailwindcss/typography";
  6 | 
  7 | @custom-variant dark (&:is(.dark *));
  8 | 
  9 | @theme inline {
 10 |   --color-background: var(--background);
 11 |   --color-foreground: var(--foreground);
 12 |   --font-sans: var(--font-geist-sans);
 13 |   --font-mono: var(--font-geist-mono);
 14 |   --color-sidebar-ring: var(--sidebar-ring);
 15 |   --color-sidebar-border: var(--sidebar-border);
 16 |   --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
 17 |   --color-sidebar-accent: var(--sidebar-accent);
 18 |   --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
 19 |   --color-sidebar-primary: var(--sidebar-primary);
 20 |   --color-sidebar-foreground: var(--sidebar-foreground);
 21 |   --color-sidebar: var(--sidebar);
 22 |   --color-chart-5: var(--chart-5);
 23 |   --color-chart-4: var(--chart-4);
 24 |   --color-chart-3: var(--chart-3);
 25 |   --color-chart-2: var(--chart-2);
 26 |   --color-chart-1: var(--chart-1);
 27 |   --color-ring: var(--ring);
 28 |   --color-input: var(--input);
 29 |   --color-border: var(--border);
 30 |   --color-destructive-foreground: var(--destructive-foreground);
 31 |   --color-destructive: var(--destructive);
 32 |   --color-accent-foreground: var(--accent-foreground);
 33 |   --color-accent: var(--accent);
 34 |   --color-muted-foreground: var(--muted-foreground);
 35 |   --color-muted: var(--muted);
 36 |   --color-secondary-foreground: var(--secondary-foreground);
 37 |   --color-secondary: var(--secondary);
 38 |   --color-primary-foreground: var(--primary-foreground);
 39 |   --color-primary: var(--primary);
 40 |   --color-popover-foreground: var(--popover-foreground);
 41 |   --color-popover: var(--popover);
 42 |   --color-card-foreground: var(--card-foreground);
 43 |   --color-card: var(--card);
 44 |   --radius-sm: calc(var(--radius) - 4px);
 45 |   --radius-md: calc(var(--radius) - 2px);
 46 |   --radius-lg: var(--radius);
 47 |   --radius-xl: calc(var(--radius) + 4px);
 48 | }
 49 | 
 50 | :root {
 51 |   --background: oklch(1 0 0);
 52 |   --foreground: oklch(0.141 0.005 285.823);
 53 |   --card: oklch(1 0 0);
 54 |   --card-foreground: oklch(0.141 0.005 285.823);
 55 |   --popover: oklch(1 0 0);
 56 |   --popover-foreground: oklch(0.141 0.005 285.823);
 57 |   --primary: oklch(0.21 0.006 285.885);
 58 |   --primary-foreground: oklch(0.985 0 0);
 59 |   --secondary: oklch(0.967 0.001 286.375);
 60 |   --secondary-foreground: oklch(0.21 0.006 285.885);
 61 |   --muted: oklch(0.967 0.001 286.375);
 62 |   --muted-foreground: oklch(0.552 0.016 285.938);
 63 |   --accent: oklch(0.967 0.001 286.375);
 64 |   --accent-foreground: oklch(0.21 0.006 285.885);
 65 |   --destructive: oklch(0.577 0.245 27.325);
 66 |   --destructive-foreground: oklch(0.577 0.245 27.325);
 67 |   --border: oklch(0.92 0.004 286.32);
 68 |   --input: oklch(0.92 0.004 286.32);
 69 |   --ring: oklch(0.705 0.015 286.067);
 70 |   --chart-1: oklch(0.646 0.222 41.116);
 71 |   --chart-2: oklch(0.6 0.118 184.704);
 72 |   --chart-3: oklch(0.398 0.07 227.392);
 73 |   --chart-4: oklch(0.828 0.189 84.429);
 74 |   --chart-5: oklch(0.769 0.188 70.08);
 75 |   --radius: 0.625rem;
 76 |   --sidebar: oklch(0.985 0 0);
 77 |   --sidebar-foreground: oklch(0.141 0.005 285.823);
 78 |   --sidebar-primary: oklch(0.21 0.006 285.885);
 79 |   --sidebar-primary-foreground: oklch(0.985 0 0);
 80 |   --sidebar-accent: oklch(0.967 0.001 286.375);
 81 |   --sidebar-accent-foreground: oklch(0.21 0.006 285.885);
 82 |   --sidebar-border: oklch(0.92 0.004 286.32);
 83 |   --sidebar-ring: oklch(0.705 0.015 286.067);
 84 | }
 85 | 
 86 | .dark {
 87 |   --background: oklch(0.141 0.005 285.823);
 88 |   --foreground: oklch(0.985 0 0);
 89 |   --card: oklch(0.141 0.005 285.823);
 90 |   --card-foreground: oklch(0.985 0 0);
 91 |   --popover: oklch(0.141 0.005 285.823);
 92 |   --popover-foreground: oklch(0.985 0 0);
 93 |   --primary: oklch(0.985 0 0);
 94 |   --primary-foreground: oklch(0.21 0.006 285.885);
 95 |   --secondary: oklch(0.274 0.006 286.033);
 96 |   --secondary-foreground: oklch(0.985 0 0);
 97 |   --muted: oklch(0.274 0.006 286.033);
 98 |   --muted-foreground: oklch(0.705 0.015 286.067);
 99 |   --accent: oklch(0.274 0.006 286.033);
100 |   --accent-foreground: oklch(0.985 0 0);
101 |   --destructive: oklch(0.396 0.141 25.723);
102 |   --destructive-foreground: oklch(0.637 0.237 25.331);
103 |   --border: oklch(0.274 0.006 286.033);
104 |   --input: oklch(0.274 0.006 286.033);
105 |   --ring: oklch(0.442 0.017 285.786);
106 |   --chart-1: oklch(0.488 0.243 264.376);
107 |   --chart-2: oklch(0.696 0.17 162.48);
108 |   --chart-3: oklch(0.769 0.188 70.08);
109 |   --chart-4: oklch(0.627 0.265 303.9);
110 |   --chart-5: oklch(0.645 0.246 16.439);
111 |   --sidebar: oklch(0.21 0.006 285.885);
112 |   --sidebar-foreground: oklch(0.985 0 0);
113 |   --sidebar-primary: oklch(0.488 0.243 264.376);
114 |   --sidebar-primary-foreground: oklch(0.985 0 0);
115 |   --sidebar-accent: oklch(0.274 0.006 286.033);
116 |   --sidebar-accent-foreground: oklch(0.985 0 0);
117 |   --sidebar-border: oklch(0.274 0.006 286.033);
118 |   --sidebar-ring: oklch(0.442 0.017 285.786);
119 | }
120 | 
121 | @layer base {
122 |   * {
123 |     @apply border-border outline-ring/50;
124 |   }
125 |   body {
126 |     @apply bg-background text-foreground;
127 |   }
128 | }
129 | 
130 | /* Hide scrollbar for Chrome, Safari and Opera */
131 | /* ::-webkit-scrollbar {
132 |   display: none;
133 | } */
134 | 
135 | /* Hide scrollbar for IE, Edge and Firefox */
136 | /* * {
137 |   -ms-overflow-style: none;
138 |   scrollbar-width: none;
139 | } */
140 | 


--------------------------------------------------------------------------------
/lib/e2b/tool.ts:
--------------------------------------------------------------------------------
  1 | import { anthropic } from "@ai-sdk/anthropic";
  2 | import { getDesktop } from "./utils";
  3 | 
  4 | const wait = async (seconds: number) => {
  5 |   await new Promise((resolve) => setTimeout(resolve, seconds * 1000));
  6 | };
  7 | 
  8 | export const resolution = { x: 1024, y: 768 };
  9 | 
 10 | export const computerTool = (sandboxId: string) =>
 11 |   anthropic.tools.computer_20250124({
 12 |     displayWidthPx: resolution.x,
 13 |     displayHeightPx: resolution.y,
 14 |     displayNumber: 1,
 15 |     execute: async ({
 16 |       action,
 17 |       coordinate,
 18 |       text,
 19 |       duration,
 20 |       scroll_amount,
 21 |       scroll_direction,
 22 |       start_coordinate,
 23 |     }) => {
 24 |       const desktop = await getDesktop(sandboxId);
 25 | 
 26 |       switch (action) {
 27 |         case "screenshot": {
 28 |           const image = await desktop.screenshot();
 29 |           // Convert image data to base64 immediately
 30 |           const base64Data = Buffer.from(image).toString("base64");
 31 |           return {
 32 |             type: "image" as const,
 33 |             data: base64Data,
 34 |           };
 35 |         }
 36 |         case "wait": {
 37 |           if (!duration) throw new Error("Duration required for wait action");
 38 |           const actualDuration = Math.min(duration, 2);
 39 |           await wait(actualDuration);
 40 |           return {
 41 |             type: "text" as const,
 42 |             text: `Waited for ${actualDuration} seconds`,
 43 |           };
 44 |         }
 45 |         case "left_click": {
 46 |           if (!coordinate)
 47 |             throw new Error("Coordinate required for left click action");
 48 |           const [x, y] = coordinate;
 49 |           await desktop.moveMouse(x, y);
 50 |           await desktop.leftClick();
 51 |           return { type: "text" as const, text: `Left clicked at ${x}, ${y}` };
 52 |         }
 53 |         case "double_click": {
 54 |           if (!coordinate)
 55 |             throw new Error("Coordinate required for double click action");
 56 |           const [x, y] = coordinate;
 57 |           await desktop.moveMouse(x, y);
 58 |           await desktop.doubleClick();
 59 |           return {
 60 |             type: "text" as const,
 61 |             text: `Double clicked at ${x}, ${y}`,
 62 |           };
 63 |         }
 64 |         case "right_click": {
 65 |           if (!coordinate)
 66 |             throw new Error("Coordinate required for right click action");
 67 |           const [x, y] = coordinate;
 68 |           await desktop.moveMouse(x, y);
 69 |           await desktop.rightClick();
 70 |           return { type: "text" as const, text: `Right clicked at ${x}, ${y}` };
 71 |         }
 72 |         case "mouse_move": {
 73 |           if (!coordinate)
 74 |             throw new Error("Coordinate required for mouse move action");
 75 |           const [x, y] = coordinate;
 76 |           await desktop.moveMouse(x, y);
 77 |           return { type: "text" as const, text: `Moved mouse to ${x}, ${y}` };
 78 |         }
 79 |         case "type": {
 80 |           if (!text) throw new Error("Text required for type action");
 81 |           await desktop.write(text);
 82 |           return { type: "text" as const, text: `Typed: ${text}` };
 83 |         }
 84 |         case "key": {
 85 |           if (!text) throw new Error("Key required for key action");
 86 |           await desktop.press(text === "Return" ? "enter" : text);
 87 |           return { type: "text" as const, text: `Pressed key: ${text}` };
 88 |         }
 89 |         case "scroll": {
 90 |           if (!scroll_direction)
 91 |             throw new Error("Scroll direction required for scroll action");
 92 |           if (!scroll_amount)
 93 |             throw new Error("Scroll amount required for scroll action");
 94 | 
 95 |           await desktop.scroll(
 96 |             scroll_direction as "up" | "down",
 97 |             scroll_amount,
 98 |           );
 99 |           return { type: "text" as const, text: `Scrolled ${text}` };
100 |         }
101 |         case "left_click_drag": {
102 |           if (!start_coordinate || !coordinate)
103 |             throw new Error("Coordinate required for mouse move action");
104 |           const [startX, startY] = start_coordinate;
105 |           const [endX, endY] = coordinate;
106 | 
107 |           await desktop.drag([startX, startY], [endX, endY]);
108 |           return {
109 |             type: "text" as const,
110 |             text: `Dragged mouse from ${startX}, ${startY} to ${endX}, ${endY}`,
111 |           };
112 |         }
113 |         default:
114 |           throw new Error(`Unsupported action: ${action}`);
115 |       }
116 |     },
117 |     experimental_toToolResultContent(result) {
118 |       if (typeof result === "string") {
119 |         return [{ type: "text", text: result }];
120 |       }
121 |       if (result.type === "image" && result.data) {
122 |         return [
123 |           {
124 |             type: "image",
125 |             data: result.data,
126 |             mimeType: "image/png",
127 |           },
128 |         ];
129 |       }
130 |       if (result.type === "text" && result.text) {
131 |         return [{ type: "text", text: result.text }];
132 |       }
133 |       throw new Error("Invalid result format");
134 |     },
135 |   });
136 | 
137 | export const bashTool = (sandboxId?: string) =>
138 |   anthropic.tools.bash_20250124({
139 |     execute: async ({ command }) => {
140 |       const desktop = await getDesktop(sandboxId);
141 | 
142 |       try {
143 |         const result = await desktop.commands.run(command);
144 |         return (
145 |           result.stdout || "(Command executed successfully with no output)"
146 |         );
147 |       } catch (error) {
148 |         console.error("Bash command failed:", error);
149 |         if (error instanceof Error) {
150 |           return `Error executing command: ${error.message}`;
151 |         } else {
152 |           return `Error executing command: ${String(error)}`;
153 |         }
154 |       }
155 |     },
156 |   });
157 | 


--------------------------------------------------------------------------------
/components/icons.tsx:
--------------------------------------------------------------------------------
  1 | import Link from "next/link";
  2 | 
  3 | export const BotIcon = () => {
  4 |   return (
  5 |     <svg
  6 |       height="16"
  7 |       strokeLinejoin="round"
  8 |       viewBox="0 0 16 16"
  9 |       width="16"
 10 |       style={{ color: "currentcolor" }}
 11 |     >
 12 |       <path
 13 |         fillRule="evenodd"
 14 |         clipRule="evenodd"
 15 |         d="M8.75 2.79933C9.19835 2.53997 9.5 2.05521 9.5 1.5C9.5 0.671573 8.82843 0 8 0C7.17157 0 6.5 0.671573 6.5 1.5C6.5 2.05521 6.80165 2.53997 7.25 2.79933V5H7C4.027 5 1.55904 7.16229 1.08296 10H0V13H1V14.5V16H2.5H13.5H15V14.5V13H16V10H14.917C14.441 7.16229 11.973 5 9 5H8.75V2.79933ZM7 6.5C4.51472 6.5 2.5 8.51472 2.5 11V14.5H13.5V11C13.5 8.51472 11.4853 6.5 9 6.5H7ZM7.25 11.25C7.25 12.2165 6.4665 13 5.5 13C4.5335 13 3.75 12.2165 3.75 11.25C3.75 10.2835 4.5335 9.5 5.5 9.5C6.4665 9.5 7.25 10.2835 7.25 11.25ZM10.5 13C11.4665 13 12.25 12.2165 12.25 11.25C12.25 10.2835 11.4665 9.5 10.5 9.5C9.5335 9.5 8.75 10.2835 8.75 11.25C8.75 12.2165 9.5335 13 10.5 13Z"
 16 |         fill="currentColor"
 17 |       ></path>
 18 |     </svg>
 19 |   );
 20 | };
 21 | 
 22 | export const AISDKLogo = () => {
 23 |   return (
 24 |     <div className="flex justify-between items-center">
 25 |       <div className="flex flex-row items-center gap-2 shrink-0 ">
 26 |         <span className="flex flex-row items-center gap-2 home-links">
 27 |           <div className="flex flex-row items-center gap-4">
 28 |             <Link className="flex flex-row items-center gap-2" href="/">
 29 |               <div className="flex flex-row items-center gap-2">
 30 |                 <div className="text-zinc-800 dark:text-zinc-100">
 31 |                   <svg
 32 |                     data-testid="geist-icon"
 33 |                     height={20}
 34 |                     strokeLinejoin="round"
 35 |                     viewBox="0 0 16 16"
 36 |                     width={20}
 37 |                     style={{ color: "currentcolor" }}
 38 |                   >
 39 |                     <path
 40 |                       d="M2.5 0.5V0H3.5V0.5C3.5 1.60457 4.39543 2.5 5.5 2.5H6V3V3.5H5.5C4.39543 3.5 3.5 4.39543 3.5 5.5V6H3H2.5V5.5C2.5 4.39543 1.60457 3.5 0.5 3.5H0V3V2.5H0.5C1.60457 2.5 2.5 1.60457 2.5 0.5Z"
 41 |                       fill="currentColor"
 42 |                     />
 43 |                     <path
 44 |                       d="M14.5 4.5V5H13.5V4.5C13.5 3.94772 13.0523 3.5 12.5 3.5H12V3V2.5H12.5C13.0523 2.5 13.5 2.05228 13.5 1.5V1H14H14.5V1.5C14.5 2.05228 14.9477 2.5 15.5 2.5H16V3V3.5H15.5C14.9477 3.5 14.5 3.94772 14.5 4.5Z"
 45 |                       fill="currentColor"
 46 |                     />
 47 |                     <path
 48 |                       d="M8.40706 4.92939L8.5 4H9.5L9.59294 4.92939C9.82973 7.29734 11.7027 9.17027 14.0706 9.40706L15 9.5V10.5L14.0706 10.5929C11.7027 10.8297 9.82973 12.7027 9.59294 15.0706L9.5 16H8.5L8.40706 15.0706C8.17027 12.7027 6.29734 10.8297 3.92939 10.5929L3 10.5V9.5L3.92939 9.40706C6.29734 9.17027 8.17027 7.29734 8.40706 4.92939Z"
 49 |                       fill="currentColor"
 50 |                     />
 51 |                   </svg>
 52 |                 </div>
 53 |                 <div className="text-2xl font-bold text-zinc-800 dark:text-zinc-100">
 54 |                   AI{" "}
 55 |                   <span className="hidden min-[385px]:inline">
 56 |                     SDK
 57 |                   </span>
 58 |                 </div>
 59 |               </div>
 60 |             </Link>
 61 |           </div>
 62 |         </span>
 63 |       </div>
 64 |     </div>
 65 |   );
 66 | };
 67 | 
 68 | export const UserIcon = () => {
 69 |   return (
 70 |     <svg
 71 |       data-testid="geist-icon"
 72 |       height="16"
 73 |       strokeLinejoin="round"
 74 |       viewBox="0 0 16 16"
 75 |       width="16"
 76 |       style={{ color: "currentcolor" }}
 77 |     >
 78 |       <path
 79 |         fillRule="evenodd"
 80 |         clipRule="evenodd"
 81 |         d="M7.75 0C5.95507 0 4.5 1.45507 4.5 3.25V3.75C4.5 5.54493 5.95507 7 7.75 7H8.25C10.0449 7 11.5 5.54493 11.5 3.75V3.25C11.5 1.45507 10.0449 0 8.25 0H7.75ZM6 3.25C6 2.2835 6.7835 1.5 7.75 1.5H8.25C9.2165 1.5 10 2.2835 10 3.25V3.75C10 4.7165 9.2165 5.5 8.25 5.5H7.75C6.7835 5.5 6 4.7165 6 3.75V3.25ZM2.5 14.5V13.1709C3.31958 11.5377 4.99308 10.5 6.82945 10.5H9.17055C11.0069 10.5 12.6804 11.5377 13.5 13.1709V14.5H2.5ZM6.82945 9C4.35483 9 2.10604 10.4388 1.06903 12.6857L1 12.8353V13V15.25V16H1.75H14.25H15V15.25V13V12.8353L14.931 12.6857C13.894 10.4388 11.6452 9 9.17055 9H6.82945Z"
 82 |         fill="currentColor"
 83 |       ></path>
 84 |     </svg>
 85 |   );
 86 | };
 87 | 
 88 | export const VercelIcon = ({ size = 16 }: { size: number }) => {
 89 |   return (
 90 |     <svg
 91 |       height={size}
 92 |       strokeLinejoin="round"
 93 |       viewBox="0 0 16 16"
 94 |       width={size}
 95 |       style={{ color: "currentcolor" }}
 96 |     >
 97 |       <path
 98 |         fillRule="evenodd"
 99 |         clipRule="evenodd"
100 |         d="M8 1L16 15H0L8 1Z"
101 |         fill="currentColor"
102 |       ></path>
103 |     </svg>
104 |   );
105 | };
106 | 
107 | export const ObjectIcon = () => {
108 |   return (
109 |     <svg
110 |       height="16"
111 |       strokeLinejoin="round"
112 |       viewBox="0 0 16 16"
113 |       width="16"
114 |       style={{ color: "currentcolor" }}
115 |     >
116 |       <path
117 |         fillRule="evenodd"
118 |         clipRule="evenodd"
119 |         d="M2.5 3.5C2.5 2.94771 2.94772 2.5 3.5 2.5H4.25V1H3.5C2.11929 1 1 2.11929 1 3.5V6.29449C1 6.65016 0.881575 6.86927 0.738252 7.00305C0.587949 7.14333 0.344525 7.24999 0 7.24999V8.74999C0.344525 8.74999 0.587948 8.85665 0.738251 8.99694C0.881575 9.13071 1 9.34982 1 9.70549V12.5C1 13.8807 2.11929 15 3.5 15H4.25V13.5H3.5C2.94772 13.5 2.5 13.0523 2.5 12.5V9.70549C2.5 9.03542 2.27894 8.44137 1.86198 7.99999C2.27894 7.55861 2.5 6.96457 2.5 6.29449V3.5ZM12.5 1H11.75V2.5H12.5C13.0523 2.5 13.5 2.94772 13.5 3.5V6.29449C13.5 6.96453 13.7212 7.5586 14.1382 7.99999C13.7212 8.44139 13.5 9.03545 13.5 9.70549V12.5C13.5 13.0523 13.0523 13.5 12.5 13.5H11.75V15H12.5C13.8807 15 15 13.8807 15 12.5V9.70549C15 9.35012 15.1184 9.13095 15.2618 8.99706C15.4122 8.85668 15.6556 8.74999 16 8.74999V7.24999C15.6556 7.24999 15.4122 7.1433 15.2618 7.00292C15.1184 6.86903 15 6.64986 15 6.29449V3.5C15 2.11928 13.8807 1 12.5 1ZM8.75 10.25V9.5H7.25V10.25V12.5986C7.25 13.0383 7.11985 13.4681 6.87596 13.834L6.45994 14.458L7.70801 15.2901L8.12404 14.666C8.5322 14.0538 8.75 13.3344 8.75 12.5986V10.25ZM8 7C8.69036 7 9.25 6.44036 9.25 5.75C9.25 5.05964 8.69036 4.5 8 4.5C7.30964 4.5 6.75 5.05964 6.75 5.75C6.75 6.44036 7.30964 7 8 7Z"
120 |         fill="currentColor"
121 |       ></path>
122 |     </svg>
123 |   );
124 | };
125 | 
126 | export const GitIcon = () => {
127 |   return (
128 |     <svg
129 |       height="16"
130 |       strokeLinejoin="round"
131 |       viewBox="0 0 16 16"
132 |       width="16"
133 |       style={{ color: "currentcolor" }}
134 |     >
135 |       <g clipPath="url(#clip0_872_3147)">
136 |         <path
137 |           fillRule="evenodd"
138 |           clipRule="evenodd"
139 |           d="M8 0C3.58 0 0 3.57879 0 7.99729C0 11.5361 2.29 14.5251 5.47 15.5847C5.87 15.6547 6.02 15.4148 6.02 15.2049C6.02 15.0149 6.01 14.3851 6.01 13.7154C4 14.0852 3.48 13.2255 3.32 12.7757C3.23 12.5458 2.84 11.836 2.5 11.6461C2.22 11.4961 1.82 11.1262 2.49 11.1162C3.12 11.1062 3.57 11.696 3.72 11.936C4.44 13.1455 5.59 12.8057 6.05 12.5957C6.12 12.0759 6.33 11.726 6.56 11.5261C4.78 11.3262 2.92 10.6364 2.92 7.57743C2.92 6.70773 3.23 5.98797 3.74 5.42816C3.66 5.22823 3.38 4.40851 3.82 3.30888C3.82 3.30888 4.49 3.09895 6.02 4.1286C6.66 3.94866 7.34 3.85869 8.02 3.85869C8.7 3.85869 9.38 3.94866 10.02 4.1286C11.55 3.08895 12.22 3.30888 12.22 3.30888C12.66 4.40851 12.38 5.22823 12.3 5.42816C12.81 5.98797 13.12 6.69773 13.12 7.57743C13.12 10.6464 11.25 11.3262 9.47 11.5261C9.76 11.776 10.01 12.2558 10.01 13.0056C10.01 14.0752 10 14.9349 10 15.2049C10 15.4148 10.15 15.6647 10.55 15.5847C12.1381 15.0488 13.5182 14.0284 14.4958 12.6673C15.4735 11.3062 15.9996 9.67293 16 7.99729C16 3.57879 12.42 0 8 0Z"
140 |           fill="currentColor"
141 |         ></path>
142 |       </g>
143 |       <defs>
144 |         <clipPath id="clip0_872_3147">
145 |           <rect width="16" height="16" fill="white"></rect>
146 |         </clipPath>
147 |       </defs>
148 |     </svg>
149 |   );
150 | };
151 | 


--------------------------------------------------------------------------------
/app/page.tsx:
--------------------------------------------------------------------------------
  1 | "use client";
  2 | 
  3 | import { PreviewMessage } from "@/components/message";
  4 | import { getDesktopURL } from "@/lib/e2b/utils";
  5 | import { useScrollToBottom } from "@/lib/use-scroll-to-bottom";
  6 | import { useChat } from "@ai-sdk/react";
  7 | import { useEffect, useState } from "react";
  8 | import { Input } from "@/components/input";
  9 | import { Button } from "@/components/ui/button";
 10 | import { toast } from "sonner";
 11 | import { DeployButton, ProjectInfo } from "@/components/project-info";
 12 | import { AISDKLogo } from "@/components/icons";
 13 | import { PromptSuggestions } from "@/components/prompt-suggestions";
 14 | import {
 15 |   ResizableHandle,
 16 |   ResizablePanel,
 17 |   ResizablePanelGroup,
 18 | } from "@/components/ui/resizable";
 19 | import { ABORTED } from "@/lib/utils";
 20 | 
 21 | export default function Chat() {
 22 |   // Create separate refs for mobile and desktop to ensure both scroll properly
 23 |   const [desktopContainerRef, desktopEndRef] = useScrollToBottom();
 24 |   const [mobileContainerRef, mobileEndRef] = useScrollToBottom();
 25 | 
 26 |   const [isInitializing, setIsInitializing] = useState(true);
 27 |   const [streamUrl, setStreamUrl] = useState<string | null>(null);
 28 |   const [sandboxId, setSandboxId] = useState<string | null>(null);
 29 | 
 30 |   const {
 31 |     messages,
 32 |     input,
 33 |     handleInputChange,
 34 |     handleSubmit,
 35 |     status,
 36 |     stop: stopGeneration,
 37 |     append,
 38 |     setMessages,
 39 |   } = useChat({
 40 |     api: "/api/chat",
 41 |     id: sandboxId ?? undefined,
 42 |     body: {
 43 |       sandboxId,
 44 |     },
 45 |     maxSteps: 30,
 46 |     onError: (error) => {
 47 |       console.error(error);
 48 |       toast.error("There was an error", {
 49 |         description: "Please try again later.",
 50 |         richColors: true,
 51 |         position: "top-center",
 52 |       });
 53 |     },
 54 |   });
 55 | 
 56 |   const stop = () => {
 57 |     stopGeneration();
 58 | 
 59 |     const lastMessage = messages.at(-1);
 60 |     const lastMessageLastPart = lastMessage?.parts.at(-1);
 61 |     if (
 62 |       lastMessage?.role === "assistant" &&
 63 |       lastMessageLastPart?.type === "tool-invocation"
 64 |     ) {
 65 |       setMessages((prev) => [
 66 |         ...prev.slice(0, -1),
 67 |         {
 68 |           ...lastMessage,
 69 |           parts: [
 70 |             ...lastMessage.parts.slice(0, -1),
 71 |             {
 72 |               ...lastMessageLastPart,
 73 |               toolInvocation: {
 74 |                 ...lastMessageLastPart.toolInvocation,
 75 |                 state: "result",
 76 |                 result: ABORTED,
 77 |               },
 78 |             },
 79 |           ],
 80 |         },
 81 |       ]);
 82 |     }
 83 |   };
 84 | 
 85 |   const isLoading = status !== "ready";
 86 | 
 87 |   const refreshDesktop = async () => {
 88 |     try {
 89 |       setIsInitializing(true);
 90 |       const { streamUrl, id } = await getDesktopURL(sandboxId || undefined);
 91 |       // console.log("Refreshed desktop connection with ID:", id);
 92 |       setStreamUrl(streamUrl);
 93 |       setSandboxId(id);
 94 |     } catch (err) {
 95 |       console.error("Failed to refresh desktop:", err);
 96 |     } finally {
 97 |       setIsInitializing(false);
 98 |     }
 99 |   };
100 | 
101 |   // Kill desktop on page close
102 |   useEffect(() => {
103 |     if (!sandboxId) return;
104 | 
105 |     // Function to kill the desktop - just one method to reduce duplicates
106 |     const killDesktop = () => {
107 |       if (!sandboxId) return;
108 | 
109 |       // Use sendBeacon which is best supported across browsers
110 |       navigator.sendBeacon(
111 |         `/api/kill-desktop?sandboxId=${encodeURIComponent(sandboxId)}`,
112 |       );
113 |     };
114 | 
115 |     // Detect iOS / Safari
116 |     const isIOS =
117 |       /iPad|iPhone|iPod/.test(navigator.userAgent) ||
118 |       (navigator.platform === "MacIntel" && navigator.maxTouchPoints > 1);
119 |     const isSafari = /^((?!chrome|android).)*safari/i.test(navigator.userAgent);
120 | 
121 |     // Choose exactly ONE event handler based on the browser
122 |     if (isIOS || isSafari) {
123 |       // For Safari on iOS, use pagehide which is most reliable
124 |       window.addEventListener("pagehide", killDesktop);
125 | 
126 |       return () => {
127 |         window.removeEventListener("pagehide", killDesktop);
128 |         // Also kill desktop when component unmounts
129 |         killDesktop();
130 |       };
131 |     } else {
132 |       // For all other browsers, use beforeunload
133 |       window.addEventListener("beforeunload", killDesktop);
134 | 
135 |       return () => {
136 |         window.removeEventListener("beforeunload", killDesktop);
137 |         // Also kill desktop when component unmounts
138 |         killDesktop();
139 |       };
140 |     }
141 |   }, [sandboxId]);
142 | 
143 |   useEffect(() => {
144 |     // Initialize desktop and get stream URL when the component mounts
145 |     const init = async () => {
146 |       try {
147 |         setIsInitializing(true);
148 | 
149 |         // Use the provided ID or create a new one
150 |         const { streamUrl, id } = await getDesktopURL(sandboxId ?? undefined);
151 | 
152 |         setStreamUrl(streamUrl);
153 |         setSandboxId(id);
154 |       } catch (err) {
155 |         console.error("Failed to initialize desktop:", err);
156 |         toast.error("Failed to initialize desktop");
157 |       } finally {
158 |         setIsInitializing(false);
159 |       }
160 |     };
161 | 
162 |     init();
163 |     // eslint-disable-next-line react-hooks/exhaustive-deps
164 |   }, []);
165 | 
166 |   return (
167 |     <div className="flex h-dvh relative">
168 |       {/* Mobile/tablet banner */}
169 |       <div className="flex items-center justify-center fixed left-1/2 -translate-x-1/2 top-5 shadow-md text-xs mx-auto rounded-lg h-8 w-fit bg-blue-600 text-white px-3 py-2 text-left z-50 xl:hidden">
170 |         <span>Headless mode</span>
171 |       </div>
172 | 
173 |       {/* Resizable Panels */}
174 |       <div className="w-full hidden xl:block">
175 |         <ResizablePanelGroup direction="horizontal" className="h-full">
176 |           {/* Desktop Stream Panel */}
177 |           <ResizablePanel
178 |             defaultSize={70}
179 |             minSize={40}
180 |             className="bg-black relative items-center justify-center"
181 |           >
182 |             {streamUrl ? (
183 |               <>
184 |                 <iframe
185 |                   src={streamUrl}
186 |                   className="w-full h-full"
187 |                   style={{
188 |                     transformOrigin: "center",
189 |                     width: "100%",
190 |                     height: "100%",
191 |                   }}
192 |                   allow="autoplay"
193 |                 />
194 |                 <Button
195 |                   onClick={refreshDesktop}
196 |                   className="absolute top-2 right-2 bg-black/50 hover:bg-black/70 text-white px-3 py-1 rounded text-sm z-10"
197 |                   disabled={isInitializing}
198 |                 >
199 |                   {isInitializing ? "Creating desktop..." : "New desktop"}
200 |                 </Button>
201 |               </>
202 |             ) : (
203 |               <div className="flex items-center justify-center h-full text-white">
204 |                 {isInitializing
205 |                   ? "Initializing desktop..."
206 |                   : "Loading stream..."}
207 |               </div>
208 |             )}
209 |           </ResizablePanel>
210 | 
211 |           <ResizableHandle withHandle />
212 | 
213 |           {/* Chat Interface Panel */}
214 |           <ResizablePanel
215 |             defaultSize={30}
216 |             minSize={25}
217 |             className="flex flex-col border-l border-zinc-200"
218 |           >
219 |             <div className="bg-white py-4 px-4 flex justify-between items-center">
220 |               <AISDKLogo />
221 |               <DeployButton />
222 |             </div>
223 | 
224 |             <div
225 |               className="flex-1 space-y-6 py-4 overflow-y-auto px-4"
226 |               ref={desktopContainerRef}
227 |             >
228 |               {messages.length === 0 ? <ProjectInfo /> : null}
229 |               {messages.map((message, i) => (
230 |                 <PreviewMessage
231 |                   message={message}
232 |                   key={message.id}
233 |                   isLoading={isLoading}
234 |                   status={status}
235 |                   isLatestMessage={i === messages.length - 1}
236 |                 />
237 |               ))}
238 |               <div ref={desktopEndRef} className="pb-2" />
239 |             </div>
240 | 
241 |             {messages.length === 0 && (
242 |               <PromptSuggestions
243 |                 disabled={isInitializing}
244 |                 submitPrompt={(prompt: string) =>
245 |                   append({ role: "user", content: prompt })
246 |                 }
247 |               />
248 |             )}
249 |             <div className="bg-white">
250 |               <form onSubmit={handleSubmit} className="p-4">
251 |                 <Input
252 |                   handleInputChange={handleInputChange}
253 |                   input={input}
254 |                   isInitializing={isInitializing}
255 |                   isLoading={isLoading}
256 |                   status={status}
257 |                   stop={stop}
258 |                 />
259 |               </form>
260 |             </div>
261 |           </ResizablePanel>
262 |         </ResizablePanelGroup>
263 |       </div>
264 | 
265 |       {/* Mobile View (Chat Only) */}
266 |       <div className="w-full xl:hidden flex flex-col">
267 |         <div className="bg-white py-4 px-4 flex justify-between items-center">
268 |           <AISDKLogo />
269 |           <DeployButton />
270 |         </div>
271 | 
272 |         <div
273 |           className="flex-1 space-y-6 py-4 overflow-y-auto px-4"
274 |           ref={mobileContainerRef}
275 |         >
276 |           {messages.length === 0 ? <ProjectInfo /> : null}
277 |           {messages.map((message, i) => (
278 |             <PreviewMessage
279 |               message={message}
280 |               key={message.id}
281 |               isLoading={isLoading}
282 |               status={status}
283 |               isLatestMessage={i === messages.length - 1}
284 |             />
285 |           ))}
286 |           <div ref={mobileEndRef} className="pb-2" />
287 |         </div>
288 | 
289 |         {messages.length === 0 && (
290 |           <PromptSuggestions
291 |             disabled={isInitializing}
292 |             submitPrompt={(prompt: string) =>
293 |               append({ role: "user", content: prompt })
294 |             }
295 |           />
296 |         )}
297 |         <div className="bg-white">
298 |           <form onSubmit={handleSubmit} className="p-4">
299 |             <Input
300 |               handleInputChange={handleInputChange}
301 |               input={input}
302 |               isInitializing={isInitializing}
303 |               isLoading={isLoading}
304 |               status={status}
305 |               stop={stop}
306 |             />
307 |           </form>
308 |         </div>
309 |       </div>
310 |     </div>
311 |   );
312 | }
313 | 


--------------------------------------------------------------------------------
/components/message.tsx:
--------------------------------------------------------------------------------
  1 | "use client";
  2 | 
  3 | import type { Message } from "ai";
  4 | import { AnimatePresence, motion } from "motion/react";
  5 | import { memo } from "react";
  6 | import equal from "fast-deep-equal";
  7 | import { Streamdown } from "streamdown";
  8 | 
  9 | import { ABORTED, cn } from "@/lib/utils";
 10 | import {
 11 |   Camera,
 12 |   CheckCircle,
 13 |   CircleSlash,
 14 |   Clock,
 15 |   Keyboard,
 16 |   KeyRound,
 17 |   Loader2,
 18 |   MousePointer,
 19 |   MousePointerClick,
 20 |   ScrollText,
 21 |   StopCircle,
 22 | } from "lucide-react";
 23 | 
 24 | const PurePreviewMessage = ({
 25 |   message,
 26 |   isLatestMessage,
 27 |   status,
 28 | }: {
 29 |   message: Message;
 30 |   isLoading: boolean;
 31 |   status: "error" | "submitted" | "streaming" | "ready";
 32 |   isLatestMessage: boolean;
 33 | }) => {
 34 |   return (
 35 |     <AnimatePresence key={message.id}>
 36 |       <motion.div
 37 |         className="w-full mx-auto px-4 group/message"
 38 |         initial={{ y: 5, opacity: 0 }}
 39 |         animate={{ y: 0, opacity: 1 }}
 40 |         key={`message-${message.id}`}
 41 |         data-role={message.role}
 42 |       >
 43 |         <div
 44 |           className={cn(
 45 |             "flex gap-4 w-full group-data-[role=user]/message:ml-auto group-data-[role=user]/message:max-w-2xl",
 46 |             "group-data-[role=user]/message:w-fit",
 47 |           )}
 48 |         >
 49 |           {/* {message.role === "assistant" && (
 50 |             <div className="size-8 flex items-center rounded-full justify-center ring-1 shrink-0 ring-border bg-background">
 51 |               <div className="translate-y-px">
 52 |                 <SparklesIcon size={14} />
 53 |               </div>
 54 |             </div>
 55 |           )} */}
 56 | 
 57 |           <div className="flex flex-col w-full">
 58 |             {message.parts?.map((part, i) => {
 59 |               switch (part.type) {
 60 |                 case "text":
 61 |                   return (
 62 |                     <motion.div
 63 |                       initial={{ y: 5, opacity: 0 }}
 64 |                       animate={{ y: 0, opacity: 1 }}
 65 |                       key={`message-${message.id}-part-${i}`}
 66 |                       className="flex flex-row gap-2 items-start w-full pb-4"
 67 |                     >
 68 |                       <div
 69 |                         className={cn("flex flex-col gap-4", {
 70 |                           "bg-secondary text-secondary-foreground px-3 py-2 rounded-xl":
 71 |                             message.role === "user",
 72 |                         })}
 73 |                       >
 74 |                         <Streamdown>{part.text}</Streamdown>
 75 |                       </div>
 76 |                     </motion.div>
 77 |                   );
 78 |                 case "tool-invocation":
 79 |                   const { toolName, toolCallId, state, args } =
 80 |                     part.toolInvocation;
 81 | 
 82 |                   if (toolName === "computer") {
 83 |                     const {
 84 |                       action,
 85 |                       coordinate,
 86 |                       text,
 87 |                       duration,
 88 |                       scroll_amount,
 89 |                       scroll_direction,
 90 |                     } = args;
 91 |                     let actionLabel = "";
 92 |                     let actionDetail = "";
 93 |                     let ActionIcon = null;
 94 | 
 95 |                     switch (action) {
 96 |                       case "screenshot":
 97 |                         actionLabel = "Taking screenshot";
 98 |                         ActionIcon = Camera;
 99 |                         break;
100 |                       case "left_click":
101 |                         actionLabel = "Left clicking";
102 |                         actionDetail = coordinate
103 |                           ? `at (${coordinate[0]}, ${coordinate[1]})`
104 |                           : "";
105 |                         ActionIcon = MousePointer;
106 |                         break;
107 |                       case "right_click":
108 |                         actionLabel = "Right clicking";
109 |                         actionDetail = coordinate
110 |                           ? `at (${coordinate[0]}, ${coordinate[1]})`
111 |                           : "";
112 |                         ActionIcon = MousePointerClick;
113 |                         break;
114 |                       case "double_click":
115 |                         actionLabel = "Double clicking";
116 |                         actionDetail = coordinate
117 |                           ? `at (${coordinate[0]}, ${coordinate[1]})`
118 |                           : "";
119 |                         ActionIcon = MousePointerClick;
120 |                         break;
121 |                       case "mouse_move":
122 |                         actionLabel = "Moving mouse";
123 |                         actionDetail = coordinate
124 |                           ? `to (${coordinate[0]}, ${coordinate[1]})`
125 |                           : "";
126 |                         ActionIcon = MousePointer;
127 |                         break;
128 |                       case "type":
129 |                         actionLabel = "Typing";
130 |                         actionDetail = text ? `"${text}"` : "";
131 |                         ActionIcon = Keyboard;
132 |                         break;
133 |                       case "key":
134 |                         actionLabel = "Pressing key";
135 |                         actionDetail = text ? `"${text}"` : "";
136 |                         ActionIcon = KeyRound;
137 |                         break;
138 |                       case "wait":
139 |                         actionLabel = "Waiting";
140 |                         actionDetail = duration ? `${duration} seconds` : "";
141 |                         ActionIcon = Clock;
142 |                         break;
143 |                       case "scroll":
144 |                         actionLabel = "Scrolling";
145 |                         actionDetail =
146 |                           scroll_direction && scroll_amount
147 |                             ? `${scroll_direction} by ${scroll_amount}`
148 |                             : "";
149 |                         ActionIcon = ScrollText;
150 |                         break;
151 |                       default:
152 |                         actionLabel = action;
153 |                         ActionIcon = MousePointer;
154 |                         break;
155 |                     }
156 | 
157 |                     return (
158 |                       <motion.div
159 |                         initial={{ y: 5, opacity: 0 }}
160 |                         animate={{ y: 0, opacity: 1 }}
161 |                         key={`message-${message.id}-part-${i}`}
162 |                         className="flex flex-col gap-2 p-2 mb-3 text-sm bg-zinc-50 dark:bg-zinc-900 rounded-md border border-zinc-200 dark:border-zinc-800"
163 |                       >
164 |                         <div className="flex-1 flex items-center justify-center">
165 |                           <div className="flex items-center justify-center w-8 h-8 bg-zinc-50 dark:bg-zinc-800 rounded-full">
166 |                             {ActionIcon && <ActionIcon className="w-4 h-4" />}
167 |                           </div>
168 |                           <div className="flex-1">
169 |                             <div className="font-medium font-mono flex items-baseline gap-2">
170 |                               {actionLabel}
171 |                               {actionDetail && (
172 |                                 <span className="text-xs text-zinc-500 dark:text-zinc-400 font-normal">
173 |                                   {actionDetail}
174 |                                 </span>
175 |                               )}
176 |                             </div>
177 |                           </div>
178 |                           <div className="w-5 h-5 flex items-center justify-center">
179 |                             {state === "call" ? (
180 |                               isLatestMessage && status !== "ready" ? (
181 |                                 <Loader2 className="animate-spin h-4 w-4 text-zinc-500" />
182 |                               ) : (
183 |                                 <StopCircle className="h-4 w-4 text-red-500" />
184 |                               )
185 |                             ) : state === "result" ? (
186 |                               part.toolInvocation.result === ABORTED ? (
187 |                                 <CircleSlash
188 |                                 size={14}
189 |                                 className="text-amber-600"
190 |                                 />                              ) : (
191 |                                 <CheckCircle
192 |                                   size={14}
193 |                                   className="text-green-600"
194 |                                 />
195 |                               )
196 |                             ) : null}
197 |                           </div>
198 |                         </div>
199 |                         {state === "result" ? (
200 |                           part.toolInvocation.result.type === "image" && (
201 |                             <div className="p-2">
202 |                               {/* eslint-disable-next-line @next/next/no-img-element */}
203 |                               <img
204 |                                 src={`data:image/png;base64,${part.toolInvocation.result.data}`}
205 |                                 alt="Generated Image"
206 |                                 className="w-full aspect-[1024/768] rounded-sm"
207 |                               />
208 |                             </div>
209 |                           )
210 |                         ) : action === "screenshot" ? (
211 |                           <div className="w-full aspect-[1024/768] rounded-sm bg-zinc-200 dark:bg-zinc-800 animate-pulse"></div>
212 |                         ) : null}
213 |                       </motion.div>
214 |                     );
215 |                   }
216 |                   if (toolName === "bash") {
217 |                     const { command } = args;
218 | 
219 |                     return (
220 |                       <motion.div
221 |                         initial={{ y: 5, opacity: 0 }}
222 |                         animate={{ y: 0, opacity: 1 }}
223 |                         key={`message-${message.id}-part-${i}`}
224 |                         className="flex items-center gap-2 p-2 mb-3 text-sm bg-zinc-50 dark:bg-zinc-900 rounded-md border border-zinc-200 dark:border-zinc-800"
225 |                       >
226 |                         <div className="flex items-center justify-center w-8 h-8 bg-zinc-50 dark:bg-zinc-800 rounded-full">
227 |                           <ScrollText className="w-4 h-4" />
228 |                         </div>
229 |                         <div className="flex-1">
230 |                           <div className="font-medium flex items-baseline gap-2">
231 |                             Running command
232 |                             <span className="text-xs text-zinc-500 dark:text-zinc-400 font-normal">
233 |                               {command.slice(0, 40)}...
234 |                             </span>
235 |                           </div>
236 |                         </div>
237 |                         <div className="w-5 h-5 flex items-center justify-center">
238 |                           {state === "call" ? (
239 |                             isLatestMessage && status !== "ready" ? (
240 |                               <Loader2 className="animate-spin h-4 w-4 text-zinc-500" />
241 |                             ) : (
242 |                               <StopCircle className="h-4 w-4 text-red-500" />
243 |                             )
244 |                           ) : state === "result" ? (
245 |                             <CheckCircle size={14} className="text-green-600" />
246 |                           ) : null}
247 |                         </div>
248 |                       </motion.div>
249 |                     );
250 |                   }
251 |                   return (
252 |                     <div key={toolCallId}>
253 |                       <h3>
254 |                         {toolName}: {state}
255 |                       </h3>
256 |                       <pre>{JSON.stringify(args, null, 2)}</pre>
257 |                     </div>
258 |                   );
259 | 
260 |                 default:
261 |                   return null;
262 |               }
263 |             })}
264 |           </div>
265 |         </div>
266 |       </motion.div>
267 |     </AnimatePresence>
268 |   );
269 | };
270 | 
271 | export const PreviewMessage = memo(
272 |   PurePreviewMessage,
273 |   (prevProps, nextProps) => {
274 |     if (prevProps.status !== nextProps.status) return false;
275 |     if (prevProps.message.annotations !== nextProps.message.annotations)
276 |       return false;
277 |     // if (prevProps.message.content !== nextProps.message.content) return false;
278 |     if (!equal(prevProps.message.parts, nextProps.message.parts)) return false;
279 | 
280 |     return true;
281 |   },
282 | );
283 | 


--------------------------------------------------------------------------------