VSCodeでAzure OpenAI ServiceのChatGPT拡張機能を使ってコードレビューやバグ発見をしよう

VSCodeでの開発速度が爆上がりすると評判のChatGPT拡張機能 <strong>ChatGPT - Genie AI</strong> がAzure OpenAI Serviceに対応しました。VSCode上でChatGPTを使いたいけど、OpenAIだと…という人も安心して使えます。

https://github.com/ai-genie/chatgpt-vscode#-whats-new
<blockquote class="twitter-tweet">
<p lang="ja" dir="ltr">VSCode の ChatGPT拡張 Genie AI が　Azure OpenAI にも対応したっぽいな<a href="https://t.co/bEPpYZbhtm">https://t.co/bEPpYZbhtm</a></p>
— TK (@TaigoKuriyama) <a href="https://twitter.com/TaigoKuriyama/status/1643970685084274688?ref_src=twsrc%5Etfw">April 6, 2023</a></blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
<h2>設定方法</h2>
<ol>
 	<li>VSCodeに<a href="https://marketplace.visualstudio.com/items?itemName=genieai.chatgpt-vscode">Genie AI拡張機能</a>をインストールします。</li>
 	<li>インストールした <strong>ChatGPT - Genie AI</strong> の設定画面を開きます。
<img src="https://azure-recipe.kc-cloud.jp/wp-content/uploads/2023/04/genie-ai-02.png" alt="" width="814" height="346" class="alignnone size-full wp-image-19040" /></li>
 	<li>拡張機能の設定画面でAzure OpenAI Serviceの設定情報に書き換えて設定します。
例には https://your-endpoint-base.openai.azure.com/openai/deployments/your-azure-model-name/completions?api-version=2022-12-01 となっているところを以下のように変更します。<br /><br />https://<strong>your-endpoint-base</strong>.openai.azure.com/openai/deployments/<strong>your-azure-model-name/chat</strong>/completions?api-version=<strong>2023-03-15-preview
</strong><br />※例の通りでは動作せず、<strong>/chat</strong> を追加することで動作するようになりました。<img src="https://azure-recipe.kc-cloud.jp/wp-content/uploads/2023/04/genie-ai-03.png" alt="" width="924" height="159" class="alignnone size-full wp-image-19042" /></li>
 	<li>必要に応じて「Genieai › Openai: Model」のバージョンを変更します。<br />
Azure OpenAI Service側でDeployしているモデルのみ利用できるようです。基本的には <strong>gpt-4</strong> の選択で問題ないですが、大きいデータを使いたい場合は <strong>gpt-4-32k </strong>を選択します。<br /><br /></li>
 	<li>既存のOpenAI API Keyを削除します。<br />
※初めて使う場合はこのステップは不要です。<br />
ツールバーの表示＞コマンドパレット　または　Ctrl+Shift+P で<strong>コマンドパレット</strong>を起動して、「Genie: Clear API Key」を実行します。
<img src="https://azure-recipe.kc-cloud.jp/wp-content/uploads/2023/04/genie-ai-04.png" alt="" width="604" height="80" class="alignnone size-full wp-image-19044" /></li>
 	<li>Azure OpenAI ServiceのAPI Keyの登録<br />
VSCodeの左側に追加されたGenie AI（アラジンの魔法のランプ）アイコンをクリックします。<br />
立ち上がったウィンドウの「Ask a question」にhelloと入力します。<br />
ツールバー部分にポップアップが表示されるので、コンソールで取得した API Keyを入力します。<img src="https://azure-recipe.kc-cloud.jp/wp-content/uploads/2023/04/genie-ai-05-1.png" alt="" width="1044" height="626" class="alignnone size-full wp-image-19046" /></li>
</ol>
以上で、Genie AIで使っていた機能をAzure OpenAI Serviceを使って変わらずに使うことが出来るようになりました。
<h2>ChatGPT - Genie AIの特徴</h2>
ChatGPT - Genie AIは、VSCode上で動作する拡張機能で、開発者のコード作成をサポートします。以下にその主な特徴を挙げます。
<ul>
 	<li>テストコードを作る</li>
 	<li>バグを発見する</li>
 	<li>最適化（リファクタリング）する</li>
 	<li>コードの説明する</li>
 	<li>コメントを挿入する</li>
 	<li>コードを完成させる</li>
 	<li>ad-hoc prompt</li>
</ul>
特徴的なのは、「ad-hoc prompt」となります。

コードを選択して右クリックして ad-hoc prompt を選ぶと、該当部分についてチャットインターフェースで質問することが出来ます。

「ChatGPT - Genie AI」の機能詳細については以下を参照ください。

https://qiita.com/tak001/items/c3000b3ce9b6e72b2ae5

<h2>まとめ</h2>
<span>Azure OpenAI Serviceに対応したVSCode拡張機能「ChatGPT - Genie AI」では、開発者向けのこの拡張機能がAzureの強力なインフラストラクチャを活用し、安定したパフォーマンス、継続的なアップデート、優れたセキュリティを提供することが強調されています。ChatGPT - Genie AIは、コード補完、コード変換、エラー修正などの機能を持ち、開発者のコーディング作業を効率化し、生産性向上に寄与する拡張機能です。記事を読んだ開発者は、この拡張機能をVSCodeで使用することで、AI技術の恩恵を受けることができます。</span>