> ## Documentation Index
> Fetch the complete documentation index at: https://docs.devin.ai/llms.txt
> Use this file to discover all available pages before exploring further.

# 欢迎使用 Windsurf Plugins

> 安装并设置适用于 JetBrains、VS Code、Visual Studio、Vim、NeoVim、Jupyter、Chrome 及其他 IDE 的 Windsurf Plugins，获得 AI 编码辅助。

**Windsurf Plugins** 为你常用的 IDE 或编辑器提供 AI 编码辅助。

<Card title="团队与企业" icon="users" href="/zh/desktop/accounts/teams-getting-started">
  开始为你的团队设置吧！
</Card>

<CardGroup cols={3}>
  <Card
    title="Cascade"
    icon={
<svg
width="25"
height="25"
viewBox="0 0 1292 1292"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
  d="M1195 599C1195 848.08 993.08 1050 744 1050C494.92 1050 293 848.08 293 599C293 349.92 494.92 148 744 148C993.08 148 1195 349.92 1195 599ZM411.5 599C411.5 782.635 560.365 931.5 744 931.5C927.635 931.5 1076.5 782.635 1076.5 599C1076.5 415.365 927.635 266.5 744 266.5C560.365 266.5 411.5 415.365 411.5 599Z"
  fill="#34E8BB"
/>
<path
  d="M1096.19 1053.62C1116.8 1078.03 1113.86 1114.77 1087.65 1133.04C1002.41 1192.46 903.441 1229.92 799.584 1241.61C676.505 1255.46 552.082 1232.51 442.049 1175.65C332.016 1118.79 241.314 1030.58 181.415 922.172C130.87 830.693 104.172 728.301 103.33 624.396C103.071 592.449 131.338 568.79 163.173 571.479C195.007 574.168 218.29 602.208 219.218 634.143C221.573 715.175 243.206 794.78 282.679 866.22C331.512 954.6 405.457 1026.51 495.161 1072.87C584.866 1119.22 686.302 1137.94 786.643 1126.64C867.75 1117.51 945.198 1089.11 1012.66 1044.15C1039.24 1026.44 1075.58 1029.21 1096.19 1053.62Z"
  fill="#34E8BB"
/>
<path
  d="M177.334 450.08C146.261 442.514 126.947 411.072 137.349 380.829C160.687 312.983 195.56 249.512 240.566 193.267C285.571 137.023 339.851 89.0802 400.928 51.4326C428.153 34.6511 463.065 46.5999 477.261 75.2582C491.457 103.917 479.508 138.389 452.641 155.738C406.542 185.506 365.436 222.584 330.994 265.627C296.552 308.67 269.39 356.906 250.456 408.411C239.421 438.428 208.408 457.646 177.334 450.08Z"
  fill="#34E8BB"
/>
</svg>
}
    href="/zh/windsurf/plugins/cascade/cascade-overview"
  >
    Windsurf 的代码 Agent。
  </Card>

  <Card title="用量" icon="bars-progress" href="/zh/desktop/accounts/usage">
    点数与用量。
  </Card>

  <Card title="模型" icon="robot" href="/zh/windsurf/plugins/cascade/models">
    可用模型。
  </Card>
</CardGroup>

<div id="jetbrains-local">
  ## JetBrains (本地)
</div>

<Note>
  以下步骤不适用于使用自托管套餐的 Enterprise 客户。
  如果你是 Enterprise 用户，请参阅你所在 Enterprise 门户中的相关指示。
</Note>

<Note>
  对于远程开发环境，请改用 “Windsurf (Remote Development)” 插件。请参阅下方的[远程开发](#remote-development)部分。
</Note>

<Steps>
  <Step title="安装本地插件">
    在你的 JetBrains IDE 中打开 `Plugins` 菜单。在 Mac 上，快捷键是 `⌘+,`；在 Linux/Windows 上，快捷键是 `Ctrl+,`。你也可以通过设置菜单进入。
    搜索并安装 Windsurf 插件。插件加载器会提示你重启 IDE。

    <Frame>
      <img src="https://mintcdn.com/cognitionai/-PTA3zzo2bR9Qfc8/desktop/assets/jetbrains_plugin_install.png?fit=max&auto=format&n=-PTA3zzo2bR9Qfc8&q=85&s=dd4f7af540fb84d92187b363bca749e5" width="1368" height="1052" data-path="desktop/assets/jetbrains_plugin_install.png" />
    </Frame>
  </Step>

  <Step title="等待语言服务器">
    安装成功后，Windsurf 会开始下载语言服务器。
    该程序会与我们的 API 通信，以便你使用 Windsurf 的 AI 功能。
    下载通常需要 10 到 20 秒，但具体速度可能取决于你的网络连接。
    在此期间，你可以照常使用 IDE。

    你应该会在右下角看到一条显示下载进度的通知。

    <Frame>
      <img src="https://mintcdn.com/cognitionai/-PTA3zzo2bR9Qfc8/desktop/assets/jetbrains_ls_download_bar.png?fit=max&auto=format&n=-PTA3zzo2bR9Qfc8&q=85&s=7c42a7e984909d4c116541d29e27c821" width="1174" height="158" data-path="desktop/assets/jetbrains_ls_download_bar.png" />
    </Frame>
  </Step>

  <Step title="授权">
    打开一个项目。Windsurf 会通过右下角的通知弹窗提示你登录，并附上跳转到登录页面的链接。
    你也可以点击底部状态栏右侧的小组件，并在那里选择登录选项。

    <Frame>
      <img src="https://mintcdn.com/cognitionai/-PTA3zzo2bR9Qfc8/desktop/assets/jetbrains_login_widget.png?fit=max&auto=format&n=-PTA3zzo2bR9Qfc8&q=85&s=b3d4fedf3729ea04c72acf6ee7db8fc7" width="690" height="230" data-path="desktop/assets/jetbrains_login_widget.png" />
    </Frame>

    如果你尚未登录，系统会提示你登录或创建账户。

    <Frame>
      <img src="https://mintcdn.com/cognitionai/-PTA3zzo2bR9Qfc8/desktop/assets/login_prompt_webpage.png?fit=max&auto=format&n=-PTA3zzo2bR9Qfc8&q=85&s=2dc52c3a7979daa299dc7b652d74cad5" width="1896" height="1442" data-path="desktop/assets/login_prompt_webpage.png" />
    </Frame>

    登录后，网页会提示你可以返回 IDE。

    <Frame>
      <img src="https://mintcdn.com/cognitionai/-PTA3zzo2bR9Qfc8/desktop/assets/login_successful_webpage.png?fit=max&auto=format&n=-PTA3zzo2bR9Qfc8&q=85&s=c4b3cfae5544a8dfcb6199fd3cf3af80" width="1702" height="450" data-path="desktop/assets/login_successful_webpage.png" />
    </Frame>
  </Step>

  <Step title="全部完成！">
    现在已全部设置完成。Windsurf 的 AI 功能——自动补全、聊天、命令等——现已可用。

    你可以随时点击右下角状态栏中的小组件来查看状态。
    登录后，你将可以访问 Windsurf 设置和其他控制项。

    如果你想抢先体验新功能，请点击 “Switch to Pre-Release”
    试用插件的[最新预发布版本](https://plugins.jetbrains.com/plugin/20540-windsurf-plugin-for-python-js-java-go--/versions/pre-release)。

    <Frame>
      <img src="https://mintcdn.com/cognitionai/-PTA3zzo2bR9Qfc8/desktop/assets/jetbrains_status_bar.png?fit=max&auto=format&n=-PTA3zzo2bR9Qfc8&q=85&s=b6306ecf96e52ca33a184a1b6ea76912" width="688" height="542" data-path="desktop/assets/jetbrains_status_bar.png" />
    </Frame>
  </Step>
</Steps>

<div id="remote-development">
  ### 远程开发
</div>

如果你在远程开发环境中使用 JetBrains IDE，则需要使用单独的 “Windsurf (Remote Development)” 插件。

如需使用更高级的 Agent 式 AI 能力和前沿功能，我们强烈建议使用原生 Windsurf Editor 或 JetBrains 本地插件。该插件仍会持续接收最新模型、兼容性更新和缺陷修复，但不包含 Windsurf Editor 独有的新功能。

<div id="requirements">
  #### 要求
</div>

* JetBrains IDE 版本 2025.1.3 或更高版本

<div id="installation-steps">
  #### 安装步骤
</div>

<Steps>
  <Step title="在主机端安装">
    在你的 JetBrains IDE 中打开 `Plugins (Host)` 菜单。在 Mac 上，快捷键是 `⌘+,`；在 Linux/Windows 上，快捷键是 `Ctrl+,`。你也可以从设置菜单进入。
    搜索 **"Windsurf (Remote Development)"** 并安装。
    出现提示后，重启 IDE。

    <Frame>
      <img src="https://mintcdn.com/cognitionai/-PTA3zzo2bR9Qfc8/desktop/assets/jetbrains_remote_plugin_install_host.png?fit=max&auto=format&n=-PTA3zzo2bR9Qfc8&q=85&s=773357231fb9838593fdceed36a10383" width="1494" height="1110" data-path="desktop/assets/jetbrains_remote_plugin_install_host.png" />
    </Frame>
  </Step>

  <Step title="在客户端安装">
    打开 `Plugins (Client)` 菜单，搜索 **"Windsurf (Remote Development)"**。
    安装插件，然后再次重启 IDE。

    <Frame>
      <img src="https://mintcdn.com/cognitionai/-PTA3zzo2bR9Qfc8/desktop/assets/jetbrains_remote_plugin_install_client.png?fit=max&auto=format&n=-PTA3zzo2bR9Qfc8&q=85&s=3537fc3ebc5fe924a6d1c5f342e8a433" width="1496" height="1098" data-path="desktop/assets/jetbrains_remote_plugin_install_client.png" />
    </Frame>
  </Step>

  <Step title="等待语言服务器">
    在主机端安装插件后，Windsurf 会开始下载语言服务器。
    该程序会与我们的 API 通信，使你能够使用 Windsurf 的 AI 功能。
    下载通常需要 10 到 20 秒，但具体速度可能取决于你的网络连接。
    在此期间，你可以像平常一样继续使用 IDE。

    你应该会在右下角看到一条通知，显示下载进度。

    <Frame>
      <img src="https://mintcdn.com/cognitionai/-PTA3zzo2bR9Qfc8/desktop/assets/jetbrains_ls_download_bar.png?fit=max&auto=format&n=-PTA3zzo2bR9Qfc8&q=85&s=7c42a7e984909d4c116541d29e27c821" width="1174" height="158" data-path="desktop/assets/jetbrains_ls_download_bar.png" />
    </Frame>
  </Step>

  <Step title="授权">
    语言服务器下载完成后，Windsurf 会通过右下角的通知弹窗提示你登录，并提供前往登录页面的链接。
    你也可以点击底部状态栏右侧的小组件，并在其中选择登录选项。

    <Frame>
      <img src="https://mintcdn.com/cognitionai/-PTA3zzo2bR9Qfc8/desktop/assets/jetbrains_login_widget.png?fit=max&auto=format&n=-PTA3zzo2bR9Qfc8&q=85&s=b3d4fedf3729ea04c72acf6ee7db8fc7" width="690" height="230" data-path="desktop/assets/jetbrains_login_widget.png" />
    </Frame>

    如果你尚未登录，系统会提示你登录或创建账户。

    <Frame>
      <img src="https://mintcdn.com/cognitionai/-PTA3zzo2bR9Qfc8/desktop/assets/login_prompt_webpage.png?fit=max&auto=format&n=-PTA3zzo2bR9Qfc8&q=85&s=2dc52c3a7979daa299dc7b652d74cad5" width="1896" height="1442" data-path="desktop/assets/login_prompt_webpage.png" />
    </Frame>

    登录完成后，网页会提示你可以返回 IDE。

    <Frame>
      <img src="https://mintcdn.com/cognitionai/-PTA3zzo2bR9Qfc8/desktop/assets/login_successful_webpage.png?fit=max&auto=format&n=-PTA3zzo2bR9Qfc8&q=85&s=c4b3cfae5544a8dfcb6199fd3cf3af80" width="1702" height="450" data-path="desktop/assets/login_successful_webpage.png" />
    </Frame>
  </Step>

  <Step title="全部完成！">
    设置已完成。Windsurf 的 AI 功能现已可在你的远程环境中使用。
  </Step>
</Steps>

<div id="older-plugins">
  ## 旧版插件
</div>

我们强烈建议使用原生的 Windsurf Editor 或 JetBrains 本地插件，它们具备更先进的 Agent 式 AI 能力和前沿特性。
以下插件目前处于维护模式。

<Tabs>
  <Tab title="Visual Studio Code">
    <Steps>
      <Step title="安装插件">
        在 VS Code Marketplace 中找到 Windsurf Plugin (原名 Codeium) 并安装。

        <Frame>
          <img src="https://mintcdn.com/cognitionai/hxeMffzXgF_RWx-U/desktop/assets/vscode_extension_page.png?fit=max&auto=format&n=hxeMffzXgF_RWx-U&q=85&s=50e7c72b33c68f441e084184fb50a204" width="3100" height="2300" data-path="desktop/assets/vscode_extension_page.png" />
        </Frame>
      </Step>

      <Step title="授权">
        安装后，VS Code 会在右下角弹出通知，提示你登录 Windsurf。
        你也可以通过左侧边栏底部的 Profile 图标登录 Windsurf。

        <Frame>
          <img src="https://mintcdn.com/cognitionai/hxeMffzXgF_RWx-U/desktop/assets/vscode_login_init_left.png?fit=max&auto=format&n=hxeMffzXgF_RWx-U&q=85&s=d6d0292cb06afbdbde0c96e7dacbc641" width="1870" height="360" data-path="desktop/assets/vscode_login_init_left.png" />
        </Frame>

        <Note>如果你看到错误消息，提示浏览器无法从 Visual Studio Code 打开链接，你可能需要更新浏览器并重新启动授权流程。</Note>
        如果你尚未登录，系统会提示你登录或创建账户。

        <Frame>
          <img src="https://mintcdn.com/cognitionai/-PTA3zzo2bR9Qfc8/desktop/assets/login_prompt_webpage.png?fit=max&auto=format&n=-PTA3zzo2bR9Qfc8&q=85&s=2dc52c3a7979daa299dc7b652d74cad5" width="1896" height="1442" data-path="desktop/assets/login_prompt_webpage.png" />
        </Frame>

        登录后，你将被重定向回 Visual Studio Code。
        <Note>如果你使用的是基于浏览器的 VS Code IDE (如 GitPod 或 Codespaces) ，系统会引导你查看如何通过提供访问令牌来完成身份验证的指示。</Note>
      </Step>

      <Step title="等待语言服务器">
        登录后，Windsurf 会开始下载语言服务器。
        它会与我们的 API 通信，让你能够使用 Windsurf 的 AI 功能。
        下载通常需要 10 到 20 秒，不过速度可能取决于你的网络连接。
        在此期间，你可以照常使用 VS Code。
      </Step>

      <Step title="全部完成！">
        现在一切就绪。Windsurf 的 AI 功能——自动补全、聊天和命令——现已可用。
      </Step>
    </Steps>
  </Tab>

  <Tab title="Vim / Neovim">
    ### 扩展安装

    <Steps>
      <Step title="安装插件">
        按照公开的 [`codeium.vim` 仓库](https://github.com/Exafunction/codeium.vim)中 **Get Started** 部分的指示操作即可。就是这么简单！
      </Step>
    </Steps>

    ### 使用 Windsurf 插件

    <Steps>
      <Step title="设置">
        虽然 Windsurf 支持多种语言，这里我们以 Python 为例进行演示。创建一个新文件 `test.py`。
      </Step>

      <Step title="根据代码">
        Windsurf 可以根据不完整的函数头建议多行代码：

        <Frame>
          <img src="https://mintcdn.com/cognitionai/hxeMffzXgF_RWx-U/desktop/assets/vim_tutorial/snippet_one.png?fit=max&auto=format&n=hxeMffzXgF_RWx-U&q=85&s=56cceeb4e57cb230ed4402d80e9321d9" alt="代码片段一" width="508" height="260" data-path="desktop/assets/vim_tutorial/snippet_one.png" />
        </Frame>
      </Step>

      <Step title="接受建议">
        按 **Tab** 键即可接受。
      </Step>

      <Step title="根据注释">
        Windsurf 也能理解注释：

        <Frame>
          <img src="https://mintcdn.com/cognitionai/hxeMffzXgF_RWx-U/desktop/assets/vim_tutorial/snippet_two.png?fit=max&auto=format&n=hxeMffzXgF_RWx-U&q=85&s=1cb4d83f6c1e5eb79b12b87e7d07b756" alt="代码片段二" width="712" height="392" data-path="desktop/assets/vim_tutorial/snippet_two.png" />
        </Frame>
      </Step>
    </Steps>
  </Tab>

  <Tab title="Visual Studio">
    ### 扩展安装

    <Steps>
      <Step title="打开扩展市场">
        在 Visual Studio 菜单栏中，点击 **Extensions → Manage Extensions**。

        <Frame>
          <img src="https://mintcdn.com/cognitionai/hxeMffzXgF_RWx-U/desktop/assets/visual_studio_tutorial/manage_extensions.png?fit=max&auto=format&n=hxeMffzXgF_RWx-U&q=85&s=ec281edf92c6e491f1e9378396ed47af" alt="管理扩展" width="636" height="171" data-path="desktop/assets/visual_studio_tutorial/manage_extensions.png" />
        </Frame>
      </Step>

      <Step title="安装 Windsurf 插件">
        在 **Manage Extensions** 中，点击 **Visual Studio Marketplace**，搜索 **Windsurf**，然后点击 **Download**。

        <Frame>
          <img src="https://mintcdn.com/cognitionai/hxeMffzXgF_RWx-U/desktop/assets/visual_studio_tutorial/install.png?fit=max&auto=format&n=hxeMffzXgF_RWx-U&q=85&s=0f44e8fb5cbb523a8c0943e828e4d568" alt="安装插件" width="1413" height="985" data-path="desktop/assets/visual_studio_tutorial/install.png" />
        </Frame>
      </Step>

      <Step title="重新启动 Visual Studio">
        关闭窗口并重新启动 Visual Studio。
      </Step>

      <Step title="登录 Windsurf 插件">
        打开或创建一个项目。系统会打开浏览器窗口，并提示你登录。
      </Step>

      <Step title="创建账户">
        如果你还没有账户，系统会将你重定向到创建账户页面。
      </Step>

      <Step title="全部完成！">
        现在一切就绪。Windsurf 的 AI 功能现已可在 Visual Studio 中使用。
      </Step>
    </Steps>

    ### 使用 Windsurf 插件

    <Steps>
      <Step title="设置">
        虽然 Windsurf 支持多种语言，这里我们以 C# 为例进行演示。创建或打开一个 C# 文件。
      </Step>

      <Step title="从代码开始">
        Windsurf 可以根据部分函数签名补全多行代码：

        <Frame>
          <img src="https://mintcdn.com/cognitionai/hxeMffzXgF_RWx-U/desktop/assets/visual_studio_tutorial/suggestion.png?fit=max&auto=format&n=hxeMffzXgF_RWx-U&q=85&s=509e9668b87c83b58da01f24d5d7e8d6" alt="建议示例" width="1128" height="461" data-path="desktop/assets/visual_studio_tutorial/suggestion.png" />
        </Frame>
      </Step>

      <Step title="接受建议">
        按 **Tab** 键即可接受。

        <Frame>
          <img src="https://mintcdn.com/cognitionai/hxeMffzXgF_RWx-U/desktop/assets/visual_studio_tutorial/post_accept.png?fit=max&auto=format&n=hxeMffzXgF_RWx-U&q=85&s=dbbd4947df7b36439b12455e291d321d" alt="接受后" width="1215" height="514" data-path="desktop/assets/visual_studio_tutorial/post_accept.png" />
        </Frame>
      </Step>
    </Steps>
  </Tab>

  <Tab title="Jupyter Notebook">
    ### 安装 Windsurf 插件

    <Steps>
      <Step title="安装 Jupyter 扩展">
        打开一个新的 Jupyter Lab 会话。在单元格中粘贴以下内容，然后按 `Shift+Enter` 运行：

        ```python theme={null}
        import sys
        !{sys.executable} -m pip install -U pip --user
        !{sys.executable} -m pip install -U codeium-jupyter --user
        ```

        如果你在虚拟环境中，请运行：

        ```python theme={null}
        import sys
        !{sys.executable} -m pip install -U pip
        !{sys.executable} -m pip install -U codeium-jupyter
        ```

        命令执行完成后，关闭笔记本并停止 Jupyter 服务器。
      </Step>

      <Step title="启动 Jupyter">
        重新启动 Jupyter 并打开一个笔记本。打开设置 (<kbd>Ctrl</kbd> + <kbd>,</kbd>) ，然后导航到 **Windsurf** 部分。你会看到企业版 URL 和令牌字段。

        <Frame>
          <img src="https://mintcdn.com/cognitionai/-PTA3zzo2bR9Qfc8/desktop/assets/jupyter_tutorial/codeium_settings.png?fit=max&auto=format&n=-PTA3zzo2bR9Qfc8&q=85&s=a48ed36e9986ebce74a70957d0de9a56" alt="设置界面" width="1025" height="301" data-path="desktop/assets/jupyter_tutorial/codeium_settings.png" />
        </Frame>

        点击 **获取 Windsurf 身份验证令牌** 并按照链接中的提示操作。然后将令牌粘贴回设置对话框。

        <Frame>
          <img src="https://mintcdn.com/cognitionai/-PTA3zzo2bR9Qfc8/desktop/assets/jupyter_tutorial/settings_menu.png?fit=max&auto=format&n=-PTA3zzo2bR9Qfc8&q=85&s=e65377b54144633bcceeccc570112a64" alt="设置菜单" width="330" height="89" data-path="desktop/assets/jupyter_tutorial/settings_menu.png" />
        </Frame>

        <Note>如果你找不到 Windsurf 设置，很可能是因为你没有重新启动 Jupyter。停止服务器 (Ctrl+C) ，然后使用 <code>jupyter lab</code> 再次启动。</Note>
      </Step>

      <Step title="创建账户">
        如果你还没有 Windsurf 账户，系统会提示你创建一个。
      </Step>

      <Step title="身份验证">
        登录后，复制令牌并将其粘贴到设置对话框中。

        <Frame>
          <img src="https://mintcdn.com/cognitionai/-PTA3zzo2bR9Qfc8/desktop/assets/jupyter_tutorial/auth_token_setting.png?fit=max&auto=format&n=-PTA3zzo2bR9Qfc8&q=85&s=797b0858e6c28fdd3788dd4da99738fd" alt="身份验证令牌字段" width="818" height="326" data-path="desktop/assets/jupyter_tutorial/auth_token_setting.png" />
        </Frame>
      </Step>

      <Step title="全部完成！">
        现在一切就绪。Windsurf 的 AI 功能现已在 Jupyter 中可用。
      </Step>
    </Steps>

    ### 使用 Windsurf 插件

    <Steps>
      <Step title="根据代码生成">
        Windsurf 可以根据部分函数头建议多行代码：

        <Frame>
          <img src="https://mintcdn.com/cognitionai/-PTA3zzo2bR9Qfc8/desktop/assets/jupyter_tutorial/snippet_one.png?fit=max&auto=format&n=-PTA3zzo2bR9Qfc8&q=85&s=937093abad3726215c8dc00360dc3077" alt="代码片段一" width="1420" height="346" data-path="desktop/assets/jupyter_tutorial/snippet_one.png" />
        </Frame>
      </Step>

      <Step title="接受建议">按 **Tab** 键即可接受建议。</Step>

      <Step title="根据注释生成">
        Windsurf 也能理解注释：

        <Frame>
          <img src="https://mintcdn.com/cognitionai/-PTA3zzo2bR9Qfc8/desktop/assets/jupyter_tutorial/snippet_two.png?fit=max&auto=format&n=-PTA3zzo2bR9Qfc8&q=85&s=0d61f52f85e4b65729f665b24555af6a" alt="代码片段二" width="1741" height="518" data-path="desktop/assets/jupyter_tutorial/snippet_two.png" />
        </Frame>
      </Step>
    </Steps>
  </Tab>

  <Tab title="Chrome">
    ### 安装 Windsurf

    <Steps>
      <Step title="安装 Chrome 扩展">
        访问 [Chrome Web Store 页面](https://chrome.google.com/webstore/detail/codeium/hobjkcpmjhlegmobgonaagepfckjkceh)，然后点击 **Add to Chrome**。

        <Frame>
          <img src="https://mintcdn.com/cognitionai/-PTA3zzo2bR9Qfc8/desktop/assets/chrome_tutorial/chrome_web_store.png?fit=max&auto=format&n=-PTA3zzo2bR9Qfc8&q=85&s=c053874a5b39229322bf55675ce8050d" alt="Chrome Web Store" width="2070" height="1608" data-path="desktop/assets/chrome_tutorial/chrome_web_store.png" />
        </Frame>
      </Step>

      <Step title="固定扩展">
        打开扩展下拉菜单并点击 **Pin** 图标，这样 Windsurf 图标就会始终显示。

        <Frame>
          <img src="https://mintcdn.com/cognitionai/-PTA3zzo2bR9Qfc8/desktop/assets/chrome_tutorial/pin_extension.png?fit=max&auto=format&n=-PTA3zzo2bR9Qfc8&q=85&s=2a53cf606cf60491cfa8098d56a04a84" alt="固定扩展" width="1106" height="674" data-path="desktop/assets/chrome_tutorial/pin_extension.png" />
        </Frame>
      </Step>

      <Step title="登录">
        扩展会自动打开登录页面。如果没有，请点击扩展图标并按链接操作。

        <Frame>
          <img src="https://mintcdn.com/cognitionai/-PTA3zzo2bR9Qfc8/desktop/assets/chrome_tutorial/sign_in.png?fit=max&auto=format&n=-PTA3zzo2bR9Qfc8&q=85&s=38a23f844da99a94f3c5fab13cda037e" alt="登录" width="1106" height="674" data-path="desktop/assets/chrome_tutorial/sign_in.png" />
        </Frame>
      </Step>

      <Step title="完成！">
        你已全部设置完毕。试试[创建一个新的 Colab 笔记本](https://colab.research.google.com/#create=true)。

        <Frame>
          <img src="https://mintcdn.com/cognitionai/-PTA3zzo2bR9Qfc8/desktop/assets/chrome_tutorial/signed_in.png?fit=max&auto=format&n=-PTA3zzo2bR9Qfc8&q=85&s=aa954333be317ef5b43bbd2efead831a" alt="已登录" width="1106" height="674" data-path="desktop/assets/chrome_tutorial/signed_in.png" />
        </Frame>
      </Step>
    </Steps>

    ### 使用 Windsurf

    <Steps>
      <Step title="从代码开始">
        Windsurf 可以根据不完整的函数头建议多行代码：

        <Frame>
          <img src="https://mintcdn.com/cognitionai/-PTA3zzo2bR9Qfc8/desktop/assets/chrome_tutorial/snippet_one.png?fit=max&auto=format&n=-PTA3zzo2bR9Qfc8&q=85&s=c385f4aad6c7f6dd37375dd008f42faa" alt="代码片段一" width="1106" height="674" data-path="desktop/assets/chrome_tutorial/snippet_one.png" />
        </Frame>
      </Step>

      <Step title="接受建议">按 **Tab** 键即可接受建议。</Step>

      <Step title="从注释开始">
        Windsurf 也能理解注释：

        <Frame>
          <img src="https://mintcdn.com/cognitionai/-PTA3zzo2bR9Qfc8/desktop/assets/chrome_tutorial/snippet_two.png?fit=max&auto=format&n=-PTA3zzo2bR9Qfc8&q=85&s=ea9c51230baaa6e15b0281b7c58f9cc2" alt="代码片段二" width="1106" height="766" data-path="desktop/assets/chrome_tutorial/snippet_two.png" />
        </Frame>
      </Step>
    </Steps>
  </Tab>

  <Tab title="Eclipse">
    ### 扩展安装

    <Steps>
      <Step title="拖动安装按钮">
        访问 [Eclipse Marketplace 上的 Windsurf 插件页面](https://marketplace.eclipse.org/content/codeium)，将 **Install** 按钮拖到 Eclipse 工具栏中。

        <Frame>
          <img src="https://mintcdn.com/cognitionai/-PTA3zzo2bR9Qfc8/desktop/assets/eclipse_tutorial/drag.png?fit=max&auto=format&n=-PTA3zzo2bR9Qfc8&q=85&s=e4331b14785272e8cbb239c1cef54cc3" alt="拖动安装按钮" width="1430" height="732" data-path="desktop/assets/eclipse_tutorial/drag.png" />
        </Frame>
      </Step>

      <Step title="确认所选功能">
        在 **Confirm Selected Features** 提示中，点击 **Confirm**。

        <Frame>
          <img src="https://mintcdn.com/cognitionai/-PTA3zzo2bR9Qfc8/desktop/assets/eclipse_tutorial/confirm.png?fit=max&auto=format&n=-PTA3zzo2bR9Qfc8&q=85&s=f82052920f3911172320e6ada23bd925" alt="确认功能" width="1192" height="666" data-path="desktop/assets/eclipse_tutorial/confirm.png" />
        </Frame>
      </Step>

      <Step title="信任未签名内容">
        在 **Trust Artifacts** 提示中，选择 **Unsigned**，然后点击 **Trust**。

        <Frame>
          <img src="https://mintcdn.com/cognitionai/-PTA3zzo2bR9Qfc8/desktop/assets/eclipse_tutorial/trust.png?fit=max&auto=format&n=-PTA3zzo2bR9Qfc8&q=85&s=1c32f353f88969e41656b9827026bd1c" alt="信任未签名内容" width="1154" height="590" data-path="desktop/assets/eclipse_tutorial/trust.png" />
        </Frame>
      </Step>

      <Step title="重启 Eclipse">
        出现提示后，重启 Eclipse 以完成安装。

        <Frame>
          <img src="https://mintcdn.com/cognitionai/-PTA3zzo2bR9Qfc8/desktop/assets/eclipse_tutorial/restart.png?fit=max&auto=format&n=-PTA3zzo2bR9Qfc8&q=85&s=a45ba0c0b8c12c6630560cf50f1a2958" alt="重启 Eclipse" width="1084" height="242" data-path="desktop/assets/eclipse_tutorial/restart.png" />
        </Frame>
      </Step>

      <Step title="创建 / 登录">
        浏览器打开后，登录或创建账户，然后返回 Eclipse。
      </Step>

      <Step title="全部完成！">现在已设置完毕。Windsurf 的 AI 功能现已可在 Eclipse 中使用。</Step>
    </Steps>

    ### 使用 Windsurf

    <Steps>
      <Step title="设置">
        虽然 Windsurf 支持多种语言，这里我们以 Java 为例进行演示。创建一个新文件 `Fib.java`。
      </Step>

      <Step title="从代码开始">
        Windsurf 可以根据不完整的函数声明建议多行代码：

        ```java theme={null}
        package test;

        public class Fib {

            public int fib(int n) {
            }

        }
        ```
      </Step>

      <Step title="接受建议">按 **Tab** 键接受建议。</Step>
    </Steps>
  </Tab>
</Tabs>
