はじめに

この記事の目的

ChatGPT - Genie AI を利用した開発効率アップをテーマに、この記事ではその導入手順について説明します。
導入後、どのように利用するかは実践編として投稿予定なのでしばらくお待ちください。

どういう人が対象？

ChatGPT - Genie AI はvsCodeの拡張機能なので、vsCodeを使って開発をしている人が対象です。
また、詳細は後述しますがこのサービスは有料なので、無料でAIを利用したい人はブラウザ上でChatGPTに質問した方がよいかもしれません。

ChatGPT - Genie AI とは？

とりあえず公式ページを👇

ChatGPT - Genie AI を一言で言えば、「vsCode上でAIに会話ベースで相談したり、マウス操作でコーディングにまつわる検証をやってくれたりと、開発に関わることを けっこうなんでも 手助けしてくれる拡張機能」です。

コーディングとプログラミングに関する質問や相談に特化しているようなので、それらに関してはブラウザ版のchatGPTよりも精度が高いみたいです。

料金体系

ChatGPT-API と同様、トークンと呼ばれる単位で請求されます。
利用するモデルによってトークンあたりの金額は異なりますが、API経由で通信した文章量に比例して料金が決まります。
以下は ChatGPT - Genie AI で利用できるモデルの料金です。(2024/2/25時点)

モデル	input	output
gpt-4-0125-preview	$0.01 / 1K tokens	$0.03 / 1K tokens
gpt-3.5-turbo-0125	$0.0005 / 1K tokens	$0.0015 / 1K tokens

英語の場合、1単語あたりだいたい1トークン(公式には1,000トークンあたり約750単語と記載あり）ですが、日本語だと1文字に1トークン以上使ってしまうため、英語よりも使用料が上がる点に注意が必要です。

また、モデルのバージョンや料金は都度更新されます。
最新の料金体系は OpenAI の公式サイトをご覧ください。

導入方法

手順の全体像

vsCode上で拡張機能をインストール
OpenAIのアカウント設定を済ます
OpenAIにてAPIキーを発行
vsCode上でAPIキーの登録
モデルをgpt-3.5-turboに変更する

1. vsCode上で拡張機能をインストール

以下の手順でChatGPT - Genie AIをインストールします。

左サイドバーの拡張機能を押下
検索バーで「ChatGPT - Genie AI」と検索
検索結果一番上の ChatGPT - Genie AI をインストール

インストールが完了すると左サイドバーの下に ~~思わず擦りたくなるような~~ ランプアイコンが表示されるので、念の為vsCodeを再起動してからアイコンを押下しましょう。
表示された画面で、ChatGPT - Genie AI が利用できます。

早速使ってみましょう！
下記のように入力エリアに質問内容を記述して送信してみると。。

画面上部に、OpenAIから発行されたAPIキーを登録する必要がある旨のメッセージが出力されました。
実際にサービスを利用するためには、メッセージ通りの手順を踏む必要があるようです。

2. OpneAIのアカウント設定を済ます

APIキーを発行する前に、OpenAIのアカウント設定をします。
まずはOpenAI のホームページを開いて右上の「Log in」からログインします。

アカウントを持っていない場合はログイン画面の「サインアップ」リンクから作成しましょう。

ログインできたら、「API」を選択します。

次に、支払い方法の登録をします。
サイドバーにて「Settings」→「Billing」の順で押下します。

Billing settings画面で、支払い方法の設定をしましょう。
※下キャプチャは「Start billing plan again」となっていますが、初期は「Set up paid account」だった気がします。(うろ覚え・・)

以上の支払い方法の設定が完了したら、アカウント設定は完了です。

3. OpenAIにてAPIキーを発行

ここからはいよいよAPIキーを発行していきます。

OpenAIの左サイドバーから、「API Keys」を選択します。

「Create new secret key」を押下します。

オーバーレイが表示されるので、任意の文字列を入力してキーを作成します。
※生成されたキーは最初の一度しか表示されないので、ローカルにコピーしておいてください

以下のようにAPIキーが追加されていることを確認できたらOKです。

4. vsCode上でAPIキーの登録

さて、それではvsCodeに戻って先ほど生成したAPIキーを登録しましょう。

すると、以下のように回答を得ることができました。

※私の環境では1回目の回答だけ、1文字ごとに文章が生成されていました。。
調べてみてもこの事象が発生した事案すら確認できず、また2回目以降は問題なく文章が生成されたので、もし同事象が発生しましたら再度文章生成を試してみてください。

5. モデルをgpt-3.5-turboに変更する

デフォルトではgpt-4-1106-previewのようです。(2024/2/25時点)
今回はお試しなので、モデルをgpt-3.5-turboに変更しておきましょう。

歯車アイコンから設定を開き、Modelにてgpt-3.5-turboに変更します。

以上で ChatGPT - Genie AI の導入は完了です。
お疲れ様でした！

簡単な機能説明

具体的な機能説明は【実践編】で行う予定なので、この記事では概要だけさらっと確認しておきます。

GENIE: CONVERSATION VIEW

導入手順でも触れましたが、まずはChatGPTのようにAIと会話形式で質問ができる機能をおさらいします。
vsCodeの左サイドバーに表示されているランプアイコンを押下した際、最初に表示される画面でGenieに質問等を投げかけることができます。

GENIE: EDITOR VIEW

続いて、記載した条件のソースコードを直接アウトプットしてくれるEditor View機能の紹介です。

下キャプチャの赤枠を押下すると EDITOR VIEW 画面が表示されます。

入力エリアに実装したい内容を記述の上、「Ask」ボタンを押下すると条件に沿ってGenieがソースコードを出力してくれます。

また、入力エリアの下には Shortcuts があります。
これらを利用することで、バグを見つけたり、ソースコードの最適化を行なってくれたりします。

文章すら作成する必要がないのはとても便利ですね。

※注意

2024/2/25時点で、EDITOR VIEW 機能が利用できないバグが発生しているようです。
どうしようもないので、修正を待ちましょう。。
▽ GitHub issues
https://github.com/ai-genie/chatgpt-vscode/issues/150
https://github.com/ai-genie/chatgpt-vscode/issues/155

締め

ChatGPT - Genie AI の導入編は以上になります。
EDITOR VIEWが現状使えないのは残念ですが、こればっかりは仕方ないですね。

続編の実践編は、EDITOR VIEWが手元で確認できる環境になったら記事を作成して投稿したいと思います。
早く修正してくれるとよいのですが。。