ツールrun_sqlは作成済みだったので、それに画面をつけることにしました。先の記事「MCP Appとして日報アプリを作成する」に沿って、作業を実施します。
GitHubのリポジトリmcp-appにあるapp/mcp-app-helper.sqlをAPEXワークスペースにインポートし、アプリケーションの別名をRUN-SQLに変更します。
ハンドラとしてrun-sqlを作成します。
Descriptionは「入力したSELECT文を実行し結果を表形式で表示する。」と記述します。
Coding Hintとして以下を記述します。
- hostとの通信にはhttps://cdn.jsdelivr.net/npm/@modelcontextprotocol/ext-apps@1.2.2/+esmを使用してください。
- アプリケーションのテーマとしてOJ_MCP_UI_RESOURCESのui://get-current-user/mcp-app.htmlのtextをテンプレートとして使用してください。
- 表の高さが10行として、それを超える行は縦スクロールできるようにします。
列CODING_HINTは、非エンジニアにコーディング・エージェント向けのスキルの作らせるのは難しく、また、必ず含めるプロンプトをUIリソースの属性に含めることで、AIによるリソース生成の再現性が上がると考えて追加しました。
ツールrun_sqlにタグとしてrun-sqlを追加します。run_sqlの戻り値に含まれる列は、入力されるSELECT文に依存して変わるため、Output Schemaは定義していません。
以上で準備完了です。
Claude DesktopにコネクタとしてSQLclを追加し、以下のプロンプトを与えました。
sqlclでlocal-26ai-apexdevに接続して、以下の作業を実施して。* ツールrun_sqlを呼び出し、引数sqlに入力したSELECT文による検索結果を表示するMCP App(SEP-1865)を作成します。ツールの定義情報は表OJ_MCP_UC_AI_TOOLSを参照してください。* ツールrun_sqlは、検索結果の１行をJSONオブジェクトとした配列を返します。 * リソースの生成にあたり、表OJ_MCP_UI_RESOURCESの列CODING_HINTをプロンプトとして参照してください。* MCP Appとして、OJ_MCP_UI_RESOURCESのrun-sqlの列TEXTにUI Resource、つまりHTMP/JavaScript/CSSのバンドルを生成して更新してください。
UIリソースが生成され、データベースに登録されました。
MCP Inspectorで動作確認したところ、プロンプトに指示したことはできるアプリが出来上がっていました。
この間は30分弱で、本記事を書いている時間の方が長いです。本当にすごい。
完
