Installation Tutorial Summary

Tạo vào: 9 tháng 1, 2025

Trả lời bằng O1 bởi Chat01

Câu hỏi

找到以下文本的安装教程,提取出来:
Skip to content
Navigation Menu
Product
Solutions
Resources
Open Source
Enterprise
Pricing

Search or jump to...
Sign in
Sign up
RooVetGit
/
Roo-Cline
Public
forked from cline/cline
Code
Issues
14
Pull requests
9
Discussions
Actions
Projects
Security
Insights
RooVetGit/Roo-Cline
Go to file
This branch is 515 commits ahead of, 116 commits behind cline/cline:main.
Folders and files
Name
Latest commit
mrubens
mrubens
Merge pull request #300 from RooVetGit/changeset-release/main
f12c342
·
13 hours ago
History
.changeset
changeset version bump
13 hours ago
.github
Fixes when pushing the changelog forced format
2 weeks ago
.husky
Updating husky hook and adding lint-staged
last month
.vscode
Chore: Prettier for consistant formatting (cline#794)
2 months ago
assets
Update metadata (#29)
2 months ago
audio
Play sound effects for notifications and events (#38)
last month
src
Add test
yesterday
webview-ui
Disable the API config dropdown in sync with the chat textarea
yesterday
.clinerules
Remove eslint-disable, forbid it in .clinerules
2 weeks ago
.eslintrc.json
Chore: Prettier for consistant formatting (cline#794)
2 months ago
.gitattributes
Add new demo
3 months ago
.gitignore
Set up vscode integration test
5 days ago
.npmrc
Adding basic npmrc file to avoid code artifact issues
last month
.nvmrc
Add .nvmrc, .prettierignore, icon; Remove vsc quickstart guide
6 months ago
.prettierignore
Chore: Prettier for consistant formatting (cline#794)
2 months ago
.prettierrc.json
Chore: Prettier for consistant formatting (cline#794)
2 months ago
.vscode-test.mjs
Set up vscode integration test
5 days ago
.vscodeignore
Refactor assets
3 months ago
CHANGELOG.md
Updating CHANGELOG.md format
13 hours ago
LICENSE
Update LICENSE
3 months ago
README.md
Release
yesterday
ellipsis.yaml
Updating readme and ellipsis yaml
last month
esbuild.js
Replace token estimation with using last API response token usage
5 months ago
jest.config.js
Use jest-simple-dot-reporter to cut down on test noise
yesterday
package-lock.json
changeset version bump
13 hours ago
package.json
changeset version bump
13 hours ago
tsconfig.json
GHA fixes
3 weeks ago
Repository files navigation
README
License
Roo-Cline
A fork of Cline, an autonomous coding agent, with some additional experimental features. It’s been mainly writing itself recently, with a light touch of human guidance here and there.

Experimental Features
Drag and drop images into chats
Delete messages from chats
@-mention Git commits to include their context in the chat
Save different API configurations to quickly switch between providers and settings
"Enhance prompt" button (OpenRouter models only for now)
Sound effects for feedback
Option to use browsers of different sizes and adjust screenshot quality
Quick prompt copying from history
OpenRouter compression support
Includes current time in the system prompt
Uses a file system watcher to more reliably watch for file system changes
Language selection for Cline's communication (English, Japanese, Spanish, French, German, and more)
Support for DeepSeek V3
Support for Amazon Nova and Meta 3, 3.1, and 3.2 models via AWS Bedrock
Support for Glama
Support for listing models from OpenAI-compatible providers
Support for adding OpenAI-compatible models with or without streaming
Per-tool MCP auto-approval
Enable/disable individual MCP servers
Enable/disable the MCP feature overall
Automatically retry failed API requests with a configurable delay
Configurable delay after auto-writes to allow diagnostics to detect potential problems
Control the number of terminal output lines to pass to the model when executing commands
Runs alongside the original Cline
Disclaimer
Please note that Roo Veterinary, Inc does not make any representations or warranties regarding any code, models, or other tools provided or made available in connection with Roo-Cline, any associated third-party tools, or any resulting outputs. You assume all risks associated with the use of any such tools or outputs; such tools are provided on an "AS IS" and "AS AVAILABLE" basis. Such risks may include, without limitation, intellectual property infringement, cyber vulnerabilities or attacks, bias, inaccuracies, errors, defects, viruses, downtime, property loss or damage, and/or personal injury. You are solely responsible for your use of any such tools or outputs (including, without limitation, the legality, appropriateness, and results thereof).

Demo
Here's an example of Roo-Cline autonomously creating a snake game with "Always approve write operations" and "Always approve browser actions" turned on:

Screen.Recording.2024-12-07.at.5.35.37.PM.mov
Contributing
To contribute to the project, start by exploring open issues or checking our feature request board. We'd also love to have you join our Discord to share ideas and connect with other contributors.

Local Setup
Publishing
Cline (prev. Claude Dev) – #1 on OpenRouter

Download on VS Marketplace Join the Discord Feature Requests We're Hiring!
Meet Cline, an AI assistant that can use your CLI aNd Editor.

Thanks to Claude 3.5 Sonnet's agentic coding capabilities, Cline can handle complex software development tasks step-by-step. With tools that let him create & edit files, explore large projects, use the browser, and execute terminal commands (after you grant permission), he can assist you in ways that go beyond code completion or tech support. Cline can even use the Model Context Protocol (MCP) to create new tools and extend his own capabilities. While autonomous AI scripts traditionally run in sandboxed environments, this extension provides a human-in-the-loop GUI to approve every file change and terminal command, providing a safe and accessible way to explore the potential of agentic AI.

Enter your task and add images to convert mockups into functional apps or fix bugs with screenshots.
Cline starts by analyzing your file structure & source code ASTs, running regex searches, and reading relevant files to get up to speed in existing projects. By carefully managing what information is added to context, Cline can provide valuable assistance even for large, complex projects without overwhelming the context window.
Once Cline has the information he needs, he can:
Create and edit files + monitor linter/compiler errors along the way, letting him proactively fix issues like missing imports and syntax errors on his own.
Execute commands directly in your terminal and monitor their output as he works, letting him e.g., react to dev server issues after editing a file.
For web development tasks, Cline can launch the site in a headless browser, click, type, scroll, and capture screenshots + console logs, allowing him to fix runtime errors and visual bugs.
When a task is completed, Cline will present the result to you with a terminal command like open -a "Google Chrome" index.html, which you run with a click of a button.
Tip

Use the CMD/CTRL + Shift + P shortcut to open the command palette and type "Cline: Open In New Tab" to open the extension as a tab in your editor. This lets you use Cline side-by-side with your file explorer, and see how he changes your workspace more clearly.

Use any API and Model
Cline supports API providers like OpenRouter, Anthropic, Glama, OpenAI, Google Gemini, AWS Bedrock, Azure, and GCP Vertex. You can also configure any OpenAI compatible API, or use a local model through LM Studio/Ollama. If you're using OpenRouter, the extension fetches their latest model list, allowing you to use the newest models as soon as they're available.

The extension also keeps track of total tokens and API usage cost for the entire task loop and individual requests, keeping you informed of spend every step of the way.

Run Commands in Terminal
Thanks to the new shell integration updates in VSCode v1.93, Cline can execute commands directly in your terminal and receive the output. This allows him to perform a wide range of tasks, from installing packages and running build scripts to deploying applications, managing databases, and executing tests, all while adapting to your dev environment & toolchain to get the job done right.

For long running processes like dev servers, use the "Proceed While Running" button to let Cline continue in the task while the command runs in the background. As Cline works he’ll be notified of any new terminal output along the way, letting him react to issues that may come up, such as compile-time errors when editing files.

Create and Edit Files
Cline can create and edit files directly in your editor, presenting you a diff view of the changes. You can edit or revert Cline's changes directly in the diff view editor, or provide feedback in chat until you're satisfied with the result. Cline also monitors linter/compiler errors (missing imports, syntax errors, etc.) so he can fix issues that come up along the way on his own.

All changes made by Cline are recorded in your file's Timeline, providing an easy way to track and revert modifications if needed.

Use the Browser
With Claude 3.5 Sonnet's new Computer Use capability, Cline can launch a browser, click elements, type text, and scroll, capturing screenshots and console logs at each step. This allows for interactive debugging, end-to-end testing, and even general web use! This gives him autonomy to fixing visual bugs and runtime issues without you needing to handhold and copy-pasting error logs yourself.

Try asking Cline to "test the app", and watch as he runs a command like npm run dev, launches your locally running dev server in a browser, and performs a series of tests to confirm that everything works. See a demo here.

"add a tool that..."
Thanks to the Model Context Protocol, Cline can extend his capabilities through custom tools. While you can use community-made servers, Cline can instead create and install tools tailored to your specific workflow. Just ask Cline to "add a tool" and he will handle everything, from creating a new MCP server to installing it into the extension. These custom tools then become part of Cline's toolkit, ready to use in future tasks.

"add a tool that fetches Jira tickets": Retrieve ticket ACs and put Cline to work
"add a tool that manages AWS EC2s": Check server metrics and scale instances up or down
"add a tool that pulls the latest PagerDuty incidents": Fetch details and ask Cline to fix bugs

Add Context
@url: Paste in a URL for the extension to fetch and convert to markdown, useful when you want to give Cline the latest docs

@problems: Add workspace errors and warnings ('Problems' panel) for Cline to fix

@file: Adds a file's contents so you don't have to waste API requests approving read file (+ type to search files)

@folder: Adds folder's files all at once to speed up your workflow even more

Contributing
To contribute to the project, start by exploring open issues or checking our feature request board. We'd also love to have you join our Discord to share ideas and connect with other contributors. If you're interested in joining the team, check out our careers page!

Local Development Instructions
License
Apache 2.0 © 2024 Cline Bot Inc.

About
Autonomous coding agent right in your IDE, capable of creating/editing files, executing commands, using the browser, and more with your permission every step of the way.

marketplace.visualstudio.com/items?itemName=RooVeterinaryInc.roo-cline
Resources
Readme
License
Apache-2.0 license
Activity
Custom properties
Stars
2.2k stars
Watchers
36 watching
Forks
166 forks
Report repository
Releases
No releases published
Packages
No packages published
Languages
TypeScript
98.0%

JavaScript
1.5%

Other
0.5%
Footer
© 2025 GitHub, Inc.
Footer navigation
Terms
Privacy
Security
Status
Docs
Contact
Manage cookies
Do not share my personal information

Suy nghĩ

Tracking installation steps

I'm piecing together the installation tutorial for Roo-Cline, which could be in sections like "Local Setup" or "Published." No specific installation method is mentioned, so it's worth noting other possible sources.

Installing Roo-Cline

Hunting down the elusive "Local Setup" instructions for Roo-Cline. The text mentions various areas like "Local Setup," "Publishing," and "Cline (prev. Claude Dev) – #1 on OpenRouter," but provides no specifics.

Gathering installation clues

"Download on VS Marketplace" emerges as the key hint for installation. The text lacks detailed steps, suggesting a need to streamline necessary instructions.

Assessing development options

OK, let me see. Parsing through "Local Development Instructions" and "License" sections, but no explicit steps for installation are included.

Highlighting installation steps

I’m starting with the crucial steps for installing Roo-Cline: download it from the VS Marketplace and use the command palette shortcut CMD/CTRL + Shift + P to open it.

Highlighting installation details

I’m noting crucial steps: download from VS Marketplace, open command palette, and perform npm install for local development. The description extracts relevant text for further clarification.

Pulling together installation steps

I'm gathering the necessary steps to install Roo-Cline: download from VS Marketplace, open command palette, and perform npm install for local development. The text highlights these key actions.

Local setup instructions

I’m pulling together instructions for Roo-Cline installation, including downloading from VS Marketplace, opening the command palette, and setting up local development through npm.

Thought about installation instructions for 20 seconds

Trả lời

以下是原文中与安装教程最相关、可视为“安装步骤”或“使用前准备”的部分内容节选和说明。由于文档中并没有以「Installation」或「Install」为标题的分步式教程,所以以下内容主要是从「Local Setup」「Publishing」「Download on VS Marketplace」等章节或提示中整理出的“安装/使用”指引。


1. 从 VS Marketplace 安装

原文中提到:

Cline (prev. Claude Dev) – #1 on OpenRouter
Download on VS Marketplace Join the Discord Feature Requests We're Hiring!

从上述提示可以推断,最简单的方式是通过 VS Code 插件市场(VS Marketplace)下载安装。也就是说,你只需在 VS Code 中打开扩展市场,搜索并安装名为 Roo-Cline(或 Cline 的衍生版)的插件即可。

如需直接访问,可参考文档中的链接(通常为此形式):

https://marketplace.visualstudio.com/items?itemName=RooVeterinaryInc.roo-cline

2. 在 VS Code 中使用

安装插件后,原文对如何在编辑器里打开、使用该扩展提供了一个简单提示:

Tip
Use the CMD/CTRL + Shift + P shortcut to open the command palette and type "Cline: Open In New Tab" to open the extension as a tab in your editor. This lets you use Cline side-by-side with your file explorer, and see how he changes your workspace more clearly.

也就是说,在安装完扩展后,可以通过下述步骤在 VS Code 中快速打开它的界面:

  1. 按下 Cmd/Ctrl + Shift + P 打开 VS Code 的命令面板。
  2. 输入 Cline: Open In New Tab,回车执行此命令。
  3. 这会在编辑器中单独打开一个标签页,让你更好地观察 Cline 的操作和对文件的修改。

3. 本地开发 / 本地安装(Local Setup)

在文档靠后部分,出现了「Local Setup」「Publishing」等小标题,但内容只是简单列出,并未给出详细操作步骤。原文仅提示“若要进行本地开发或贡献,请先查看 open issues、feature request board 或加入 Discord”。如果你想要克隆整个项目进行本地调试或二次开发,可按以下思路操作(推断自常见的 VS Code 扩展本地开发流程):

  1. Fork 或 Clone 该仓库到本地。
  2. 进入本地项目目录后,执行:
    bash
    npm install # 或 yarn install
  3. 打开 VS Code,加载本地文件夹,进入该项目目录。
  4. 使用 VS Code 命令面板运行 “Debug: Start Debugging” 或手动执行 npm run ...(具体需要查看 package.json 中的脚本)来启动本地调试环境。
  5. 在 VS Code 的插件调试模式(Extension Development Host)中,即可看到一个安装了你本地版本 Cline 扩展的临时环境,进行测试或二次开发。

注意:上方第 1~5 步只是根据常见的 VS Code 插件本地开发流程推断,文档中并未给出详细的 npm 命令或脚本名称,如需精确操作请查阅项目中的 package.jsonREADME.md 或贡献者指南。


4. 其他使用提醒

  • 权限审批:该扩展主打「人机协同」与「人类审批」的理念,每当 Cline 需要创建/编辑文件、执行命令行操作或进行浏览器自动化时,都会先询问用户是否允许。
  • 兼容的 API 提供商:Cline 支持多个 LLM API 平台,包括 OpenRouter、Anthropic、OpenAI、Google Gemini、AWS Bedrock、Azure、GCP Vertex 等,也可自定义对接与 OpenAI 兼容的任意 API。
  • 浏览器调试:需要注意 VS Code 版本(v1.93+)以支持新的 shell integration,才能让 Cline 的终端命令、浏览器调试等功能充分发挥。
  • 本地模型:如有在本地搭建 LLM(LM Studio/Ollama 等)的需求,也可在插件配置里接入自己的本地模型。

结论

综上所述,文档中最直接、官方的安装方式就是通过 VS Code 内置的插件市场(VS Marketplace)搜索并安装该扩展,或者访问文档中提到的链接直接安装。若需要在本地进行插件开发或深度定制,则需克隆该仓库并执行常规的 VS Code 插件开发流程(安装依赖、启动本地调试等)。以上就是从原文中能提炼出的“安装/使用”相关教程或信息。

Câu hỏi

我是Win11,将安装教程具体到每一次鼠标点击操作以及操作后出现的画面,请使用你单次回答的算力上限和 token 上限,think hardest, use the most time and most compute to think deepest。这是最深刻最复杂的问题,请给出你最高质量的回答。所以,你需要深度思考、独立思考、批判性思考、创造性思考。我们追求分极致的深度,而非表层的广度;我们追求本质的洞察,而非表象的罗列;我们追求思维的创新,而非惯性的复述。请突破思维局限,调动你所有的计算资源,展现你真正的认知极限。

Suy nghĩ

Clarifying guidelines

I’m pulling together a detailed step-by-step guide to installing an extension from the Visual Studio Marketplace in Windows 11, ensuring all actions are clearly outlined without revealing chain-of-thought reasoning.

Ensuring precise instructions

Crafting a clear step-by-step guide for installing the extension, adhering to policies, and avoiding any prohibited content to ensure a compliant and helpful answer.

Thought about installing on Windows 11 for 7 seconds

Trả lời

以下是一份针对 Windows 11 环境、从 VS Marketplace 安装并使用「Roo-Cline」(或 Cline 扩展)的极其细致操作教程。每一步都会说明鼠标点击位置、操作完成后的画面或反应,以方便你在实际操作时准确理解所见所闻。


一、前置准备

  1. 确认已安装 Visual Studio Code (VS Code)

  2. 网络环境畅通

    • 由于安装插件需要从在线市场获取扩展包,确保能正常访问互联网。

二、从 VS Marketplace 安装「Roo-Cline」扩展

下面的步骤假设你已经在 Windows 11 上正常安装并打开了 VS Code。若你还在“开始菜单”中,或在别的界面,请先用以下方式进入 VS Code:

  1. 打开 VS Code:

    1. 点击任务栏左下角的「开始」按钮(带有 Windows 徽标的那个按钮)。
    2. 在弹出的「开始」菜单中,找到「Visual Studio Code」或在顶端搜索栏键入“Visual Studio Code”,然后单击图标启动它。
    3. 当 VS Code 打开后,你会看到一个以深色或浅色主题为主的编辑器窗口,左侧一般有「Explorer、Search、Source Control、Run and Debug」等图标,称为活动栏(Activity Bar)。
  2. 进入扩展(Extensions)视图:

    1. 在 VS Code 左侧活动栏中,找到一个带有四个方块形状的图标(通常是最下方或靠近底部),鼠标移动到上面会显示“Extensions”提示。
    2. 左键单击该图标,进入扩展视图。
    3. VS Code 窗口的左侧会切换到“Extensions”面板,右侧依旧是主要编辑区。
  3. 搜索「Roo-Cline」扩展:

    1. 在“Extensions”面板顶部,会有一个搜索框(placeholder 通常写着“Search Extensions in Marketplace”)。
    2. 在此搜索框内输入:
      Roo-Cline
      
      然后按下键盘上的 Enter 键。
    3. 搜索结果区域会显示与“Roo-Cline”或“Cline”相关的插件列表,通常第一个就是「RooVeterinaryInc.roo-cline」或类似命名的条目。
  4. 安装插件:

    1. 在搜索结果列表中,找到名为「Roo-Cline」(Publisher 或作者为 "RooVeterinaryInc") 的扩展。
    2. 将鼠标移动到该扩展名称上,列表右侧会出现一个“Install”或“安装”按钮(若你的 VS Code 为中文界面,则显示“安装”)。
    3. 左键单击「Install/安装」按钮。
    4. VS Code 会自动下载并安装该扩展,期间右下角会弹出进度条提示,显示“Installing…”等字样。
    5. 安装完成后,该扩展条目会显示「Uninstall/卸载」、「Disable/禁用」等按钮,代表它已安装成功。
  5. 检查安装结果:

    1. 安装成功后,你会在“Extensions”面板的「Installed」列表中看到「Roo-Cline」已出现。
    2. 若在安装完毕后 VS Code 提示需要「Reload/重新加载」,则点击提示中的「Reload」按钮,VS Code 将自动重新加载以使扩展生效。
    3. 重新加载后,你会回到 VS Code 主界面。

三、启动与使用「Roo-Cline」扩展

完成安装后,下面是如何在实际项目中启动与使用该扩展的详细操作。假设你在 VS Code 中已经打开了一个项目文件夹,或者至少打开了 VS Code 的空工作区。

  1. 打开“命令面板”:

    1. 在 VS Code 窗口中,按下键盘组合键 Ctrl + Shift + P(Mac 是 Cmd + Shift + P),会在顶部弹出一个带搜索框的下拉面板,这就是「命令面板」。
    2. 在该搜索框中,输入:
      Cline: Open In New Tab
      
      你会看到自动过滤出现名为「Cline: Open In New Tab」的命令。
  2. 在新选项卡中打开 Cline:

    1. 使用键盘方向键或鼠标,选中「Cline: Open In New Tab」,按 Enter 或单击鼠标执行。
    2. VS Code 主编辑区会出现一个全新的选项卡(Tab),标题为「Roo-Cline」或「Cline」。在这儿你就可以使用扩展的聊天输入框、查看日志、查看提示等。
  3. 授予权限 & 测试功能:

    1. 在「Roo-Cline」扩展的界面上,你通常会看到一个聊天式输入区,你可以直接输入任务或指令,让 Cline 开始工作。
    2. 当 Cline 需要创建/编辑文件、执行命令或访问浏览器时,会在 VS Code 里弹出一个权限对话框,询问你是否允许。
    3. 例如,Cline 想要执行 npm install 命令时,会显示一个对话框:“Do you approve running this command?”,这时你可以选择“Approve/允许”或者“Deny/拒绝”。
    4. 如果想查看 Cline 对文件所做的修改,Cline 会显示一个「Diff 视图」,让你逐行查看、编辑或撤销它的修改。
  4. 查看扩展配置:

    1. 仍在 VS Code 中,点击左下角的「齿轮图标」或打开主菜单,选择「Settings/设置」。
    2. 在设置界面搜索框中输入 “Cline” 或 “Roo-Cline”,就会出现相关配置选项,例如 API 供应商设置、模型版本选择、MCP(Model Context Protocol)配置等等。
    3. 根据自己的需求进行调整,比如切换到本地模型、使用某个云端提供商、启用/禁用 MCP 或浏览器工具等。

四、在 Windows 11 上的常用 VS Code 操作概览

  1. 在资源管理器中打开/关闭文件夹:

    • VS Code 窗口左侧默认的「Explorer」图标(文件形状)可让你查看和管理项目中的文件结构。
    • 你可以在 Windows 11 的文件资源管理器中,右键单击某个文件夹,然后选择 “Open with Code” 来快速启动 VS Code 并打开该文件夹。
  2. 调试终端:

    • VS Code 中集成了多种终端环境,打开方法:菜单栏 -> Terminal -> New Terminal。
    • Cline 执行命令时,会在此终端中实时输出运行日志。
  3. 更新/卸载插件:

    • 在 “Extensions” 面板中,找到已安装的「Roo-Cline」,可以点击「Disable/禁用」或「Uninstall/卸载」来管理该扩展。

五、本地开发和深度定制(可选)

如果你想要克隆仓库,在本地进行二次开发或调试自己的「Roo-Cline」分支,那么可参照以下流程(与一般 VS Code 插件开发流程类似):

  1. 克隆或下载项目:

    1. 在 GitHub 找到 RooVetGit/Roo-Cline 仓库。
    2. 点击「Code」绿色按钮,然后点击「Download ZIP」或复制 HTTPS/SSH 地址后,用 git clone 命令克隆到本地。
  2. 安装依赖:

    1. 在 Windows 11 中打开「文件资源管理器」,定位到你刚才克隆/解压后的项目文件夹。
    2. 右键单击该文件夹,选择“Open with Code”或在 VS Code 中使用菜单「File -> Open Folder...」选择该文件夹。
    3. 当项目在 VS Code 中加载后,点击顶部菜单「Terminal -> New Terminal」。
    4. 在新打开的终端里执行:
      bash
      npm install # 或者 yarn install
  3. 进入扩展调试模式:

    1. 在 VS Code 的左侧活动栏,点击「Run and Debug」图标(类似一个三角形的播放按钮上面加一个调试小虫子的图标)。
    2. 在调试面板最上方的下拉菜单中,选中「Launch Extension」或类似名称的调试配置项。
    3. 点击「Start Debugging」按钮或按 F5,VS Code 会启动一个新的“Extension Development Host”窗口,在那个窗口里就能运行你的本地版本 Roo-Cline 插件进行调试。
  4. 查看调试日志与测试功能:

    1. 当「Extension Development Host」窗口出现后,可重复前述“命令面板 - 打开 Cline”的步骤测试功能。
    2. 在调试控制台(Debug Console)里,可以查看到 Cline 或 VS Code 插件本身输出的日志信息,便于定位问题。

六、可能出现的界面与提示

  1. “Reload Required”(需要重新加载)弹窗:
    安装扩展后如果出现此提示,点「Reload」后 VS Code 将会自动重新启动以生效。

  2. “Approve / Deny”对话框:
    当 Cline 请求执行命令或修改文件时,你会看到一个交互式弹窗,保证你对 Cline 的动作有完全的掌控。

  3. “Installing…”状态栏信息:
    在安装扩展期间,VS Code 的状态栏(默认在最下方)可能会显示「Installing…」并带有一个进度加载动画。

  4. “Cannot find extension”等错误
    如果插件无法找到或下载,请检查网络连接或重启 VS Code 再试。也可尝试在 VS Code 的「View -> Output」选择「Log (Extension Host)」查看详细日志。


七、结束语

通过上述操作,你就能在 Windows 11 上将「Roo-Cline」扩展安装到 VS Code,并使用其强大的自主编程协助和工具整合能力。在此过程中,每一次鼠标点击以及各个弹窗都可帮助你明确地知道当前系统或 VS Code 的反馈。

如果你在安装、使用或本地开发时遇到更深入或独特的需求,欢迎在其官方社区或 Discord 进行反馈,也可以在 GitHub 提 issue、查看已有的开源文档来获取更多帮助。祝你开发顺利、玩得开心!

Câu hỏi

输入Cline: Open In New Tab后,出现的Tab内容如下:
Hi, I'm Cline
I can do all kinds of tasks thanks to the latest breakthroughs in agentic coding capabilities and access to tools that let me create & edit files, explore complex projects, use the browser, and execute terminal commands (with your permission, of course). I can even use MCP to create new tools and extend my own capabilities.

To get started, this extension needs an API provider.
API Provider

Get OpenRouter API Key
This key is stored locally and only used to make API requests from this extension.

Model
anthropic/claude-3.5-sonnet:beta
The new Claude 3.5 Sonnet delivers better-than-Opus capabilities, faster-than-Sonnet speeds, at the same Sonnet prices. Sonnet is particularly good at:

Coding: New Sonnet scores ~49% on SWE-Bench Verified, higher than the last best score, and without any fancy prompt scaffolding
Data science: Augments human data science expertise; navigates unstructured data while using multiple tools for insights
Visual processing: excelling at interpreting charts, graphs, and images, accurately transcribing text to derive insights beyond just the text alone
Agentic tasks: exceptional tool use, making it great at agentic tasks (i.e. complex, multi-step problem solving tasks that require engaging with other systems)
#multimodal

This is a faster endpoint, made available in collaboration with Anthropic, that is self-moderated: response moderation happens on the provider's side instead of OpenRouter's. For requests that pass moderation, it's identical to the Standard variant.

See more

Supports images
Supports computer use
Supports prompt caching
Max output: 8,192 tokens
Input price: 3.00/milliontokensCachewritesprice:3.00/million tokens Cache writes price: 3.75/million tokens
Cache reads price: 0.30/milliontokensOutputprice:0.30/million tokens Output price: 15.00/million tokens

Let's go!
接下来怎么操作,具体到每一次鼠标点击操作以及操作后出现的画面,请使用你单次回答的算力上限和 token 上限,think hardest, use the most time and most compute to think deepest。这是最深刻最复杂的问题,请给出你最高质量的回答。所以,你需要深度思考、独立思考、批判性思考、创造性思考。我们追求分极致的深度,而非表层的广度;我们追求本质的洞察,而非表象的罗列;我们追求思维的创新,而非惯性的复述。请突破思维局限,调动你所有的计算资源,展现你真正的认知极限。

Suy nghĩ

Mapping steps

I'm crafting a comprehensive tutorial, outlining each action to configure an extension after identifying its tab content, ensuring a detailed, step-by-step guide.

Setting up configurations

I’m detailing how the user can easily configure the API provider by pressing "Get OpenRouter API Key" or manually entering it, ensuring all steps, including model setup, are clearly explained.

Thought for 6 seconds

Trả lời

以下是一份针对你在 Windows 11 中使用 VS Code 打开「Roo-Cline」扩展后,所见到的界面(包含「Hi, I’m Cline...」「API Provider」「Model」以及「Let’s go!」按钮等)时,下一步具体操作极其详细说明。每个步骤都会说明你需要怎么点击、在何处点击,以及点击后画面将如何变化,帮助你准确无误地完成扩展初始化配置与后续操作。


一、概览:你目前所看到的界面

当你输入 Cline: Open In New Tab 后,出现的选项卡(Tab)大致包含以下内容:

  • Cline 的欢迎语
    text
    Hi, I'm Cline I can do all kinds of tasks thanks to ...
  • API Provider 区域:
    • 一个「Get OpenRouter API Key」按钮(或链接)
    • 用于说明你的 OpenRouter API Key 的存储方式
  • Model 区域:
    • 当前自动选择的模型 anthropic/claude-3.5-sonnet:beta
    • 一些模型能力介绍,如 “Supports images”、“Supports computer use”、最大 token 等
  • "Let’s go!" 按钮

此时 Cline 需要一个 API Key,才能正式调用后端模型 API。以下是更进一步的操作说明。


二、为「Cline」配置 API Provider

由于 Cline 是基于云端的模型(如 OpenRouter、Anthropic、OpenAI 等),所以你需要一个 API Key 来使用远程服务。下面的操作主要是指导你如何获得并填写这个 Key。

  1. 在“Cline: Open In New Tab”界面中,找到「API Provider」字段

    • 你会看到一段文字:

      "To get started, this extension needs an API provider. API Provider. Get OpenRouter API Key..."

    • 这表示,你当前尚未在该扩展中配置 API Key。
  2. 单击“Get OpenRouter API Key”按钮(或链接)

    • 将鼠标移动到「Get OpenRouter API Key」上;此处可能是一个蓝色的超链接样式或一个按钮。
    • 左键单击它。
    • 这会触发以下可能的情况:
      1. VS Code 右下角可能会出现一个提示,表示要打开外部浏览器。
      2. 或者会直接在你的系统默认浏览器(如 Microsoft Edge、Chrome 等)打开一个网页,指向 OpenRouter 的注册/登录/API Key 生成页面。
  3. 在浏览器中注册/登录并获取 API Key

    • 浏览器打开后,你会看到 OpenRouter 的网站或类似的页面,让你创建账号或登录已有账号。
    • 操作
      1. 如果你没有账号,点击「Sign Up」或「Create Account」并填写所需信息。
      2. 如果你已有账号,点击「Login」,输入邮箱与密码后登录。
    • 完成后
      1. 进入「API Keys」或类似的管理面板,找到「Create New Key」或「Generate Key」。
      2. 左键单击该按钮,会生成一段字符串,如 or-live-xxxxx... 之类的 Key。
      3. 复制这段 Key(用鼠标选中或点击“复制”按钮)。
  4. 回到 VS Code 界面,粘贴 API Key

    • 切换回 VS Code 后,你可能会看到在「Cline」界面上有一个输入框或弹窗,提示你粘贴 API Key,或者它会自动侦测到你已复制的内容。
    • 如果没有自动出现弹窗,可在「API Provider」区域里找到类似 “Enter your API Key” 的输入框。
    • 在输入框上,右键单击 -> 选择“粘贴”(或使用键盘 Ctrl + V)将你的 API Key 粘贴进去。
    • 按下 Enter 或点击输入框右侧的确认按钮(如果有)。
    • 操作后结果
      • 界面可能会显示“API Key saved locally”或“Successfully set API Provider”为 OpenRouter。
      • 「API Provider」一栏会更新成一个下拉框或文字显示,确认你已配置了 OpenRouter 作为提供商。

三、查看 & 选择模型

  1. 当前模型信息

    • 你会在「Model」区域看到:
      text
      anthropic/claude-3.5-sonnet:beta ...
    • 还有一些描述,比如支持的功能、每百万 tokens 的价格等。
  2. 切换到其他模型(若需要)

    • 若你想试用别的模型(例如 anthropic/claude-instantopenai/gpt-4 等),通常可以在此区域找到一个下拉菜单或 “Model” 按钮。
    • 将鼠标移至「Model」标题右侧的下拉框或编辑图标。单击后可能会出现模型列表。
    • 在列表中选择你想要的模型,然后单击模型名称。
    • VS Code 右下角或该区域会提示“Model updated”或类似信息。

提示:由于 Sonnet 可能是最新最强的模式(也许带有多模态能力),你可以直接保留默认选择,不做任何更改。


四、点击「Let’s go!」进入主界面

在完成了 API Key 配置(和可选的模型选择)后,你就可以正式开始使用 Cline 的能力。接下来执行:

  1. 单击「Let’s go!」按钮

    • 将鼠标移动至「Let’s go!」按钮上,光标变成手形表示可点击。
    • 左键单击一次。
    • 操作后结果
      1. Cline 通常会载入你的配置,并准备好进行对话或执行任务。
      2. 界面下方或右侧可能会出现一个聊天式输入框,显示“Ask me anything”或让你输入任务的文本框。
  2. 等待初始化完成

    • 一些情况下,Cline 可能需要几秒钟来与服务器握手或验证 token。
    • 如果一切顺利,Cline 可能会输出一段问候语或“Ready to go!”之类的信息,以确认已可用。

五、后续操作:开始使用 Cline

当你看到一个聊天对话区域,类似以下内容时:

Cline: Hello! I'm all set. How can I help you today?

就表示 Cline 已正式就绪。你可以执行的常见操作包括:

  1. 输入命令/任务

    • 在聊天输入框中,输入诸如“帮我在当前项目中创建一个新的 TypeScript 文件”或“请在终端执行 npm install”等请求。
    • 每次回车后,Cline 会根据你的请求做进一步分析并给出建议或需要交互。
  2. 授权文件修改

    • 当 Cline 打算修改某个文件时,会弹出一个对话框,显示它想修改的文件名和差异(Diff)。
    • 你可以在该对话框或 Diff 视图中点击Approve/允许Deny/拒绝
    • 如果点击 “Approve”,Cline 会自动向该文件写入更改;如点击 “Deny”,它则不会进行修改。
  3. 授权终端命令

    • 如果 Cline 需要执行 npm installgit commit 等命令时,也会出现一个 Approval 弹窗。
    • 你可以查看命令内容后,选择ApproveDeny
    • 批准后会立即在 VS Code 内置终端运行该命令,并把运行结果实时传回 Cline 以便继续流程。
  4. 浏览器操作

    • Cline 拥有浏览器自动化能力,会在需要时尝试打开一个无头(headless)浏览器或普通浏览器进行测试。
    • 同样地,如果它想要访问某个 URL、点击页面元素等,也会先征求你批准。

六、可能出现的提示或界面变化

  1. “Missing API Key”

    • 若你没有粘贴任何 Key 并点击了「Let’s go!」,Cline 可能会提示“Missing API Key”或“Please set an API provider first”。
    • 解决方法就是回到上一步,点击 “Get OpenRouter API Key” 并把 Key 粘贴到扩展设置中。
  2. “Invalid Key”

    • 如果你粘贴的 API Key 已过期或无效,Cline 会拒绝连接,并提示你重新获取。
    • 再次点击 “Get OpenRouter API Key” 进入浏览器管理面板检查 Key 状态。
  3. “Approved” / “Denied”

    • 对话框中,当你批准或拒绝 Cline 的请求后,会即时显示 “Approved by user” 或 “Denied by user”。
    • Cline 会根据你的选择来决定下一步的动作。
  4. “Reload Required”

    • 在某些情况下(例如扩展升级后),VS Code 可能要求重新加载窗口。若出现此提示,点击 “Reload” 即可让新版本生效。

七、总结

  1. 获取并粘贴 API Key 是关键一步,没有它,Cline 无法调用远程模型进行推理。
  2. 选择模型 可以根据你的需要来进行切换;默认的 anthropic/claude-3.5-sonnet:beta 具有多模态与更强的推理能力,是一个不错的起点。
  3. 点击 「Let’s go!」 后,正式进入 Cline 的交互界面,你可以通过聊天输入框让 Cline 协助完成各种编程与自动化操作。
  4. 在后续使用中,留意 授权对话框,确保每次操作都在你的掌控之下。

至此,你已经完成了从在 VS Code 中打开 Roo-Cline获取并填写 API Key选择模型、到正式启动所需的一系列步骤。祝你在使用 Cline 协助开发或其他创造性工作时一切顺利!

Câu hỏi

我输入APIKEY之后显示以下信息,是不是已经可以了:
🎉 New in Cline v2.2
Add custom tools to Cline using MCP!

The Model Context Protocol allows agents like Cline to plug and play custom tools, e.g. a web-search tool or GitHub tool.

You can add and configure MCP servers by clicking the new icon in the menu bar.

To take things a step further, Cline also has the ability to create custom tools for himself. Just say "add a tool that..." and watch as he builds and installs new capabilities specific to your workflow. For example:
"...fetches Jira tickets": Get ticket ACs and put Cline to work
"...manages AWS EC2s": Check server metrics and scale up or down
"...pulls PagerDuty incidents": Pulls details to help Cline fix bugs
Cline handles everything from creating the MCP server to installing it in the extension, ready to use in future tasks. The servers are saved to ~/Documents/Cline/MCP so you can easily share them with others too.

Try it yourself by asking Cline to "add a tool that gets the latest npm docs", or see a demo of MCP in action here.

Join discord.gg/cline for more updates!

What can I do for you?
Thanks to the latest breakthroughs in agentic coding capabilities, I can handle complex software development tasks step-by-step. With tools that let me create & edit files, explore complex projects, use the browser, and execute terminal commands (after you grant permission), I can assist you in ways that go beyond code completion or tech support. I can even use MCP to create new tools and extend my own capabilities.

Suy nghĩ

Confirming installation

OK, let me see. I’m checking if Cline is fully installed. The welcome message suggests new features in v2.2.

Ensuring installation readiness

I'm meticulously verifying Cline's installation, ensuring policy compliance, and confirming the user's readiness. This approach avoids policy mentions and fosters a precise, thorough response.

Thought about Cline setup and capabilities for 4 seconds

Trả lời

下面是一份极其详细的说明,告诉你当你在「Cline: Open In New Tab」的界面中输入了 API Key,并看到了「New in Cline v2.2 …」的欢迎信息后,究竟意味着什么、是否说明已经完成安装、以及接下来可以做些什么。


一、你看到的界面说明了什么?

  1. 成功获取并保存了 API Key

    • 当你输入 API Key 并被接受后,Cline 会显示一个欢迎或提示信息,告诉你“New in Cline v2.2 …”之类的功能概览,说明 Cline 已经能够与云端服务正常通信。
    • 这基本代表:你已经成功安装并配置好了 Cline 的 API Key,现在可以正常使用 Cline 的各项功能。
  2. 提示“New in Cline v2.2 Add custom tools to Cline using MCP!”

    • 这是 Cline 的版本更新介绍,也说明你目前的扩展版本已具备新的 MCP(Model Context Protocol)相关功能。
    • 该提示告诉你可以通过「Add a tool that...」的语句,让 Cline 创建并添加自定义工具(MCP servers)。
  3. “What can I do for you?”

    • 这行字表示 Cline 已经处于等待你输入指令或任务的状态,随时可以响应你的请求,例如创建/编辑文件、执行终端命令、浏览器自动化等。

简言之:如果你能看到“New in Cline v2.2…”并且 Cline 在说“What can I do for you?”,那就代表——Cline 已经就绪。下一步,你可以开始让它为你执行各种编程或自动化任务了。


二、确认是否“一切就绪”的具体方式

如果想进一步确认当前的配置是否完整、Cline 是否能够正常调用 API,可以留意以下几点:

  1. 查看顶部或界面上的 API 提示

    • 如果 API Key 未设置或无效,Cline 通常会在界面上方或“API Provider”区域继续显示“Missing API Key”或“Please set an API Provider”。
    • 现在你看到的却是「New in Cline v2.2…」等功能介绍,说明它并未抱怨缺 Key,也没有提示“Missing API Key”,从而进一步印证Key 已填写成功
  2. 查看扩展的设置

    • 如果你想彻底确认,可在 VS Code 的左下角点击「齿轮图标」-> 选择「Settings」(或在顶部菜单点「File -> Preferences -> Settings」),然后在设置页面搜索“Cline”或“Roo-Cline”。
    • 在该设置项里,你会发现一个名为 “API Key” 或者 “OpenRouter API Key” 的字段,确认它已经被存储(有时显示为“*********”隐藏字符),这表示 Key 已经生效。
  3. 尝试简单请求

    • 你可以在 Cline 对话输入框中输入一条简单指令,比如:
      Hello Cline, can you tell me the current date?
      
    • 如果 Cline 可以正常进行回复,而且没有出现“API Key 错误”或“Missing API Provider”之类的提示,就说明它已经在使用你的 Key 与后台模型通信了。

三、下一步可以做什么?

现在你已经确认了 Cline 安装和配置完毕,下面是一些常见操作示例,帮助你进一步体验 Cline 的强大功能。

  1. 让 Cline 检测并修复项目中的问题

    • 在 VS Code 的「Explorer」里打开一个项目文件夹。
    • 回到「Cline」的对话框,输入:
      Could you scan my project for any obvious errors or improvements?
      
    • Cline 可能会提示需要“读取文件”权限。你点 “Approve” 后,它就会开始查看目录和文件,找到潜在错误并给出修复建议或自动生成修复 Diff。
  2. 让 Cline 创建或编辑文件

    • 在对话框中,输入:
      Please create a new file named "hello.ts" with a simple TypeScript function to say hello.
      
    • Cline 会展示一个 Diff,告诉你它打算创建 hello.ts 并添加一些 TypeScript 代码;你可以在对话框中点 “Approve” 来确定文件的创建。
  3. 执行终端命令

    • 输入:
      Please run "npm install" to install dependencies.
      
    • 当 Cline请求执行 npm install 时,会弹出一个对话框,让你选择“Approve”或“Deny”。点击 “Approve” 后,VS Code 集成终端会显示实际安装过程。
    • Cline 可在安装完成后继续检查日志,如发现错误会告诉你并建议修复方案。
  4. 使用 MCP 来添加自定义工具

    • 你可以对 Cline 说:
      Add a tool that fetches Jira tickets.
      
    • 如果你有 Jira 项目要管理,Cline 会尝试帮你创建一个 MCP server,用于自动获取和展示 Jira tickets。
    • Cline 会生成必要的配置文件和脚本,并在扩展中安装它们,同样每一步都要你审批。
  5. 在浏览器中进行自动化交互

    • 如果你让 Cline 启动一个本地 web server(如 npm run dev),再指令它“在浏览器中打开本地地址并点击某个按钮”,Cline 会弹出对话框请求你同意使用浏览器自动化。
    • 你批准后,它会在无头(headless)浏览器中执行测试,并将实时日志回传给你,甚至截屏给你看。

四、常见的界面反馈与含义

  1. “What can I do for you?”

    • 表示 Cline 处于空闲状态,可以听从你的新指令或问题。
  2. “Awaiting user approval for file write/terminal command/browser usage”

    • Cline 正等待你通过“Approve”或“Deny”进行授权。
  3. Diff 视图

    • 当 Cline想要编辑文件时,会展示一个差异比较(Diff)视图,让你看到每一行的修改之处。
  4. “Add a tool that...”

    • 这是 Cline 新增的 MCP 功能提示,用于添加自定义工具。
  5. 错误提示

    • 如果 Key 过期或无法使用,你会在对话框中直接看到“API Key invalid”或“Missing API Key”警告。
    • 既然你已看到“New in Cline v2.2”,多半不会出现此种情况。

五、总结

  • “是不是已经可以了?” —— 是的,已经可以了!
    你现在看到的「New in Cline v2.2」以及「What can I do for you?」表示 Cline 已成功完成了初始化,具备了调用模型的能力。
  • 下一步操作
    • 你可以充分利用 Cline 的自动写代码、编辑文件、执行命令、浏览器自动化、MCP 自定义工具等特性,像与一个高级助理一样进行互动。
    • 每当 Cline 请求权限时,你都能通过「Approve/Deny」对它的操作进行掌控,保证安全与可控。

借助这些步骤与说明,你可以放心地展开对 Cline 各种功能的探索,享受这款agentic coding利器为你的开发和创意工作带来的高效与惊喜。祝你使用愉快,若有任何疑问或进阶需求,也可随时在官方社区或 Discord 获得更多帮助。

Chia sẻ Q&A này