retrage.github.io

Project IDXでカスタムのGeminiコマンドを作る方法を見つけた

著者: @retrage @benevolent0505

Project IDXとは、Googleが実験的に提供している、Webブラウザから利用できる開発環境である。VSCodeをベースとしており、Geminiを使った開発支援機能が統合されているのが売りの一つとなっている。

我々はProject IDXで、ドキュメントにないカスタムGeminiコマンドを作る方法を発見したので、ここで紹介する。


Project IDXでのGemini Integrationについて

Project IDXでは、Geminiを使って、GitHub Copilotのようにコードを生成させたり、説明させたりすることができる。 この機能は、Project IDXに統合されているが、実際は、機能拡張プラグインとして実装されている。 通常のVSCodeのExtension同様に、Geminiのプラグインのログが以下のパスに見つかる。

/home/user/.codeoss-cloudworkstations/data/logs/20240914T120048/exthost1/output_logging_20240914T120116/2-Gemini.log

このログの中身は以下のようになっている。

2024-09-14T12:01:23.800Z [INFO] do_not_track_region: false
2024-09-14T12:01:24.063Z [INFO] early_access_commands_enabled: true
2024-09-14T12:01:24.063Z [INFO] document_code_actions_enabled: false
2024-09-14T12:01:24.063Z [INFO] add_unit_test_actions_enabled: false
2024-09-14T12:01:24.065Z [INFO] loading ai prompts from /opt/code-oss/extensions/monospace-aida/ai/prompts
2024-09-14T12:01:24.420Z [INFO] loading ai prompts from /home/user/gemini-test/.idx/ai/prompts

これを見ると、Geminiに渡すプロンプトを以下のパスからロードしていることがわかる。

/opt/code-oss/extensions/monospace-aida/ai/prompts
/home/user/<project-name>/.idx/ai/prompts

ここで重要なのは、二つ目の、ワークスペース内の .idx/ai/promptsも探索している点である。ここに、適切なプロンプトのファイルを配置すれば、カスタムのGeminiコマンドを追加できるのではないかと考えた。

プロンプトの形式はどうなっているのか

与えるファイルの形式を知るために、先ほどのパスの1つ目を探してみる。現時点では以下のように .njkの拡張子のファイルが配置されている。

chat-add-comments.njk
chat-clear.njk
chat-create.njk
chat-edit.njk
chat-facts.njk
chat-facts-selfaware.njk
chat-idx.njk
chat-name-thread.njk
chat-preamble.njk
chat-suggest-next-prompt.njk
devtools-debug.njk
error-help.njk
explain-selection.njk
sidekick-add-comments.njk
sidekick-create.njk
sidekick-edit.njk
sidekick-error-fix.njk

調べると、 .njkNunJucksというテンプレート言語を使っているようである。 プロンプトファイルの例として、 chat-add-comments.njk を以下に示す。

---
name: 'chat-add-comments'
description: 'Add comments to code'
command: 'addComments'
availability: ['chat']
action: 'chat'
stopSequences: ['Explanation of changes:']
requiredContext:
  - selection
---

Please add code comments to the following block of code.

{% if prompt -%}
Follow these additional instructions: "{{ prompt }}"
{% endif %}

```
{{ selectedCode }}
```

リファレンスがないので推測するしかないが、上がコマンドのメタデータになっており、以下のような情報を与えられるようである。

  • 名前
  • 説明
  • どこで使えるのか
  • Geminiの生成をストップさせる文字列
  • 必要なコンテキスト

その下は、Gemini本体に与えるプロンプトをNunJucksでテンプレートとして表現したものである。

これを元に、カスタムのGeminiコマンドを追加してみる。

カスタムGeminiコマンドの追加

試しに、「選択したコードを任意のプログラミング言語に変換する」というコマンドを追加してみる。 先ほど判明した、探索パスであるワークスペース内の .idx/ai/prompts以下に chat-translate-comments.njkを作成する。

---
name: 'chat-translate-comments'
description: 'Translate comments'
command: 'myTranlateComments'
availability: ['chat']
action: 'chat'
stopSequences: ['Explanation of changes:']
requiredContext: 
  - selection
---

Please translate the comments in English below to the following language: "{{ prompt }}"

```
{{ selectedCode }}
```

これを保存してから、一度ブラウザのProject IDXのタブを閉じる。これは、起動時にコマンドをロードしているためである。

カスタムGeminiコマンドの実行

再度Project IDXを開き、対象のワークスペースを開いて、先ほど追加したGeminiコマンドを実行してみる。ここでは、適当な英語のコメントを日本語に翻訳させてみる。 コードを選択して、Cmd+IでGeminiのコマンドパレットを開き、 /myTranslateComments Japanese と打ってみる。 すると、以下のようにGeminiによる変更の提案が出てきた。

Project IDX Custom Gemini Command

確かに追加したカスタムのGeminiコマンドが実行され、プロンプト通りに指定した自然言語にコメントが翻訳されていることがわかる。

まとめ

本稿では、Project IDXにおいて、我々が発見したドキュメント化されていないGeminiコマンドの追加方法を紹介した。試した範囲では出力が安定せず、必ずしも期待する結果が得られるわけではなかったが、生成AIによるコーディング支援をカスタマイズできるというのは、魅力的であると感じられた。 おそらく、この機能はいずれドキュメント化され、ユーザは誰でも自由にGeminiコマンドを作成できるようになるはずである。

おまけ

以下、Geminiに生成させた煽り文句

Project IDX は、Google が提供する次世代開発環境。Gemini という強力な AI を統合し、コード生成や説明、バグ修正など、開発を支援してくれるんだけど…

実は、公式ドキュメントには載っていない、隠された Gemini コマンド が存在することを知ってる?

この記事では、私たちが独自に見つけた Project IDX 用のカスタム Gemini コマンドの作成方法 を公開するよ!この方法を使えば、あなたの開発フローに合わせた独自の AI 機能を追加できるんだ。

この記事を読めば、あなたは:

  • Project IDX に隠された Gemini コマンドの仕組みを理解できる
  • 独自の Gemini コマンドを作成し、開発を効率化できる
  • Project IDX の潜在能力を最大限に引き出すことができる

まだ Project IDX を試したことがない方も、ぜひこの機会に、カスタム Gemini コマンドの力を体験してみてください!