生成AIエージェントを作ることこそが、これからのエンジニアの仕事になる。#

これからのエンジニアにとって、生成AIエージェントの開発スキルは非常に重要になってきています。AI技術の進化により、従来のコーディングだけでなく、AIを活用した自動化や効率化が求められる時代となりました。本コンテンツでは、実際に手を動かしながら生成AIエージェントの開発を体験していただけますので、現場で即戦力となるスキルを身につけることができます。現在の生成AIは、ちょっとしたプロンプトの工夫で動作がガラリと変わることがあります。作成した生成AIエージェントのプロンプトを試行錯誤することで、新たなる知見を得られるかもしれません。 AIエージェントの仕組みや活用方法を理解することで、生成AIへのより深い造詣を得られます。これは今後のキャリアアップにも大きく役立つはずです。最先端の技術を学び、未来のエンジニアリングをリードできる力を一緒に身につけていきましょう！

はじめに - そもそも生成AIエージェントとは？#

生成AIとは、その名の通り、何かを生成してくれるAIのことです。自然言語だったり、画像だったり、その他だったりと。そして、生成AIは「アプリケーションに対する命令」も生成できます。ここでは、その生成した命令に従って何かをしてくれるアプリケーションを生成AIエージェントとよんでいます。ユーザの依頼をエージェントが生成AIに送り、生成AIがアプリケーションに対する命令を生成し、エージェントが命令通りに動く。生成AIが脳みそとすると、エージェントは五感や手足に相当します。

このように聞くと生成AIエージェントを作るのは大変にも思えるかもしれませんが、ここでは全4回のコースで生成AIのコーディングを行う上での手足であるコーディング生成AIエージェントを作成します。

お楽しみください。

初回#

Visual Studio CodeのExtensionとしてコーディング生成AIエージェントを作成するので、まずはVisual Studio CodeのExtensionをセットアップしていきます。

準備#

Node.jsをインストールしてください。
Gitコマンドを使えるようにしてください。サンプルコードをGitで取得します。
Visual Studio Codeをインストールしてください。
Visual Studio CodeのExtensionとしてGitHub CopilotとGitHub Copilot Chatをインストールしてください。
GitHub のアカウントを用意して、GitHub Copilotを使えるようにしてください。

テンプレートのダウンロード#

Visual Studio CodeのExtensionの土台となるソースコードをgithubから取得します。

git clone https://github.com/ukiuni/vscode-extension-agent-sample

Extensionを1から作りたい方はこちらを参考にしてください。今回はエージェント作成に集中するために、Extensionの1からの作成は省略します。

クローンしたら、Visual Studio Codeでこのプロジェクトを開いてください。

code vscode-extension-agent-sample

コードの解説#

cloneしたコードを簡単に解説します。

このプロジェクトはTypeScriptを使っています。

.vscodeにはVisual Studio　Codeでこのプロジェクトを実行するための設定ファイルが入っています。

Visual Studio CodeのExtensionはpackage.jsonに多くの設定が含まれています。重要なのは以下。

  "main": "./out/extension.js",
  "contributes": { 
    "views": {
      "main-view": [
        {
          "id": "main.view",
          "name": "MainView",
          "type": "webview"
        }
      ]
    },   
    "viewsContainers": {
      "activitybar": [
        {
          "id": "main-view",
          "title": "myExtension",
          "icon": "./src/media/icon.svg"
        }
      ]
    }
  }

mainにextensionの実態が入っています。./out/extension.jsはビルド後のJavaScriptで、ソースはsrc/extension.tsです。 contributesの中に、viewsContainersにActivitybarに配置するボタンが、viewsに表示する画面が設定されています。activitybarのidが、viewsの子要素に設定されている名前と一致しています。これでActivitybarを押すとmain-viewが開くようになっています。

src/extension.tsで重要なのは以下。

  const provider = new MagiViewProvider(context.extensionUri, context);
    context.subscriptions.push(
        vscode.window.registerWebviewViewProvider(
            "main.view",
            provider,
        ),
    );

これでmain.viewの動きを指定しています。

動かす#

Visual Studio CodeのメニューのRun→Start Debuggingを押すと新しくVisuao Studioが立ち上がり、Activity Bar（左のバー）の一番下に

のようなアイコンが表示されていたら、実行に成功しています。このアイコンはプロジェクトのsrc/media/icon.svgにあります。もっといいものが良ければ、書き換えていただいて構いません。ボタンを押すとHello Worldと表示されているViewが開きます。

今回のおさらい#

VSCode Extension開発環境をセットアップ
package.jsonでActivityBarとViewの設定。
Extensionを起動してみる。

次にやること#

次はAgentの肝となる生成AIを呼び出す機能を作成してみましょう！していきましょう。

ご質問・ご要望をお待ちしています。