
話題のChatGPTを敏腕アシスタントとしてvscodeに来てもらった!
どもどーもmanebi開発クラ部の中の人、お馴染みのマネージャJですです!
ジェネレーティブAI、ChatGPTの話題が大変盛り上がってますね。
きっと読者のみなさんもお使いではないでしょうか。
海外ではPromptEngineeringについてかなり盛り上がっていそうなので、日本でも、そろそろ爆発するのではないかと思いつつ、まず目先の開発環境に適用しておこうと思ってvscodeにChatGPTを追加することにしました。
手順は簡単なので、調べればわかる話かもですが、せっかくなので、画像を貼りつつ、紹介します!
OpenAIからAPIキーを取得する!
まずは最初に以下のサイトからAPIキーを発行します。
登録そのものがまだの方は以前の記事を参考に登録からお願いします。
ログイン状態なら、右上に「Personal」が見えるので、それをクリックすることで、メニューを展開し、「View API keys」を選びます。

筆者はもう作ってしまっているので、下記のように作っているキーが存在しますが、初めての場合は、「Create new secret key」でキーを発行します。
注意!ここで表示されるAPIキーは必ず!どこかにコピペしておきましょう!

これができたら、APIキーとしては準備完了ですね!
vscodeへChatGPTを追加する!
vscodeを起動して、拡張機能メニューから「ChatGPT」を検索します。
以前検索した状態から、数日経っていますが、かなり増えてますね。何を入れるか。迷います。。。
筆者は以下のものを選びました。
各自、入れるものは確認が必要そうです。

これで、めでたく、使えるはず!なのですが、最初の質問を投げたりすると上部の検索窓もしくはインストールする拡張機能によって別の形で、APIキーが求められます。
最初に取得しておいたAPIキーを入れましょう!
※お詫び?
ごめんなさい。この拡張機能にしましょう!と決めて、詳細手順をお伝えしたかったですが、拡張機能の更新頻度が想像以上に激しく、昨日みたやつは今は変わっているという状況なので、ご了承下さい。
いざアシスタントと仕事してみましょう!
これで、APIキーの登録も終わったら賢いAIアシスタントと会話できる状況になります。
早速、wsl上でtypescriptの実行環境構築を頼んでみます。

すごい世の中ですね!
左側に聞いた内容の通り、右側にコマンドを実行すれば良い。これまでだと考えられなかったことなので、おじさんびっくりです。
今後も可能であれば、PromptEngineeringにかかわる記事を出していこうと思います。今後ともよろしくお願いします!