オリジナルの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に、そのまま書き直しただけです。
Resourcesを開き、以下を設定してMap ServerのUIリソースを作成します。
Name: Map Server
Description: Display an interactive world map zoomed to a specific bounding box.
以上でUIリソースが作成されました。
Bundleを開き、Resource IDに先ほど作成したMap Serverを選択します。bundle html fileにext-apps/examples/map-server/dist/mcp-app.htmlを選択し、Updateします。
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
シンガポール近辺が表示されます。
今回の記事は以上になります。
完
