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

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 配备了强大的工具，可以：

读写项目中的文件
在 VS Code 终端中执行命令
控制网络浏览器
通过 MCP（模型上下文协议）使用外部工具

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安装插件

打开 VS Code
访问扩展：单击活动栏中的扩展图标，或者按（Windows/Linux）或（macOS）Ctrl+Shift+XCmd+Shift+X
搜索： “Roo Code”
选择 RooVeterinaryInc 的“Roo Code”，然后单击 Install
如果出现提示，请重新加载 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 （非必须）`

在项目目录中运行npm run build
在目录中找到生成的 VSIX 文件bin/
在 VS Code 中，打开“扩展”视图，然后选择“从 VSIX 安装...”来自 “...”菜单
浏览并选择生成的文件.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 组件是该项目的主要功能组件，负责应用程序的核心逻辑与用户界面。下面是该组件的一些关键特点和架构要点：

组件结构

导入的库和组件：
- 使用了 React 库以及多种其他库，如：@monaco-editor/react（用于代码编辑器）、react-use（用于钩子）和 react-toastify（用于通知）。
- 引入了多个子组件：如 Header、DeployButton、Tabs、AskAI 和 Preview。
状态管理：
- 使用了 useState 钩子来管理多种状态，包括 HTML 内容、布局状态、错误状态等。
- 使用 useLocalStorage 钩子来存储和恢复用户的 HTML 内容。
事件处理：
- 定义了多个处理函数（如 fetchMe、resetLayout 等）来处理用户界面交互和窗口大小变化。
- 在组件挂载和卸载时进行相应的事件处理和清理。
渲染逻辑：
- 组件渲染了一个基本的布局，包含 Header、Editor、AskAI 和 Preview，使用了样式类来控制布局和外观。
功能：
- 实现了拖动调整编辑器和预览窗口的大小，支持不同屏幕尺寸的布局适配。
- 提供了错误提示和数据加载反馈，提升了用户体验。

结论

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

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

......

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

组件结构

导入的库和组件：
- 使用了 React 库以及多种其他库，如：@monaco-editor/react（用于代码编辑器）、react-use（用于钩子）和 react-toastify（用于通知）。
- 引入了多个子组件：如 Header、DeployButton、Tabs、AskAI 和 Preview。
状态管理：
- 使用了 useState 钩子来管理多种状态，包括 HTML 内容、布局状态、错误状态等。
- 使用 useLocalStorage 钩子来存储和恢复用户的 HTML 内容。
事件处理：
- 定义了多个处理函数（如 fetchMe、resetLayout 等）来处理用户界面交互和窗口大小变化。
- 在组件挂载和卸载时进行相应的事件处理和清理。
渲染逻辑：
- 组件渲染了一个基本的布局，包含 Header、Editor、AskAI 和 Preview，使用了样式类来控制布局和外观。
功能：
- 实现了拖动调整编辑器和预览窗口的大小，支持不同屏幕尺寸的布局适配。
- 提供了错误提示和数据加载反馈，提升了用户体验。