ローカルRAG + VSCode拡張であるContinueを使ってClaude 3を先取りする
導入
Cursor公式ではまだ Anthropic 社のClaude-3に対応してなかったのですが、VSCodeのオープンソースの拡張である continueを使うことでこれが実現できます。
早速導入しましょう。
Claude-3のAPI Keyを入手する
上記のページの"Get API Key"からKeyを取得します。遷移後のページの"Create Key"をクリックしてAPI Keyを生成してください。これをクリップボードにコピーしておきます。
あと忘れてはならないのは$5分の無料のクレジットを有効にすることです。スクショを忘れたのでもう撮れないので画像がないのですが、サイドバーの"Plans & Billing"からクレジットを有効にしてください。電話番号が必要です。
これでAPIが利用できるようになりました。
拡張からcontinueをインストール
VSCodeの拡張機能の検索バーに continue と入力すると出てくるのでインストールしてください。
continueを使うこと自体の、他のセットアップはありません。お手軽ですね。
continueのモデルにClaude 3を追加する
設定ファイルが $HOME/.continue/config.jsonにできるのですが、VSCodeから開けます。
サイドバーからcontinueを選択し右下の歯車アイコンをクリックしてください。
そうすると config.json が開くので直接編集します。
以下のように入力してください。 <YOUR_API_KEY>を先程取得したApiKeyに置き換えるのを忘れずに。
{
"title": "Claude-3-Opus",
"model": "claude-3-opus-20240229",
"contextLength": 8000,
"apiKey": "<YOUR_API_KEY>",
"completionOptions": {},
"provider": "anthropic"
},
これでClaude-3が追加されていることがわかります。
利用する
公式としては左のサイドバーから右に移すのがおすすめみたいです。確かにその方が検索したりツリーを表示したりするときでも表示してままにできます。
念のためですが、名前を聞いてみましょう。
ふむふむ、本当かな？
どうやら本当みたいです！
ソースコードの説明をしてもらう
ここからはClaude-3というよりもContinueの利用例になります。
詳しくは以下を参照してください。
ということで早速やってみます。
ソースコードを選択した後に ⌘+L をするとcontinueのchatにソースコードが埋め込まれるので、それを元に回答を生成できます。
以下のように回答してくれました。
このソースコードは、Hono というWebフレームワークを使用して、ToDo アプリケーションのバックエンドを実装しています。
主な機能は以下の通りです：
GET /: ToDo アイテムの一覧を取得し、レンダリングします。
データベース（D1Database）からToDo アイテムのIDとタイトルを取得します。
取得したToDo アイテムを <Item> コンポーネントを使ってレンダリングします。
POST /todo: 新しいToDo アイテムを作成します。
リクエストボディのバリデーションを Zod を使って行います。タイトルは1文字以上必要です。
バリデーションを通過したタイトルをデータベースに挿入します。
作成されたToDo アイテムを <Item> コンポーネントを使ってHTMLとして返します。
DELETE /todo/:id: 指定したIDのToDo アイテムを削除します。
リクエストパラメータからIDを取得します。
そのIDに対応するToDo アイテムをデータベースから削除します。
ステータスコード200を返します。
すべてのルートに対して renderer ミドルウェアが適用されています。
このコードは、Hono フレームワークを使用してToDo アプリケーションのCRUD（Create, Read, Update, Delete）操作を実装し、D1Databaseを使用してデータを永続化しています。また、Zodを使ってリクエストデータのバリデーションを行っています。
精度は申し分なさそうです。
ソースコードを編集する
以前Honoで作ったTodoアプリがあるので、それを編集してもらいましょう。
Deleteボタンを❌にして
おや、ハイライトとショートカット入力しろと怒られました。
僕の場合デフォルト?で別の項目がショートカットに紐づいていたので削除しておきます（↓の画面は⌘+K,⌘+Sで開きます）。
では気を取り直して…と思ったのですが、そもそもcontinueの方で ⌘+⇧+M が設定されていないので何もできません。ん？
ですが、よく見ると⌘+Iで編集できると表示されています。これをやってみましょう。
まずコードを選択します。
そして⌘Iを押すとWindowが出るので依頼を入力します。ちゃんとContinueと書いてあるのでGithubの方のCopilotは使ってなさそうです。
そうするとエディタを直接編集して提案をくれました。 提案ごとにAcceptをしてください。
アプリを確認すると正常に動いています。
ソースツリーを元に回答を生成してもらう
僕が練習のために上げているCloudflareのサンプル集対して質問してみます。
設定を追加してください。
"contextProviders": [
{
"name": "tree",
"params": {}
},
@File Tree という Contextが使えるようになったので、以下のように質問してみます。
ちなみに @Codebase だけだと網羅的でない不十分な回答になります。これは使う側が理解して利用する必要がありそうです。
ドキュメントを元に回答してもらう
では次に最近僕が（いろいろな意味で）ハマっている Turso というDBaaSについて質問してみます。
ぜ、全然違う！でもしょうがないです、おそらく学習データに含まれていませんから。
でも大丈夫！ContinueにはドキュメントのURLを指定するとRAGれるようにしてくれる機能があります（RAGの使い方合ってる？）。
おもむろに歯車から config.json を開いて "name":"docs"を追加してください（今後デフォルトになるかもですが）。
"contextProviders": [
+ {
+ "name": "docs",
+ "params": {}
+ },
念のためVSCodeを再起動して再度continueを開くと @docs が使えるようになっています。
そして +Add Docsを押すと
このようにURLを入力できるようになります。
適当にタイトルを付けてしばらく待つと…。
Tursoが選べるようになってます。
これを選択してから再び同じ質問をしてみます。
正しい回答をしてくれました！！
@docs のすばらしいところは、階層でインデックスを作成くれることです。ですが実は今回残念だったのはTursoについてはドキュメントトップ（1階層目）しか読み込んでいないようでした。この辺はcontinue側で改善が進むといいなと思いました（ちなみにCursorだと大丈夫でした）。
ちなみに今回Prismaのドキュメントはすべて読み込めたので、素のClaude-3と比較してみようと思ったのですが、Claude-3はPrisma自体のことは知っているのであまり違いでませんでした。
ですが、少し古いバージョンについて知っているみたいなので、Prisma v5限定の書き方であればDocsを使うメリットが出るかもしれません（他のモデルであればかなり効果があったはずが、Claude-3
さんが優秀なので不要になってしまった）。
おわりに
ということでVSCodeでClaude-3を使うためのTipsでした。
拡張機能であるcontinueもGithub Copilotにないようなこともできるようになっている（こともある）ので、ドキュメントを見るのが楽しいです。ただまだまだcontinueに改善の余地があることもわかりました。
もちろんお金があるなら GitHub Copilot Enterprise に申し込んでもいいと思います。
しばらくClaude-3は利用できないと思いますが、それ以上に作り込みがちゃんとしてる印象を持っています。
ではでは。
Discussion