at backyard

Color my life with the chaos of trouble.

【Reclineの導入方法あり】GitHub Copilot枠でClineが使えるようなので調べてみた（Recline / VSCode Language Model API / AIプログラミング）

AI Cline VSCode Recline

※追記などもあり、ページ量も増えてきたので目次を追加しました

GitHub Copilot枠を用いてClineが使える？

ClineというVSCodeのExtensionがあり、これを使うとAIを用いたコーディング（プログラミング）が可能となる。Cline自体、現在かなり注目されているツールであり、既に解説している記事などもたくさん出ているため、ここでは説明は割愛する。

そして、今日Xを見ていたらこのような投稿が目に入った

Cline自体は各種LLMのAPI（ChatGPTやClaude、Geminiなどなど）を用いて、そこでのやりとりを元にコーディングアシストをしてくれるのだが、どうやらVSCode Language Model APIというものを叩くことで、Language Modelを利用したAI を活用した機能と自然言語処理を Visual Studio Code 拡張機能に統合できるらしい。

code.visualstudio.com

そして、このVSCode Language Model APIのなかではGitHub Copilotも指定できる。

実際のコードは上のドキュメント内にあるが、以下のような記述で利用が可能なようだ

const [model] = await vscode.lm.selectChatModels({ vendor: 'copilot', family: 'gpt-4o' });

というわけで、結論VSCodeユーザーのGitHub Copilot利用枠を用いた処理が可能となり、最初に上げたXの投稿内ではClineを利用する際にこの VSCode Language Model API を利用するような修正を入れているという形である。

github.com

なお、このポストを書いている現時点ではまだ上のPRはマージされていないが、clineのコミュニティからも好意的に受け取られており、このPRの作者も常に数週間という間、継続的にテストを行いつつ、このPRに取り組んでいるようだ。 （詳細はPR内部を参照）

GitHub Copilot枠を利用してClineを使うことができれば、より気軽にClineが使える？

今までClineを利用する際は別途API提供側で利用枠のクレジットを購入して、そちらを消費しながら使うというのが主流だったと思う。 （他に方法があるかは知らない）

つまり使った分だけクレジットが消費されていき、常に残りクレジットを意識しながらコーディングを行う必要があった。

しかし、今回のようにGitHub Copilotを利用してAIコーディングが使えるのであれば、定額制というCopilotの料金プランもあって、この残りクレジットを意識することはなくなる。
（もちろんGitHub Copilotにはレートリミットはあるので、無制限に使えるわけではない。また制限に達したらCopilot自体が動かなくなるため、VSCodeではCopilotを常時利用している場合は不便を強いられる可能性もあるのでそこは注意したい）

というわけで、これは利用したいと思って今回試してみることにした。

現段階ではClineのフォーク版であるReclineを利用するのが良さそう

ちなみに今回のPRの作者によるClineのフォーク版であるReclineというのがあり、現在こちらの実装を使う際はこのReclineをVSCode上で使うのが一番良さそうである。

というわけで試してみた。以降はReclineの導入方法の備忘録となる。

github.com

Reclineのインストール方法だが、こちらのツールはRoo-Clineなど他のClineフォークのように VSCodeのMarketplaceには出されていないため、自身でビルドしていく必要がある。とはいえ、ビルド方法はとても簡単でREADMEに丁寧にセットアップ方法が書かれている。

私はこのドキュメント内の記述をさらっていただけであるが、実際に実行したコマンドを以下に記載していく。

# プロジェクトをclone
git clone https://github.com/julesmons/recline.git

# reclineのルートに移動
cd ./recline

ちなみにReclineでは pnpm を用いているため、PCに入っていない場合は以下のコマンドでインストールしておく必要がある。
（他のインストール方法もあるので気になる方はpnpmの公式ドキュメントにて）

また他にはVisual Studio Code 拡張機能のパッケージングと公開などを支援するnpmライブラリである @vscode/vsce もグローバルにインストールしておく必要があるらしい

# pnpmをグローバルにインストール
npm install -g pnpm@latest-10

# vsceをグローバルにインストール
npm install -g @vscode/vsce

そしてRecline側で依存関係のインストールを実施する。

# 依存関係のインストール
pnpm install

#VSIXとしてパッケージング
pnpm run package

ここまで実施すると現在のフォルダ内に recline-0.2.11.vsix というファイルができている。これがパッケージングされたVSCodeの拡張機能となる。
（実行時期によってバージョン番号は変わると思う）

こちらをVSCode側にインストールするためには以下のコマンドをターミナル上で実施する。

code --install-extension ./recline-0.2.11.vsix

# 以下のような記述が出ればインストール成功
# Extension 'recline-0.2.11.vsix' was successfully installed.

ここまで実行してVSCodeの画面を見ると、Reclineがインストールされている状態になっている。

試しに以下のようにGitHub Copilot枠のClaude 3.5 Sonnetを試して実行してみる。

GitHub Copilot枠のClaude 3.5 Sonnetを選択しているところ

これで実行してみる。最初にこのような確認ダイアログが出てくるので、Allow を選択

これであとは利用するだけ。

実際に簡単なコードで試してみたところ、問題なく動いている。このまま色々と試していってみようと思う。

一応Copilotのレートリミットは気になるので、事前に調べておこうとは思う。

（ドキュメントを見るとGPT-4oで64kという理解で良いのかな？）

Reclineでは日本語が使えない問題が発生している場合の対応方法

これはXで教えていただいたのだが、Reclineで日本語でのやり取りができない問題が発生しているようだ。

もしこの問題が発生した方は以下のポストを参照していただくのが良さそう

ちなみに私自身はカスタムインストラクションにチャットは日本でやり取りしてほしい旨を伝えるだけで問題なく使えていた。

カスタムインストラクションは上に張った画像内のとおりだが、テキストとしても以下に載せておく。

Please use Japanese in chat conversations.
Please make sure that comments on the code are in English.

チャット開始後、２回目以降の日本語の返答が抜け落ちている

と、ここまで書いたところで、実は私の環境でもこの問題が起きていることが判明した。
単に再現する作業をRecline上で行っていなかっただけで気づいていなかった模様...
（こちらもXにて教えていただいた。ありがとうございます）

実はReclineで最初の指示の日本語は問題なく通るが、やり取りの中でこちらから返答を返す場合（２度目以降の送信時）、日本語が抜け落ちるようだ。

これはReclineの表示でもそうだし、ログ内でも実際に抜け落ちているのが確認できる。

（おそらくログ上ではタグやタグが該当しているが、ここが日本語の場合空欄になっている）

ちなみに2回目以降も英語でのやり取りは問題なく送信される。

というわけで、日本語でお困りの方は上に貼らせていただいたポスト内の記事を確認していただくのが良さそう。
（というか下にも改めて貼らせていただく）

sitochablog.pages.dev

私も後ほど設定してみて、また実施した内容は追記すると思う。