日日是Oracle APEX

2026年4月16日木曜日

MCP AppsのサンプルアプリBudget Allocator Serverをデータベースで実行する

GitHubのリポジトリmodelcontextprotocol/ext-appsに含まれているBudget Allocator Serverをデータベースでホストしてみます。今回はClaude Desktopから呼び出せるように、Autonomous AI Databaseを使用します。Autonomous AI Databaseでの準備作業は、以下の記事で紹介しています。

MCPを話すOracle Databaseを作成する - Autonomous AI Database編

Claude Desktopでは以下のように動作します。

Budget Allocator Serverのサーバーはserver.tsで実装されています。以下の方針で、データベースに実装し直しています。データベースで実行するスクリプトはClaude Sonnetに生成してもらいました。

Zodによるスキーマ定義を切り出し、Oracle Database向けの表定義を生成させました。（スクリプト：bas_create_tables.sql）
サンプルデータを生成するファンクションseededRandomとgenerateHistoryを取り出し、PL/SQLで書き直してもらいました。（スクリプト：bas_generate_history.sql）
表bas_budget_categories、bas_budget_analyticsへの初期データの投入を行なうINSERT文を生成させました。（スクリプト：bas_prepare_budget_categories.sql、bas_prepare_budget_analytics.sql）
表bas_budget_config、bas_budget_preset_budgetsへの初期データの投入については、自分でINSERT文を書きました。（スクリプト：bas_prepare_budget_config.sql）
ツールが返す構造化出力を生成するファンクションbas_get_budget_data_responseを生成させました。（スクリプト：bas_get_budget_data_response.sql）

本記事の目的はMCPアプリをデータベースでホストすることなので、PL/SQLで実装されたサーバーがTypeScriptの機能と完全に互換かどうかという点は確認していません。MCPアプリが動作すれば良しとしています。

CREATE TABLE文を生成する部分、INSERT文を生成するデータ準備部分、それとツール本体となるプロシージャを生成する部分に、作業を分けてコード生成させましたが、server.tsを丸投げしても良かったかもしれません。

これらを一括で実行するスクリプトbas_install.sqlを作成しています。リポジトリmcp-appにmcp-app/examples/budget-allocator-server/bas_install.sqlとして含まれているので、リモートMCPサーバーを実装しているスキーマに接続して実行します。

Autonomous AI Database向けの構築手順にそって作成した環境であれば、Autonomous AI Lakehouseの19cのデータベースがSALESADBとして作成され、APEXワークスペースのスキーマとしてWKSP_APEXDEVが作成されています。この環境を前提とすると、以下のコマンドでBuget Allocator Serverのサーバーを実装できます。

sql -cloudconfig Wallet_SALESADB.zip wksp_apexdev@salesadb_low
@mcp-app/examples/budget-allocator-server/bas_install.sql

データベースにサーバーが実装されたことを確認するために、スクリプト実行の最後にツール呼び出しのレスポンスを出力しています。

mcp-salesadb % sql -cloudconfig Wallet_SALESADB.zip wksp_apexdev@salesadb_low

SQLcl: 木 4月 16 12:39:12 2026のリリース25.4 Production

パスワード (**********?) ****************

接続先:

Oracle Database 19c Enterprise Edition Release 19.0.0.0.0 - Production

Version 19.31.0.1.0

SQL> @mcp-app/examples/budget-allocator-server/bas_install.sql

Table BAS_BUDGET_CATEGORIESは作成されました。

Table BAS_BUDGET_CONFIGは作成されました。

Table BAS_BUDGET_CONFIG_PRESET_BUDGETSは作成されました。

Table BAS_HISTORICAL_MONTHSは作成されました。

Table BAS_HISTORICAL_MONTH_ALLOCATIONSは作成されました。

Table BAS_BUDGET_ANALYTICSは作成されました。

Table BAS_BUDGET_ANALYTICS_STAGESは作成されました。

Table BAS_STAGE_BENCHMARKSは作成されました。

Table BAS_STAGE_BENCHMARK_PERCENTILESは作成されました。

Commentは作成されました。

Procedure BAS_GENERATE_HISTORYがコンパイルされました

Function BAS_GET_BUDGET_DATA_RESPONSEがコンパイルされました

1行挿入しました。

コミットが完了しました。

PL/SQLプロシージャが正常に完了しました。

コミットが完了しました。

PL/SQLプロシージャが正常に完了しました。

Oracle Database 19c Enterprise Edition Release 19.0.0.0.0 - Production

Version 19.31.0.1.0から切断されました

mcp-salesadb %

サーバーの実装を削除するスクリプトbas_drop_all.sqlも用意しています。

以上でサーバー側の実装はできました。

APEXアプリケーションをインストールして、Budget AllocatorをMCPアプリとして登録します。

Autonomous AI DatabaseのAPEXに接続し、アプリケーション・ビルダーからインポートを実行します。

リポジトリmcp-appに含まれるMCP App Helperアプリmcp-app/app/mcp-app-helper.sqlをインポートします。

次へ進みます。

アプリケーションのインストールを実行します。

アプリケーションがインストールされます。

アプリケーションの編集を開き、アプリケーションの名前と別名を更新します。

アプリケーションの名前をext-apps、別名をext-appsとします。

アプリケーションを実行します。

最初にHandlersを開き、リモートMCPサーバーのエンドポイントとなるORDS RESTサービスをインストールします。

作成をクリックします。

ORDSのRESTモジュール名はAPEXアプリの別名と同じにします。これはリモートMCPサーバーの実装上、必須になっています。

リモートMCPサーバーのエンドポイントURLは以下になります。

https://リバースプロキシのホスト/ords/ORDS別名/ext-apps/mcp

デフォルトの設定のまま、作成をクリックします。

ORDSのRESTモジュールとしてext-apps、テンプレートとしてmcp、そのテンプレートにPOSTハンドラとDELETEハンドラが作成されます。

Resourcesを開き、UIリソースとしてBudget Allocatorを作成します。

作成をクリックします。

以下の値でUIリソースBudget Allocatorを作成します。

Uri: ui://budget-allocator/mcp-app.html

Name: Budget Allocator

Description: Interactive Budget Allocator UI

作成したUIリソースBudget Allocatorに実際のアプリを登録します。Bundleを開きます。

Resource IDにBudget Allocatorを選択し、bundle html fileにリポジトリext-appsに含まれるext-apps/examples/budget-allocator-server/dist/mcp-app.htmlを選択します。

Updateをクリックし、MCPアプリをデータベースにアップロードします。

Toolsを開き、ツールとしてget-budget-dataを作成します。

Code: get-budget-data
Description: Returns budget configuration with 24 months of historical allocations and industry benchmarks by company stage

Input Schema: {"$schema":"http://json-schema.org/draft-07/schema#","type":"object"}
Function Call: return bas_get_budget_data_response();
Tags: ext-apps

Resource Id: Budget Allocator

Output Schemaには、こちらの内容output_schema.jsonを記述します。

以上で作成をクリックします。

以上で、データベースにMCPアプリBudget Allocatorを登録できました。

Claude DesktopよりMCPアプリBudget Allocatorを呼び出してみます。

サイド・メニューよりCustomizeを開きます。

コネクタを開きます。

プラス（＋）アイコンを開き、カスタムコネクタを追加を実行します。

コネクタの名前をBudget Allocator、URLにAutonomous AI Databaseへのリバース・プロキシを指すリモートMCPサーバーのエンドポイントURLを設定します。

追加をクリックします。

カスタムコネクタBudget Allocatorが追加されます。

動作を確認します。

新規チャットより「Budget Allocatorを呼び出して」と伝えます。実行の承認を求められ、実行を許可すると、MCPアプリのBudget Allocatorが表示されます。

今回の記事は以上になります。

完

2026年4月15日水曜日

MCP AppsのサンプルアプリMap Serverをデータベースで実行する

GitHubのリポジトリmodelcontextprotocol/ext-appsに含まれているMap Serverをデータベースでホストしてみます。CesiumJSを使って地図を表示するMCPアプリです。

オリジナルのMCPアプリを実行すると、以下のように表示されます。

データベースのリモートMCPサーバーとして実装し、MCPアプリをMCP Inspectorで呼び出してみました。

記事「MCP Appsのサンプルアプリbasic-server-vanillajsをデータベースで実行する」で作成したリモートMCPサーバーext-appにMap Serverを追加します。

オリジナルのMap Serverは２つのツールshow-mapおよびgeocodeを呼び出しますが、ツールgeocodeについては省略し、show-mapのみを実装します。

最初にツールshow-mapの本体となる、PL/SQLのファンクションshow_mapを作成します。

APEXのSQLコマンドから実行するとよいでしょう。TypeScriptの実装をPL/SQLに、そのまま書き直しただけです。

APEXアプリケーションを実行し、UIリソースを作成します。

Resourcesを開き、以下を設定してMap ServerのUIリソースを作成します。

Uri: ui://map-server/mcp-app.html

Name: Map Server

Description: Display an interactive world map zoomed to a specific bounding box.

Bundleを開き、Resource IDに先ほど作成したMap Serverを選択します。bundle html fileにext-apps/examples/map-server/dist/mcp-app.htmlを選択し、Updateします。

以上でUIリソースが作成されました。

Toolsを開き、ツールとしてshow-mapを作成します。

Code: show-map

Description: Display an interactive world map zoomed to a specific bounding box.

Function Call: return show_map(:parameters);

Tags: ext-apps

Resource Id: Map Server

Input Schemaには以下を記述します。

MCPアプリのMap Serverは外部へのネットワーク接続を行うようです。そのため、CSPのconnectDomainおよびresourceDomainを設定します。

CSPを設定する表はデータベースに作成済みですが、ユーザー・インターフェースがありません。以下のSQLを実行し、CSP関連の設定を表OJ_MCP_CSP_DOMAINSに設定します。

APEXのSQLコマンドから実行します。

以上でMap Serverの実装は完了です。

MCP InspectorからMCPアプリを実行します。

npx -y @modelcontextprotocol/inspector

リモートMCPサーバーに接続し、Appsタブを開いてshow-mapを選択します。

東京近辺を表示するように、以下を入力します。

west: 138.5

south: 34.8

east: 140.9

north: 36.8

Open Appをクリックします。

CesiumJSの地図に東京近辺が表示されます。Back to Inputをクリックします。

シンガポール付近を表示してみます。以下の値を入力し、Open Appをクリックします。

west: 103.0
south: 0.8
east: 104.6
north: 1.9

シンガポール近辺が表示されます。

今回の記事は以上になります。

完

MCP Appsのサンプルアプリbasic-serverのPreact,React,Solid,Svelte,Vue版をデータベースで実行する

先日の記事「MCP Appsのサンプルアプリbasic-server-vanillajsをデータベースで実行する」では、VanillaJS（UIフレームワークを使用しない）で作成したMCPアプリをデータベースでホストしました。

GitHubのリポジトリmodelcontextprotocol/ext-appsには、VanillaJS以外にUIフレームワークとしてPreact、React、Solid、Svelte、Vueを使ったMCPアプリのサンプルが含まれています。これらのアプリケーションはすべてツールget-timeを呼び出しています。また、UI自体の見かけはVanillaJSのMCPアプリと同じになっています。

これらのMCPアプリをデータベースでホストしてみます。データベースでのリモートMCPサーバーの実装はresources/read呼び出しを受けて、データベースに保存しているバンドル化されたMCPアプリのソース（HTML+JavaScript+CSS）をクライアントに戻すだけです。そのため、ツールの実装さえ同じであればMCPアプリは一切変更なしで動作するはずです。

結果ですが、modelcontextprotocol/ext-appsにあるbasic-server-preact、basic-server-react、basic-server-solid、basic-server-svelte、basic-server-vueのすべてのMCPアプリが変更せずに動作しています。

作業自体は記事「MCP Appsのサンプルアプリbasic-server-vanillajsをデータベースで実行する」と同じ手順で、作成したリソースにそれぞれのMCPアプリのバンドルを登録します。MCPアプリのUIバンドルはext-apps/examples/basic-server-xxxx/dist/mcp-app.htmlとして作成されています。

Preact、React、Solid、Svelte、Vueの５つのMCPサーバーを登録しますが、ひとつひとつ手作業で登録するのはつらいので、以下のスクリプトを書きました。

APEXのSQLコマンドから上記のスクリプトを実行すると、ファンクションget_timeを呼び出すツールとしてget-time-preact、get-time-react、get-time-solid、get-time-svelte、get-time-vueが作成されます。また同名のリソースが作成され、ツールに紐づけられます。

以上でツールとリソースは作成されます。この後に、リソースにそれぞれのUIバンドルmcp-app.htmlを登録します。

登録後にMCP Inspectorを使って動作を確認します。

npx -y @modelcontextprotocol/inspector

MCPサーバーext-appsに接続し、MCP Appsを一覧します。全部で６つのアプリが選択できます。

アプリの作成に使用しているUIフレームワークが異なるだけで、MCPアプリ自体はどれでも同じ見かけと動作をします。

ただし、VanillaJSではServer Timeは以下のように表示されます。

他のアプリは以下のように表示されます。

コードを確認すると、VanillaJSでの時刻の取り出しは以下のファンクションで行われていました。構造化出力を優先して参照しています。

function extractTime(result: CallToolResult): string {
  const { time } = (result.structuredContent as { time?: string }) ?? {};
  return time ?? "[ERROR]";
}

Preactを確認すると以下でした。構造化出力を参照していません。

function extractTime(callToolResult: CallToolResult): string {
  const { text } = callToolResult.content?.find((c) => c.type === "text")!;
  return text;
}

現在時刻の表示の違いは、ファンクションget_timeのレスポンスの取得方法が異なることが原因でした。

この他Reactについては、Received a response for an unknown message IDというエラーが発生しています。Reactのみで発生していることと、エラーメッセージにあるmessage IDはMCPアプリとホストの間でやり取りするメッセージに割り振られているIDで、ホストとデータベースで実行されるMCPサーバー（ツール）の間のメッセージに割り振られているIDではありません。よって、これはMCPアプリ側の問題だと思われます。

以上でデータベースに実装したリモートMCPサーバーで、各種UIフレームワークで作成したMCPアプリをホストできることが確認できました。

今回の記事は以上になります。

完