以前のRAGソースは、サーバー側で検索した結果をコンテキストに含めるために使用しました。新しいAIエージェントのツールにはタイプが３種類あります。クライアント側のコードを実行、サーバー側のコードを実行、データの取得がそれらのタイプです。この中で、データの取得が以前のRAGソースにあたります。クライアント側のコードを実行とサーバー側のコードを実行が新しく追加されたタイプです。これらはタイプがオンデマンドの場合、ツール呼び出しを行うためにLLMに送信するメッセージに含めるツール定義になります。
新しいAIエージェントの動作を理解するために、以下のAPEXアプリケーションを作成しました。HTMLキャンバスにbabylon.jsを使って車を描画し、APEXのチャット画面からの指示により車を動かします。
LLMにはmacOSのLM Studioで実行しているgoogle/gemma-4-31b-qatを使用しています。
空のAPEXアプリケーションを作成します。名前はDriving with APEXとします。
ページ・プロパティのJavaScriptのファイルURLに以下を記述し、ページにbabylon.jsを組み込みます。
https://cdn.babylonjs.com/babylon.js
本記事はAPEXのAIエージェントを紹介することを目的としています。babylon.jsについてはChatGPTやClaudeに聞いて実装しています。動作することは確認しましたが、最適な実装かどうかについては分かりません。
車を描画する領域を、静的コンテンツのリージョンCarとして作成します。
ソースのHTMLコードとして以下を記述します。
<div id="babylonRegion" style="width:100%; height:500px;">
<canvas id="renderCanvas" style="width:100%; height:100%; touch-action:none;"></canvas>
</div>
車が描画されているリージョンの右隣に配置するため、レイアウトの新規行の開始をオフにします。
APEXのAIエージェントに紐付け、車を操作するプロンプトを入力するリージョンを静的コンテンツとして作成します。リージョンの名前はDriveとします。
ソースのHTMLコードに以下を記述します。
<div id="drive"></div>
車が描画されているリージョンの右隣に配置するため、レイアウトの新規行の開始をオフにします。
HTMLキャンバスに車を描画するコードを記述します。
ページ・プロパティのJavaScriptのファンクションおよびグローバル変数の宣言に以下を記述します。
ページ・ロード時に実行に以下を記述します。
initBabylonCar();
ここまでの状態でアプリケーションを実行すると、キャンバスに車が描画されているところまでを確認できます。
これからAPEXのAIエージェントを実装していきます。
共有コンポーネントのAIエージェントを開きます。
作成するAIエージェントの名前はCar Driverとします。生成AIのサービスとして、すでにワークスペースに作成されている生成AIサービスを選択します。
システム・プロンプトに以下を記述します。
「babylon.jsでキャンバスに描画された車を移動します。」
ようこそメッセージに以下を記述します。
「さあ、車を動かしましょう。」
以上で、一旦AIエージェントを作成します。
生成AIツールを作成します。
名前はmove_car_rightとします。タイプにクライアント側のコードを実行を選択します。実行ポイントにオンデマンドを選択します。
説明として以下を記述します。実行ポイントがオンデマンドの場合、以下の説明はツールの説明としてLLMに送信され、LLMによるツール選択の基準になります。
「車を右に、指示した距離だけ移動します。」
パラメータの追加をクリックし、パラメータを追加します。
パラメータ名はDISTANCE、説明は移動する距離、データ型はNUMBER、必須をはいにします。このパラメータ定義もLLMに送信され、ツールが必要とするプロパティとして認識されます。
設定のコードに、ツールmove_car_rightが選択されたときに実行するコードを記述します。タイプにクライアント側のコードを実行を選択しているため、ブラウザで実行されるJavaScriptのコードを記述します。
car.position.x += this.data.DISTANCE;
return {};
User Approvalをオンにすると、ツールを実行する前にユーザーに確認を求めることができます。通知を設定すると、ツールの実行後に通知を表示できます。
サーバー側の条件やセキュリティでは、設定した条件に応じてAIエージェントにこのツールを含めるかどうかを決めることができます。例えば、特定の部門に所属している人が実行できる、管理者であれば実行できる、といった条件のツールを作れます。また、これらの条件はAIエージェントが呼び出される度に評価されるため、それまでのコンテキストを参照してProgressive Tool Disclosureのような実装もできるでしょう。
ビルド・オプションを使うことで、開発環境に限りツール呼び出しに含めるといった設定もできます。
同様にして、以下の３つのツールを作成します。設定の異なる部分のみを記述します。
説明: 車を左に、指示した距離だけ移動します。
コード: car.position.x -= this.data.DISTANCE;
名前: move_car_up
説明: 車を上に、指示した距離だけ移動します。
コード: car.position.y += this.data.DISTANCE;
説明: 車を上に、指示した距離だけ移動します。
コード: car.position.y += this.data.DISTANCE;
名前: move_car_down
説明: 車を下に、指示した距離だけ移動します。
コード: car.position.y -= this.data.DISTANCE;
説明: 車を下に、指示した距離だけ移動します。
コード: car.position.y -= this.data.DISTANCE;
これらの４つのツールを持つAIエージェントが、Car Driverとして作成されました。
ページのロード時に、AIアシスタントがリージョンDriveで初期化されるように、動的アクションを作成します。
ページのロードで実行される動的アクションをInit Car Driverとして作成します。
TRUEアクションとしてAIアシスタントの表示を選び、生成AIのエージェントとしてCar Driverを選択します。
外観の表示形式にインラインを選択し、コンテナ・セレクタとして#driveを設定します。
以上で、アプリケーションは完成です。アプリケーションを実行すると、記事の先頭のGIF動画のように動作します。
今回作成したAPEXアプリケーションのAPEXlang形式のエクスポートを以下に置きました。
Oracle APEXのアプリケーション作成の参考になれば幸いです。
完
