More than 1 year has passed since last update.

VSCode 拡張機能 ChatGPT - Genie AI を使用するための下準備。モデル選択や日本語化等（Windows版 gpt-4対応)

Last updated at 2023-10-13Posted at 2023-03-10

現在の AIを一言で説明すると・・・

フミコ・フミオさんはTwitterを使っています: 「ほぼ全員がご高齢者の会社上層部からの「対話型AI とは何かその功罪について簡潔に分かりやすく出来たら一言で説明しろ」という難題にヤケクソで「ドラえもんです」と答えたら「便利だけど取扱注意ということだな」とほぼ正解な認識をしてくれたので藤子・F・不二雄先生は偉大すぎる。」 / Twitter

下準備

VSCode 上で ChatGPT を便利に使うためのツールの下準備をします。
これは過去に削除された拡張機能の代替ツールであり、その削除された拡張機能の機能をほぼ全部受け継いでいます。

主な機能

コードを範囲選択します。
右クリックメニューから選択します。

右クリックメニュー

コメントからコードを生成する（Code-xxx 系モデルのみ使用可能です。）
選択した範囲からお手本を作る
テストコードを作る
バグを発見する
リファクタリング（Optimize : 最適化）する
コードの説明する
コメントを挿入する
コードを完成させる
アドホックなメニュー（一時的に新たな右クリックメニューを作成して使えるようにする）
カスタムプロンプト１（設定画面でユーザーがカスタムしてつくる右クリックメニュー）
カスタムプロンプト２（設定画面でユーザーがカスタムしてつくる右クリックメニュー）

※機能の詳細はこれ以前に削除された拡張機能の説明部分を読んで下さい。

※カスタムプロンプトの使い方として、例えば翻訳機能を設定をします。

ChatGPT - Genie AI

概要

以前の拡張機能と機能はほぼ同じです。
API Keyの保存方法が変わりました。
モデルに名前を付けられるようになりました。
アドホックメニューその場で右クリックのコマンドの編集が可能になりました。
（設定でアドホックメニューを有効化した場合）
対応モデルか増えました。

GPT-4 有料版 (追加)
GPT-4-03-14 スナップショットモデル有料版 (追加)
GPT-4-32K 有料版 (追加)
GPT-4-32K-03-14 スナップショットモデル有料版 (追加)
gpt-3.5-turbo 有料版
gpt-3.5-turbo-0301 スナップショットモデル有料版
text-davinci-003 有料版
無効になったモデル（正確には、モデル設定しても存在しませんと404が返ってくるようになったモデル）

text-curie-001 有料版
text-babbage-001 有料版
text-ada-001 有料版
code-davinci-002 限定ベータ期間中は無料
code-cushman-001 限定ベータ期間中は無料

※GPT-4 は、OpenAI が開発した次世代の大規模言語モデルのことを指します。コンテキストサイズが 8k のバージョンと 32k のバージョンがあります。
※コンテキストサイズが大きくなると、より長い文脈を理解することができるようになります。ただし、コンテキストサイズが大きくなると、計算量が増えるため、処理速度が遅くなる可能性があります。

※ アドホックメニューは自由に編集できます。
使用例としては"次の文章を翻訳してください"等と設定して使います。

モデルの価格

追加されたモデルの価格は

GPT-4-8k バージョン 1000 トークンにつき約 3 円（$0.03）
（8k は約 8000 単語で約 24 円に相当、約 40 ページ〜64 ページの本の分量）
GPT-4-32k バージョン 1000 トークンにつき約 6 円（$0.06）
（32k は約 32000 単語で約 192 円に相当、約 160〜256 ページの本の分量）

API Key 保存方法

API Key の保存方法は VSCode の左サイドバーからこの拡張機能アイコン を開きます。
Temperature:の下に入力欄がありますのでなにか適当な質問します。

例
TypeScriptでFizzBuzz問題を書いてください。
質問を入力後Askボタンを押します。
そうすると右下にAPI Keyが要求されますので入力します。
そして質問の回答がファイルに出力されます。

※このAPI Keyは削除しない限り 2 回目からは要求されません。

API Key 削除方法

Ctrl + Shift + P でコマンドパレットを開きます。
Genie: Clear API Keyを入力します。
コマンドが現れるので選択するとキーが削除されます。
もう一度 FizzBuzz 問題を解かせようとするとAPI Keyを要求してきますので削除されたのがわかります。

VSCode での設定

設定例

VSCode setting.json


  // ChatGPT - Genie AI
  // AI の名前をつけます。
  "genieai.personalizedName": "＜AIの名前＞",
  // 使用するモデルです。
  // ※ 重要 このモデル選択で有料か無料かが決まります。
  // デフォルトはGPT-3.5が使用されます。（モデルを指定しないとデフォルト値）
  // "genieai.openai.model": "gpt-3.5-turbo"
  // "genieai.openai.model": "gpt-4",
  // "genieai.openai.model": "code-davinci-002",
  // チャットボットが返答を生成するときに、どれだけ多様で創造的な言葉を使うかを決めるものです。Temperatureは、0から1までの間の数値で表されます。
  // ※重要 プログラミングコードなら0.5～0.7が良いとされています。
  "genieai.openai.temperature": 0.5,
  // 右クリックメニューの日本語化
  "genieai.promptPrefix.addTests": "次のコードに対するテストを実装してください",
  "genieai.promptPrefix.findProblems": "次のコードの問題点を見つけてください",
  "genieai.promptPrefix.optimize": "次のコードを最適化してください",
  "genieai.promptPrefix.explain": "次のコードを説明してください",
  "genieai.promptPrefix.addComments": "次のコードにコメントを追加してください",
  "genieai.promptPrefix.completeCode": "次のコードを完成させてください",
  // ユーザーによるカスタム設定 右クリックメニューが増える
  "genieai.promptPrefix.customPrompt1": "次の文章を翻訳してください",
  "genieai.promptPrefix.customPrompt1-enabled": true,
  "genieai.response.showNotification": true,
  "genieai.promptPrefix.adhoc-enabled": false,

※この通りgpt-4（有料）にも対応しています。
※アドホックメニューはデフォルトでは無効です。

参考

この拡張機能は下記の方にある削除された拡張機能を作った作者がこの代替ツールを提案しています。

その他のAI（ChatGPT系）便利ツール

Bing

マイクロソフト社が提供する検索エンジン
検索結果はソース付きで回答してくれる。

GPT-4モデルを積んでいる（らしい）。

ChatGPTの様に使うには検索単語を入力後にチャットタブに移動する。

ChatGPTより出力の幅が狭い。
会話に特化しているとも言える。

Phind

Phind: AI search engine

Bingに似ている検索エンジン。
開発者向けに特化している。
プログラマーの強い味方
日本語検索もok

Bingより早い

左サイドバーの機能

Phindの左サイドバーにあるボタン

Concise enabled
ボタンを押した際に、押した瞬間に反応するのではなく、指を離した際に反応する機能のことを指している。これにより、誤ってボタンを押してしまった場合でも、指を離すことで操作をキャンセルすることができる。

Detailed enabled
ボタンがクリックされた際の押下時のエフェクトを細かく設定することができる。

Web enabled
ボタンをWebサイト上で使用する際の動作を設定することができる。

これらはパッドやスマートフォンに対しての機能です。
PCのブラウザでは関係がありません。

Perplexity

Bingのようなソース付き検索エンジン

積んでいるモデルは不明

日本語で入力すると日本語で返ってくる時もある。

Superpower ChatGPT

Chrome ブラウザでの拡張機能

この拡張機能は
Chrome ブラウザ上で ChatGPT を便利に使う拡張機能です。
markdown、JSON、text 形式で保存できます。
テンプレートを使えます。
書き直し、わかりやすく書き換え、説明、要約等。
履歴の選択削除
文字数のカウント
その他

以下 2023 年 3 月 22 日以前の古い情報

拡張機能そのものがマーケットプレイスから削除される

※ 2023 年 3 月 19 日

要約

ChatGPT 拡張機能が規約違反で使用されていることが判明し、私たちは残念ながらプロジェクトを終了することにしました。
vs-code マーケットプレイスには以前のバージョンを削除する機能がないため、製品を完全に削除することができないのが残念です。
ChatGPT 拡張機能が公式製品であると誤解されることがありましたが、実際にはオープンソースプロジェクトであり、私たちはこのプロジェクトを商業化することよりもオープンソース化することを目指していました。
ChatGPT 拡張機能のソースコードはリポジトリに残され、学習や改善に役立てることができます。
私たちがこの決断を下すことになったことを心よりお詫び申し上げます。多くの方々に愛されていたこのプロジェクトに未来を託していただいた方々にも深くお詫び申し上げます。
代わりに、同様の目的を持つ素晴らしいプロジェクトが vs-code マーケットプレイスにたくさんありますので、ぜひお試しください。私たちはこの拡張機能を今後公開する予定はありませんが、ソースコードは自由にご利用いただけます。

vsix ファイルからインストールして動作を確認する方法

https://marketplace.visualstudio.com/items?itemName=gencay.vscode-chatgpt&ssr=false#version-history
上記リンクから、Version History から Version 3.9.7（最新版より一つ前） を Download
次に
VSCode から
VSCode の左サイドーバーの「拡張機能」を選択
左サイドーバー「拡張機能」の右上にある
三点リーダーアイコンを選択
ドロップダウンメニューが出てくる
その最下部のvsix からのインストールを選択。
ダウンロードしていたファイルを選択。
gencay.vscode-chatgpt-3.9.7.vsix
（実質最終バージョン）
インストールボタンを押す。
動作してなかったら VSCode を再起動する。
（更新をうながすボタンは無視すること）
※この拡張機能を使用することは、セキュリティリスクがあるためお勧めできません。情報セキュリティには常に注意が必要であり、信頼できるソースからのみソフトウェアや拡張機能をインストールすることをお勧めします。代替の拡張機能を探してお使いください。

結論から

追記 2023 年 3 月 16 日
GPT-4 が発表されました、使える（openai に申込済み）＆お金に余裕がるなら GPT-4 を使いましょう。
API も発表されていますので、すぐに VScode 拡張機能も誰かが発表するでしょう。
（もしかしたら、近い将来この拡張機能も対応するかもしれません。）

例えとして、能力的には gpt-3.5-turbo は高校生レベルの英会話ができる人ですが、GPT-4 は大学教授レベルの英語ができる人です。

しかし AI が何でも出来て仕事が消えるという心配をしている人を見かけますが、英語を出来るようになったからと言ってそれで問題が全て解決できるようになるとはおもいません、まだ現状はすごい便利な道具が発明された程度です。

追記終了

ChatGPT のアカウントを取得後
VSCode を立ち上げ ChatGPT の 「拡張機能 ChatGPT」 をインストールします。
この拡張機能の機能はVSCode の右クリックメニューから ChatGPT を動かします。

拡張機能をインストール後、VSCode のsetting.jsonに下記を貼り付けます。
（この設定は個人のプログラミング用です、誰もが見られるsetting.jsonにパスワードなどが書かれているので学校や会社組織では利用しないでください。）

※動かず、赤文字が返ってきたら VScode を再起動してみてください。

setting.json（個人用）

  // VSCode 拡張機能 ChatGPT v3.9.5 設定 2023年3月10日
  // ※最重要 使用AIモデル どのモデルを選ぶかで料金が決まる
  // 使用AIモデル
  // code-davinci-002は自然言語をコード化するのに最適化されたモデル
  "chatgpt.gpt3.model": "code-davinci-002",
  // ※秘密 API Key
  "chatgpt.gpt3.apiKey": "＜API Key＞",
  // チャットボットが返答を生成するときに、どれだけ多様で創造的な言葉を使うかを決めるものです。Temperatureは、0から1までの数値で表されます。「0」は予測しやすい言葉を使うことを意味し、「1」は予測しにくい言葉を使うことを意味します。
    // ※重要 プログラミングコードなら0～0.5～0.9が良いとされています。
  "chatgpt.gpt3.temperature": 0.7
  // 厳密 0
  // バランス 0.5
  // 独創:0.9

  // ログイン
  // EdgeブラウザのPath
  "chatgpt.chromiumPath": "C:\\Program Files (x86)\\Microsoft\\Edge\\Application\\msedge.exe",
  // openai.comのアカウント:メールアドレス（ログイン認証時に使用）
  "chatgpt.emailAddress": "＜メールアドレス＞",
  // ※秘密 openai.comのアカウント:パスワード（ログイン認証時に使用）
  "chatgpt.password": "＜パスワード＞",

  // 右クリックメニューの日本語化
  "chatgpt.promptPrefix.addComments": "次のコードにコメントを追加してください",
  "chatgpt.promptPrefix.addTests": "次のコードに対するテストを実装してください",
  "chatgpt.promptPrefix.completeCode": "次のコードを完成させてください。",
  "chatgpt.promptPrefix.explain": "次のコードを説明してください",
  "chatgpt.promptPrefix.findProblems": "次のコードの問題点を見つけてください",
  "chatgpt.promptPrefix.optimize": "次のコードを最適化してください",
  // ユーザーによるカスタム設定 右クリックメニューが増える
  "chatgpt.promptPrefix.customPrompt1": "＜自由に設定する１＞",
  "chatgpt.promptPrefix.customPrompt1-enabled": false,
  "chatgpt.promptPrefix.customPrompt2": "＜自由に設定する２＞",
  "chatgpt.promptPrefix.customPrompt2-enabled": false,
  // 自動的にスクロールをするかどうか
  "chatgpt.response.autoScroll": true,

※code-davinci-002モデルは現在 Limited beta で無料で使えるモデルです。 (2023 年 3 月 11 日)
※gpt-3.5-turbo最新モデルを試してからcode-davinci-002モデルも使ってみて比較してみると良いと公式で書かれています。
※gpt-3.5-turbo最新モデルはスピードがcode-davinci-002モデルより体感で 100 倍 早いです、ただし有料。

参考

使い方

範囲選択＞＞右クリックメニューから選択します。

コメントからコードを生成する（Codex 系モデルのみ使用可能です。）
選択した範囲からお手本を作る
テストコードを作る
バグを発見する
リファクタリング（Optimize : 最適化）する
コードの説明する
コメントを挿入する
コードを完成させる
アドホックなメニュー（一時的に右クリックメニューを作成して使えるようにする）
カスタムプロンプト１（設定画面でユーザーがカスタムしてつくる右クリックメニュー）
カスタムプロンプト２（設定画面でユーザーがカスタムしてつくる右クリックメニュー）

実際に使用してみる

VSCode を開き、新しいファイルを作ります。
コメントにして、言語と命令を書きます。

test001.js (フォーマット)

// 言語を指定
// 命令を書く

実際の例

test001.js

// Javascript
// 1 から 10 までを表示する

必要なコメント部分を範囲選択します。
右クリックメニューを開き、ChatGPT-Codex: Generate codeを選択します。
左側に CHATGPT: CONVERSATION WINDOW が開きコードを順次出力していきます。
（待つ、待つ、待つ）別の作業をするか、休憩をしていましょう。
CopyもしくはInsertでカーソルのある場所にコードを挿入します。
（終了）

出力結果

test001.js

// Javascript
// 1から10までを表示する
for (let i = 1; i <= 10; i++) {
  console.log(i);
}

※注意右クリックメニューChatGPT-Codex: Generate codeは Codex 系のモデルのみ使用可能です。gpt-3.5-turboモデルでは右クリックメニューに表示されません。ただ，テストを書かせたり、コメントを書かせたりすると体感で 100 倍早いです。（さすが有料）
スピードを求めるのならば OpeAI API Key - code-cushman-001モデルも速さだけならgpt-3.5-turboモデルに負けません。（挙動がちょっとおかしいけど）

使い分け

現在設定しているcode-davinci-002は自然言語をコード化するのに最適化されたモデルです。
会話での AI モデルを使いたい場合は、ブラウザ上で ChatGPT を利用しています。

参考

VScode から ChatGPT を使用するのに最低限必要なのは

openai.com のアカウント（メールアドレス、パスワード）
API Key

参考

OpenAI Codex の使い方｜ npaka ｜ note
https://note.com/npaka/n/n895083c75c16

ChatGPT は VSCode 上で使えるようになった「だけでは駄目」で、
人間側にもテクニックで潜在能力を引き出す力が求められます。

COT

Chain-of-Thought というテクニック

参考

ChatGPT は馬鹿じゃない！真の実力を解放するプロンプトエンジニアリングの最前線

問題
鶴と亀が合計80匹います。
足の数の和が200本であったとき、鶴と亀はそれぞれ何匹いますか？

回答は以下のJSONフォーマットに従ってください。
{
   "鶴の数": ,
   "亀の数":
}

上記のように単純に問題を与えると、答えを間違える。
記事の実験では 100 回解かせて数～３０％の正解となる。

次に、
下記のように一旦解法を与えてから問題を解かせると COT という連鎖的な思考 をさせることで正解率が高くなる。
記事の実験では 100 回解かせて 90％の正解となる。

例題
鶴と亀が合計80匹います。
足の数の和が200本であったとき、鶴と亀はそれぞれ何匹いますか？

解法
鶴の数をx、亀の数をyとする
鶴と亀の合計は6匹なので、x + y = 6 (式1)
足の数の合計は20本なので、2x + 4y = 20 (式2)
式1を変形すると、y = 6 - x (式3)
式2に式3を代入すると、2x + 4(6 - x) = 20 (式4)
式4を変形する
2x + 24 - 4x = 20
-2x + 24 = 20
-2x = 20 - 24
-2x = -4
-2x / -2 = -4 / -2
x = 2
これを式1に代入すると、
2 + y = 6
y = 6 - 2
y = 4
よって、鶴は2匹、亀は4匹である

答え
{
    "鶴の数": 2,
    "亀の数": 4
}


問題
鶴と亀が合計80匹います。
足の数の和が200本であったとき、鶴と亀はそれぞれ何匹いますか？

解法

答え
{
    "鶴の数": ,
    "亀の数":
}

ChatGPT の「モデル」とは

人間の言語を理解し生成するために膨大なテキストデータを学習した数学的なモデルです。入力された文章に対して適切な返答を生成することができます。
車のエンジンみたいなイメージです。

※最新の情報が含まれる場合は 「Bing」 のほうが信頼できる。

終わり。

以下詳細 (という名の私的メモ)

前提 OpenAI のアカウントはすでに持っている

環境

OS : Windows10
エディタ : VSCode
ブラウザ : Edge
ブラウザ : Chrome
AI 検索サイト Bing https://www.bing.com/

OpenAI API

ChatGPT のサービスを提供しているサイト
https://platform.openai.com/overview

※ 必須
OpenAI アカウント（ChatGPT を使用できるようになります）
このアカウントを取るのに SMS 認証が必要です。

OpenAI で API Key を取得する。
https://platform.openai.com/account/api-Keys

ChatGPT のモデルには無料のモデルと有料のモデルがあります。

また、実は最新の ChatGPT のモデル gpt-3.5-turbo が既存のモデルのコストより 1/10 安いです。
有料のモデルを選ぶならこれを選ぶべきだと思います。

Microsoft

Microsoft アカウント（Bing を使用するるために登録に必要）
Bing は無料（最新の調べ物をする時は調査した URL を表示してくれる Bing の方が信頼できます。）

Chrome 拡張機能

Bing Chat for All Browsers
Chrome ブラウザでも Bing が使えるようになる Chrome の拡張機能。

※ Microsoft アカウントが必要 Bing が Chrome でも使えるようになります。

拡張機能 ChatGPT の設定

VScode の設定
左下の歯車アイコンから設定を選択します、そして検索ワードに下記ワードを入力します。
Chatgpt

設定項目 Chatgpt:Method

Use browser integration
Use OpenAI API Key integration
の 2 つから選びます。

Use browser integration
ブラウザ経由でログインする。
この方式はブラウザを開き常にログインしている必要があります。
ブラウザや VS-Code インスタンスを閉じると、次のセッションで再度ログインが必要となります。
メールアドレスとパスワードが設定してあると自動で入力して、ログインウィンドウを自動で最小化します。

Use OpenAI API Key integration（推奨）
API Key を使用してログインします。
こちらのほうが安定していて、ログインも早い。
OpenAI API Keyが必要

設定項目 Chatgpt: Authentication Type

OpenAI Authentication （推奨）メールアドレスを利用して OpenAI にログイン
Google Authentication Google アカウントを利用して OpenAI にログイン
Microsoft Authentication Microsoft アカウントを利用して OpenAI にログイン

設定項目 Chatgpt: Email Address

OpenAI の登録メールアドレス
ログイン時に必要

設定項目 Chatgpt: Password

OpenAI の登録パスワード
ログイン時に必要

設定項目 Chatgpt: Chromium Path

ブラウザ : Edge への Path
登録しなくても一応動く

設定項目 Chatgpt › Gpt3: Generate Code-enabled

コメントやコードを選択後、右クリックメニューからコードを生成出来るようにする。
例えば、関数を選択すると使用例が表示される。
この項目は code-*** モデル（コード生成用専用モデル）でのみ使える。