项目简介
一个 Next.js 应用程序，允许 AI 与虚拟桌面环境交互。该项目将 E2B 的桌面沙盒与 OpenAI 的 API 集成，创建一个可以通过自然语言指令在虚拟计算机上执行任务的 AI 代理。
E2B 是一个开源的云隔离虚拟计算机，专为 AI 用例设计。
计算机使用应用提供了一个网页界面，用户可以：
-
启动虚拟桌面沙盒环境 -
向 AI 代理发送自然语言指令 -
观看 AI 代理在虚拟桌面上执行操作 -
通过聊天界面与 AI 互动
应用程序使用服务器发送事件（SSE）实时流式传输 AI 响应和动作，提供无缝体验。
工作原理
架构
该应用程序由几个关键组件组成：
-
前端 UI（Next.js）：提供具有虚拟桌面视图和聊天界面的用户界面 -
E2B 桌面沙盒：创建和管理虚拟桌面环境 -
OpenAI 计算机使用：处理用户指令并为 AI 代理生成动作 -
流式 API：处理前端和后端之间的实时通信
核心流程
用户启动一个新的沙盒实例
-
E2B 创建虚拟桌面并提供流式 URL -
用户通过聊天界面发送指令 -
后端使用 OpenAI 的 API 处理指令 -
人工智能生成在虚拟桌面上执行的操作（点击、输入等） -
操作在沙盒中执行，并将结果流式传输回前端 -
用户继续提供指令时，过程会重复
前置条件
开始之前，您需要：
-
Node.js（版本在 package.json 中指定） -
npm（与 Node.js 一同提供） -
E2B API 密钥 -
OpenAI API 密钥
设置说明
- 克隆仓库
git clone https://github.com/e2b-dev/surfcd surf
- 安装依赖
npm install- 设置环境变量
根据提供的 .env.example 在根目录下创建一个 .env.local 文件：
E2B_API_KEY=your_e2b_api_keyOPENAI_API_KEY=your_openai_api_key
- 启动开发服务器
npm run dev- 打开应用程序
在浏览器中导航到 http://localhost:3000
使用说明
启动沙盒实例
-
点击“启动新沙盒”按钮以初始化虚拟桌面环境 -
等待沙盒启动（这可能需要几秒钟） -
-
发送指令 -
输入您的指令到聊天输入框中（例如：“打开 Firefox 并前往 google.com”） -
按下回车键或点击发送按钮 -
如果有可用，您还可以选择示例提示 -
观看 AI 操作 -
AI 将处理您的指令并在虚拟桌面上执行操作 -
您可以在聊天界面中看到 AI 的推理和行动 -
虚拟桌面将在执行操作时实时更新 -
-
管理沙盒
-
计时器显示您的沙盒实例剩余时间 -
您可以随时通过点击“停止”按钮来停止沙盒 -
沙盒即将到期时，将自动延长其时间
功能
-
虚拟桌面环境：在沙盒中运行基于 Linux 的桌面 -
人工智能交互：使用 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 响应和动作
服务器操作
-
创建沙盒实例：创建一个新的沙盒实例 -
增加超时时间：扩展沙箱超时时间 -
停止沙箱操作：停止正在运行的沙箱实例
故障排除
-
沙箱无法启动：请检查您的 E2B API 密钥是否在.env.local中正确 -
AI 无响应：请检查您的 OpenAI API 密钥是否有效且具有访问所需模型的权限 -
操作不工作：确保沙盒正在运行，并且 AI 有适当的指令
项目链接
https://github.com/e2b-dev/surf
扫码加入技术交流群，备注「开发语言-城市-昵称」
（文：GitHubStore）