🏄 Surf - OpenAI Computer Use Agent + E2B Desktop

这是一个 Next.js 应用程序，允许 AI 与虚拟桌面环境进行交互。本项目集成了 E2B 的桌面沙盒 (desktop sandbox) 与 OpenAI API，构建了一个可以通过自然语言指令在虚拟计算机上执行任务的 AI Agent。

E2B 是一个开源的云端隔离虚拟计算机，专为 AI 用例打造。

概述

Computer Use App 提供了一个 Web 界面，用户可以：

1. 启动虚拟桌面沙盒环境
2. 向 AI Agent 发送自然语言指令
3. 观察 AI Agent 在虚拟桌面上执行操作
4. 通过聊天界面与 AI 互动

该应用使用 Server-Sent Events (SSE) 来实时流式传输 AI 的响应和操作，从而提供流畅的体验。

工作原理

架构

该应用程序由几个关键组件组成：

1. 前端 UI (Next.js)：提供带有虚拟桌面视图和聊天界面的用户界面
2. E2B Desktop Sandbox：创建并管理虚拟桌面环境
3. OpenAI Computer Use：处理用户指令并为 AI Agent 生成操作
4. 流式 API (Streaming API)：处理前端与后端之间的实时通信

核心流程

1. 用户启动一个新的沙盒实例
2. E2B 创建一个虚拟桌面并提供用于流式传输的 URL
3. 用户通过聊天界面发送指令
4. 后端使用 OpenAI API 处理这些指令
5. AI 生成操作（点击、输入等）并在虚拟桌面上执行
6. 操作在沙盒中执行并实时流式传输回前端
7. 随着用户不断提供指令，此过程会循环进行

先决条件

在开始之前，你需要准备：

1. Node.js（版本要求见 package.json）
2. npm（随 Node.js 安装）
3. E2B API key
4. OpenAI API key

设置说明

1. 克隆仓库

git clone https://github.com/e2b-dev/surf
cd surf

2. 安装依赖

npm install

3. 设置环境变量

在根目录下根据提供的 .env.example 创建一个 .env.local 文件：

E2B_API_KEY=your_e2b_api_key
OPENAI_API_KEY=your_openai_api_key

4. 启动开发服务器

npm run dev

5. 打开应用程序

在浏览器中访问 http://localhost:3000。

使用方法

1. 启动沙盒实例

   • 点击“Start new Sandbox”按钮以初始化虚拟桌面环境
   • 等待沙盒启动（可能需要几秒钟）

2. 发送指令

   • 在聊天输入框中输入你的指令（例如：“打开 Firefox 并访问 google.com”）
   • 按回车键或点击发送按钮
   • 你也可以选择现有的示例提示词

3. 观看 AI 操作

   • AI 将处理你的指令并在虚拟桌面上执行操作
   • 你可以在聊天界面中看到 AI 的推理过程和操作步骤
   • 虚拟桌面会随着操作的执行实时更新

4. 管理沙盒

   • 计时器会显示沙盒实例的剩余时间
   • 你可以随时通过点击“Stop”按钮停止沙盒
   • 当沙盒即将过期时，它会自动延长使用时间

功能特性

• 虚拟桌面环境：在沙盒中运行基于 Linux 的桌面系统
• AI 驱动交互：使用 OpenAI API 理解并执行用户指令
• 实时流式传输：实时展示 AI 的操作和响应
• 聊天界面：提供与 AI 互动的对话式界面
• 示例提示词：提供预定义的指令以帮助用户快速上手
• 深色/浅色模式：支持深色和浅色主题

技术详情

依赖项

该应用程序使用了以下几个关键依赖：

• Next.js：前端 React 框架
• @e2b/desktop：用于创建和管理桌面沙盒环境的 SDK
• OpenAI：用于与 OpenAI API 进行交互的 SDK
• Tailwind CSS：用于样式的实用优先 CSS 框架
• Framer Motion：动画库

完整依赖列表请参阅 package.json。

API 端点

• /api/chat：处理聊天消息并流式传输 AI 的响应和操作

Server Actions

• createSandbox：创建一个新的沙盒实例
• increaseTimeout：延长沙盒超时时间
• stopSandboxAction：停止正在运行的沙盒实例

故障排除

• 沙盒无法启动：请检查你的 E2B API Key 是否有效且余额充足。