Roo Code（前身为 Roo Cline）一个 AI 驱动的自主编码代理

企业开发 2025-04-08 10:47
0 阅读

Roo Code（前身为 Roo Cline）

Roo Code 是一个 AI 驱动的自主编码代理，它存在于您的编辑器中。它可以：

  • 用自然语言沟通
  • 直接在您的工作区读写文件
  • 运行终端命令
  • 自动化浏览器操作
  • 与任何 OpenAI 兼容或自定义的 API/模型集成
  • 通过自定义模式调整其"个性"和能力

无论您是寻找灵活的编码伙伴、系统架构师，还是像 QA 工程师或产品经理这样的专业角色，Roo Code 都可以帮助您更高效地构建软件。官网：https://github.com/RooVetGit/Roo-Code/

star9.9k 下载324k

在openrouter deepseek-v3排名第2 。第一就是Cline

主要特性

多种模式

Roo Code 通过专业化的模式适应您的需求：

  • 代码模式： 用于通用编码任务
  • 架构师模式： 用于规划和技术领导
  • 询问模式： 用于回答问题和提供信息
  • 调试模式： 用于系统性问题诊断
  • 自定义模式： 创建无限专业角色，用于安全审计、性能优化、文档编写或任何其他任务

智能工具

Roo Code 配备了强大的工具，可以：

MCP 通过允许您添加无限自定义工具来扩展 Roo Code 的能力。与外部 API 集成、连接数据库或创建专业开发工具 - MCP 提供了扩展 Roo Code 功能以满足您特定需求的框架。

自定义

使 Roo Code 按照您的方式工作：

本地设置和开发（不必须）

  • 克隆仓库：
git clone https://kkgithub.com/RooVetGit/Roo-Code.git
  • 安装依赖：

进入目录后执行：

npm run install:all
  • 启动网页视图（Vite/React 应用，带热模块替换）：
npm run dev
  • 调试： 在 VSCode 中按 F5（或运行 → 开始调试）打开一个加载了 Roo Code 的新会话。

网页视图的更改将立即显示。核心扩展的更改将需要重启扩展主机。

或者，您可以构建一个 .vsix 文件并直接在 VSCode 中安装：

npm run build

bin/ 目录中将出现一个 .vsix 文件，可以用以下命令安装：

code --install-extension bin/roo-cline-<version>.vsix

我们使用 changesets 进行版本控制和发布。查看我们的 CHANGELOG.md 获取发布说明。

实践使用

本地安装Roo Code并不必须。可以直接在VSCode的插件里面选RooCode安装

VSCode安装插件

  1. 打开 VS Code
  2. 访问扩展：单击活动栏中的扩展图标，或者按 （Windows/Linux） 或 （macOS）Ctrl+Shift+XCmd+Shift+X
  3. 搜索： “Roo Code”
  4. 选择 RooVeterinaryInc 的“Roo Code”，然后单击 Install
  5. 如果出现提示，请重新加载 VS Code

安装后，在活动栏中找到 Roo 代码图标 （一个飞机图标） 以打开 Roo 代码面板。

VSCode配置Roo Code

主要是配置LLM模型调用信息，比如base_url和key。

本地设置和开发（非必须）

下载源代码

git clone https://github.com/RooVetGit/Roo-Code.git

进入目录，安装依赖

cd Roo-Code
npm run install:all

启动网页视图

npm run dev

但是页面里没有东西，使用curl，发现输出是：

<!DOCTYPE html>
<html lang="en">
  <head>
    <script type="module">
import RefreshRuntime from "/@react-refresh"
RefreshRuntime.injectIntoGlobalHook(window)
window.$RefreshReg$ = () => {}
window.$RefreshSig$ = () => (type) => type
window.__vite_plugin_react_preamble_installed__ = true
</script>

    <script type="module" src="/@vite/client"></script>

    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Roo Code</title>
  </head>
  <body>
    <div id="root"></div>
    <script type="module" src="/src/index.tsx"></script>
  </body>
</html>

经咨询，得知：

npm run dev是一个在Node.js项目中常用的命令，用于启动开发环境。它执行的是项目中package.json文件中scripts部分中定义的dev脚本，通常用于启动本地开发服务器，支持热重载、自动刷新、模块热更新（HMR）等功能，方便开发人员进行实时编码和调试。

看起来普通人不需要这一步。

从源码构建.vsix （非必须）

  1. 在项目目录中运行npm run build
  2. 在目录中找到生成的 VSIX 文件bin/
  3. 在 VS Code 中，打开“扩展”视图，然后选择“从 VSIX 安装...”来自 “...”菜单
  4. 浏览并选择生成的文件.vsix
=> Run vsce ls --tree to see all included files.

 DONE  Packaged: bin\roo-cline-3.11.4.vsix (144 files, 27.1 MB)

生成了文件：2025/04/04  18:03        28,412,516 roo-cline-3.11.4.vsix

任务测试

你好，这个项目是Deesite的源代码，请分析一下它的架构

在当前工作目录中，我能够看到Deesite项目的文件结构。首先，README.md文件通常包含项目的基本信息和使用说明，可以提供关于项目架构和功能的上下文。其次，src/目录包含主要源代码，包括组件、样式和工具。

为了理解架构，我将从分析README.md文件开始，然后检查src/components/中的组件以及相关的中间件和公共资源。这样可以帮助我获取更全面的架构概述和设计选择。

从README.md文件中可以看出，Deesite（题目为DeepSite）是一个以Docker为基础的项目，配置了相关的属性和描述，包括：.....

为了更深入理解项目的架构，我将分析源代码中的组件。首先，我将列出src/components/中的组件，以获取该项目使用的构建块的概览。这将帮助我了解其主要功能和设计模式。

....

App.tsx 组件是该项目的主要功能组件，负责应用程序的核心逻辑与用户界面。下面是该组件的一些关键特点和架构要点：

组件结构

  1. 导入的库和组件：

    • 使用了 React 库以及多种其他库，如：@monaco-editor/react（用于代码编辑器）、react-use（用于钩子）和 react-toastify（用于通知）。
    • 引入了多个子组件：如 Header、DeployButton、Tabs、AskAI 和 Preview。

  2. 状态管理：

    • 使用了 useState 钩子来管理多种状态，包括 HTML 内容、布局状态、错误状态等。
    • 使用 useLocalStorage 钩子来存储和恢复用户的 HTML 内容。

  3. 事件处理：

    • 定义了多个处理函数（如 fetchMe、resetLayout 等）来处理用户界面交互和窗口大小变化。
    • 在组件挂载和卸载时进行相应的事件处理和清理。

  4. 渲染逻辑：

    • 组件渲染了一个基本的布局，包含 Header、Editor、AskAI 和 Preview，使用了样式类来控制布局和外观。

  5. 功能：

    • 实现了拖动调整编辑器和预览窗口的大小，支持不同屏幕尺寸的布局适配。
    • 提供了错误提示和数据加载反馈，提升了用户体验。

结论

这个项目的架构是典型的现代 React 应用架构，结合了组件化设计、状态管理和用户交互逻辑，旨在为用户提供一个灵活和直观的编辑体验。核心功能围绕编辑和实时预览 HTML 内容展开，组件之间通过 props 和 hooks 进行数据和事件的传递。

接下来，我将检查src/utils/目录下的工具文件，以了解项目中使用的工具和常量，这有助于进一步分析整个项目的逻辑和架构。

......

App.tsx 组件是该项目的主要功能组件，负责应用程序的核心逻辑与用户界面。下面是该组件的一些关键特点和架构要点：

组件结构

  1. 导入的库和组件：

    • 使用了 React 库以及多种其他库，如：@monaco-editor/react（用于代码编辑器）、react-use（用于钩子）和 react-toastify（用于通知）。
    • 引入了多个子组件：如 Header、DeployButton、Tabs、AskAI 和 Preview。

  2. 状态管理：

    • 使用了 useState 钩子来管理多种状态，包括 HTML 内容、布局状态、错误状态等。
    • 使用 useLocalStorage 钩子来存储和恢复用户的 HTML 内容。

  3. 事件处理：

    • 定义了多个处理函数（如 fetchMe、resetLayout 等）来处理用户界面交互和窗口大小变化。
    • 在组件挂载和卸载时进行相应的事件处理和清理。

  4. 渲染逻辑：

    • 组件渲染了一个基本的布局，包含 Header、Editor、AskAI 和 Preview，使用了样式类来控制布局和外观。

  5. 功能：

    • 实现了拖动调整编辑器和预览窗口的大小，支持不同屏幕尺寸的布局适配。
    • 提供了错误提示和数据加载反馈，提升了用户体验。

结论

这个项目的架构是典型的现代 React 应用架构，结合了组件化设计、状态管理和用户交互逻辑，旨在为用户提供一个灵活和直观的编辑体验。核心功能围绕编辑和实时预览 HTML 内容展开，组件之间通过 props 和 hooks 进行数据和事件的传递。

接下来，我将检查src/utils/目录下的工具文件，以了解项目中使用的工具和常量，这有助于进一步分析整个项目的逻辑和架构。

....

总结

defaultHTML 提供了应用程序的基础模板，有助于用户在使用编辑器时快速预览内容。该模板简洁但有效，允许用户轻松识别和理解其结构。同时，这也表明该项目的实用性，强调了一个用户友好的界面的重要性。

下一步

为了完成对整体架构的分析，我总结如下：

  • 该项目的组件化设计使用 React，强调了灵活性和可维护性。
  • 核心功能围绕编辑和实时预览 HTML 内容，并提供了用户互动（如 AI 辅助功能）。
  • 目录结构 整洁且符合现代前端开发的惯例，利用了有用的工具和库。

如果需要更详细的信息或其他文件的分析，请告知我。

API Request

$0.0000

Task Completed

我已分析了Deesite项目的架构，了解了其核心组件和结构。主要组件是App.tsx，负责应用程序的逻辑与用户界面，同时定义了defaultHTML作为默认的HTML模板。该项目结合了现代的React架构，强调了组件化和用户交互。

总结

因为最近接触到多个AI编程助手，比如Trae、Cline、DeepSite等，因此对Roo Code的能力尚在意料之中，暂时没有那种说“王炸级”应用的感觉。

不过至少它不会比那几个竞争力弱，否则它也不需要在Cline的基础上再二次开发了。个人感觉这个东西值得花点时间去慢慢体会，应该是免费里面一线的产品。

猜你喜欢

目录

热门文章