LoginSignup
3
3
@sugimount-a(sugimount)

VS Code の拡張機能 Continue で Amazon Bedrock を利用した日本語の開発支援体験

Last updated at Posted at 2024-09-01

はじめに

Visual Studio Code でプログラム開発をするときに、生成 AI に質問しながら開発をしていきたいです。Amazon Q Developer は便利ですが、2024 年 8 月時点では入力プロンプトや出力結果は英語だけなので、日本語ネイティブにとってはちょっと辛いところがあります。

Amazon Bedrock を利用しつつ、日本語で利用できる生成 AI の開発支援方法を発見したので、これを紹介していきます。Visual Studio Code に Continue という拡張機能が公開されており、Continue に Amazon Bedrock の連携設定をすることで、日本語を活用したコード支援体験が得られます。 チャット利用、エラーに対するトラブルシュート、既存コードの解説、コードの最適化、とった用途で利用できます。

自分が感じているメリットは以下の通りです。

  • Visual Studio Code で日本語を利用した生成 AI 支援を受けられるため、体験が好ましい
  • お客様が利用している AWS 環境上の Amazon Bedrock を利用できるため、セキュリティなどのコントロールがやりやすい。
  • Amazon Q Developer の Pro Tier は User あたりの月額課金に対して、Continue は、Amazon Bedrock の API 利用なので、より細かい従量課金で利用可能
  • Bedrock で提供されている最新モデルを利用可能。例えば、Claude 3.5 Sonnet が利用可能。
    • 内部で Converse API を利用しているため、最新のモデルは、モデル ID を切り替えるだけで利用可能 (なはず)。

それでは設定方法を紹介しましょう。

Visual Studio Code に拡張機能の Continue をインストール

Visual Studio Code の拡張機能のメニューから Continue を見つけてインストールします。

image-20240801223151439.png

Continue の Icon が表示されるので、これを選択したあとに、歯車マークを押します。

image-20240801224552281.png

models の配列に、以下の指定を追加します。

    {
      "title": "Bedrock: Claude 3.5 Sonnet",
      "provider": "bedrock",
      "model": "anthropic.claude-3-5-sonnet-20240620-v1:0",
      "region": "us-east-1"
    }

image-20240801225759931.png

次に、Visual Studio Code をインストールしている環境に、AWS のアクセスキーやシークレットキーなどの Profile を設定します。Remote Development を利用している場合は、SSH 先の環境ではなく、操作しているラップトップの環境になります。

具体的には、Windows の場合、C:\Users\<username>\.aws\credentials に以下のファイルを作成します。

  • bedrock というプロファイル名で作成します。( default でも大丈夫です。)
  • aws_access_key_id や aws_secret_access_key は環境に合わせて発行してください。権限は最小限に、Bedrock の呼び出し権限を付与すると良いと思います。
[bedrock]
aws_access_key_id = abcdefg
aws_secret_access_key = hijklmno

image-20240801230854244.png

Option : Codebase を利用するために Ollama のインストール

この章はオプションです。この章を実行すると、Codebase Retrieval 機能が使えるようになります。スキップしても基本的な機能は利用いただけます。

Codebase Retrieval は、VS Code で開いている Project のファイル群に対して、横ぐしでコード生成機能が利用できます。より技術的な表現をすると、「Continue はコードベースをインデックス化し、後で作業スペース全体から最も関連性の高いコンテキストを自動的に取り込めるようにします」です。

以下のような使用例で、便利に利用できます。

  • コードベース全体に関する大まかな質問をする
    • 「サーバーに新しいエンドポイントを追加する方法は?」
    • 「VS CodeのCodeLens機能を使っているところはあるか?」
    • 「HTMLをマークダウンに変換するコードはすでに書かれているか?」
  • 既存のサンプルを参考にしてコードを生成する
    • 「既存のコンポーネントと同じパターンを使って、日付ピッカー付きの新しいReactコンポーネントを生成する」
    • 「このプロジェクトのPythonのargparseを使ったCLIアプリケーションの草案を書く」
    • 「bazのサブクラスの他の部分で見られるパターンに従って、barクラスのfooメソッドを実装する」
  • @folderを使って特定のフォルダについて質問し、関連性の高い結果を得る
    • 「このフォルダの主な目的は何か?」
    • 「VS CodeのCodeLensAPIをどのように使うのか?」

一方、以下のような使用例は、苦手な分野です。

  • LLMにコードベース内のすべてのファイルを渡す使い方
    • 「fooという関数がどこで呼ばれているかを探す」
    • 「コードベースを確認し、スペルミスを見つける」
  • リファクタリング
    • 「barという関数に新しいパラメータを追加し、使用箇所を更新する」

このあたりを気を付けて利用すれば、便利に利用できるはずです。

Ollama をインストールします。Ollamaは、大規模言語モデル(LLM)をローカル環境で簡単に実行・管理できるオープンソースのツールです。(Linux でいうと、yum や apt-get の LLM 版パッケージマネージャーみたいな理解であっていると思います。)

ダウンロードページからダウンロードします。

コマンドプロンプトで Ollama コマンドを利用し、 nomic-embed-text のエンベディングモデルをダウンロードします。

ollama pull nomic-embed-text

なお、CodeBase の Embedding した結果を保存するデータストアは、ローカルに SQLite として保存されます。DB Browser for SQLite で中身を見れるため、興味がある方はみてみてください。

Windows の場合

C:\Users\<username>\.continue\index

image-20240901123804855.png

チャット利用 : コード解説

ショートカット、Ctrl + L でチャット画面が開けます。

Claude 3.5 を利用するため、「Llama 3」と書かれている箇所をクリックします。

image-20240801235015242.png

事前に定義した Claude 3.5 Sonnet を選択します。

image-20240801234935549.png

例えば、Continue の Bedrock の実装ソースコードの解説をお願いしてみます。ソースコードを全部選択して、Ctrl + L を押すと、Continue に選択したコードが反映されます。そして、ソースコードを解説してくれませんか？ とお願いします。

image-20240901132905741.png

こんな感じで、日本語で解説してくれます。Claude 3.5 Sonnet の安心感がありますね。

image-20240901133434541.png

ちなみに、Continue を利用する際に、AWS Profile 名は bedrock じゃなくて default でも大丈夫なことを教えてくれました。

image-20240901133658115.png

他にもチャット欄に、@Docs でインタネット上のドキュメントを引っ張ってくれたりしてくれる機能があるので、Continue の How to Use に関するドキュメント もご参照ください。

チャット利用 : コード生成

別の使い方で、コードの生成を依頼できます。開いているソースコード全体を渡してお願いする内容を与えてみます。

image-20240901140849605.png

すると、それらしい回答を日本語で出してくれます。

image-20240901141117690.png

なんどかやり取りを重ねると、以下のようなサンプルアプリケーションがすぐ作成できました。(この記事 で利用したサンプルアプリケーションです。)

image-20240901141028915.png

@Codebase でプロジェクト全体のコンテキストを渡す (エラー)

@Codebase と打つことで、プロジェクト内のソースコードをコンテキストとして渡すことができるようです。

image-20240901134842402.png

ただ、私の環境だとエラーになって動かなかったので、これはまた時間を取って確認します。

image-20240901134934508.png

データのオプトアウト

Continue が製品の改善のために匿名の利用情報を収集する点が説明されています。

ポイントは以下の通りです。

デフォルトで以下のデータを収集しています。

  • 提案を承認または拒否したかどうか (コードやプロンプトは含まれません)
  • 使用したモデルとコマンドの名前
  • 生成されたトークン数
  • OSとIDEの名前
  • ページビュー

これらが収集されるのを回避したい場合は、オプトアウトが可能です。

~/.continue/config.json で、以下の値を false に変更します。

{
    "allowAnonymousTelemetry": false,
}

まとめ

VS Code の Continue 拡張機能を利用することで、Amazon Bedrock を利用した日本語のコード生成機能を利用できることがわかりました。@Codebase はエラーで動きませんでしたが、シンプルなチャット機能でも大変便利に利用できることがわかりました。

Corsor の Bedrock 対応も気になるとことですが、いまのところ Continue で満足しています！

Tips :トラブルシュート方法

Continue が出力するエラーメッセージを Developer Tools で確認できます。

Developer Tools を開きます。

> Toggle Developer Tools

image-20240901135017921.png

Console にエラーメッセージが表示されています。これをもとにエラーを分析していきます。(fts テーブルが存在しないと言っている。たしかに DB Browser for SQLite でみたら、fts テーブルはなかった。なぜないのか・・・？)

image-20240901135046552.png

参考 URL

Amazon Bedrock に関するコード
https://github.com/continuedev/continue/blob/main/core/llm/llms/Bedrock.ts

3
3
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
3
3