MCP Apps v1.2の新機能 「リソース読み取りAPI」 を試してみた

demo-mcp-apps-v1.2.0/
├── app/
│   ├── globals.css              — グローバルスタイル
│   ├── hooks/
│   │   └── use-mcp-app.ts      — MCP Apps 接続フック
│   ├── layout.tsx               — ルートレイアウト（iframe ブートストラップ含む）
│   ├── mcp/
│   │   └── route.ts            — MCP サーバーエンドポイント
│   ├── page.tsx                 — メイン UI（Resource Browser）
│   └── types/
│       └── global.d.ts          — Window 型拡張
├── lib/
│   └── sample-resources.ts      — サンプルリソース定義
├── baseUrl.ts                   — 公開 URL 解決（トンネル / Vercel）
├── middleware.ts                — CORS ヘッダー付与
├── next.config.ts               — assetPrefix 設定
├── package.json
└── tsconfig.json

{
  "dependencies": {
    "@modelcontextprotocol/ext-apps": "^1.2.2",
    "@modelcontextprotocol/sdk": "1.25.2",
    "mcp-handler": "^1.0.7",
    "next": "16.1.6",
    "react": "19.2.3",
    "react-dom": "19.2.3",
    "zod": "^4.3.6"
  }
}

https://xxxx-xxx-xxx/mcp

（xxxx-xxx-xxxはVercelデプロイ後に取得可能なドメイン）

// MCP App（UI側）: リソースの読み取り
import { App } from "@modelcontextprotocol/ext-apps";

const app = new App();

// ホストとの通信を確立（必須！）
await app.connect();

// サーバーリソースを読み取る
const resource = await app.readResource("config://app-settings");

console.log(resource);
// {
//   contents: [
//     {
//       uri: "config://app-settings",
//       mimeType: "application/json",
//       text: '{"theme": "dark", "language": "ja", ...}'
//     }
//   ]
// }

// 取得したデータをUIに反映
const settings = JSON.parse(resource.contents[0].text);
document.getElementById("theme-select").value = settings.theme;

// MCP App（UI側）: リソース一覧の取得
const { resources } = await app.listResources();

console.log(resources);
// [
//   { uri: "config://app-settings", name: "アプリ設定", mimeType: "application/json" },
//   { uri: "data://metrics/cpu", name: "CPU使用率", mimeType: "application/json" },
//   { uri: "data://metrics/memory", name: "メモリ使用率", mimeType: "application/json" },
// ]

// UIにリソース一覧を表示
resources.forEach((res) => {
  const option = document.createElement("option");
  option.value = res.uri;
  option.textContent = res.name;
  document.getElementById("resource-selector").appendChild(option);
});

// MCP App（React）: useApp() + リソースAPI
import { useApp } from "@modelcontextprotocol/ext-apps/react";
import { useState, useEffect } from "react";

function Dashboard() {
  const app = useApp();
  const [resources, setResources] = useState([]);
  const [selectedData, setSelectedData] = useState(null);

  useEffect(() => {
    // リソース一覧を取得
    app.listResources().then(({ resources }) => {
      setResources(resources);
    });
  }, [app]);

  const handleSelect = async (uri) => {
    // 選択されたリソースを読み取り
    const result = await app.readResource(uri);
    setSelectedData(JSON.parse(result.contents[0].text));
  };

  return (
    <div>
      <h2>利用可能なリソース</h2>
      <select onChange={(e) => handleSelect(e.target.value)}>
        <option value="">選択してください</option>
        {resources.map((res) => (
          <option key={res.uri} value={res.uri}>
            {res.name}
          </option>
        ))}
      </select>
      {selectedData && (
        <pre>{JSON.stringify(selectedData, null, 2)}</pre>
      )}
    </div>
  );
}

export default Dashboard;

// app/hooks/use-mcp-app.ts — ダウンロードヘルパー
export async function requestFileDownload(options: {
  filename: string;
  content: string;
  mimeType: string;
}) {
  if (!singletonApp) throw new Error("Not connected to MCP host");
  return singletonApp.downloadFile({
    contents: [
      {
        type: "resource" as const,
        resource: {
          uri: `file:///${options.filename}`,
          text: options.content,
          mimeType: options.mimeType,
        },
      },
    ],
  });
}

// app/page.tsx — ダウンロードボタンのハンドラ
const handleDownload = useCallback(async () => {
  if (!content?.text) return;
  const resource = resources.find((r) => r.uri === selectedUri);
  const ext = content.mimeType === "application/json" ? ".json" : ".md";
  const filename = (resource?.name ?? "resource").replace(/\s+/g, "-") + ext;
  try {
    await requestFileDownload({
      filename,
      content: content.text,
      mimeType: content.mimeType ?? "text/plain",
    });
    setStatus(`${filename} をダウンロードしました`);
  } catch (err) {
    console.error("Download failed:", err);
    setStatus("ダウンロードに失敗しました");
  }
}, [content, selectedUri, resources]);