> ## Documentation Index
> Fetch the complete documentation index at: https://docs.windsurf.com/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 向けに、AI を活用したコード支援機能を提供する Windsurf Plugins をインストールしてセットアップします。

**Windsurf Plugins** は、お好みの IDE やエディタに AI を活用したコード支援機能を提供します。

<Card title="Teams と Enterprise" icon="users" href="/ja/plugins/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="/ja/plugins/cascade/cascade-overview"
  >
    Windsurf のコード支援エージェント。
  </Card>

  <Card title="利用状況" icon="bars-progress" href="/ja/plugins/accounts/usage">
    クレジットと利用状況
  </Card>

  <Card title="モデル" icon="robot" href="/ja/plugins/cascade/models">
    利用可能な AIモデル
  </Card>
</CardGroup>

<div id="jetbrains-local">
  ## JetBrains（Local）
</div>

<Note>
  これらの手順は、セルフホストプランの Enterprise 組織には適用されません。
  Enterprise ユーザーの方は、Enterprise ポータル内の手順を参照してください。
</Note>

<Note>
  リモート開発環境では、代わりに「Windsurf (Remote Development)」プラグインを使用してください。下記の [Remote Development セクション](#remote-development)を参照してください。
</Note>

<Steps>
  <Step title="Install Local Plugin">
    JetBrains の IDE で `Plugins` メニューを開きます。ショートカットは Mac では `⌘+,`、Linux/Windows では `Ctrl+,` です。設定メニューからもアクセスできます。
    Windsurf プラグインを検索してインストールします。プラグインローダーから IDE の再起動を求められます。

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

  <Step title="Wait for Language Server">
    インストールが完了すると、Windsurf が言語サーバーのダウンロードを開始します。
    これは当社の API と通信して Windsurf の AI 機能を使えるようにするプログラムです。
    ダウンロードは通常 10〜20 秒ほどで完了しますが、速度はインターネット接続に依存する場合があります。
    その間も、普段どおり IDE を使用できます。

    右下にダウンロードの進行状況を示す通知が表示されます。

    <Frame>
      <img src="https://mintcdn.com/codeium/d8O4q6w3H2CjrirL/assets/jetbrains_ls_download_bar.png?fit=max&auto=format&n=d8O4q6w3H2CjrirL&q=85&s=83c47b7eb7dc9329b628a46e8907def2" width="1174" height="158" data-path="assets/jetbrains_ls_download_bar.png" />
    </Frame>
  </Step>

  <Step title="Authorize">
    プロジェクトを開きます。Windsurf は、右下に表示される通知ポップアップでログインページへのリンクを表示し、サインインを促します。
    もしくは、下部ステータスバー右側のウィジェットをクリックし、そこでログインオプションを選択してください。

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

    まだサインインしていない場合は、サインインするかアカウントを作成するよう求められます。

    <Frame>
      <img src="https://mintcdn.com/codeium/d8O4q6w3H2CjrirL/assets/login_prompt_webpage.png?fit=max&auto=format&n=d8O4q6w3H2CjrirL&q=85&s=672f1635e88f7046b5eb4b3105a2df7a" width="1896" height="1442" data-path="assets/login_prompt_webpage.png" />
    </Frame>

    サインインが完了すると、ウェブページに IDE に戻れる旨が表示されます。

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

  <Step title="All Done!">
    これで準備完了です。Windsurf の AI 機能 — Autocomplete、Chat、Command など — が利用可能になりました。

    いつでも、右下のステータスバーウィジェットをクリックしてステータスを確認できます。
    サインインしている場合は、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/codeium/d8O4q6w3H2CjrirL/assets/jetbrains_status_bar.png?fit=max&auto=format&n=d8O4q6w3H2CjrirL&q=85&s=88a5e47f629e1845d61e658b5deb78cb" width="688" height="542" data-path="assets/jetbrains_status_bar.png" />
    </Frame>
  </Step>
</Steps>

<div id="remote-development">
  ### リモート開発
</div>

リモート開発環境で使用する JetBrains の IDE の場合は、別途「Windsurf (Remote Development)」プラグインを使用する必要があります。

高度なエージェント型 AI や最新機能をご利用いただくには、ネイティブの Windsurf Editor または JetBrains 用のローカル Windsurf プラグインの使用を強く推奨します。このプラグインも引き続き最新の AI モデルへの対応、互換性アップデート、およびバグ修正は提供されますが、Windsurf Editor 限定の新機能は含まれません。

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

* JetBrains IDE バージョン 2025.1.3 以降

<div id="installation-steps">
  #### インストール手順
</div>

<Steps>
  <Step title="ホストにインストール">
    JetBrains の IDE で `Plugins (Host)` メニューを開きます。ショートカットは macOS が `⌘+,`、Linux/Windows が `Ctrl+,` です。設定メニューからも開けます。
    **"Windsurf (Remote Development)"** を検索してインストールします。
    指示に従い、IDE を再起動します。

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

  <Step title="クライアントにインストール">
    `Plugins (Client)` メニューを開き、**"Windsurf (Remote Development)"** を検索します。
    プラグインをインストールし、IDE をもう一度再起動します。

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

  <Step title="Language Server を待つ">
    ホストにプラグインをインストールすると、Windsurf が Language Server のダウンロードを開始します。
    これは Windsurf の AI 機能を使えるように、当社の API と通信するプログラムです。
    ダウンロードは通常 10〜20 秒ほどですが、所要時間は回線状況により前後します。
    その間も、IDE は通常どおり利用できます。

    右下にダウンロード進行状況の通知が表示されます。

    <Frame>
      <img src="https://mintcdn.com/codeium/d8O4q6w3H2CjrirL/assets/jetbrains_ls_download_bar.png?fit=max&auto=format&n=d8O4q6w3H2CjrirL&q=85&s=83c47b7eb7dc9329b628a46e8907def2" width="1174" height="158" data-path="assets/jetbrains_ls_download_bar.png" />
    </Frame>
  </Step>

  <Step title="認証">
    Language Server のダウンロード完了後、右下の通知ポップアップからログインページが開き、Windsurf へのサインインを求められます。
    または、下部ステータスバー右側のウィジェットをクリックし、そこでログインオプションを選択します。

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

    まだサインインしていない場合は、サインインするかアカウントを作成するよう求められます。

    <Frame>
      <img src="https://mintcdn.com/codeium/d8O4q6w3H2CjrirL/assets/login_prompt_webpage.png?fit=max&auto=format&n=d8O4q6w3H2CjrirL&q=85&s=672f1635e88f7046b5eb4b3105a2df7a" width="1896" height="1442" data-path="assets/login_prompt_webpage.png" />
    </Frame>

    サインインが完了すると、ウェブページに IDE に戻れる旨が表示されます。

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

  <Step title="完了">
    これで準備完了です。リモート環境で Windsurf の AI 機能を利用できるようになりました。
  </Step>
</Steps>

<div id="older-plugins">
  ## 旧プラグイン
</div>

より高度なエージェント型AI機能と最先端の機能を利用するため、ネイティブの Windsurf Editor または JetBrains 向けローカルプラグインの使用を強く推奨します。
以下のプラグインはメンテナンスモードでの提供となっています。

<Tabs>
  <Tab title="Visual Studio Code">
    <Steps>
      <Step title="プラグインをインストール">
        VS Code Marketplace で Windsurf Plugin（旧称 Codeium）を見つけてインストールします。

        <Frame>
          <img src="https://mintcdn.com/codeium/vRt4FQOyBeZpD2Pu/assets/vscode_extension_page.png?fit=max&auto=format&n=vRt4FQOyBeZpD2Pu&q=85&s=543ab4d80d64932510d9db4378301ec0" width="3100" height="2300" data-path="assets/vscode_extension_page.png" />
        </Frame>
      </Step>

      <Step title="認証">
        インストール後、VS Code の右下に Windsurf にログインするよう促す通知が表示されます。
        または、左サイドバー下部のプロフィールアイコンから Windsurf にログインすることもできます。

        <Frame>
          <img src="https://mintcdn.com/codeium/vRt4FQOyBeZpD2Pu/assets/vscode_login_init_left.png?fit=max&auto=format&n=vRt4FQOyBeZpD2Pu&q=85&s=40142fcfc135e01628f5545051b8120a" width="1870" height="360" data-path="assets/vscode_login_init_left.png" />
        </Frame>

        <Note>ブラウザが Visual Studio Code からのリンクを開けないというエラーメッセージが表示される場合、ブラウザを最新バージョンに更新したうえで、認証フローを再度実行する必要がある場合があります。</Note>
        アカウントをお持ちでない場合、またはオンラインでまだログインしていない場合は、アカウントの作成またはログインを求められます。

        <Frame>
          <img src="https://mintcdn.com/codeium/d8O4q6w3H2CjrirL/assets/login_prompt_webpage.png?fit=max&auto=format&n=d8O4q6w3H2CjrirL&q=85&s=672f1635e88f7046b5eb4b3105a2df7a" width="1896" height="1442" data-path="assets/login_prompt_webpage.png" />
        </Frame>

        サインインが完了すると、Visual Studio Code にリダイレクトされます。
        <Note>GitPod や Codespaces のようなブラウザベースの VS Code IDE を使用している場合は、アクセストークンを提供して認証を完了するための手順に案内されます。</Note>
      </Step>

      <Step title="言語サーバーのダウンロードを待つ">
        サインインが完了すると、Windsurf は言語サーバーのダウンロードを開始します。
        これは Windsurf の AI 機能を利用できるよう、当社の API と通信するプログラムです。
        ダウンロードには通常 10〜20 秒ほどかかりますが、インターネット接続状況によって速度は変わる場合があります。
        その間も、VS Code は通常どおり使用できます。
      </Step>

      <Step title="セットアップ完了">
        これで準備完了です。Windsurf の AI 機能（Autocomplete、Chat、Command）が利用できるようになりました。
      </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/codeium/vRt4FQOyBeZpD2Pu/assets/vim_tutorial/snippet_one.png?fit=max&auto=format&n=vRt4FQOyBeZpD2Pu&q=85&s=409f51d6a4a90405ac91cee23edee16b" alt="スニペット1" width="508" height="260" data-path="assets/vim_tutorial/snippet_one.png" />
        </Frame>
      </Step>

      <Step title="提案を受け入れる">
        **Tab** キーを押して提案を受け入れます。
      </Step>

      <Step title="コメントから">
        Windsurf はコメントも理解します。

        <Frame>
          <img src="https://mintcdn.com/codeium/vRt4FQOyBeZpD2Pu/assets/vim_tutorial/snippet_two.png?fit=max&auto=format&n=vRt4FQOyBeZpD2Pu&q=85&s=48c14b1d408acb68c97e5dac5c4ed421" alt="スニペット2" width="712" height="392" data-path="assets/vim_tutorial/snippet_two.png" />
        </Frame>
      </Step>
    </Steps>
  </Tab>

  <Tab title="Visual Studio">
    ### 拡張機能のインストール

    <Steps>
      <Step title="Extension Marketplace を開く">
        Visual Studio のメニューバーで、**Extensions → Manage Extensions** をクリックします。

        <Frame>
          <img src="https://mintcdn.com/codeium/vRt4FQOyBeZpD2Pu/assets/visual_studio_tutorial/manage_extensions.png?fit=max&auto=format&n=vRt4FQOyBeZpD2Pu&q=85&s=35d03bb50b8499567c41ea93fe8ea178" alt="Manage Extensions 画面" width="636" height="171" data-path="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/codeium/vRt4FQOyBeZpD2Pu/assets/visual_studio_tutorial/install.png?fit=max&auto=format&n=vRt4FQOyBeZpD2Pu&q=85&s=1c004b5b2883643ab0724038ae1df460" alt="プラグインのインストール" width="1413" height="985" data-path="assets/visual_studio_tutorial/install.png" />
        </Frame>
      </Step>

      <Step title="Visual Studio を再起動">
        ウィンドウを閉じて、Visual Studio を再起動します。
      </Step>

      <Step title="Windsurf プラグインにサインイン">
        プロジェクトを開くか新規作成します。ブラウザウィンドウが開き、サインインを求められます。
      </Step>

      <Step title="アカウントを作成">
        まだアカウントがない場合は、アカウント作成ページにリダイレクトされます。
      </Step>

      <Step title="完了">
        これで準備完了です。Visual Studio で Windsurf の AI 機能を利用できるようになりました。
      </Step>
    </Steps>

    ### Windsurf プラグインの使用方法

    <Steps>
      <Step title="セットアップ">
        Windsurf は多くの言語をサポートしていますが、ここでは C# を使って説明します。C# ファイルを作成するか開きます。
      </Step>

      <Step title="コードからの利用">
        Windsurf は、部分的な関数シグネチャから複数行のコードを提案できます。

        <Frame>
          <img src="https://mintcdn.com/codeium/vRt4FQOyBeZpD2Pu/assets/visual_studio_tutorial/suggestion.png?fit=max&auto=format&n=vRt4FQOyBeZpD2Pu&q=85&s=3ddaac8fa3871d2e99b4c6dfffc5f789" alt="提案の例" width="1128" height="461" data-path="assets/visual_studio_tutorial/suggestion.png" />
        </Frame>
      </Step>

      <Step title="提案を受け入れる">
        提案を受け入れるには **Tab** を押します。

        <Frame>
          <img src="https://mintcdn.com/codeium/vRt4FQOyBeZpD2Pu/assets/visual_studio_tutorial/post_accept.png?fit=max&auto=format&n=vRt4FQOyBeZpD2Pu&q=85&s=34e5899a41e604482b545aac8bb0bf8f" alt="提案を受け入れた後の状態" width="1215" height="514" data-path="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** セクションへ移動します。Enterprise 用 URL とトークンのフィールドが表示されます。

        <Frame>
          <img src="https://mintcdn.com/codeium/d8O4q6w3H2CjrirL/assets/jupyter_tutorial/codeium_settings.png?fit=max&auto=format&n=d8O4q6w3H2CjrirL&q=85&s=9f4d0045130c5c2bebe332eb1d61aeea" alt="設定 UI" width="1025" height="301" data-path="assets/jupyter_tutorial/codeium_settings.png" />
        </Frame>

        **Get Windsurf Authentication Token** をクリックし、リンク先の指示に従います。取得したトークンを設定ダイアログに貼り付けます。

        <Frame>
          <img src="https://mintcdn.com/codeium/d8O4q6w3H2CjrirL/assets/jupyter_tutorial/settings_menu.png?fit=max&auto=format&n=d8O4q6w3H2CjrirL&q=85&s=a22a4747a45c1f02e43ca6e8cf73c043" alt="設定メニュー" width="330" height="89" data-path="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/codeium/d8O4q6w3H2CjrirL/assets/jupyter_tutorial/auth_token_setting.png?fit=max&auto=format&n=d8O4q6w3H2CjrirL&q=85&s=51ac326b9b5870e5fdc8ff11c8ce6e8a" alt="認証トークン入力欄" width="818" height="326" data-path="assets/jupyter_tutorial/auth_token_setting.png" />
        </Frame>
      </Step>

      <Step title="完了！">
        これで準備が整いました。Jupyter で Windsurf の AI 機能が利用できるようになりました。
      </Step>
    </Steps>

    ### Windsurf プラグインの使い方

    <Steps>
      <Step title="コードから使う">
        Windsurf は、関数定義の一部から複数行のコードを提案できます。

        <Frame>
          <img src="https://mintcdn.com/codeium/d8O4q6w3H2CjrirL/assets/jupyter_tutorial/snippet_one.png?fit=max&auto=format&n=d8O4q6w3H2CjrirL&q=85&s=ace6fe93ebf37f70b9301a67636f2fd7" alt="コードスニペット 1" width="1420" height="346" data-path="assets/jupyter_tutorial/snippet_one.png" />
        </Frame>
      </Step>

      <Step title="提案を受け入れる">**Tab** キーを押して受け入れます。</Step>

      <Step title="コメントから使う">
        Windsurf はコメントも理解します。

        <Frame>
          <img src="https://mintcdn.com/codeium/d8O4q6w3H2CjrirL/assets/jupyter_tutorial/snippet_two.png?fit=max&auto=format&n=d8O4q6w3H2CjrirL&q=85&s=d657826f2cac6722e9ba2633849b44dc" alt="コードスニペット 2" width="1741" height="518" data-path="assets/jupyter_tutorial/snippet_two.png" />
        </Frame>
      </Step>
    </Steps>
  </Tab>

  <Tab title="Chrome">
    ### Windsurf をインストールする

    <Steps>
      <Step title="Chrome 拡張機能をインストールする">
        [Chrome ウェブストアのページ](https://chrome.google.com/webstore/detail/codeium/hobjkcpmjhlegmobgonaagepfckjkceh)を開き、**Chrome に追加**をクリックします。

        <Frame>
          <img src="https://mintcdn.com/codeium/DnGnXhZxl1qb2EWt/assets/chrome_tutorial/chrome_web_store.png?fit=max&auto=format&n=DnGnXhZxl1qb2EWt&q=85&s=9989340a425cba8df53bb8f85dd34813" alt="Chrome ウェブストア" width="2070" height="1608" data-path="assets/chrome_tutorial/chrome_web_store.png" />
        </Frame>
      </Step>

      <Step title="拡張機能をピン留めする">
        拡張機能メニューを開き、**ピン**アイコンをクリックして、Windsurf のアイコンが常に表示されるようにします。

        <Frame>
          <img src="https://mintcdn.com/codeium/DnGnXhZxl1qb2EWt/assets/chrome_tutorial/pin_extension.png?fit=max&auto=format&n=DnGnXhZxl1qb2EWt&q=85&s=e291a9235581423bb3434721d89aeddb" alt="拡張機能をピン留め" width="1106" height="674" data-path="assets/chrome_tutorial/pin_extension.png" />
        </Frame>
      </Step>

      <Step title="サインイン">
        拡張機能が自動的にサインインページを開きます。開かない場合は、拡張機能アイコンをクリックして、表示されたリンクからサインインしてください。

        <Frame>
          <img src="https://mintcdn.com/codeium/DnGnXhZxl1qb2EWt/assets/chrome_tutorial/sign_in.png?fit=max&auto=format&n=DnGnXhZxl1qb2EWt&q=85&s=b92a046f9481a49030330a057a6d7177" alt="サインイン" width="1106" height="674" data-path="assets/chrome_tutorial/sign_in.png" />
        </Frame>
      </Step>

      <Step title="完了！">
        これで準備完了です。[新しい Colab ノートブックを作成](https://colab.research.google.com/#create=true)して試してみてください。

        <Frame>
          <img src="https://mintcdn.com/codeium/DnGnXhZxl1qb2EWt/assets/chrome_tutorial/signed_in.png?fit=max&auto=format&n=DnGnXhZxl1qb2EWt&q=85&s=0a3dbc6098340fbda5885248e4f30971" alt="サインイン済み" width="1106" height="674" data-path="assets/chrome_tutorial/signed_in.png" />
        </Frame>
      </Step>
    </Steps>

    ### Windsurf の使い方

    <Steps>
      <Step title="コードから">
        Windsurf は、関数ヘッダーの一部から複数行のコードを提案できます。

        <Frame>
          <img src="https://mintcdn.com/codeium/DnGnXhZxl1qb2EWt/assets/chrome_tutorial/snippet_one.png?fit=max&auto=format&n=DnGnXhZxl1qb2EWt&q=85&s=907e36fdf207886da70c41f1efe7e7b7" alt="スニペット 1" width="1106" height="674" data-path="assets/chrome_tutorial/snippet_one.png" />
        </Frame>
      </Step>

      <Step title="提案を受け入れる">**Tab** キーを押して受け入れます。</Step>

      <Step title="コメントから">
        Windsurf はコメントも理解します。

        <Frame>
          <img src="https://mintcdn.com/codeium/DnGnXhZxl1qb2EWt/assets/chrome_tutorial/snippet_two.png?fit=max&auto=format&n=DnGnXhZxl1qb2EWt&q=85&s=db1902f22de4179508f52be5c3c6a93d" alt="スニペット 2" width="1106" height="766" data-path="assets/chrome_tutorial/snippet_two.png" />
        </Frame>
      </Step>
    </Steps>
  </Tab>

  <Tab title="Eclipse">
    ### 拡張機能のインストール

    <Steps>
      <Step title="Install ボタンをドラッグ">
        [Eclipse Marketplace の Windsurf プラグインのページ](https://marketplace.eclipse.org/content/codeium) を開き、**Install** ボタンを Eclipse のツールバーにドラッグします。

        <Frame>
          <img src="https://mintcdn.com/codeium/d8O4q6w3H2CjrirL/assets/eclipse_tutorial/drag.png?fit=max&auto=format&n=d8O4q6w3H2CjrirL&q=85&s=363884b6bb7b71f1efab7219883a9271" alt="Install ボタンをドラッグ" width="1430" height="732" data-path="assets/eclipse_tutorial/drag.png" />
        </Frame>
      </Step>

      <Step title="選択した機能の確認">
        **Confirm Selected Features** ダイアログで **Confirm** をクリックします。

        <Frame>
          <img src="https://mintcdn.com/codeium/d8O4q6w3H2CjrirL/assets/eclipse_tutorial/confirm.png?fit=max&auto=format&n=d8O4q6w3H2CjrirL&q=85&s=a32ed25242dcb249c11a7b549b879fcf" alt="機能を確認" width="1192" height="666" data-path="assets/eclipse_tutorial/confirm.png" />
        </Frame>
      </Step>

      <Step title="署名されていないコンテンツを信頼">
        **Trust Artifacts** ダイアログで **Unsigned** を選択し、**Trust** をクリックします。

        <Frame>
          <img src="https://mintcdn.com/codeium/d8O4q6w3H2CjrirL/assets/eclipse_tutorial/trust.png?fit=max&auto=format&n=d8O4q6w3H2CjrirL&q=85&s=e8181502397e14314c82d732bc56bddc" alt="署名されていないコンテンツを信頼" width="1154" height="590" data-path="assets/eclipse_tutorial/trust.png" />
        </Frame>
      </Step>

      <Step title="Eclipse を再起動">
        プロンプトが表示されたら、インストールを完了するために Eclipse を再起動します。

        <Frame>
          <img src="https://mintcdn.com/codeium/d8O4q6w3H2CjrirL/assets/eclipse_tutorial/restart.png?fit=max&auto=format&n=d8O4q6w3H2CjrirL&q=85&s=237032c3f9306b396c29a8c24bece219" alt="Eclipse を再起動" width="1084" height="242" data-path="assets/eclipse_tutorial/restart.png" />
        </Frame>
      </Step>

      <Step title="アカウント作成 / サインイン">
        ブラウザが開いたらアカウントにサインインするか新規に作成し、その後 Eclipse に戻ります。
      </Step>

      <Step title="完了！">これで準備完了です。Eclipse で Windsurf の AI 機能が利用できるようになりました。</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>
