万字深度解读 MCP Apps：重构 Web 应用，开启 AI 助手的“小程序”时代。

npx skills add modelcontextprotocol/ext-apps

registerAppTool(
       server,
   "get-weather",
    {
      title: ...
      description: ...
      inputSchema: ...
      _meta: { ui: { resourceUri: weatherResourceUri } },
    },
    async ({ city }) => {.........模拟返回天气数据.......
     },
  );

registerAppResource(
    server,
    ...
    async () => {
      const html = await fs.readFile(path.join(DIST_DIR, "weather-app.html"), "utf-8");
      return {
        contents: [
          { uri: weatherResourceUri, mimeType: RESOURCE_MIME_TYPE, text: html },
        ],
      };
    },
  );

import { App } from"@modelcontextprotocol/ext-apps";
...
const app = new App({ name: "Weather App", version: "1.0.0" });

// 注册工具结果达到：重新渲染 UI
app.ontoolresult = (result) => {
const data = parseResult(result);
if (data) {
    currentCity = data.city;
    renderWeather(data);
  }
};

// 点击UI上的刷新按钮，更新天气数据
refreshBtn.addEventListener("click", () => {
  fetchWeather(currentCity);
});

// 与Host连接、初始化、握手等
app.connect();

npm run start

# 在 ext-apps/examples/basic-host 目录下SERVERS='["http://localhost:3001/mcp"]' npm run dev