VS Codeのエージェントモードを拡張するには、を試してください!

VS Codeにおける優れたスマートさの追求

2023年11月13日 クリス・ディアス (@chrisdias)

先週のGitHub Universeをご覧になった方は、開発者ワークフロー全体にわたる人工知能の途方もない進歩、革新、そしてビジョンをご覧になったことでしょう。このブログ記事では、このより広範なビジョンを実現するために、ここ数か月間のVisual Studio Code周辺の進歩に焦点を当てたいと思います。

「とてつもなく賢い」

マット・デイモンとベン・アフレックの代表作「グッド・ウィル・ハンティング」の中で、私が特に好きなセリフの一つが、「うちの子はとてつもなく賢い」です(ボストン訛りで読むと、より効果的です)。

このセリフは、ウィル(マット・デイモン)がチャッキー(ベン・アフレック)と自信過剰な「大学院1年生」の間の対立を、アメリカ史に関する事実をページごと、一語一句すべて記憶から引用して収めた後に、モーガン(ケイシー・アフレック、ベンの弟)によって言われます。ウィルは読んだすべての本によって訓練され、会話に基づいてそれらを思い出すことができた、と言えるでしょう。

AIはウィルに似ています。たくさんのテキストについて知っています。しかし、AIに欠けているもの、つまり人間が持っていてAIが持っていないものは、最良の答えを出すための特定のインタラクションの「コンテキスト(文脈)」です。そしてウィルの場合、彼は「場の空気を読む」こともできるため、その本の知識を使って、巧みに作り上げられた反論を返すことができます。

大規模言語モデル(LLM)は、ある時点での公開リポジトリデータでトレーニングされています。つまり、あなたの現在のコードについては何も知りません。一般的なコードについては知っていても、それについて正確に質問に答えたり、あなたのワークスペースの形式と機能に沿った新しいコードを提案したりするために必要なコンテキストを持っていません。

これを回避するために、GitHub Copilot Chatは、モデルが質問に適切に答えるのに役立つコードのスニペットを送信します(これはRetrieval Augmented Generation、略して「RAG」と呼ばれます)。最も関連性の高いコードを参照することで、回答はより良くなります。しかし、LLMに送信できるコードの量(およびプロンプトによるガイダンス)には制限があります。小さなプロジェクトの場合、これは通常問題になりません。しかし、世の中にある大規模なソースコードリポジトリを考えると、すべてのファイルのコンテンツをモデルに送信することは不可能であることがすぐにわかります。より良い回答を得るための解決策は、適切な量のリソースを合理的な時間で使用して、関連するコンテキストを送信することです。これを支援し、他の多くのシナリオを可能にするために、Copilot Chatに参加者(participants)の概念を追加しました。

参加者

チャット参加者は、ユーザーのクエリに対して、クエリ処理でAIを完全に活用したり、バックエンドサービスに転送する従来の方法を使用したりするなど、どのような方法でも回答できるドメインエキスパートです。参加者はまた、大規模言語モデルにドメイン固有のツールへのアクセスを提供することもできます。LLMの助けを借りて、参加者はツールを選択し、その呼び出し方法を定義できます。そのようなチャット参加者の一例が@workspaceです。@workspace参加者はあなたのワークスペースについて知っており、それに関する質問に答えることができます。内部的には、この参加者はGitHubの知識グラフとセマンティック検索、ローカルコードインデックス、VS Codeの言語サービスを組み合わせたさまざまなツールによって強化されています。

チャット参加者は、クライアントまたはサービスによって提供できます。GitHub Universeでは、github.comのチャットエクスペリエンスにおけるサービスサイドの参加者「Docs Agent」のデモがありました。これはリポジトリ内のドキュメントを検索する方法を知っています(VS Codeにも近日中に登場します)。

クライアントサイドの参加者は、従来のVS Code拡張機能を通じて提供できます。拡張性のセクションで詳しく説明しますが、今日はVS Codeで利用可能な2つのチャット参加者、@workspace@vscodeを見てみましょう。

@workspace

@workspace参加者は、ワークスペース内のコードに関するコンテキストを収集する方法を知っており、そのナビゲーション、関連するクラスやファイルの検索などを支援できます。例えば、VS Codeリポジトリにいて、現在のICodeEditorを担当するサービスについて詳しく知りたい場合、次のように参加者を使用できます。

@workspace participant answering question about detecting running extensions

自然言語を使用して、@workspace参加者に「現在のICodeEditorを取得するには、どのサービス クラスを使用すればよいですか」と質問します。そこから、参加者はLLMに送信するのに適切な量のコンテキストを取得するために次のことを行います。

  • vscodeリポジトリは、GitHub Search Blackbirdサービスによってインデックス化されています。@workspace参加者はこのインデックスをツールとして使用し、リポジトリのナレッジグラフにアクセスします。@workspace参加者は、関連するコードスニペットとメタデータを返すセマンティック検索を実行します。GitHub検索サービスは、上位1万件のGitHubリポジトリをインデックス化しており、さらに追加する予定です。

  • @workspace参加者が次に使用するツールは、ローカルインデックスに対する字句テキスト検索で、ローカルのコミットされていない変更やCopilotの会話履歴などの追加コードを見つけます。

  • そして、@workspaceは最後のツールとして、VS Codeの言語インテリジェンスを使用して、関数シグネチャ、パラメーター、さらにはインラインドキュメントなどの重要な詳細を追加します。

これらのすべてのコンテキストは、@workspace参加者によってランク付けされ、分割され、要約されてから、質問に答えるためにLLMに送信されます。

必要なコンテキストをすべて持っているため、@workspace参加者は開発者が尋ねる可能性が高い種類の質問に答えることができます。例えば、コードの異なる部分がどのように相互作用するかに関する質問などです。

  • @workspace 通知はどのようにスケジュールされますか?」

または、関連するコード、依存関係、デザインパターンの知識を必要とする質問

  • @workspace ニュースレターページと同様に、フォームの検証を追加してください」

@vscode

VS Codeは非常に多くの方法でカスタマイズできるため、VS Codeチームのメンバーでさえ、隠された機能を発見すると嬉しく驚きます。ユーザーとチームメンバーの両方がVS Codeの全機能を活用できるよう、@vscode参加者を作成しました。

この参加者はVS Codeのすべてを知っており、自然言語とVS Codeのコマンドやカスタマイズの間のギャップを埋めるのに役立ちます。@vscode参加者は内部的に、すべての設定とコマンドのインデックスにアクセスできるツールを使用しており、この参加者がVS Codeのドキュメントも使用できるようにするためのツールを追加している最中です。これで、「@vscode vscodeがファイルを偽装して開くあの機能の名前は何ですか?そして、それを無効にする方法は?」といった漠然とした質問をすることができます。

@vscode participant answering question about preview editors

応答には設定エディターで表示ボタンがあることに注意してください。これは、@vscode参加者がVS Codeの動作方法を知っているだけでなく、設定エディターやコマンドパレットを呼び出すツールも持っているためです。

さらに、コマンドパレットは類似検索をサポートするようになったため、コマンドを検索する際に正確なコマンド名を知る必要がなくなりました。チームが毎月提供するすべての優れた機能を利用するために、独自のVS Code専門用語を話す必要はもうありません。

これは@vscode参加者のほんの始まりに過ぎません。ユーザーがVS Codeをよりよく理解し、完全に制御できるようにする、より多くのシナリオをサポートする予定です。

スラッシュコマンド

チャット参加者は、参加者が提供する特定の機能へのショートカットである、スラッシュコマンドと呼ばれるものも提供できます。質問に答える際のタスクの一つは、意図を判断し、何をしたいのかを理解することです。

「Node.js Express Pug TypeScriptで新しいワークスペースを作成」が新しいプロジェクトを望んでいることを推測できますが、「@workspace /new Node.js Express Pug TypeScript」は明示的で簡潔であり、入力時間を節約できます。

New slash command

意図が明確になると、自然言語の固有の曖昧さにもかかわらず、@workspace参加者はユーザーのニーズに応える可能性が格段に高まります。@workspaceはディレクトリ構造を提案でき、ユーザーは提案されたファイルをクリックしてプレビューできます。新しいフォルダーにこれらのファイルを生成するワークスペースを作成ボタンがあります。

@workspace /new results displaying project tree and Create Workspace button

拡張性

「VS Codeは単なるシェルに過ぎず、輝かせるためには拡張機能が必要です!」—これは、VS Code拡張機能に取り組むMicrosoftチームのいつもの会議での合言葉であり、彼らがVS Codeの成功において果たしている役割を誇らしげに誇示しています。私たちVS Codeコアチームは、彼らに全面的に同意します。豊富な拡張エコシステムがなければ、VS Codeは今日の製品にはなり得ませんでした!AIも例外ではなく、CopilotによってコアAIエクスペリエンスが輝く一方で、私たちのビジョンは、エコシステムからのすべての拡張機能が参加し、LLMモデルが可能な限り最高のコンテキストと根拠を持てるようにすることです。今日、私たちはこのビジョンの基盤として、提案された状態チャット参加者APIを追加しました。

チャット参加者APIを使用すると、拡張機能はユーザーによる特定の質問に回答できる参加者を提供できます。@workspace@vscodeの両方の参加者は、このAPIを使用して実装されています。チャット参加者を使用すると、ユーザーはエディターのフローを維持しながら、内部および外部ループツールからの豊富で最新の情報をAI会話に持ち込むことができます。参加者は、ある領域のエキスパートのようなものであり、ユーザーがプロンプトで明示的に@参加者を言及すると、そのプロンプトは特定の参加者を提供した拡張機能に転送されます。

参加者は、単純なテキストや画像応答にはMarkdownを使用して応答できます。また、よりインタラクティブな体験のために、ファイルツリーやボタンで応答することもできます。例えば、参加者がユーザーのために新しいワークスペースの作成を提案する際に、ファイルツリーをプレビューとして使用できます。参加者は各応答に対してフォローアップを提供できます。これらを、会話をさらに進める方法の提案として想像してください。スムーズなユーザーエクスペリエンスを提供するために、API全体はストリーミングベースです。すでに述べたように、参加者はスラッシュコマンド(特定の機能へのショートカット)を導入できます。例えば、@docker参加者は/generateスラッシュコマンドを提供し、その結果、「@docker /generate ワークスペース用のDockerfile」というユーザープロンプトの例が得られます。現在の構文は明示的で簡潔であるため、便利な時間短縮になります。それでも、VS Codeコアがユーザーの自然言語プロンプトに基づいて適切な参加者とスラッシュコマンドを自動的に選択できるように、意図検出に取り組んでいます。

AzureやDockerのすべてを知っているチャット参加者をVS Codeに直接インストールすることを想像してみてください。あるいは、あなたが素晴らしい仕事をしていることを肯定する可愛い動物を提示するために、画像生成をツールとして使うDALL-E参加者が必要になるかもしれません。

DALL-E generated image of cute cat providing an affirmation

参加者は、そのドメインのツールにアクセスしながら、あらゆるドメイン固有のコンテンツを持ち込むことができます。例えば、1ESはOne Engineering Systemの略で、Microsoft社内のエンジニアリングシステムです。1ES VS Code拡張機能は、Microsoftの社内エンジニア向けに特定の質問に回答できる@1es参加者を提供します。@1es参加者は、実際に何をしているかを動的に計画し、表示します。LLMモデルで利用可能な公開データの一部を使用しますが、Microsoft社内の特定の情報も認識し、両方を組み合わせて最良の回答を提供します。

@1es participant answering a question about CFS, a Microsoft internal initiative

そして、参加者は現在のコンテキストを持っているため、議論を続けることができます。

@1es participant providing more details about using CFS

また、拡張機能がLLMにアクセスし、LLMを使用してユーザーのクエリを処理し回答することを選択できるAPIも追加しています。現在、このAPIは参加者を実装する拡張機能に限定されています。チャット参加者APIは、貢献された参加者に正確なユーザープロンプトを渡し、LLMへのアクセスにより、参加者はそれらの言語プロンプトを特定のバックエンドAPI呼び出しに便利に変換できます。このAPIの使用は、ユーザーが参加者によって使用されたリクエスト数とトークン数を認識できるよう、注意と透明性をもって扱います。

チャット参加者APIはまだ提案段階であり、近い将来APIを完成させることを目標に、改善のためのフィードバックを求めています。今日から試すことができ、始めるのに最適な方法は、私たちのチャット参加者拡張機能サンプルからです。皆さんが生み出すAI駆動の開発者向けイノベーションを見るのが待ちきれません。

利便性

私たちは参加者と彼らがもたらす無限の可能性に非常に興奮していますが、通常のワークフロー内でVS Codeに追加している便利なCopilot駆動の小さなインタラクションについても話したいと思います。AIを活用するためにエディターを学び直す必要はありません。

スマートアクション

スマートアクションはVS Codeのフローにシームレスに統合されており(例えば、クイックフィックスやコンテキストメニュー)、プロンプトを一切書く必要がありません。最も強力なスマートアクションは/fixです。ここに比較的単純なTypeScriptのクイックソートアルゴリズムがあり、「Argument of type 'number' is not assignable to parameter of type 'never'」というエラーが表示されています。電球をクリックして、Copilotを使用して修正を選択してください。

Quick Fix light bulb menu with Fix using Copilot selected

このオプションは、/fixとエラーメッセージが入力されたインラインチャットを開きます。舞台裏では、追加のVS Code診断コンテキストが提供され、これによりCopilotが修正(leftおよびright配列を正しい型宣言を使用するように更新)を提供できるようになります。

Copilot proposed fix shown in a diff view

/fixは、従来のツールが不足しているシェルなどの言語で特に有用であることに気づきました。

Copilot proposed fix for a shell command

Copilotは提案をより明確にするために、なぜ特定の修正を提案したのかを説明しようとします。ユーザーがCopilotの提案する修正を約60%の割合で受け入れていることを知り、私たちは喜んでいます。時には、修正が電球の近くのソースコードと関連せず、必要なのは不足している依存関係をインストールすることである場合があります。その場合、/fixは統合ターミナルで実行できるコマンドを提案します。

/fixと同様に、/docスマートアクションはユーザーに人気があります。/docを使用するには、コードブロックを選択し、右クリックしてCopilot > ドキュメントを生成を選択します。Copilotがあなたのコードのドキュメントコメントを生成します。そのドキュメントの品質に驚かれることでしょう。

/doc command with a generated JSDoc comment

コミットとプルリクエストのメッセージを生成

意図が明確な場合もあります。その場合、AIとの体験はまるで魔法のように感じられます。今私のお気に入りは、Copilotがコミットメッセージを自動的に生成する機能です。Copilotがインストールされたソースコードビューでは、コミットメッセージフィールドの隣に新しいキラキラしたアイコンが表示されます。そのキラキラしたアイコンを選択すると、Copilotがメッセージを埋めてくれます!

Source Control input box with sparkle to generate commit message

この体験にとても興奮し、先日vscode.dev/githubを使ってMarkdownを編集しているときに、Copilot拡張機能がまだウェブ対応ではないにもかかわらず、このコミットをしてしまいました。

Commit message wishing that Copilot worked in VS Code for the Web

本題に戻り、プルリクエストを作成しましょう。GitHub Pull Requests and Issues拡張機能をインストールしています。これはCopilot Chat拡張機能の存在を認識しています。PRを作成すると、タイトルと説明の隣に別のキラキラしたアイコンが表示されます。それを選択すると、Copilotが自動的に素敵な説明を書き込んでくれます!

GitHub Pull Request and Issue extension Create view with sparkle to generate title and description

これは、AIが週に何十回、何百回と行う単純で退屈なタスクを自動的に処理することで、生産性を向上させることができるもう一つの分野です。

何だって!?

そして最後に、真にスマートなAIを作るということは、インタラクションを可能な限り手間なく行うことを意味します。

この数年間で、業界として音声認識技術は非常に進歩しました。多くの人々が、音声アシスタントと高度なLLMの組み合わせを待ち望んでいたことを知っています。今、VS Codeでこの二つを一緒に使用できるようになりました。

新しいVS Code Speech拡張機能は、VS Codeに音声テキスト変換サポートをもたらします。インストールすると、すべての自然言語入力ダイアログにマイクアイコンが表示されます。それを選択し、Copilotに質問し、その魔法を体験してください。

Copilot chat input box with Speech extension microphone button

どうですか、これ!うちの子はとてつもなく賢いって言ったでしょ!

Copilot chat answer to best code editor for node and express app

この拡張機能はまだプレビュー版であり、現在は英語のみをサポートしていますが、今後数か月で新しい言語と機能を追加して更新を続けていきます。

より賢く、より楽に働く

上記のすべて、そしてそれ以上の機能が今日のVS Codeで利用可能です!GitHub Copilot拡張機能をインストールするだけでOKです。Copilot Chatの機能については、私たちのドキュメントで詳しく知ることができます。

ありがとうございました!

クリスとVS Codeチーム

ハッピースマートコーディング!