JAXA Earth API for JavaScript
    検索インデックスを準備しています...

    MCP基礎（MCP Apps編）

    JAXA Earth API for JavaScript を使うと生成AIと連携するためのMCP (Model Context Protocol)の開発も可能です。 このチュートリアルではStreamable HTTP方式のMCP Appsを作ります。 そのため、MCPサーバー（下記のソースコード）とMCPクライアントを別の端末で起動して、ネットワーク越しに動作させることも可能です。

    ただし下記のソースコードではHTTPS対応やユーザー認証等のセキュリティ対策は省略していますので、信頼できるローカルネットワーク内での利用を想定しています。 不特定多数のユーザーがアクセスできるようにインターネットに公開するためには別途セキュリティ対策が必要です。

    STDIO方式とStreamable HTTP方式を理解した上での解説となりますので、不明な部分は次をご覧ください。

    この解説内容は次の環境で動作確認済です（2026.2時点）。

    • Windows 11
    • Node.js (v22.20.0)
    • TypeScript (5.9.3)
    • Visual Studio Code Insiders (バージョン 1.110.0-insider)
    • GitHub Copilot Freeプラン

    下記リンクからソースコード一式をダウンロードしてZIPファイルを展開して、任意のフォルダ（以下、「プロジェクトルート」と言います）に保存します。

    MCPサンプルコード一式

    サンプルコードには次のようなファイルが含まれます。

    - package.json //このパッケージに関する情報を記載したNode.js用のファイル
    - tsconfig.json //MCPサーバー部分をコンパイルするためのTypeScriptの設定ファイル
    - vite.config.ts //UI部分をコンパイルするためのViteの設定ファイル

    - src-sv/ //MCPサーバー部分の構成ファイル
      - index.ts //MCPサーバーの実行に必要なファイル
      - createMcpServer.ts //McpServerを作成する関数のファイル
      - getElevationImage.ts //JAXA Earth APIで標高データの画像を返すための関数
      - jaxa.earth.esm.js //JAXA Earth APIのモジュールファイル
      - jaxa.earth.esm.d.ts //JAXA Earth APIのモジュールの型定義ファイル

    - src-ui/ //UI部分の構成ファイル
      - index.html //UIのウェブアプリのHTMLファイル
      - script.ts //index.html内で動作するJavaScriptのコードを記載したファイル

    MCP Appsでは、Streamable HTTP方式の場合に対してsrc-uiが追加されています。この中のウェブアプリも生成AIから呼び出されるようになります。

    createMcpServer.tsにおけるUIの定義部分は次の通りです。 生成AIからUIリソースが要求された場合にindex.htmlを返します。生成AIがMCP Appsに対応していない場合は無視されて、通常のStreamable HTTP方式のMCPとして動作する機能だけが有効になります。

    import { registerAppResource, RESOURCE_MIME_TYPE } from "@modelcontextprotocol/ext-apps/server";
    import { McpServer } from "@modelcontextprotocol/sdk/server/mcp.js";
    import fs from "node:fs/promises";
    import path from "node:path";

    //(途中省略)

    export default (): McpServer => {

      //MCPサーバーを作成
      const server = new McpServer({
        name: "jaxa-earth-api",
        version: "1.0.0",
      });

      //UIリソースのURIを定義
      const resourceUri = "ui://get-elevation-image/ui";

      //(途中省略)

      //リソースを定義
      registerAppResource(
        server,
        resourceUri,
        resourceUri,
        { mimeType: RESOURCE_MIME_TYPE },
        async () => {
          //このcreateMcpServer.tsのコンパイル出力先フォルダbuild（=import.meta.dirname）内に、コンパイル後のindex.htmlもある場合
          const text = await fs.readFile(path.join(import.meta.dirname, "index.html"), "utf-8");

          return {
            contents: [{
              uri: resourceUri,
              mimeType: RESOURCE_MIME_TYPE,
              text,
            }],
          };
        },
      );
      
      return server;
    }

    プロジェクトルートでターミナル（コマンドプロンプト）を開き、次を実行することで、必要なモジュールがインストールされます。

    npm i

    ターミナルで続けて次を実行します。npmの使い方として、startに関してはnpm startと省略して書くことも可能です。

    npm run start

    これにより次の３つの処理が自動で実行されます。

    • Viteによるsrc-ui部分のコンパイル（npm run build-uiにより単独でも実行できます）
    • TypeScriptによるsrc-sv部分のコンパイル（npm run build-svにより単独でも実行できます）
    • MCPサーバーの起動（node ./build/index.jsにより単独でも実行できます）

    ※MCPサーバーを起動したままであっても、src-ui内のファイルを編集した場合には、別のターミナルを開いてnpm run build-uiを実行することで、UI部分のみコンパイルすることも可能です。

    次のような表示が出ればMCPサーバーのコンパイル～起動が成功です。

    > jaxa-earth-api@1.0.0 start
    > npm run build-ui && npm run build-sv && node ./build/index.js

    > jaxa-earth-api@1.0.0 build-ui
    > npx vite build

    vite v7.3.1 building client environment for production...
    ✓ 142 modules transformed.
    [plugin vite:singlefile]

    [plugin vite:singlefile] Inlining: index-Bkm2ptAA.js
    ../build/index.html  381.72 kB │ gzip: 92.59 kB
    ✓ built in 718ms

    > jaxa-earth-api@1.0.0 build-sv
    > tsc

    MCP server listening on http://192.168.xxx.xxx:3001/mcp

    192.168.xxx.xxxの部分については、お使いの端末のIPアドレス、ネットワーク環境に合わせて./src-sv/index.ts内の記載を書き換えてください。 ターミナル上ではMCPサーバーが起動したままの状態となるため、終了させるには [Ctrl] + C を押します。

    コンパイル後のファイルは、プロジェクトルートに新しく作られるbuildフォルダ内に格納されます。主なファイルは次の通りです。

    • ./build/index.html：UIとして表示されるファイル。MCP AppsではUIのウェブアプリは単一のファイルにバンドルされます。
    • ./build/index.js：MCPサーバーとして起動するためのファイル。
    • その他：MCPサーバーで使う構成ファイル。

    2026.2現在、MCP Appsをサポートする生成AIや利用できるユーザーは一部に限られています。 今回の場合は、Visual Studio Codeを利用します。InsidersバージョンであればMCP Appsに対応しており、VS Codeのチャット機能（GitHub Copilot Freeプラン）でも試すことが可能です。 インストール方法については流動的であるため、最新の各種解説記事等をご確認ください。

    生成AIに、上記で起動しているMCP AppsのURLを登録します。

    http://192.168.xxx.xxx:3001/mcp

    接続が成功すると、質問に対して次のようなUIを用いて回答してくれます。

    上記は札幌の地形データを表示させた後に「富士山」のボタンを押した状態のスクリーンショットです。 MCP AppsのUIにはこのようなボタンなどを配置することができ、ボタンを押すことによってもMCPサーバーに対して追加の要求を送信し、表示を切り替えたりすることが可能です。

    MCPで文字列や画像などを返すことができるようになりました。 次は地球観測データを取り扱うための実用的なMCPを開発します。

    実用的なMCP作成はこちらへ

    テーマ設定

    メンバーの可視性

    このページ

    MCP基礎（MCP Apps編）