Codex and jules and Devin举例

作者：

moophier

在

好的！我们将基于 Lee Robinson 在 X 帖子中提到的三款 AI 编码工具——Codex (OpenAI)、Jules (Google) 和 Devin，详细介绍它们的特色功能和各自的短板。我会通过具体的例子来说明这些工具的特点和局限性，并结合帖子内容和相关网页信息进行分析。

1. Codex (OpenAI)

特色功能

Codex 是 OpenAI 推出的一款 AI 编码代理，专注于帮助开发者完成代码相关的任务。它的特色功能包括：

  • 直观的用户界面（UI）和 Git Diff 查看器：
    • Lee Robinson 提到 Codex 拥有“最好看的 UI”，特别是它的 Git diff 查看器非常直观，能够清晰展示代码更改。例如，在 Lee 的测试中，Codex 完成了一个 Next.js 页面从 Pages Router 到 App Router 的迁移，并通过 Git diff 显示了更改内容（例如将 pages/index.js 转换为 app/page.js）。
    • 示例：假设你在迁移一个文件 pages/about.js，Codex 会展示类似以下的 diff：diff- // pages/about.js + // app/about/page.js + 'use client'; // Codex 自动添加客户端指令 export default function About() { return <div>About Page</div>; }
    • 这种直观的展示方式让开发者可以快速审查代码更改。
  • 移动应用支持和实时活动（Live Activities）：
    • Codex 提供移动应用支持，可以通过手机查看任务进度，并支持实时活动通知。例如，当 Codex 完成迁移任务并生成 PR 时，用户可以在 iPhone 的锁屏界面上看到通知：“Codex 已完成任务，PR 已生成：https://t.co/j7unJ5cVZl”。
    • 示例：你在地铁上时，手机通知你 Codex 完成了代码迁移任务，你可以直接点击通知查看 PR 详情。
  • 多模态输入支持：
    • 虽然 Lee 未详细提及，但根据 TechCrunch 的描述，Codex 支持多模态输入，例如通过截图或图表描述任务。开发者可以上传一个代码截图，Codex 会根据图片内容生成代码。
    • 示例：你上传了一个老旧的 pages/index.js 文件截图，Codex 识别出这是一个 Pages Router 文件，并自动生成对应的 App Router 文件 app/page.js。

短板

尽管 Codex 有以上优势，但它的局限性也很明显：

  • 无网络访问权限：
    • Codex 在一个隔离的环境中运行（air-gapped environment），没有网络访问权限。这意味着它无法执行需要联网的操作，例如更新依赖（npm install 或 yarn）。
    • 示例：在 Lee 的任务中，Codex 无法运行 npm install 来更新 Next.js 依赖（例如从 next@12 升级到 next@14），因此无法完成 next build 验证。这迫使 Lee 手动更新依赖，增加了额外的工作量。
    • 影响：无法验证构建是否成功，限制了 Codex 在需要依赖管理的任务中的实用性。
  • 缺乏 GitHub 双向同步：
    • Codex 无法通过 GitHub PR 的评论触发新任务，也不会自动更新现有 PR。例如，Lee 第一次让 Codex 迁移一个页面后，生成了一条 PR（https://t.co/j7unJ5cVZl）。当他要求 Codex 迁移更多页面时，Codex 创建了一个全新的 PR（https://t.co/PpWXVEwZOk），而不是更新之前的 PR。
    • 示例：你希望 Codex 在现有 PR 上继续修复一个 bug（例如修复一个 404 页面），但你需要在 Codex 的聊天界面中手动重新提交任务，而不是直接在 GitHub PR 上评论。
  • 功能仍处于早期阶段：
    • Lee 提到 Codex “感觉还很早期”，功能不够完善。例如，迁移多个页面时耗时较长（9 分钟），且操作不够智能（未整合到同一 PR）。
    • 示例：如果你有一个包含 10 个页面的 Next.js 项目，Codex 可能需要多次手动操作才能完成所有页面迁移，效率较低。

2. Jules (Google)

特色功能

Jules 是 Google 推出的一款自主 AI 编码代理，专注于异步任务处理和代码上下文理解。它的特色功能包括：

  • 清晰的执行计划和步骤折叠 UX：
    • Jules 在执行任务前会展示一个详细的计划，用户可以折叠步骤查看细节。Lee 提到这种设计让用户更容易理解 Jules 的操作逻辑。
    • 示例：在 Lee 的测试任务中，Jules 生成了一个迁移计划：1. 分析项目结构：检测 Pages Router 文件（pages/ 目录）。 2. 创建 App Router 结构：生成 app/ 目录和 layout.js。 3. 迁移页面：将 pages/index.js 转换为 app/page.js。 4. 更新依赖：运行 npm install next@latest。 5. 验证构建：运行 next build。用户可以点击折叠每个步骤，查看详细的执行日志，例如依赖更新的具体命令。
  • 支持网络访问，可以安装依赖：
    • 与 Codex 不同，Jules 可以在安全的 Google Cloud 虚拟机中访问网络，执行依赖更新等操作。
    • 示例：Jules 在迁移过程中运行了以下命令：npm install next@14 react@18 react-dom@18这确保了 Next.js 和 React 依赖更新到最新版本，满足了 Lee 的任务要求。
  • 音频变更日志（Audio Changelog）：
    • Jules 提供音频变更日志功能，可以将项目历史和变更以音频形式呈现，方便用户快速了解上下文。
    • 示例：任务完成后，Jules 生成了一段音频：“Jules 已完成 Next.js 迁移任务，生成了 app/page.js 和 layout.js，更新了 3 个依赖，PR 链接：https://t.co/KKdtC0W7Rv。” 你可以在开车时通过耳机听取这段日志。

短板

Jules 虽然功能有趣，但也有明显的不足：

  • 执行时间过长：
    • Lee 提到 Jules 完成任务耗时 7 小时，可能是因为排队机制或生成速度慢。这使得它不适合需要快速完成的任务。
    • 示例：你提交了一个简单的迁移任务（例如迁移一个页面），但由于排队，任务在提交后 7 小时才完成。相比之下，手动迁移可能只需 30 分钟。
  • 代码质量较低：
    • Jules 生成的代码质量不如 Codex 和 Devin。例如，Lee 发现 Jules 错误地将 App Router 的根布局（layout.js）标记为客户端组件（添加了 ‘use client’ 指令），而根据 Next.js 规范，根布局应为服务器组件。
    • 示例：Jules 生成了以下代码：javascript// app/layout.js 'use client'; // 错误：根布局应为服务器组件 export default function RootLayout({ children }) { return <html><body>{children}</body></html>; }这会导致性能问题，因为服务器组件无法在客户端渲染。
  • 缺乏 GitHub 双向同步：
    • 与 Codex 类似，Jules 也不支持 GitHub 双向同步。用户无法通过 PR 评论直接触发新任务。
    • 示例：你在 Jules 生成的 PR 上评论：“请修复 layout.js 中的客户端组件问题。” 但 Jules 不会自动响应，你需要回到 Jules 的界面重新提交任务。

3. Devin

特色功能

Devin 是一款更成熟的 AI 编码助手，被 Lee 评价为表现最好的工具。它的特色功能包括：

  • 高质量代码和完整功能性：
    • Devin 在 Lee 的测试中生成了可编译和运行的代码，成功完成了 Next.js 迁移任务，包括依赖更新和 next build 验证。
    • 示例：Devin 生成了以下 App Router 文件：javascript// app/page.js export default function Home() { return <div>Home Page</div>; } // app/layout.js export default function RootLayout({ children }) { return ( <html> <body>{children}</body> </html> ); }这些代码符合 Next.js App Router 规范，编译通过且功能正常。
  • 双向 GitHub 同步：
    • Devin 支持通过 GitHub PR 评论触发新任务。例如，Lee 在 PR 上发现了一个 404 页面问题，直接评论：“修复 /about 页面的 404 问题。” Devin 响应了 👀 表情，并自动启动修复任务。
    • 示例：你在 PR 上评论：@Devin Fix the 404 issue on the /contact page.Devin 会在几分钟内生成修复代码并更新 PR，添加类似以下内容：javascript// app/contact/page.js export default function Contact() { return <div>Contact Page</div>; }
  • 集成 Slack 和 Vercel，支持预览部署：
    • Devin 可以通过 Slack 线程启动任务，并与 Vercel 集成生成预览部署 URL。Lee 提到他通过 Vercel 预览 URL 访问了迁移后的站点，验证了大部分功能。
    • 示例：Devin 完成迁移后，生成一个 Vercel 预览 URL：https://my-site-preview.vercel.app。你可以在浏览器中访问这个 URL，检查页面是否正常加载。

短板

尽管 Devin 表现出色，但也有一些局限性：

  • 面向工程师的复杂 UI：
    • Devin 的界面更适合技术背景强的用户，输出信息冗长，可能对非技术用户不友好。Lee 提到它更像一个“工程师专用工具”，提供完整的 IDE 和浏览器功能。
    • 示例：Devin 的日志输出可能包含大量技术细节，例如：[INFO] Cloning repository: https://github.com/user/repo [DEBUG] Installing dependencies: next@14, react@18 [INFO] Running next build: Success [VERBOSE] Container state: Active对于不熟悉终端的用户，这种输出可能显得过于复杂。
  • 需要管理容器休眠和唤醒：
    • Devin 运行在容器中，用户需要考虑容器的休眠和唤醒状态，以避免资源浪费或额外成本。
    • 示例：你提交了一个任务后忘记关闭容器，Devin 的容器保持运行状态，可能会增加使用费用（Lee 提到 Devin “不便宜”）。
  • 价格较高：
    • Devin 的使用成本较高，Lee 提到“它不便宜”。根据相关信息，Devin 的定价可能高达 $500/月（具体取决于使用情况）。
    • 示例：你在使用 Devin 一个月后收到账单，发现因为频繁的任务提交和容器运行，费用达到了 $600，超出了预算。

总结比较

以下是三款工具的特色和短板的总结表格，便于对比：

工具特色功能短板适合场景
Codex直观 UI，移动应用支持，多模态输入无网络访问，无双向同步，功能早期轻量级任务，实验性使用
Jules清晰执行计划，网络访问，音频日志耗时长，代码质量低，无双向同步不急迫的任务，愿意等待
Devin高质量代码，双向同步，集成 VercelUI 复杂，需管理容器，价格高复杂任务，工程师团队使用

补充：Next.js 迁移背景

三款工具的任务是迁移 Next.js 从 Pages Router 到 App Router，这是一个需要理解 React Server Components 和 Next.js 文件约定的复杂过程：

  • Pages Router：基于 pages/ 目录，文件即路由（例如 pages/about.js 对应 /about）。
  • App Router：基于 app/ 目录，支持服务器组件（Server Components），需要文件如 layout.js 和 page.js。

迁移中的常见问题（例如 Jules 的客户端组件错误）需要开发者手动验证，确保符合 Next.js 规范。

如果你需要更深入的分析（例如某个工具的具体操作步骤）或更多示例，请告诉我！

评论

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

更多文章