{"id":24782,"date":"2025-11-22T20:31:21","date_gmt":"2025-11-22T20:31:21","guid":{"rendered":"https:\/\/pokecon.jp\/job\/?p=24782"},"modified":"2025-11-22T20:31:21","modified_gmt":"2025-11-22T20:31:21","slug":"mcp-%e3%81%ab%e3%81%8a%e3%81%91%e3%82%8b%e3%82%a4%e3%83%b3%e3%82%bf%e3%83%a9%e3%82%af%e3%83%86%e3%82%a3%e3%83%96%e3%81%aa-ui-%e3%82%92%e6%a8%99%e6%ba%96%e5%8c%96%e3%81%99%e3%82%8b%e6%8b%a1%e5%bc%b5","status":"publish","type":"post","link":"https:\/\/pokecon.jp\/job\/24782\/","title":{"rendered":"MCP \u306b\u304a\u3051\u308b\u30a4\u30f3\u30bf\u30e9\u30af\u30c6\u30a3\u30d6\u306a UI \u3092\u6a19\u6e96\u5316\u3059\u308b\u62e1\u5f35\u6a5f\u80fd MCP Apps \u306e\u63d0\u6848"},"content":{"rendered":"\n<\/p>\n<div>\n<p>ChatGPT \u306e <a target=\"_blank\" href=\"https:\/\/developers.openai.com\/apps-sdk\/\">Apps SDK<\/a> \u3084 <a target=\"_blank\" href=\"https:\/\/mcpui.dev\/\">MCP-UI<\/a> \u306e\u3088\u3046\u306b AI \u30a8\u30fc\u30b8\u30a7\u30f3\u30c8\u304c\u30c1\u30e3\u30c3\u30c8\u5f62\u5f0f\u306e\u5bfe\u8a71\u3060\u3051\u3067\u306a\u304f\u3001\u30a4\u30f3\u30bf\u30e9\u30af\u30c6\u30a3\u30d6\u306a UI \u3092\u901a\u3058\u3066\u30e6\u30fc\u30b6\u30fc\u3068\u3084\u308a\u53d6\u308a\u3067\u304d\u308b\u4ed5\u7d44\u307f\u304c\u6ce8\u76ee\u3055\u308c\u3066\u3044\u307e\u3059\u3002AI \u30a8\u30fc\u30b8\u30a7\u30f3\u30c8\u304c UI \u3092\u8fd4\u3059\u3053\u3068\u3067\u3001\u4f1a\u8a71\u306e\u6d41\u308c\u306e\u4e2d\u3067\u4ee5\u4e0b\u306e\u3088\u3046\u306a\u4f53\u9a13\u3092\u63d0\u4f9b\u3067\u304d\u307e\u3059\u3002<\/p>\n<ul>\n<li>\u300c\u304a\u3059\u3059\u3081\u306e\u30e9\u30f3\u30cb\u30f3\u30b0\u30b7\u30e5\u30fc\u30ba\u3092\u63a2\u3057\u3066\u300d\u3068\u5c0b\u306d\u308b\u3068\u3001\u8907\u6570\u306e\u30b7\u30e5\u30fc\u30ba\u306e\u753b\u50cf\u3068\u4fa1\u683c\u304c\u8868\u793a\u3055\u308c\u3001\u30e6\u30fc\u30b6\u30fc\u306f\u6c17\u306b\u5165\u3063\u305f\u3082\u306e\u3092\u30af\u30ea\u30c3\u30af\u3057\u3066\u30ab\u30fc\u30c8\u306b\u8ffd\u52a0\u3067\u304d\u308b<\/li>\n<li>\u30db\u30c6\u30eb\u306e\u4e88\u7d04\u3092\u4f9d\u983c\u3059\u308b\u3068\u3001\u5229\u7528\u53ef\u80fd\u306a\u90e8\u5c4b\u306e\u30ea\u30b9\u30c8\u304c\u8868\u793a\u3055\u308c\u3001\u30e6\u30fc\u30b6\u30fc\u306f\u65e5\u4ed8\u3084\u4eba\u6570\u3092\u9078\u629e\u3057\u3066\u4e88\u7d04\u624b\u7d9a\u304d\u3092\u9032\u3081\u3089\u308c\u308b<\/li>\n<li>\u5e0c\u671b\u306b\u3042\u3063\u305f\u8cc3\u8cb8\u7269\u4ef6\u3092\u63a2\u3059\u969b\u306b\u3001\u5730\u56f3\u4e0a\u306b\u7269\u4ef6\u306e\u4f4d\u7f6e\u304c\u8868\u793a\u3055\u308c\u3001\u30e6\u30fc\u30b6\u30fc\u306f\u5730\u56f3\u3092\u64cd\u4f5c\u3057\u3066\u5468\u8fba\u74b0\u5883\u3092\u78ba\u8a8d\u3067\u304d\u308b<\/li>\n<li>\u30e6\u30fc\u30b6\u30fc\u304c\u63d0\u793a\u3057\u305f\u56f3\u5f62\u3092\u5143\u306b Figma \u4e0a\u3067\u30c7\u30b6\u30a4\u30f3\u6848\u3092\u751f\u6210\u3057\u3001\u30e6\u30fc\u30b6\u30fc\u306f\u751f\u6210\u3055\u308c\u305f\u30c7\u30b6\u30a4\u30f3\u3092\u76f4\u63a5\u7de8\u96c6\u3067\u304d\u308b<\/li>\n<\/ul>\n<p><img decoding=\"async\" src=\"https:\/\/images.ctfassets.net\/in6v9lxmm5c8\/25MDS30kp1EsCTn7gtiQmN\/26d270777fa13d1f620a80fc1266488b\/Booking_16x9__3_.webp?q=50&amp;fm=webp\" alt=\"\" loading=\"lazy\" srcset=\"https:\/\/images.ctfassets.net\/in6v9lxmm5c8\/25MDS30kp1EsCTn7gtiQmN\/26d270777fa13d1f620a80fc1266488b\/Booking_16x9__3_.webp?q=50&amp;fm=webp&amp;w=100 100w,https:\/\/images.ctfassets.net\/in6v9lxmm5c8\/25MDS30kp1EsCTn7gtiQmN\/26d270777fa13d1f620a80fc1266488b\/Booking_16x9__3_.webp?q=50&amp;fm=webp&amp;w=200 200w,https:\/\/images.ctfassets.net\/in6v9lxmm5c8\/25MDS30kp1EsCTn7gtiQmN\/26d270777fa13d1f620a80fc1266488b\/Booking_16x9__3_.webp?q=50&amp;fm=webp&amp;w=300 300w,https:\/\/images.ctfassets.net\/in6v9lxmm5c8\/25MDS30kp1EsCTn7gtiQmN\/26d270777fa13d1f620a80fc1266488b\/Booking_16x9__3_.webp?q=50&amp;fm=webp&amp;w=400 400w,https:\/\/images.ctfassets.net\/in6v9lxmm5c8\/25MDS30kp1EsCTn7gtiQmN\/26d270777fa13d1f620a80fc1266488b\/Booking_16x9__3_.webp?q=50&amp;fm=webp&amp;w=500 500w,https:\/\/images.ctfassets.net\/in6v9lxmm5c8\/25MDS30kp1EsCTn7gtiQmN\/26d270777fa13d1f620a80fc1266488b\/Booking_16x9__3_.webp?q=50&amp;fm=webp&amp;w=600 600w,https:\/\/images.ctfassets.net\/in6v9lxmm5c8\/25MDS30kp1EsCTn7gtiQmN\/26d270777fa13d1f620a80fc1266488b\/Booking_16x9__3_.webp?q=50&amp;fm=webp&amp;w=700 700w,https:\/\/images.ctfassets.net\/in6v9lxmm5c8\/25MDS30kp1EsCTn7gtiQmN\/26d270777fa13d1f620a80fc1266488b\/Booking_16x9__3_.webp?q=50&amp;fm=webp&amp;w=800 800w,https:\/\/images.ctfassets.net\/in6v9lxmm5c8\/25MDS30kp1EsCTn7gtiQmN\/26d270777fa13d1f620a80fc1266488b\/Booking_16x9__3_.webp?q=50&amp;fm=webp&amp;w=900 900w,https:\/\/images.ctfassets.net\/in6v9lxmm5c8\/25MDS30kp1EsCTn7gtiQmN\/26d270777fa13d1f620a80fc1266488b\/Booking_16x9__3_.webp?q=50&amp;fm=webp&amp;w=1000 1000w,https:\/\/images.ctfassets.net\/in6v9lxmm5c8\/25MDS30kp1EsCTn7gtiQmN\/26d270777fa13d1f620a80fc1266488b\/Booking_16x9__3_.webp?q=50&amp;fm=webp&amp;w=1100 1100w,https:\/\/images.ctfassets.net\/in6v9lxmm5c8\/25MDS30kp1EsCTn7gtiQmN\/26d270777fa13d1f620a80fc1266488b\/Booking_16x9__3_.webp?q=50&amp;fm=webp&amp;w=1200 1200w\" sizes=\"(max-width: 1024px) 100vw, 1024px\"\/><\/p>\n<p><a target=\"_blank\" href=\"https:\/\/openai.com\/ja-JP\/index\/introducing-apps-in-chatgpt\/\">https:\/\/openai.com\/ja-JP\/index\/introducing-apps-in-chatgpt\/<\/a> \u3088\u308a\u5f15\u7528\u3002<\/p>\n<p>Apps SDK \u3084 MCP-UI \u306f\u305d\u308c\u305e\u308c <a target=\"_blank\" href=\"https:\/\/modelcontextprotocol.dev\/\">Model Context Protocol (MCP)<\/a> \u3092\u57fa\u76e4\u3068\u3057\u3066\u304a\u308a\u3001MCP \u306e\u4ed5\u7d44\u307f\u3092\u62e1\u5f35\u3057\u3066\u4efb\u610f\u306e HTML, CSS, JavaScript \u3092\u542b\u3080 UI \u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u3092\u30a8\u30fc\u30b8\u30a7\u30f3\u30c8\u304c\u8fd4\u305b\u308b\u3088\u3046\u306b\u3057\u3066\u3044\u307e\u3059\u3002\u3057\u304b\u3057\u3001\u305d\u308c\u305e\u308c\u304c\u72ec\u81ea\u306b MCP \u3092\u62e1\u5f35\u3057\u3066\u3044\u308b\u305f\u3081\u3001\u7570\u306a\u308b\u30d7\u30e9\u30c3\u30c8\u30d5\u30a9\u30fc\u30e0\u9593\u3067\u4e92\u63db\u6027\u304c\u306a\u304f\u3001\u540c\u3058 UI \u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u3092\u8907\u6570\u306e\u30a8\u30fc\u30b8\u30a7\u30f3\u30c8\u3067\u5171\u6709\u3059\u308b\u3053\u3068\u304c\u56f0\u96e3\u3067\u3059\u3002<\/p>\n<p>\u305d\u3053\u3067\u3001MCP \u81ea\u4f53\u306b\u30a4\u30f3\u30bf\u30e9\u30af\u30c6\u30a3\u30d6\u306a UI \u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u3092\u6a19\u6e96\u5316\u3057\u3066\u6271\u3046\u305f\u3081\u306e\u62e1\u5f35\u6a5f\u80fd <a target=\"_blank\" href=\"https:\/\/github.com\/modelcontextprotocol\/ext-apps\/blob\/main\/specification\/draft\/apps.mdx\">MCP Apps<\/a> \u304c\u63d0\u6848\u3055\u308c\u307e\u3057\u305f\u3002MCP Apps \u306f <code>ui:\/\/<\/code> URI \u30b9\u30ad\u30fc\u30e0\u3092\u4f7f\u7528\u3057\u3066 UI <a target=\"_blank\" href=\"https:\/\/modelcontextprotocol.io\/specification\/2025-06-18\/server\/resources\">\u30ea\u30bd\u30fc\u30b9<\/a>\u3092\u5ba3\u8a00\u3057\u3001\u30e1\u30bf\u30c7\u30fc\u30bf\u3092\u4ecb\u3057\u3066<a target=\"_blank\" href=\"https:\/\/modelcontextprotocol.io\/specification\/2025-06-18\/server\/tools\">\u30c4\u30fc\u30eb<\/a>\u3068\u95a2\u9023\u4ed8\u3051\u307e\u3059\u3002\u3053\u308c\u306b\u3088\u308a MCP \u306e\u6a19\u6e96\u7684\u306a\u30af\u30e9\u30a4\u30a2\u30f3\u30c8\u3068\u30b5\u30fc\u30d0\u30fc\u9593\u306e\u53cc\u65b9\u5411\u901a\u4fe1\u3092\u901a\u3058\u3066\u3001\u30a4\u30f3\u30bf\u30e9\u30af\u30c6\u30a3\u30d6\u306a UI \u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u3092\u914d\u4fe1\u3067\u304d\u308b\u3088\u3046\u306b\u306a\u308a\u307e\u3059\u3002\u307e\u305f\u30bb\u30ad\u30e5\u30ea\u30c6\u30a3\u4e0a\u306e\u7406\u7531\u304b\u3089\u3001MCP Apps \u3067\u306f\u30b5\u30f3\u30c9\u30dc\u30c3\u30af\u30b9\u5316\u3055\u308c\u305f iframe \u5185\u3067 UI \u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u3092\u5b9f\u884c\u3059\u308b\u3053\u3068\u304c\u6a5f\u80fd\u3068\u3057\u3066\u5b9a\u7fa9\u3055\u308c\u3066\u3044\u307e\u3059\u3002<\/p>\n<p>\u3053\u306e\u8a18\u4e8b\u3067\u306f\u3001MCP Apps \u306e\u6982\u8981\u306b\u3064\u3044\u3066\u7d39\u4ecb\u3057\u3001<a target=\"_blank\" href=\"https:\/\/github.com\/modelcontextprotocol\/ext-apps\">early access SDK<\/a> \u3092\u4f7f\u7528\u3057\u3066 MCP Apps \u3092\u5b9f\u88c5\u3059\u308b\u65b9\u6cd5\u306b\u3064\u3044\u3066\u89e3\u8aac\u3057\u307e\u3059\u3002<\/p>\n<h2 id=\"mcp-apps-\u306e\u6982\u8981\"><a target=\"_blank\" aria-hidden=\"true\" tabindex=\"-1\" href=\"#mcp-apps-\u306e\u6982\u8981\"><span class=\"icon icon-link\"\/><\/a>MCP Apps \u306e\u6982\u8981<\/h2>\n<p>MCP Apps \u306f MCP \u306e\u62e1\u5f35\u6a5f\u80fd\u3068\u3057\u3066\u3001\u30a8\u30fc\u30b8\u30a7\u30f3\u30c8\u304c\u30a4\u30f3\u30bf\u30e9\u30af\u30c6\u30a3\u30d6\u306a UI \u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u3092\u8fd4\u3059\u305f\u3081\u306e\u6a19\u6e96\u5316\u3055\u308c\u305f\u65b9\u6cd5\u3092\u63d0\u4f9b\u3057\u307e\u3059\u3002MCP Apps \u306e\u4e3b\u306a\u7279\u5fb4\u306f\u4ee5\u4e0b\u306e\u901a\u308a\u3067\u3059\u3002<\/p>\n<ul>\n<li><code>ui:\/\/<\/code> URI \u30b9\u30ad\u30fc\u30e0\u3092\u4f7f\u7528\u3057\u3066 UI \u30ea\u30bd\u30fc\u30b9\u3092\u5ba3\u8a00<\/li>\n<li>\u30e1\u30bf\u30c7\u30fc\u30bf\u3092\u4ecb\u3057\u3066\u30c4\u30fc\u30eb\u3068\u95a2\u9023\u4ed8\u3051<\/li>\n<li>JSON-RPC \u3092\u4f7f\u7528\u3057\u305f\u30db\u30b9\u30c8\u3068 UI \u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u9593\u306e\u53cc\u65b9\u5411\u901a\u4fe1<\/li>\n<li>\u30b5\u30f3\u30c9\u30dc\u30c3\u30af\u30b9\u5316\u3055\u308c\u305f iframe \u5185\u3067 UI \u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u3092\u5b9f\u884c<\/li>\n<\/ul>\n<p>\u3053\u306e\u4ed5\u69d8\u3067\u306f HTML \u30b3\u30f3\u30c6\u30f3\u30c4\uff08<code>text\/html+mcp<\/code>\uff09\u306e\u307f\u306b\u7126\u70b9\u3092\u5f53\u3066\u3066\u304a\u308a\u3001\u5c06\u6765\u306b\u306f\u4ed6\u306e\u30b3\u30f3\u30c6\u30f3\u30c4\u30bf\u30a4\u30d7\u3082\u30b5\u30dd\u30fc\u30c8\u3067\u304d\u308b\u3088\u3046\u306b\u62e1\u5f35\u6027\u3092\u8003\u616e\u3057\u3066\u8a2d\u8a08\u3055\u308c\u3066\u3044\u307e\u3059\u3002\u307e\u305f MCP Apps \u306f\u3042\u304f\u307e\u3067 MCP \u306e\u62e1\u5f35\u6a5f\u80fd\u3067\u3042\u308b\u305f\u3081\u3001MCP \u306e\u65e2\u5b58\u6a5f\u80fd\u306b\u5f71\u97ff\u3092\u4e0e\u3048\u308b\u3053\u3068\u306f\u3042\u308a\u307e\u305b\u3093\u3002<\/p>\n<h3 id=\"ui-\u30ea\u30bd\u30fc\u30b9\u306e\u5ba3\u8a00\"><a target=\"_blank\" aria-hidden=\"true\" tabindex=\"-1\" href=\"#ui-\u30ea\u30bd\u30fc\u30b9\u306e\u5ba3\u8a00\"><span class=\"icon icon-link\"\/><\/a>UI \u30ea\u30bd\u30fc\u30b9\u306e\u5ba3\u8a00<\/h3>\n<p>UI \u30ea\u30bd\u30fc\u30b9\u306f\u4ee5\u4e0b\u306e\u3088\u3046\u306a\u5f62\u5f0f\u3067\u5ba3\u8a00\u3055\u308c\u307e\u3059\u3002<\/p>\n<figure data-rehype-pretty-code-figure=\"\">\n<pre style=\"background-color:#212121;color:#EEFFFF\" tabindex=\"0\" data-language=\"json\" data-theme=\"material-theme-darker\"><code data-language=\"json\" data-theme=\"material-theme-darker\" style=\"display: grid;\"><span data-line=\"\"><span style=\"color:#89DDFF\">{<\/span><\/span>\n<span data-line=\"\"><span style=\"color:#545454;font-style:italic\">  \/\/ \u5fc5\u305a ui:\/\/ \u30b9\u30ad\u30fc\u30e0\u3092\u4f7f\u7528\u3059\u308b<\/span><\/span>\n<span data-line=\"\"><span style=\"color:#89DDFF\">  \"<\/span><span style=\"color:#C792EA\">uri<\/span><span style=\"color:#89DDFF\">\"<\/span><span style=\"color:#89DDFF\">:<\/span><span style=\"color:#89DDFF\"> \"<\/span><span style=\"color:#C3E88D\">ui:\/\/charts\/bar-chart<\/span><span style=\"color:#89DDFF\">\"<\/span><span style=\"color:#89DDFF\">,<\/span><\/span>\n<span data-line=\"\"><span style=\"color:#545454;font-style:italic\">  \/\/ \u4eba\u9593\u304c\u7406\u89e3\u3057\u3084\u3059\u3044\u540d\u524d<\/span><\/span>\n<span data-line=\"\"><span style=\"color:#89DDFF\">  \"<\/span><span style=\"color:#C792EA\">name<\/span><span style=\"color:#89DDFF\">\"<\/span><span style=\"color:#89DDFF\">:<\/span><span style=\"color:#89DDFF\"> \"<\/span><span style=\"color:#C3E88D\">Bar Chart<\/span><span style=\"color:#89DDFF\">\"<\/span><span style=\"color:#89DDFF\">,<\/span><\/span>\n<span data-line=\"\"><span style=\"color:#545454;font-style:italic\">  \/\/ \u521d\u671f\u306e\u6bb5\u968e\u3067\u306f text\/html+mcp \u306e\u307f\u30b5\u30dd\u30fc\u30c8<\/span><\/span>\n<span data-line=\"\"><span style=\"color:#545454;font-style:italic\">  \/\/ \u5c06\u6765\u306e\u62e1\u5f35\u306e\u305f\u3081\u306b mimeType \u30d5\u30a3\u30fc\u30eb\u30c9\u3092\u8a2d\u3051\u3066\u3044\u308b<\/span><\/span>\n<span data-line=\"\"><span style=\"color:#89DDFF\">  \"<\/span><span style=\"color:#C792EA\">mimeType<\/span><span style=\"color:#89DDFF\">\"<\/span><span style=\"color:#89DDFF\">:<\/span><span style=\"color:#89DDFF\"> \"<\/span><span style=\"color:#C3E88D\">text\/html+mcp<\/span><span style=\"color:#89DDFF\">\"<\/span><span style=\"color:#89DDFF\">,<\/span><\/span>\n<span data-line=\"\"><span style=\"color:#545454;font-style:italic\">  \/\/ UI \u30ea\u30bd\u30fc\u30b9\u306e\u8aac\u660e\uff08\u4efb\u610f\uff09<\/span><\/span>\n<span data-line=\"\"><span style=\"color:#89DDFF\">  \"<\/span><span style=\"color:#C792EA\">description<\/span><span style=\"color:#89DDFF\">\"<\/span><span style=\"color:#89DDFF\">:<\/span><span style=\"color:#89DDFF\"> \"<\/span><span style=\"color:#C3E88D\">A bar chart component for displaying data<\/span><span style=\"color:#89DDFF\">\"<\/span><span style=\"color:#89DDFF\">,<\/span><\/span>\n<span data-line=\"\"><span style=\"color:#545454;font-style:italic\">  \/\/ UI \u30ea\u30bd\u30fc\u30b9\u306e\u30e1\u30bf\u30c7\u30fc\u30bf<\/span><\/span>\n<span data-line=\"\"><span style=\"color:#89DDFF\">  \"<\/span><span style=\"color:#C792EA\">_meta<\/span><span style=\"color:#89DDFF\">\"<\/span><span style=\"color:#89DDFF\">:<\/span><span style=\"color:#89DDFF\"> {<\/span><\/span>\n<span data-line=\"\"><span style=\"color:#89DDFF\">    \"<\/span><span style=\"color:#FFCB6B\">ui<\/span><span style=\"color:#89DDFF\">\"<\/span><span style=\"color:#89DDFF\">:<\/span><span style=\"color:#89DDFF\"> {<\/span><\/span>\n<span data-line=\"\"><span style=\"color:#545454;font-style:italic\">      \/\/ Content Security Policy (CSP) \u306e\u8a2d\u5b9a\uff08\u4efb\u610f\uff09<\/span><\/span>\n<span data-line=\"\"><span style=\"color:#89DDFF\">      \"<\/span><span style=\"color:#F78C6C\">csp<\/span><span style=\"color:#89DDFF\">\"<\/span><span style=\"color:#89DDFF\">:<\/span><span style=\"color:#89DDFF\"> {<\/span><\/span>\n<span data-line=\"\"><span style=\"color:#545454;font-style:italic\">        \/\/ iframe \u5185\u3067\u5916\u90e8\u30c9\u30e1\u30a4\u30f3\u3078\u306e\u63a5\u7d9a\u3092\u8a31\u53ef<\/span><\/span>\n<span data-line=\"\"><span style=\"color:#89DDFF\">        \"<\/span><span style=\"color:#F07178\">connect_domains<\/span><span style=\"color:#89DDFF\">\"<\/span><span style=\"color:#89DDFF\">:<\/span><span style=\"color:#89DDFF\"> [],<\/span><\/span>\n<span data-line=\"\"><span style=\"color:#545454;font-style:italic\">        \/\/ \u9759\u7684\u30ea\u30bd\u30fc\u30b9\u306e\u8aad\u307f\u8fbc\u307f\u3092\u8a31\u53ef<\/span><\/span>\n<span data-line=\"\"><span style=\"color:#89DDFF\">        \"<\/span><span style=\"color:#F07178\">resource_domains<\/span><span style=\"color:#89DDFF\">\"<\/span><span style=\"color:#89DDFF\">:<\/span><span style=\"color:#89DDFF\"> []<\/span><\/span>\n<span data-line=\"\"><span style=\"color:#89DDFF\">      }<\/span><\/span>\n<span data-line=\"\"><span style=\"color:#89DDFF\">    },<\/span><\/span>\n<span data-line=\"\"><span style=\"color:#545454;font-style:italic\">    \/\/ API \u30ad\u30fc\u306e\u8a31\u53ef\u30ea\u30b9\u30c8\u3084\u30af\u30ed\u30b9\u30aa\u30ea\u30b8\u30f3\u5206\u96e2\u306e\u305f\u3081\u306e\u30c9\u30e1\u30a4\u30f3\u3092\u6307\u5b9a<\/span><\/span>\n<span data-line=\"\"><span style=\"color:#89DDFF\">    \"<\/span><span style=\"color:#FFCB6B\">domain<\/span><span style=\"color:#89DDFF\">\"<\/span><span style=\"color:#89DDFF\">:<\/span><span style=\"color:#89DDFF\"> \"<\/span><span style=\"color:#C3E88D\">https:\/\/example.com<\/span><span style=\"color:#89DDFF\">\"<\/span><span style=\"color:#89DDFF\">,<\/span><\/span>\n<span data-line=\"\"><span style=\"color:#545454;font-style:italic\">    \/\/ UI \u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u304c\u30dc\u30fc\u30c0\u30fc\u3092\u8868\u793a\u3059\u308b\u304b\u3069\u3046\u304b<\/span><\/span>\n<span data-line=\"\"><span style=\"color:#89DDFF\">    \"<\/span><span style=\"color:#FFCB6B\">prefersBorder<\/span><span style=\"color:#89DDFF\">\"<\/span><span style=\"color:#89DDFF\">:<\/span><span style=\"color:#89DDFF\"> true<\/span><\/span>\n<span data-line=\"\"><span style=\"color:#89DDFF\">  }<\/span><\/span>\n<span data-line=\"\"><span style=\"color:#89DDFF\">}<\/span><\/span><\/code><\/pre>\n<\/figure>\n<p>UI \u30ea\u30bd\u30fc\u30b9\u306e\u30b3\u30f3\u30c6\u30f3\u30c4\u306f <code>text<\/code> \u3082\u3057\u304f\u306f <code>blob<\/code>\uff08base64 \u30a8\u30f3\u30b3\u30fc\u30c9\uff09\u3068\u3057\u3066\u63d0\u4f9b\u3057\u307e\u3059\u3002\u307e\u305f\u30b3\u30f3\u30c6\u30f3\u30c4\u306f\u6709\u52b9\u306a HTML5 \u30c9\u30ad\u30e5\u30e1\u30f3\u30c8\u3067\u3042\u308b\u5fc5\u8981\u304c\u3042\u308a\u307e\u3059\u3002\u4ee5\u4e0b\u306f UI \u30ea\u30bd\u30fc\u30b9\u306e\u30b3\u30f3\u30c6\u30f3\u30c4\u4f8b\u3067\u3059\u3002<\/p>\n<figure data-rehype-pretty-code-figure=\"\">\n<pre style=\"background-color:#212121;color:#EEFFFF\" tabindex=\"0\" data-language=\"json\" data-theme=\"material-theme-darker\"><code data-language=\"json\" data-theme=\"material-theme-darker\" style=\"display: grid;\"><span data-line=\"\"><span style=\"color:#89DDFF\">{<\/span><\/span>\n<span data-line=\"\"><span style=\"color:#89DDFF\">  \"<\/span><span style=\"color:#C792EA\">contents<\/span><span style=\"color:#89DDFF\">\"<\/span><span style=\"color:#89DDFF\">:<\/span><span style=\"color:#89DDFF\"> [<\/span><\/span>\n<span data-line=\"\"><span style=\"color:#89DDFF\">    {<\/span><\/span>\n<span data-line=\"\"><span style=\"color:#89DDFF\">      \"<\/span><span style=\"color:#FFCB6B\">uri<\/span><span style=\"color:#89DDFF\">\"<\/span><span style=\"color:#89DDFF\">:<\/span><span style=\"color:#89DDFF\"> \"<\/span><span style=\"color:#C3E88D\">ui:\/\/charts\/bar-chart<\/span><span style=\"color:#89DDFF\">\"<\/span><span style=\"color:#89DDFF\">,<\/span><\/span>\n<span data-line=\"\"><span style=\"color:#89DDFF\">      \"<\/span><span style=\"color:#FFCB6B\">text<\/span><span style=\"color:#89DDFF\">\"<\/span><span style=\"color:#89DDFF\">:<\/span><span style=\"color:#89DDFF\"> \"<\/span><span style=\"color:#C3E88D\">...<\/span><span style=\"color:#89DDFF\">\"<\/span><span style=\"color:#89DDFF\">,<\/span><\/span>\n<span data-line=\"\"><span style=\"color:#89DDFF\">      \"<\/span><span style=\"color:#FFCB6B\">mimeType<\/span><span style=\"color:#89DDFF\">\"<\/span><span style=\"color:#89DDFF\">:<\/span><span style=\"color:#89DDFF\"> \"<\/span><span style=\"color:#C3E88D\">text\/html+mcp<\/span><span style=\"color:#89DDFF\">\"<\/span><\/span>\n<span data-line=\"\"><span style=\"color:#89DDFF\">    }<\/span><\/span>\n<span data-line=\"\"><span style=\"color:#89DDFF\">  ]<\/span><\/span>\n<span data-line=\"\"><span style=\"color:#89DDFF\">}<\/span><\/span><\/code><\/pre>\n<\/figure>\n<h3 id=\"\u30c4\u30fc\u30eb\u3068\u306e\u95a2\u9023\u4ed8\u3051\"><a target=\"_blank\" aria-hidden=\"true\" tabindex=\"-1\" href=\"#\u30c4\u30fc\u30eb\u3068\u306e\u95a2\u9023\u4ed8\u3051\"><span class=\"icon icon-link\"\/><\/a>\u30c4\u30fc\u30eb\u3068\u306e\u95a2\u9023\u4ed8\u3051<\/h3>\n<p>UI \u30ea\u30bd\u30fc\u30b9\u306f\u30c4\u30fc\u30eb\u3068\u95a2\u9023\u4ed8\u3051\u308b\u3053\u3068\u306b\u3088\u308a\u30db\u30b9\u30c8\u306b\u8fd4\u5374\u3055\u308c\u307e\u3059\u3002\u30c4\u30fc\u30eb\u306b\u30ea\u30bd\u30fc\u30b9\u3092\u95a2\u9023\u4ed8\u3051\u308b\u305f\u3081\u306b\u306f\u3001\u30c4\u30fc\u30eb\u306e\u30e1\u30bf\u30c7\u30fc\u30bf\u306b <code>ui\/resourceUri<\/code> \u30d5\u30a3\u30fc\u30eb\u30c9\u3092\u8ffd\u52a0\u3057\u307e\u3059\u3002\u4ee5\u4e0b\u306f\u30c4\u30fc\u30eb\u306e\u30e1\u30bf\u30c7\u30fc\u30bf\u4f8b\u3067\u3059\u3002<\/p>\n<figure data-rehype-pretty-code-figure=\"\">\n<pre style=\"background-color:#212121;color:#EEFFFF\" tabindex=\"0\" data-language=\"json\" data-theme=\"material-theme-darker\"><code data-language=\"json\" data-theme=\"material-theme-darker\" style=\"display: grid;\"><span data-line=\"\"><span style=\"color:#89DDFF\">{<\/span><\/span>\n<span data-line=\"\"><span style=\"color:#89DDFF\">  \"<\/span><span style=\"color:#C792EA\">name<\/span><span style=\"color:#89DDFF\">\"<\/span><span style=\"color:#89DDFF\">:<\/span><span style=\"color:#89DDFF\"> \"<\/span><span style=\"color:#C3E88D\">Get Weather Chart<\/span><span style=\"color:#89DDFF\">\"<\/span><span style=\"color:#89DDFF\">,<\/span><\/span>\n<span data-line=\"\"><span style=\"color:#89DDFF\">  \"<\/span><span style=\"color:#C792EA\">description<\/span><span style=\"color:#89DDFF\">\"<\/span><span style=\"color:#89DDFF\">:<\/span><span style=\"color:#89DDFF\"> \"<\/span><span style=\"color:#C3E88D\">Fetches weather data and displays it in a chart<\/span><span style=\"color:#89DDFF\">\"<\/span><span style=\"color:#89DDFF\">,<\/span><\/span>\n<span data-line=\"\"><span style=\"color:#89DDFF\">  \"<\/span><span style=\"color:#C792EA\">_meta<\/span><span style=\"color:#89DDFF\">\"<\/span><span style=\"color:#89DDFF\">:<\/span><span style=\"color:#89DDFF\"> {<\/span><\/span>\n<span data-line=\"\"><span style=\"color:#89DDFF\">    \"<\/span><span style=\"color:#FFCB6B\">ui\/resourceUri<\/span><span style=\"color:#89DDFF\">\"<\/span><span style=\"color:#89DDFF\">:<\/span><span style=\"color:#89DDFF\"> \"<\/span><span style=\"color:#C3E88D\">ui:\/\/charts\/bar-chart<\/span><span style=\"color:#89DDFF\">\"<\/span><\/span>\n<span data-line=\"\"><span style=\"color:#89DDFF\">  }<\/span><\/span>\n<span data-line=\"\"><span style=\"color:#89DDFF\">}<\/span><\/span><\/code><\/pre>\n<\/figure>\n<p>\u30e1\u30bf\u30c7\u30fc\u30bf\u306b <code>ui\/resourceUri<\/code> \u30d5\u30a3\u30fc\u30eb\u30c9\u304c\u542b\u307e\u308c\u3066\u304a\u308a\u3001\u304b\u3064\u30db\u30b9\u30c8\u304c MCP Apps \u3092\u30b5\u30dd\u30fc\u30c8\u3057\u3066\u3044\u308b\u5834\u5408\u3001\u30db\u30b9\u30c8\u306f\u6307\u5b9a\u3055\u308c\u305f UI \u30ea\u30bd\u30fc\u30b9\u3092\u4f7f\u7528\u3057\u3066\u7d50\u679c\u3092\u30ec\u30f3\u30c0\u30ea\u30f3\u30b0\u3057\u307e\u3059\u3002\u30db\u30b9\u30c8\u306f UI \u30ea\u30bd\u30fc\u30b9\u3092\u53d6\u5f97\u3059\u308b\u305f\u3081\u306b <code>resources\/read<\/code> \u30ea\u30af\u30a8\u30b9\u30c8\u3092\u9001\u4fe1\u3057\u307e\u3059\u3002<\/p>\n<figure data-rehype-pretty-code-figure=\"\">\n<pre style=\"background-color:#212121;color:#EEFFFF\" tabindex=\"0\" data-language=\"json\" data-theme=\"material-theme-darker\"><code data-language=\"json\" data-theme=\"material-theme-darker\" style=\"display: grid;\"><span data-line=\"\"><span style=\"color:#89DDFF\">{<\/span><\/span>\n<span data-line=\"\"><span style=\"color:#89DDFF\">  \"<\/span><span style=\"color:#C792EA\">jsonrpc<\/span><span style=\"color:#89DDFF\">\"<\/span><span style=\"color:#89DDFF\">:<\/span><span style=\"color:#89DDFF\"> \"<\/span><span style=\"color:#C3E88D\">2.0<\/span><span style=\"color:#89DDFF\">\"<\/span><span style=\"color:#89DDFF\">,<\/span><\/span>\n<span data-line=\"\"><span style=\"color:#89DDFF\">  \"<\/span><span style=\"color:#C792EA\">id<\/span><span style=\"color:#89DDFF\">\"<\/span><span style=\"color:#89DDFF\">:<\/span><span style=\"color:#F78C6C\"> 2<\/span><span style=\"color:#89DDFF\">,<\/span><\/span>\n<span data-line=\"\"><span style=\"color:#89DDFF\">  \"<\/span><span style=\"color:#C792EA\">method<\/span><span style=\"color:#89DDFF\">\"<\/span><span style=\"color:#89DDFF\">:<\/span><span style=\"color:#89DDFF\"> \"<\/span><span style=\"color:#C3E88D\">resources\/read<\/span><span style=\"color:#89DDFF\">\"<\/span><span style=\"color:#89DDFF\">,<\/span><\/span>\n<span data-line=\"\"><span style=\"color:#89DDFF\">  \"<\/span><span style=\"color:#C792EA\">params<\/span><span style=\"color:#89DDFF\">\"<\/span><span style=\"color:#89DDFF\">:<\/span><span style=\"color:#89DDFF\"> {<\/span><\/span>\n<span data-line=\"\"><span style=\"color:#89DDFF\">    \"<\/span><span style=\"color:#FFCB6B\">uri<\/span><span style=\"color:#89DDFF\">\"<\/span><span style=\"color:#89DDFF\">:<\/span><span style=\"color:#89DDFF\"> \"<\/span><span style=\"color:#C3E88D\">ui:\/\/charts\/bar-chart<\/span><span style=\"color:#89DDFF\">\"<\/span><\/span>\n<span data-line=\"\"><span style=\"color:#89DDFF\">  }<\/span><\/span>\n<span data-line=\"\"><span style=\"color:#89DDFF\">}<\/span><\/span><\/code><\/pre>\n<\/figure>\n<h3 id=\"\u30db\u30b9\u30c8\u3068-iframe-\u9593\u306e\u53cc\u65b9\u5411\u901a\u4fe1\"><a target=\"_blank\" aria-hidden=\"true\" tabindex=\"-1\" href=\"#\u30db\u30b9\u30c8\u3068-iframe-\u9593\u306e\u53cc\u65b9\u5411\u901a\u4fe1\"><span class=\"icon icon-link\"\/><\/a>\u30db\u30b9\u30c8\u3068 iframe \u9593\u306e\u53cc\u65b9\u5411\u901a\u4fe1<\/h3>\n<p>MCP Apps \u3067\u306f\u30db\u30b9\u30c8\u3068 UI \u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u9593\u306e\u53cc\u65b9\u5411\u901a\u4fe1\u306e\u305f\u3081\u306b JSON-RPC \u3092\u4f7f\u7528\u3057\u307e\u3059\u3002UI \u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u306f <code>window.parent.postMessage<\/code> \u3092\u4f7f\u7528\u3057\u3066\u30db\u30b9\u30c8\u306b\u30e1\u30c3\u30bb\u30fc\u30b8\u3092\u9001\u4fe1\u3057\u3001\u30db\u30b9\u30c8\u306f <code>iframe.contentWindow.postMessage<\/code> \u3092\u4f7f\u7528\u3057\u3066 UI \u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u306b\u30e1\u30c3\u30bb\u30fc\u30b8\u3092\u9001\u4fe1\u3057\u307e\u3059\u3002\u6982\u5ff5\u7684\u306b\u306f Iframe \u306f MCP \u30af\u30e9\u30a4\u30a2\u30f3\u30c8\u3068\u3057\u3066\u52d5\u4f5c\u3057\u3001\u30db\u30b9\u30c8\u306f MCP \u30b5\u30fc\u30d0\u30fc\u3068\u3057\u3066\u52d5\u4f5c\u3057\u307e\u3059\u3002<\/p>\n<figure data-rehype-pretty-code-figure=\"\">\n<pre style=\"background-color:#212121;color:#EEFFFF\" tabindex=\"0\" data-language=\"javascript\" data-theme=\"material-theme-darker\"><code data-language=\"javascript\" data-theme=\"material-theme-darker\" style=\"display: grid;\"><span data-line=\"\"><span style=\"color:#545454;font-style:italic\">\/\/ UI \u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u304b\u3089\u30db\u30b9\u30c8\u3078\u306e\u30e1\u30c3\u30bb\u30fc\u30b8\u9001\u4fe1<\/span><\/span>\n<span data-line=\"\"><span style=\"color:#EEFFFF\">window<\/span><span style=\"color:#89DDFF\">.<\/span><span style=\"color:#EEFFFF\">parent<\/span><span style=\"color:#89DDFF\">.<\/span><span style=\"color:#82AAFF\">postMessage<\/span><span style=\"color:#EEFFFF\">(<\/span><\/span>\n<span data-line=\"\"><span style=\"color:#89DDFF\">  {<\/span><\/span>\n<span data-line=\"\"><span style=\"color:#F07178\">    jsonrpc<\/span><span style=\"color:#89DDFF\">:<\/span><span style=\"color:#89DDFF\"> \"<\/span><span style=\"color:#C3E88D\">2.0<\/span><span style=\"color:#89DDFF\">\"<\/span><span style=\"color:#89DDFF\">,<\/span><\/span>\n<span data-line=\"\"><span style=\"color:#F07178\">    method<\/span><span style=\"color:#89DDFF\">:<\/span><span style=\"color:#89DDFF\"> \"<\/span><span style=\"color:#C3E88D\">ui\/initialize<\/span><span style=\"color:#89DDFF\">\"<\/span><span style=\"color:#89DDFF\">,<\/span><\/span>\n<span data-line=\"\"><span style=\"color:#F07178\">    params<\/span><span style=\"color:#89DDFF\">:<\/span><span style=\"color:#89DDFF\"> {<\/span><\/span>\n<span data-line=\"\"><span style=\"color:#545454;font-style:italic\">      \/* \u521d\u671f\u5316\u30d1\u30e9\u30e1\u30fc\u30bf *\/<\/span><\/span>\n<span data-line=\"\"><span style=\"color:#89DDFF\">    },<\/span><\/span>\n<span data-line=\"\"><span style=\"color:#F07178\">    id<\/span><span style=\"color:#89DDFF\">:<\/span><span style=\"color:#F78C6C\"> 1<\/span><span style=\"color:#89DDFF\">,<\/span><\/span>\n<span data-line=\"\"><span style=\"color:#89DDFF\">  },<\/span><\/span>\n<span data-line=\"\"><span style=\"color:#89DDFF\">  \"<\/span><span style=\"color:#C3E88D\">*<\/span><span style=\"color:#89DDFF\">\"<\/span><span style=\"color:#89DDFF\">,<\/span><\/span>\n<span data-line=\"\"><span style=\"color:#EEFFFF\">)<\/span><span style=\"color:#89DDFF\">;<\/span><\/span>\n<span data-line=\"\"> <\/span>\n<span data-line=\"\"><span style=\"color:#EEFFFF\">window<\/span><span style=\"color:#89DDFF\">.<\/span><span style=\"color:#82AAFF\">addEventListener<\/span><span style=\"color:#EEFFFF\">(<\/span><span style=\"color:#89DDFF\">\"<\/span><span style=\"color:#C3E88D\">message<\/span><span style=\"color:#89DDFF\">\"<\/span><span style=\"color:#89DDFF\">,<\/span><span style=\"color:#89DDFF\"> (<\/span><span style=\"color:#EEFFFF;font-style:italic\">event<\/span><span style=\"color:#89DDFF\">)<\/span><span style=\"color:#C792EA\"> =&gt;<\/span><span style=\"color:#89DDFF\"> {<\/span><\/span>\n<span data-line=\"\"><span style=\"color:#C792EA\">  const<\/span><span style=\"color:#EEFFFF\"> message<\/span><span style=\"color:#89DDFF\"> =<\/span><span style=\"color:#EEFFFF\"> event<\/span><span style=\"color:#89DDFF\">.<\/span><span style=\"color:#EEFFFF\">data<\/span><span style=\"color:#89DDFF\">;<\/span><\/span>\n<span data-line=\"\"><span style=\"color:#545454;font-style:italic\">  \/\/ \u30db\u30b9\u30c8\u304b\u3089\u306e\u30e1\u30c3\u30bb\u30fc\u30b8\u3092\u51e6\u7406<\/span><\/span>\n<span data-line=\"\"><span style=\"color:#89DDFF;font-style:italic\">  switch<\/span><span style=\"color:#F07178\"> (<\/span><span style=\"color:#EEFFFF\">message<\/span><span style=\"color:#89DDFF\">.<\/span><span style=\"color:#EEFFFF\">method<\/span><span style=\"color:#F07178\">) <\/span><span style=\"color:#89DDFF\">{<\/span><\/span>\n<span data-line=\"\"><span style=\"color:#89DDFF;font-style:italic\">    case<\/span><span style=\"color:#89DDFF\"> \"<\/span><span style=\"color:#C3E88D\">ui\/initialize<\/span><span style=\"color:#89DDFF\">\"<\/span><span style=\"color:#89DDFF\">:<\/span><\/span>\n<span data-line=\"\"><span style=\"color:#545454;font-style:italic\">      \/\/ \u521d\u671f\u5316\u51e6\u7406<\/span><\/span>\n<span data-line=\"\"><span style=\"color:#89DDFF;font-style:italic\">      break<\/span><span style=\"color:#89DDFF\">;<\/span><\/span>\n<span data-line=\"\"><span style=\"color:#89DDFF;font-style:italic\">    case<\/span><span style=\"color:#89DDFF\"> \"<\/span><span style=\"color:#C3E88D\">tools\/call<\/span><span style=\"color:#89DDFF\">\"<\/span><span style=\"color:#89DDFF\">:<\/span><\/span>\n<span data-line=\"\"><span style=\"color:#545454;font-style:italic\">      \/\/ MCP \u30c4\u30fc\u30eb\u306e\u547c\u3073\u51fa\u3057\u3092\u51e6\u7406<\/span><\/span>\n<span data-line=\"\"><span style=\"color:#89DDFF;font-style:italic\">      break<\/span><span style=\"color:#89DDFF\">;<\/span><\/span>\n<span data-line=\"\"><span style=\"color:#545454;font-style:italic\">    \/\/ \u305d\u306e\u4ed6\u306e\u30e1\u30c3\u30bb\u30fc\u30b8\u51e6\u7406<\/span><\/span>\n<span data-line=\"\"><span style=\"color:#89DDFF\">  }<\/span><\/span>\n<span data-line=\"\"><span style=\"color:#89DDFF\">}<\/span><span style=\"color:#EEFFFF\">)<\/span><span style=\"color:#89DDFF\">;<\/span><\/span><\/code><\/pre>\n<\/figure>\n<p>UI iframe \u306f\u4ee5\u4e0b\u306e MCP \u30d7\u30ed\u30c8\u30b3\u30eb\u30e1\u30c3\u30bb\u30fc\u30b8\u306e\u30b5\u30d6\u30bb\u30c3\u30c8\u3092\u30b5\u30dd\u30fc\u30c8\u3057\u307e\u3059\u3002<\/p>\n<ul>\n<li><code>tools\/call<\/code>: \u30db\u30b9\u30c8\u304c MCP \u30c4\u30fc\u30eb\u3092\u547c\u3073\u51fa\u3059\u305f\u3081\u306e\u30ea\u30af\u30a8\u30b9\u30c8<\/li>\n<li><code>resources\/read<\/code>: \u30ea\u30bd\u30fc\u30b9\u30b3\u30f3\u30c6\u30f3\u30c4\u3092\u8aad\u307f\u53d6\u308b\u305f\u3081\u306e\u30ea\u30af\u30a8\u30b9\u30c8<\/li>\n<li><code>notifications\/message<\/code>: \u30db\u30b9\u30c8\u3078\u306e\u30e1\u30c3\u30bb\u30fc\u30b8\u3092\u30ed\u30ae\u30f3\u30b0\u3059\u308b<\/li>\n<li><code>ui\/initialize<\/code> \u2192 <code>ui\/notifications\/initialized<\/code>: MCP \u306e\u3088\u3046\u306a\u30cf\u30f3\u30c9\u30b7\u30a7\u30a4\u30af\u51e6\u7406<\/li>\n<li><code>ping<\/code>: \u30d8\u30eb\u30b9\u30c1\u30a7\u30c3\u30af<\/li>\n<\/ul>\n<p>UI \u304c <code>ui\/initialize<\/code> \u30ea\u30af\u30a8\u30b9\u30c8\u3092\u30db\u30b9\u30c8\u306b\u9001\u4fe1\u3059\u308b\u3068\u3001\u30db\u30b9\u30c8\u306f\u4ee5\u4e0b\u306e\u3088\u3046\u306b UI \u56fa\u6709\u306e\u60c5\u5831\u3092\u542b\u3081\u305f\u30ec\u30b9\u30dd\u30f3\u30b9\u3092\u8fd4\u3057\u307e\u3059\u3002<\/p>\n<figure data-rehype-pretty-code-figure=\"\">\n<pre style=\"background-color:#212121;color:#EEFFFF\" tabindex=\"0\" data-language=\"typescript\" data-theme=\"material-theme-darker\"><code data-language=\"typescript\" data-theme=\"material-theme-darker\" style=\"display: grid;\"><span data-line=\"\"><span style=\"color:#C792EA\">interface<\/span><span style=\"color:#FFCB6B\"> HostContext<\/span><span style=\"color:#89DDFF\"> {<\/span><\/span>\n<span data-line=\"\"><span style=\"color:#545454;font-style:italic\">  \/\/ UI \u304b\u3089\u547c\u3073\u51fa\u3059\u3053\u3068\u304c\u3067\u304d\u308b\u30c4\u30fc\u30eb\u306e\u60c5\u5831<\/span><\/span>\n<span data-line=\"\"><span style=\"color:#F07178\">  toolInfo<\/span><span style=\"color:#89DDFF\">?:<\/span><span style=\"color:#89DDFF\"> {<\/span><\/span>\n<span data-line=\"\"><span style=\"color:#F07178\">    id<\/span><span style=\"color:#89DDFF\">?:<\/span><span style=\"color:#FFCB6B\"> RequestId<\/span><span style=\"color:#89DDFF\">;<\/span><\/span>\n<span data-line=\"\"><span style=\"color:#F07178\">    tool<\/span><span style=\"color:#89DDFF\">:<\/span><span style=\"color:#FFCB6B\"> Tool<\/span><span style=\"color:#89DDFF\">;<\/span><\/span>\n<span data-line=\"\"><span style=\"color:#89DDFF\">  };<\/span><\/span>\n<span data-line=\"\"><span style=\"color:#545454;font-style:italic\">  \/\/ \u30ab\u30e9\u30fc\u30c6\u30fc\u30de\u306e\u8a2d\u5b9a<\/span><\/span>\n<span data-line=\"\"><span style=\"color:#F07178\">  theme<\/span><span style=\"color:#89DDFF\">?:<\/span><span style=\"color:#89DDFF\"> \"<\/span><span style=\"color:#C3E88D\">light<\/span><span style=\"color:#89DDFF\">\"<\/span><span style=\"color:#89DDFF\"> |<\/span><span style=\"color:#89DDFF\"> \"<\/span><span style=\"color:#C3E88D\">dark<\/span><span style=\"color:#89DDFF\">\"<\/span><span style=\"color:#89DDFF\"> |<\/span><span style=\"color:#89DDFF\"> \"<\/span><span style=\"color:#C3E88D\">system<\/span><span style=\"color:#89DDFF\">\"<\/span><span style=\"color:#89DDFF\">;<\/span><\/span>\n<span data-line=\"\"><span style=\"color:#545454;font-style:italic\">  \/\/ UI \u304c\u73fe\u5728\u3069\u306e\u3088\u3046\u306b\u8868\u793a\u3055\u308c\u3066\u3044\u308b\u304b<\/span><\/span>\n<span data-line=\"\"><span style=\"color:#F07178\">  displayMode<\/span><span style=\"color:#89DDFF\">?:<\/span><span style=\"color:#89DDFF\"> \"<\/span><span style=\"color:#C3E88D\">inline<\/span><span style=\"color:#89DDFF\">\"<\/span><span style=\"color:#89DDFF\"> |<\/span><span style=\"color:#89DDFF\"> \"<\/span><span style=\"color:#C3E88D\">fullscreen<\/span><span style=\"color:#89DDFF\">\"<\/span><span style=\"color:#89DDFF\"> |<\/span><span style=\"color:#89DDFF\"> \"<\/span><span style=\"color:#C3E88D\">pip<\/span><span style=\"color:#89DDFF\">\"<\/span><span style=\"color:#89DDFF\"> |<\/span><span style=\"color:#89DDFF\"> \"<\/span><span style=\"color:#C3E88D\">carousel<\/span><span style=\"color:#89DDFF\">\"<\/span><span style=\"color:#89DDFF\">;<\/span><\/span>\n<span data-line=\"\"><span style=\"color:#545454;font-style:italic\">  \/\/ \u30db\u30b9\u30c8\u304c\u30b5\u30dd\u30fc\u30c8\u3059\u308b\u8868\u793a\u30e2\u30fc\u30c9\u306e\u4e00\u89a7<\/span><\/span>\n<span data-line=\"\"><span style=\"color:#F07178\">  availableDisplayModes<\/span><span style=\"color:#89DDFF\">?:<\/span><span style=\"color:#FFCB6B\"> string<\/span><span style=\"color:#EEFFFF\">[]<\/span><span style=\"color:#89DDFF\">;<\/span><\/span>\n<span data-line=\"\"><span style=\"color:#545454;font-style:italic\">  \/\/ UI \u306e\u8868\u793a\u306b\u95a2\u3059\u308b\u8ffd\u52a0\u60c5\u5831<\/span><\/span>\n<span data-line=\"\"><span style=\"color:#F07178\">  viewport<\/span><span style=\"color:#89DDFF\">?:<\/span><span style=\"color:#89DDFF\"> {<\/span><\/span>\n<span data-line=\"\"><span style=\"color:#F07178\">    width<\/span><span style=\"color:#89DDFF\">:<\/span><span style=\"color:#FFCB6B\"> number<\/span><span style=\"color:#89DDFF\">;<\/span><\/span>\n<span data-line=\"\"><span style=\"color:#F07178\">    height<\/span><span style=\"color:#89DDFF\">:<\/span><span style=\"color:#FFCB6B\"> number<\/span><span style=\"color:#89DDFF\">;<\/span><\/span>\n<span data-line=\"\"><span style=\"color:#F07178\">    maxHeight<\/span><span style=\"color:#89DDFF\">?:<\/span><span style=\"color:#FFCB6B\"> number<\/span><span style=\"color:#89DDFF\">;<\/span><\/span>\n<span data-line=\"\"><span style=\"color:#F07178\">    maxWidth<\/span><span style=\"color:#89DDFF\">?:<\/span><span style=\"color:#FFCB6B\"> number<\/span><span style=\"color:#89DDFF\">;<\/span><\/span>\n<span data-line=\"\"><span style=\"color:#89DDFF\">  };<\/span><\/span>\n<span data-line=\"\"><span style=\"color:#545454;font-style:italic\">  \/\/ \u30e6\u30fc\u30b6\u30fc\u306e\u8a00\u8a9e\u8a2d\u5b9a e.g. \"ja-JP\", \"en-US\"<\/span><\/span>\n<span data-line=\"\"><span style=\"color:#F07178\">  locale<\/span><span style=\"color:#89DDFF\">?:<\/span><span style=\"color:#FFCB6B\"> string<\/span><span style=\"color:#89DDFF\">;<\/span><\/span>\n<span data-line=\"\"><span style=\"color:#545454;font-style:italic\">  \/\/ \u30e6\u30fc\u30b6\u30fc\u306e\u30bf\u30a4\u30e0\u30be\u30fc\u30f3\u8a2d\u5b9a e.g. \"Asia\/Tokyo\", \"America\/New_York\"<\/span><\/span>\n<span data-line=\"\"><span style=\"color:#F07178\">  timeZone<\/span><span style=\"color:#89DDFF\">?:<\/span><span style=\"color:#FFCB6B\"> string<\/span><span style=\"color:#89DDFF\">;<\/span><\/span>\n<span data-line=\"\"><span style=\"color:#F07178\">  userAgent<\/span><span style=\"color:#89DDFF\">?:<\/span><span style=\"color:#FFCB6B\"> string<\/span><span style=\"color:#89DDFF\">;<\/span><\/span>\n<span data-line=\"\"><span style=\"color:#545454;font-style:italic\">  \/\/ \u30ec\u30b9\u30dd\u30f3\u30b7\u30d6\u30c7\u30b6\u30a4\u30f3\u306e\u305f\u3081\u306e\u30c7\u30d0\u30a4\u30b9\u60c5\u5831<\/span><\/span>\n<span data-line=\"\"><span style=\"color:#F07178\">  platform<\/span><span style=\"color:#89DDFF\">?:<\/span><span style=\"color:#89DDFF\"> \"<\/span><span style=\"color:#C3E88D\">web<\/span><span style=\"color:#89DDFF\">\"<\/span><span style=\"color:#89DDFF\"> |<\/span><span style=\"color:#89DDFF\"> \"<\/span><span style=\"color:#C3E88D\">desktop<\/span><span style=\"color:#89DDFF\">\"<\/span><span style=\"color:#89DDFF\"> |<\/span><span style=\"color:#89DDFF\"> \"<\/span><span style=\"color:#C3E88D\">mobile<\/span><span style=\"color:#89DDFF\">\"<\/span><span style=\"color:#89DDFF\">;<\/span><\/span>\n<span data-line=\"\"><span style=\"color:#545454;font-style:italic\">  \/\/ \u30bf\u30c3\u30c1\u306a\u3069\u306e\u30c7\u30d0\u30a4\u30b9\u6a5f\u80fd\u3092\u30b5\u30dd\u30fc\u30c8\u3057\u3066\u3044\u308b\u304b\u3069\u3046\u304b<\/span><\/span>\n<span data-line=\"\"><span style=\"color:#F07178\">  deviceCapabilities<\/span><span style=\"color:#89DDFF\">?:<\/span><span style=\"color:#89DDFF\"> {<\/span><\/span>\n<span data-line=\"\"><span style=\"color:#F07178\">    touch<\/span><span style=\"color:#89DDFF\">?:<\/span><span style=\"color:#FFCB6B\"> boolean<\/span><span style=\"color:#89DDFF\">;<\/span><\/span>\n<span data-line=\"\"><span style=\"color:#F07178\">    hover<\/span><span style=\"color:#89DDFF\">?:<\/span><span style=\"color:#FFCB6B\"> boolean<\/span><span style=\"color:#89DDFF\">;<\/span><\/span>\n<span data-line=\"\"><span style=\"color:#89DDFF\">  };<\/span><\/span>\n<span data-line=\"\"><span style=\"color:#545454;font-style:italic\">  \/\/ \u30bb\u30fc\u30d5\u30a8\u30ea\u30a2\u306e\u30a4\u30f3\u30bb\u30c3\u30c8\u60c5\u5831\uff08\u30e2\u30d0\u30a4\u30eb\u30c7\u30d0\u30a4\u30b9\u5411\u3051\uff09<\/span><\/span>\n<span data-line=\"\"><span style=\"color:#F07178\">  safeAreaInsets<\/span><span style=\"color:#89DDFF\">?:<\/span><span style=\"color:#89DDFF\"> {<\/span><\/span>\n<span data-line=\"\"><span style=\"color:#F07178\">    top<\/span><span style=\"color:#89DDFF\">:<\/span><span style=\"color:#FFCB6B\"> number<\/span><span style=\"color:#89DDFF\">;<\/span><\/span>\n<span data-line=\"\"><span style=\"color:#F07178\">    right<\/span><span style=\"color:#89DDFF\">:<\/span><span style=\"color:#FFCB6B\"> number<\/span><span style=\"color:#89DDFF\">;<\/span><\/span>\n<span data-line=\"\"><span style=\"color:#F07178\">    bottom<\/span><span style=\"color:#89DDFF\">:<\/span><span style=\"color:#FFCB6B\"> number<\/span><span style=\"color:#89DDFF\">;<\/span><\/span>\n<span data-line=\"\"><span style=\"color:#F07178\">    left<\/span><span style=\"color:#89DDFF\">:<\/span><span style=\"color:#FFCB6B\"> number<\/span><span style=\"color:#89DDFF\">;<\/span><\/span>\n<span data-line=\"\"><span style=\"color:#89DDFF\">  };<\/span><\/span>\n<span data-line=\"\"><span style=\"color:#89DDFF\">}<\/span><\/span><\/code><\/pre>\n<\/figure>\n<p>\u4ee5\u4e0b\u306e\u3088\u3046\u306a MCP Apps \u56fa\u6709\u306e\u30e1\u30c3\u30bb\u30fc\u30b8\u3082\u5b9a\u7fa9\u3055\u308c\u3066\u3044\u307e\u3059\u3002<\/p>\n<ul>\n<li><code>ui\/open-link<\/code>: \u30db\u30b9\u30c8\u306b\u5916\u90e8\u30ea\u30f3\u30af\u3092\u958b\u304f\u3088\u3046\u6307\u793a<\/li>\n<li><code>ui\/message<\/code>: \u30db\u30b9\u30c8\u306e\u30c1\u30e3\u30c3\u30c8 UI \u306b\u30e1\u30c3\u30bb\u30fc\u30b8\u3092\u8868\u793a<\/li>\n<li><code>ui\/notifications\/tool-input<\/code>: iframe \u306e\u521d\u671f\u5316\u30ea\u30af\u30a8\u30b9\u30c8\u304c\u5b8c\u4e86\u3057\u305f\u3089\u3001\u30db\u30b9\u30c8\u306f\u30c4\u30fc\u30eb\u306e\u5f15\u6570\u3068\u3068\u3082\u306b\u3053\u306e\u901a\u77e5\u3092\u9001\u4fe1<\/li>\n<li><code>ui\/notifications\/tool-input-partial<\/code>: \u30c4\u30fc\u30eb\u306e\u5f15\u6570\u304c\u90e8\u5206\u7684\u306b\u66f4\u65b0\u3055\u308c\u305f\u5834\u5408\u306b\u30db\u30b9\u30c8\u304c\u9001\u4fe1<\/li>\n<li><code>ui\/tool-result<\/code>: \u30c4\u30fc\u30eb\u306e\u5b9f\u884c\u7d50\u679c\u3092 iframe \u306b\u9001\u4fe1\u3002\u30db\u30b9\u30c8\u306f\u30c4\u30fc\u30eb\u306e\u5b9f\u884c\u304c\u5b8c\u4e86\u3057\u305f\u30bf\u30a4\u30df\u30f3\u30b0\u3067 UI \u306b\u7d50\u679c\u3092\u9001\u4fe1\u3059\u308b<\/li>\n<li><code>ui\/tool-cancelled<\/code>: \u30c4\u30fc\u30eb\u306e\u5b9f\u884c\u304c\u30ad\u30e3\u30f3\u30bb\u30eb\u3055\u308c\u305f\u5834\u5408\u306b\u30db\u30b9\u30c8\u304c\u9001\u4fe1<\/li>\n<li><code>ui\/resource-teardown<\/code>: \u30db\u30b9\u30c8\u304c UI \u30ea\u30bd\u30fc\u30b9\u3092\u7834\u68c4\u3055\u308c\u308b\u524d\u306b\u901a\u77e5\u3059\u308b<\/li>\n<li><code>ui\/size-change<\/code>: \u8868\u793a\u30b5\u30a4\u30ba\u304c\u5909\u66f4\u3055\u308c\u305f\u5834\u5408\u306b UI \u304c\u30db\u30b9\u30c8\u306b\u901a\u77e5<\/li>\n<li><code>ui\/host-context-change<\/code>: \u30db\u30b9\u30c8\u30b3\u30f3\u30c6\u30ad\u30b9\u30c8\u304c\u5909\u66f4\u3055\u308c\u305f\u5834\u5408\u306b\u30db\u30b9\u30c8\u304c UI \u306b\u901a\u77e5<\/li>\n<li><code>ui\/sandbox-ready<\/code>: \u30db\u30b9\u30c8\u304c iframe \u306e\u30b5\u30f3\u30c9\u30dc\u30c3\u30af\u30b9\u74b0\u5883\u304c\u6e96\u5099\u3067\u304d\u305f\u3053\u3068\u3092\u901a\u77e5<\/li>\n<li><code>ui\/sandbox-resource-ready<\/code>: \u30db\u30b9\u30c8\u304c iframe \u306e\u30b5\u30f3\u30c9\u30dc\u30c3\u30af\u30b9\u74b0\u5883\u3067\u30ea\u30bd\u30fc\u30b9\u304c\u5229\u7528\u53ef\u80fd\u306b\u306a\u3063\u305f\u3053\u3068\u3092\u901a\u77e5<\/li>\n<\/ul>\n<h2 id=\"mcp-apps-\u3092\u4f7f\u3063\u3066\u307f\u308b\"><a target=\"_blank\" aria-hidden=\"true\" tabindex=\"-1\" href=\"#mcp-apps-\u3092\u4f7f\u3063\u3066\u307f\u308b\"><span class=\"icon icon-link\"\/><\/a>MCP Apps \u3092\u4f7f\u3063\u3066\u307f\u308b<\/h2>\n<p>MCP Apps \u3092\u69cb\u7bc9\u3059\u308b\u305f\u3081\u306e SDK\uff08<code>@modelcontextprotocol\/ext-apps<\/code>\uff09\u3092\u4f7f\u7528\u3057\u3066 MCP Apps \u3092\u5b9f\u969b\u306b\u5b9f\u88c5\u3057\u3066\u307f\u307e\u3057\u3087\u3046\u3002<code>@modelcontextprotocol\/ext-apps<\/code> \u30d1\u30c3\u30b1\u30fc\u30b8\u306f\u307e\u3060 <code>npm<\/code> \u306b\u516c\u958b\u3055\u308c\u3066\u3044\u306a\u3044\u305f\u3081\u3001GitHub \u304b\u3089\u76f4\u63a5\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb\u3057\u307e\u3059\u3002<\/p>\n<figure data-rehype-pretty-code-figure=\"\">\n<pre style=\"background-color:#212121;color:#EEFFFF\" tabindex=\"0\" data-language=\"bash\" data-theme=\"material-theme-darker\"><code data-language=\"bash\" data-theme=\"material-theme-darker\" style=\"display: grid;\"><span data-line=\"\"><span style=\"color:#FFCB6B\">npm<\/span><span style=\"color:#C3E88D\"> install<\/span><span style=\"color:#C3E88D\"> git+https:\/\/github.com\/modelcontextprotocol\/ext-apps.git<\/span><\/span><\/code><\/pre>\n<\/figure>\n<p>\u305d\u306e\u4ed6 MCP \u30b5\u30fc\u30d0\u30fc\u3068 UI \u30ea\u30bd\u30fc\u30b9\u3092\u5b9f\u88c5\u3059\u308b\u305f\u3081\u306b\u5fc5\u8981\u306a\u30d1\u30c3\u30b1\u30fc\u30b8\u3082\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb\u3057\u307e\u3059\u3002<\/p>\n<figure data-rehype-pretty-code-figure=\"\">\n<pre style=\"background-color:#212121;color:#EEFFFF\" tabindex=\"0\" data-language=\"bash\" data-theme=\"material-theme-darker\"><code data-language=\"bash\" data-theme=\"material-theme-darker\" style=\"display: grid;\"><span data-line=\"\"><span style=\"color:#FFCB6B\">npm<\/span><span style=\"color:#C3E88D\"> install<\/span><span style=\"color:#C3E88D\"> @modelcontextprotocol\/sdk<\/span><span style=\"color:#C3E88D\"> react<\/span><span style=\"color:#C3E88D\"> react-dom<\/span><span style=\"color:#C3E88D\"> express<\/span><span style=\"color:#C3E88D\"> cors<\/span><span style=\"color:#C3E88D\"> zod@3<\/span><\/span>\n<span data-line=\"\"><span style=\"color:#FFCB6B\">npm<\/span><span style=\"color:#C3E88D\"> install<\/span><span style=\"color:#C3E88D\"> -D<\/span><span style=\"color:#C3E88D\"> typescript<\/span><span style=\"color:#C3E88D\"> ts-node<\/span><span style=\"color:#C3E88D\"> @types\/node<\/span><span style=\"color:#C3E88D\"> @types\/express<\/span><span style=\"color:#C3E88D\"> @types\/react<\/span><span style=\"color:#C3E88D\"> @types\/react-dom<\/span><span style=\"color:#C3E88D\"> @vitejs\/plugin-react<\/span><span style=\"color:#C3E88D\"> vite<\/span><span style=\"color:#C3E88D\"> vite-plugin-singlefile<\/span><span style=\"color:#C3E88D\"> tsx<\/span><\/span><\/code><\/pre>\n<\/figure>\n<p>\u3053\u306e\u4f8b\u3067\u306f React \u3068 Vite \u3092\u4f7f\u7528\u3057\u3066 UI \u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u3092\u5b9f\u88c5\u3057\u307e\u3059\u3002UI \u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u3092\u30d3\u30eb\u30c9\u3059\u308b\u305f\u3081\u306b <code>vite.config.ts<\/code> \u30d5\u30a1\u30a4\u30eb\u3092\u4f5c\u6210\u3057\u307e\u3059\u3002<\/p>\n<p>vite.config.ts<\/p>\n<figure data-rehype-pretty-code-figure=\"\">\n<pre style=\"background-color:#212121;color:#EEFFFF\" tabindex=\"0\" data-language=\"ts\" data-theme=\"material-theme-darker\"><code data-language=\"ts\" data-theme=\"material-theme-darker\" style=\"display: grid;\"><span data-line=\"\"><span style=\"color:#89DDFF;font-style:italic\">import<\/span><span style=\"color:#89DDFF\"> {<\/span><span style=\"color:#EEFFFF\"> defineConfig<\/span><span style=\"color:#89DDFF\"> }<\/span><span style=\"color:#89DDFF;font-style:italic\"> from<\/span><span style=\"color:#89DDFF\"> \"<\/span><span style=\"color:#C3E88D\">vite<\/span><span style=\"color:#89DDFF\">\"<\/span><span style=\"color:#89DDFF\">;<\/span><\/span>\n<span data-line=\"\"><span style=\"color:#89DDFF;font-style:italic\">import<\/span><span style=\"color:#EEFFFF\"> react <\/span><span style=\"color:#89DDFF;font-style:italic\">from<\/span><span style=\"color:#89DDFF\"> \"<\/span><span style=\"color:#C3E88D\">@vitejs\/plugin-react<\/span><span style=\"color:#89DDFF\">\"<\/span><span style=\"color:#89DDFF\">;<\/span><\/span>\n<span data-line=\"\"><span style=\"color:#89DDFF;font-style:italic\">import<\/span><span style=\"color:#89DDFF\"> {<\/span><span style=\"color:#EEFFFF\"> viteSingleFile<\/span><span style=\"color:#89DDFF\"> }<\/span><span style=\"color:#89DDFF;font-style:italic\"> from<\/span><span style=\"color:#89DDFF\"> \"<\/span><span style=\"color:#C3E88D\">vite-plugin-singlefile<\/span><span style=\"color:#89DDFF\">\"<\/span><span style=\"color:#89DDFF\">;<\/span><\/span>\n<span data-line=\"\"><span style=\"color:#89DDFF;font-style:italic\">import<\/span><span style=\"color:#89DDFF\"> {<\/span><span style=\"color:#EEFFFF\"> resolve<\/span><span style=\"color:#89DDFF\"> }<\/span><span style=\"color:#89DDFF;font-style:italic\"> from<\/span><span style=\"color:#89DDFF\"> \"<\/span><span style=\"color:#C3E88D\">path<\/span><span style=\"color:#89DDFF\">\"<\/span><span style=\"color:#89DDFF\">;<\/span><\/span>\n<span data-line=\"\"> <\/span>\n<span data-line=\"\"><span style=\"color:#C792EA\">const<\/span><span style=\"color:#EEFFFF\"> entry <\/span><span style=\"color:#89DDFF\">=<\/span><span style=\"color:#EEFFFF\"> process<\/span><span style=\"color:#89DDFF\">.<\/span><span style=\"color:#EEFFFF\">env<\/span><span style=\"color:#89DDFF\">.<\/span><span style=\"color:#EEFFFF\">VITE_ENTRY <\/span><span style=\"color:#89DDFF\">||<\/span><span style=\"color:#89DDFF\"> \"<\/span><span style=\"color:#C3E88D\">ui-react<\/span><span style=\"color:#89DDFF\">\"<\/span><span style=\"color:#89DDFF\">;<\/span><\/span>\n<span data-line=\"\"> <\/span>\n<span data-line=\"\"><span style=\"color:#89DDFF;font-style:italic\">export<\/span><span style=\"color:#89DDFF;font-style:italic\"> default<\/span><span style=\"color:#82AAFF\"> defineConfig<\/span><span style=\"color:#EEFFFF\">(<\/span><span style=\"color:#89DDFF\">{<\/span><\/span>\n<span data-line=\"\"><span style=\"color:#545454;font-style:italic\">  \/\/ viteSingleFile \u30d7\u30e9\u30b0\u30a4\u30f3\u3092\u4f7f\u7528\u3057\u3066\u5358\u4e00\u30d5\u30a1\u30a4\u30eb\u306b\u30d0\u30f3\u30c9\u30eb<\/span><\/span>\n<span data-line=\"\"><span style=\"color:#F07178\">  plugins<\/span><span style=\"color:#89DDFF\">:<\/span><span style=\"color:#EEFFFF\"> [<\/span><span style=\"color:#82AAFF\">react<\/span><span style=\"color:#EEFFFF\">()<\/span><span style=\"color:#89DDFF\">,<\/span><span style=\"color:#82AAFF\"> viteSingleFile<\/span><span style=\"color:#EEFFFF\">()]<\/span><span style=\"color:#89DDFF\">,<\/span><\/span>\n<span data-line=\"\"><span style=\"color:#F07178\">  build<\/span><span style=\"color:#89DDFF\">:<\/span><span style=\"color:#89DDFF\"> {<\/span><\/span>\n<span data-line=\"\"><span style=\"color:#F07178\">    rollupOptions<\/span><span style=\"color:#89DDFF\">:<\/span><span style=\"color:#89DDFF\"> {<\/span><\/span>\n<span data-line=\"\"><span style=\"color:#F07178\">      input<\/span><span style=\"color:#89DDFF\">:<\/span><span style=\"color:#82AAFF\"> resolve<\/span><span style=\"color:#EEFFFF\">(__dirname<\/span><span style=\"color:#89DDFF\">,<\/span><span style=\"color:#89DDFF\"> `${<\/span><span style=\"color:#EEFFFF\">entry<\/span><span style=\"color:#89DDFF\">}<\/span><span style=\"color:#C3E88D\">.html<\/span><span style=\"color:#89DDFF\">`<\/span><span style=\"color:#EEFFFF\">)<\/span><span style=\"color:#89DDFF\">,<\/span><\/span>\n<span data-line=\"\"><span style=\"color:#89DDFF\">    },<\/span><\/span>\n<span data-line=\"\"><span style=\"color:#F07178\">    outDir<\/span><span style=\"color:#89DDFF\">:<\/span><span style=\"color:#89DDFF\"> `<\/span><span style=\"color:#C3E88D\">dist<\/span><span style=\"color:#89DDFF\">`<\/span><span style=\"color:#89DDFF\">,<\/span><\/span>\n<span data-line=\"\"><span style=\"color:#F07178\">    emptyOutDir<\/span><span style=\"color:#89DDFF\">:<\/span><span style=\"color:#FF9CAC\"> false<\/span><span style=\"color:#89DDFF\">,<\/span><\/span>\n<span data-line=\"\"><span style=\"color:#89DDFF\">  },<\/span><\/span>\n<span data-line=\"\"><span style=\"color:#89DDFF\">}<\/span><span style=\"color:#EEFFFF\">)<\/span><span style=\"color:#89DDFF\">;<\/span><\/span><\/code><\/pre>\n<\/figure>\n<p>UI \u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u306e\u30a8\u30f3\u30c8\u30ea\u30fc\u30dd\u30a4\u30f3\u30c8\u3068\u306a\u308b <code>ui-react.html<\/code> \u30d5\u30a1\u30a4\u30eb\u3092\u4f5c\u6210\u3057\u307e\u3059\u3002<\/p>\n<p>ui-react.html<\/p>\n<figure data-rehype-pretty-code-figure=\"\">\n<pre style=\"background-color:#212121;color:#EEFFFF\" tabindex=\"0\" data-language=\"html\" data-theme=\"material-theme-darker\"><code data-language=\"html\" data-theme=\"material-theme-darker\" style=\"display: grid;\"><span data-line=\"\"><span style=\"color:#89DDFF\"><span style=\"color:#F07178\">DOCTYPE<\/span><span style=\"color:#C792EA\"> html<\/span><span style=\"color:#89DDFF\">&gt;<\/span><\/span>\n<span data-line=\"\"><span style=\"color:#89DDFF\"><span style=\"color:#F07178\">html<\/span><span style=\"color:#C792EA\"> lang<\/span><span style=\"color:#89DDFF\">=<\/span><span style=\"color:#89DDFF\">\"<\/span><span style=\"color:#C3E88D\">en<\/span><span style=\"color:#89DDFF\">\"<\/span><span style=\"color:#89DDFF\">&gt;<\/span><\/span>\n<span data-line=\"\"><span style=\"color:#89DDFF\"><span style=\"color:#F07178\">head<\/span><span style=\"color:#89DDFF\">&gt;<\/span><\/span>\n<span data-line=\"\"><span style=\"color:#89DDFF\">    <span style=\"color:#F07178\">meta<\/span><span style=\"color:#C792EA\"> charset<\/span><span style=\"color:#89DDFF\">=<\/span><span style=\"color:#89DDFF\">\"<\/span><span style=\"color:#C3E88D\">UTF-8<\/span><span style=\"color:#89DDFF\">\"<\/span><span style=\"color:#89DDFF\">&gt;<\/span><\/span>\n<span data-line=\"\"><span style=\"color:#89DDFF\">    <span style=\"color:#F07178\">meta<\/span><span style=\"color:#C792EA\"> name<\/span><span style=\"color:#89DDFF\">=<\/span><span style=\"color:#89DDFF\">\"<\/span><span style=\"color:#C3E88D\">viewport<\/span><span style=\"color:#89DDFF\">\"<\/span><span style=\"color:#C792EA\"> content<\/span><span style=\"color:#89DDFF\">=<\/span><span style=\"color:#89DDFF\">\"<\/span><span style=\"color:#C3E88D\">width=device-width, initial-scale=1.0<\/span><span style=\"color:#89DDFF\">\"<\/span><span style=\"color:#89DDFF\">&gt;<\/span><\/span>\n<span data-line=\"\"><span style=\"color:#89DDFF\">    <span style=\"color:#F07178\">title<\/span><span style=\"color:#89DDFF\">&gt;<\/span><span style=\"color:#EEFFFF\">MCP UI Client (React)<\/span><span style=\"color:#89DDFF\"\/><span style=\"color:#F07178\">title<\/span><span style=\"color:#89DDFF\">&gt;<\/span><\/span>\n<span data-line=\"\"><span style=\"color:#89DDFF\"\/><span style=\"color:#F07178\">head<\/span><span style=\"color:#89DDFF\">&gt;<\/span><\/span>\n<span data-line=\"\"><span style=\"color:#89DDFF\"><span style=\"color:#F07178\">body<\/span><span style=\"color:#89DDFF\">&gt;<\/span><\/span>\n<span data-line=\"\"><span style=\"color:#89DDFF\">    <span style=\"color:#F07178\">div<\/span><span style=\"color:#C792EA\"> id<\/span><span style=\"color:#89DDFF\">=<\/span><span style=\"color:#89DDFF\">\"<\/span><span style=\"color:#C3E88D\">root<\/span><span style=\"color:#89DDFF\">\"<\/span><span style=\"color:#89DDFF\">&gt;<\/span><span style=\"color:#F07178\">div<\/span><span style=\"color:#89DDFF\">&gt;<\/span><\/span>\n<span data-line=\"\"><span style=\"color:#89DDFF\">    <span style=\"color:#F07178\">script<\/span><span style=\"color:#C792EA\"> type<\/span><span style=\"color:#89DDFF\">=<\/span><span style=\"color:#89DDFF\">\"<\/span><span style=\"color:#C3E88D\">module<\/span><span style=\"color:#89DDFF\">\"<\/span><span style=\"color:#C792EA\"> src<\/span><span style=\"color:#89DDFF\">=<\/span><span style=\"color:#89DDFF\">\"<\/span><span style=\"color:#C3E88D\">\/src\/ui-react.tsx<\/span><span style=\"color:#89DDFF\">\"<\/span><span style=\"color:#89DDFF\">&gt;<\/span><span style=\"color:#F07178\">script<\/span><span style=\"color:#89DDFF\">&gt;<\/span><\/span>\n<span data-line=\"\"><span style=\"color:#89DDFF\"\/><span style=\"color:#F07178\">body<\/span><span style=\"color:#89DDFF\">&gt;<\/span><\/span>\n<span data-line=\"\"><span style=\"color:#89DDFF\"\/><span style=\"color:#F07178\">html<\/span><span style=\"color:#89DDFF\">&gt;<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/code><\/pre>\n<\/figure>\n<p><code>tsconfig.json<\/code> \u30d5\u30a1\u30a4\u30eb\u3092\u4f5c\u6210\u3057\u307e\u3059\u3002<\/p>\n<p>tsconfig.json<\/p>\n<figure data-rehype-pretty-code-figure=\"\">\n<pre style=\"background-color:#212121;color:#EEFFFF\" tabindex=\"0\" data-language=\"json\" data-theme=\"material-theme-darker\"><code data-language=\"json\" data-theme=\"material-theme-darker\" style=\"display: grid;\"><span data-line=\"\"><span style=\"color:#89DDFF\">{<\/span><\/span>\n<span data-line=\"\"><span style=\"color:#89DDFF\">  \"<\/span><span style=\"color:#C792EA\">compilerOptions<\/span><span style=\"color:#89DDFF\">\"<\/span><span style=\"color:#89DDFF\">:<\/span><span style=\"color:#89DDFF\"> {<\/span><\/span>\n<span data-line=\"\"><span style=\"color:#89DDFF\">    \"<\/span><span style=\"color:#FFCB6B\">target<\/span><span style=\"color:#89DDFF\">\"<\/span><span style=\"color:#89DDFF\">:<\/span><span style=\"color:#89DDFF\"> \"<\/span><span style=\"color:#C3E88D\">ES2020<\/span><span style=\"color:#89DDFF\">\"<\/span><span style=\"color:#89DDFF\">,<\/span><\/span>\n<span data-line=\"\"><span style=\"color:#89DDFF\">    \"<\/span><span style=\"color:#FFCB6B\">useDefineForClassFields<\/span><span style=\"color:#89DDFF\">\"<\/span><span style=\"color:#89DDFF\">:<\/span><span style=\"color:#89DDFF\"> true,<\/span><\/span>\n<span data-line=\"\"><span style=\"color:#89DDFF\">    \"<\/span><span style=\"color:#FFCB6B\">lib<\/span><span style=\"color:#89DDFF\">\"<\/span><span style=\"color:#89DDFF\">:<\/span><span style=\"color:#89DDFF\"> [<\/span><span style=\"color:#89DDFF\">\"<\/span><span style=\"color:#C3E88D\">ES2020<\/span><span style=\"color:#89DDFF\">\"<\/span><span style=\"color:#89DDFF\">,<\/span><span style=\"color:#89DDFF\"> \"<\/span><span style=\"color:#C3E88D\">DOM<\/span><span style=\"color:#89DDFF\">\"<\/span><span style=\"color:#89DDFF\">,<\/span><span style=\"color:#89DDFF\"> \"<\/span><span style=\"color:#C3E88D\">DOM.Iterable<\/span><span style=\"color:#89DDFF\">\"<\/span><span style=\"color:#89DDFF\">],<\/span><\/span>\n<span data-line=\"\"><span style=\"color:#89DDFF\">    \"<\/span><span style=\"color:#FFCB6B\">module<\/span><span style=\"color:#89DDFF\">\"<\/span><span style=\"color:#89DDFF\">:<\/span><span style=\"color:#89DDFF\"> \"<\/span><span style=\"color:#C3E88D\">ESNext<\/span><span style=\"color:#89DDFF\">\"<\/span><span style=\"color:#89DDFF\">,<\/span><\/span>\n<span data-line=\"\"><span style=\"color:#89DDFF\">    \"<\/span><span style=\"color:#FFCB6B\">skipLibCheck<\/span><span style=\"color:#89DDFF\">\"<\/span><span style=\"color:#89DDFF\">:<\/span><span style=\"color:#89DDFF\"> true,<\/span><\/span>\n<span data-line=\"\"><span style=\"color:#89DDFF\">    \"<\/span><span style=\"color:#FFCB6B\">moduleResolution<\/span><span style=\"color:#89DDFF\">\"<\/span><span style=\"color:#89DDFF\">:<\/span><span style=\"color:#89DDFF\"> \"<\/span><span style=\"color:#C3E88D\">bundler<\/span><span style=\"color:#89DDFF\">\"<\/span><span style=\"color:#89DDFF\">,<\/span><\/span>\n<span data-line=\"\"><span style=\"color:#89DDFF\">    \"<\/span><span style=\"color:#FFCB6B\">allowImportingTsExtensions<\/span><span style=\"color:#89DDFF\">\"<\/span><span style=\"color:#89DDFF\">:<\/span><span style=\"color:#89DDFF\"> true,<\/span><\/span>\n<span data-line=\"\"><span style=\"color:#89DDFF\">    \"<\/span><span style=\"color:#FFCB6B\">resolveJsonModule<\/span><span style=\"color:#89DDFF\">\"<\/span><span style=\"color:#89DDFF\">:<\/span><span style=\"color:#89DDFF\"> true,<\/span><\/span>\n<span data-line=\"\"><span style=\"color:#89DDFF\">    \"<\/span><span style=\"color:#FFCB6B\">isolatedModules<\/span><span style=\"color:#89DDFF\">\"<\/span><span style=\"color:#89DDFF\">:<\/span><span style=\"color:#89DDFF\"> true,<\/span><\/span>\n<span data-line=\"\"><span style=\"color:#89DDFF\">    \"<\/span><span style=\"color:#FFCB6B\">noEmit<\/span><span style=\"color:#89DDFF\">\"<\/span><span style=\"color:#89DDFF\">:<\/span><span style=\"color:#89DDFF\"> true,<\/span><\/span>\n<span data-line=\"\"><span style=\"color:#89DDFF\">    \"<\/span><span style=\"color:#FFCB6B\">jsx<\/span><span style=\"color:#89DDFF\">\"<\/span><span style=\"color:#89DDFF\">:<\/span><span style=\"color:#89DDFF\"> \"<\/span><span style=\"color:#C3E88D\">react-jsx<\/span><span style=\"color:#89DDFF\">\"<\/span><span style=\"color:#89DDFF\">,<\/span><\/span>\n<span data-line=\"\"><span style=\"color:#89DDFF\">    \"<\/span><span style=\"color:#FFCB6B\">strict<\/span><span style=\"color:#89DDFF\">\"<\/span><span style=\"color:#89DDFF\">:<\/span><span style=\"color:#89DDFF\"> true,<\/span><\/span>\n<span data-line=\"\"><span style=\"color:#89DDFF\">    \"<\/span><span style=\"color:#FFCB6B\">noUnusedLocals<\/span><span style=\"color:#89DDFF\">\"<\/span><span style=\"color:#89DDFF\">:<\/span><span style=\"color:#89DDFF\"> true,<\/span><\/span>\n<span data-line=\"\"><span style=\"color:#89DDFF\">    \"<\/span><span style=\"color:#FFCB6B\">noUnusedParameters<\/span><span style=\"color:#89DDFF\">\"<\/span><span style=\"color:#89DDFF\">:<\/span><span style=\"color:#89DDFF\"> true,<\/span><\/span>\n<span data-line=\"\"><span style=\"color:#89DDFF\">    \"<\/span><span style=\"color:#FFCB6B\">noFallthroughCasesInSwitch<\/span><span style=\"color:#89DDFF\">\"<\/span><span style=\"color:#89DDFF\">:<\/span><span style=\"color:#89DDFF\"> true<\/span><\/span>\n<span data-line=\"\"><span style=\"color:#89DDFF\">  },<\/span><\/span>\n<span data-line=\"\"><span style=\"color:#89DDFF\">  \"<\/span><span style=\"color:#C792EA\">include<\/span><span style=\"color:#89DDFF\">\"<\/span><span style=\"color:#89DDFF\">:<\/span><span style=\"color:#89DDFF\"> [<\/span><span style=\"color:#89DDFF\">\"<\/span><span style=\"color:#C3E88D\">src<\/span><span style=\"color:#89DDFF\">\"<\/span><span style=\"color:#89DDFF\">]<\/span><\/span>\n<span data-line=\"\"><span style=\"color:#89DDFF\">}<\/span><\/span><\/code><\/pre>\n<\/figure>\n<p>\u30d3\u30eb\u30c9\u30b9\u30af\u30ea\u30d7\u30c8\u3092 <code>package.json<\/code> \u306b\u8ffd\u52a0\u3057\u307e\u3059\u3002<\/p>\n<p>package.json<\/p>\n<figure data-rehype-pretty-code-figure=\"\">\n<pre style=\"background-color:#212121;color:#EEFFFF\" tabindex=\"0\" data-language=\"json\" data-theme=\"material-theme-darker\"><code data-language=\"json\" data-theme=\"material-theme-darker\" style=\"display: grid;\"><span data-line=\"\"><span style=\"color:#89DDFF\">{<\/span><\/span>\n<span data-line=\"\"><span style=\"color:#89DDFF\">  \"<\/span><span style=\"color:#C792EA\">scripts<\/span><span style=\"color:#89DDFF\">\"<\/span><span style=\"color:#89DDFF\">:<\/span><span style=\"color:#89DDFF\"> {<\/span><\/span>\n<span data-line=\"\"><span style=\"color:#89DDFF\">    \"<\/span><span style=\"color:#FFCB6B\">dev<\/span><span style=\"color:#89DDFF\">\"<\/span><span style=\"color:#89DDFF\">:<\/span><span style=\"color:#89DDFF\"> \"<\/span><span style=\"color:#C3E88D\">vite<\/span><span style=\"color:#89DDFF\">\"<\/span><span style=\"color:#89DDFF\">,<\/span><\/span>\n<span data-line=\"\"><span style=\"color:#89DDFF\">    \"<\/span><span style=\"color:#FFCB6B\">build<\/span><span style=\"color:#89DDFF\">\"<\/span><span style=\"color:#89DDFF\">:<\/span><span style=\"color:#89DDFF\"> \"<\/span><span style=\"color:#C3E88D\">rm -rf dist &amp;&amp; VITE_ENTRY=ui-react vite build<\/span><span style=\"color:#89DDFF\">\"<\/span><span style=\"color:#89DDFF\">,<\/span><\/span>\n<span data-line=\"\"><span style=\"color:#89DDFF\">    \"<\/span><span style=\"color:#FFCB6B\">preview<\/span><span style=\"color:#89DDFF\">\"<\/span><span style=\"color:#89DDFF\">:<\/span><span style=\"color:#89DDFF\"> \"<\/span><span style=\"color:#C3E88D\">vite preview<\/span><span style=\"color:#89DDFF\">\"<\/span><span style=\"color:#89DDFF\">,<\/span><\/span>\n<span data-line=\"\"><span style=\"color:#89DDFF\">    \"<\/span><span style=\"color:#FFCB6B\">server<\/span><span style=\"color:#89DDFF\">\"<\/span><span style=\"color:#89DDFF\">:<\/span><span style=\"color:#89DDFF\"> \"<\/span><span style=\"color:#C3E88D\">tsx server.ts<\/span><span style=\"color:#89DDFF\">\"<\/span><span style=\"color:#89DDFF\">,<\/span><\/span>\n<span data-line=\"\"><span style=\"color:#89DDFF\">    \"<\/span><span style=\"color:#FFCB6B\">start<\/span><span style=\"color:#89DDFF\">\"<\/span><span style=\"color:#89DDFF\">:<\/span><span style=\"color:#89DDFF\"> \"<\/span><span style=\"color:#C3E88D\">npm run build &amp;&amp; npm run server<\/span><span style=\"color:#89DDFF\">\"<\/span><\/span>\n<span data-line=\"\"><span style=\"color:#89DDFF\">  },<\/span><\/span>\n<span data-line=\"\"><span style=\"color:#89DDFF\">}<\/span><\/span><\/code><\/pre>\n<\/figure>\n<h3 id=\"ui-\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u306e\u5b9f\u88c5\"><a target=\"_blank\" aria-hidden=\"true\" tabindex=\"-1\" href=\"#ui-\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u306e\u5b9f\u88c5\"><span class=\"icon icon-link\"\/><\/a>UI \u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u306e\u5b9f\u88c5<\/h3>\n<p><code>src\/ui-react.tsx<\/code> \u30d5\u30a1\u30a4\u30eb\u3092\u4f5c\u6210\u3057\u3001MCP Apps SDK \u3092\u4f7f\u7528\u3057\u3066 UI \u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u3092\u5b9f\u88c5\u3057\u307e\u3057\u3087\u3046\u3002UI \u306e\u521d\u671f\u5316\u51e6\u7406\u306f <code>useApp<\/code> \u30d5\u30c3\u30af\u3092\u4f7f\u7528\u3057\u3066\u884c\u3044\u307e\u3059\u3002<\/p>\n<p>src\/ui-react.tsx<\/p>\n<figure data-rehype-pretty-code-figure=\"\">\n<pre style=\"background-color:#212121;color:#EEFFFF\" tabindex=\"0\" data-language=\"tsx\" data-theme=\"material-theme-darker\"><code data-language=\"tsx\" data-theme=\"material-theme-darker\" style=\"display: grid;\"><span data-line=\"\"><span style=\"color:#89DDFF;font-style:italic\">import<\/span><span style=\"color:#89DDFF\"> {<\/span><span style=\"color:#EEFFFF\"> useState<\/span><span style=\"color:#89DDFF\"> }<\/span><span style=\"color:#89DDFF;font-style:italic\"> from<\/span><span style=\"color:#89DDFF\"> \"<\/span><span style=\"color:#C3E88D\">react<\/span><span style=\"color:#89DDFF\">\"<\/span><span style=\"color:#89DDFF\">;<\/span><\/span>\n<span data-line=\"\"><span style=\"color:#89DDFF;font-style:italic\">import<\/span><span style=\"color:#89DDFF\"> {<\/span><\/span>\n<span data-line=\"\"><span style=\"color:#EEFFFF\">  useApp<\/span><span style=\"color:#89DDFF\">,<\/span><\/span>\n<span data-line=\"\"><span style=\"color:#EEFFFF\">  McpUiSizeChangeNotificationSchema<\/span><span style=\"color:#89DDFF\">,<\/span><\/span>\n<span data-line=\"\"><span style=\"color:#EEFFFF\">  McpUiToolResultNotificationSchema<\/span><span style=\"color:#89DDFF\">,<\/span><\/span>\n<span data-line=\"\"><span style=\"color:#89DDFF\">}<\/span><span style=\"color:#89DDFF;font-style:italic\"> from<\/span><span style=\"color:#89DDFF\"> \"<\/span><span style=\"color:#C3E88D\">@modelcontextprotocol\/ext-apps\/react<\/span><span style=\"color:#89DDFF\">\"<\/span><span style=\"color:#89DDFF\">;<\/span><\/span>\n<span data-line=\"\"><span style=\"color:#89DDFF;font-style:italic\">import<\/span><span style=\"color:#89DDFF;font-style:italic\"> type<\/span><span style=\"color:#89DDFF\"> {<\/span><span style=\"color:#EEFFFF\"> CallToolResult<\/span><span style=\"color:#89DDFF\"> }<\/span><span style=\"color:#89DDFF;font-style:italic\"> from<\/span><span style=\"color:#89DDFF\"> \"<\/span><span style=\"color:#C3E88D\">@modelcontextprotocol\/sdk\/types.js<\/span><span style=\"color:#89DDFF\">\"<\/span><span style=\"color:#89DDFF\">;<\/span><\/span>\n<span data-line=\"\"> <\/span>\n<span data-line=\"\"><span style=\"color:#89DDFF;font-style:italic\">export<\/span><span style=\"color:#C792EA\"> function<\/span><span style=\"color:#82AAFF\"> UiReact<\/span><span style=\"color:#89DDFF\">()<\/span><span style=\"color:#89DDFF\"> {<\/span><\/span>\n<span data-line=\"\"><span style=\"color:#C792EA\">  const<\/span><span style=\"color:#89DDFF\"> [<\/span><span style=\"color:#EEFFFF\">toolResults<\/span><span style=\"color:#89DDFF\">,<\/span><span style=\"color:#EEFFFF\"> setToolResults<\/span><span style=\"color:#89DDFF\">]<\/span><span style=\"color:#89DDFF\"> =<\/span><span style=\"color:#82AAFF\"> useState<\/span><span style=\"color:#89DDFF\"><span style=\"color:#FFCB6B\">CallToolResult<\/span><span style=\"color:#F07178\">[]<\/span><span style=\"color:#89DDFF\">&gt;<\/span><span style=\"color:#F07178\">([])<\/span><span style=\"color:#89DDFF\">;<\/span><\/span>\n<span data-line=\"\"><span style=\"color:#C792EA\">  const<\/span><span style=\"color:#89DDFF\"> {<\/span><span style=\"color:#EEFFFF\"> app<\/span><span style=\"color:#89DDFF\">,<\/span><span style=\"color:#EEFFFF\"> isConnected<\/span><span style=\"color:#89DDFF\">,<\/span><span style=\"color:#EEFFFF\"> error<\/span><span style=\"color:#89DDFF\"> }<\/span><span style=\"color:#89DDFF\"> =<\/span><span style=\"color:#82AAFF\"> useApp<\/span><span style=\"color:#F07178\">(<\/span><span style=\"color:#89DDFF\">{<\/span><\/span>\n<span data-line=\"\"><span style=\"color:#F07178\">    appInfo<\/span><span style=\"color:#89DDFF\">:<\/span><span style=\"color:#89DDFF\"> {<\/span><\/span>\n<span data-line=\"\"><span style=\"color:#F07178\">      name<\/span><span style=\"color:#89DDFF\">:<\/span><span style=\"color:#89DDFF\"> \"<\/span><span style=\"color:#C3E88D\">ui-react<\/span><span style=\"color:#89DDFF\">\"<\/span><span style=\"color:#89DDFF\">,<\/span><\/span>\n<span data-line=\"\"><span style=\"color:#F07178\">      version<\/span><span style=\"color:#89DDFF\">:<\/span><span style=\"color:#89DDFF\"> \"<\/span><span style=\"color:#C3E88D\">0.1.0<\/span><span style=\"color:#89DDFF\">\"<\/span><span style=\"color:#89DDFF\">,<\/span><\/span>\n<span data-line=\"\"><span style=\"color:#89DDFF\">    },<\/span><\/span>\n<span data-line=\"\"><span style=\"color:#F07178\">    capabilities<\/span><span style=\"color:#89DDFF\">:<\/span><span style=\"color:#89DDFF\"> {},<\/span><\/span>\n<span data-line=\"\"><span style=\"color:#82AAFF\">    onAppCreated<\/span><span style=\"color:#89DDFF\">:<\/span><span style=\"color:#89DDFF\"> (<\/span><span style=\"color:#EEFFFF;font-style:italic\">app<\/span><span style=\"color:#89DDFF\">)<\/span><span style=\"color:#C792EA\"> =&gt;<\/span><span style=\"color:#89DDFF\"> {<\/span><\/span>\n<span data-line=\"\"><span style=\"color:#EEFFFF\">      app<\/span><span style=\"color:#89DDFF\">.<\/span><span style=\"color:#82AAFF\">setNotificationHandler<\/span><span style=\"color:#F07178\">(<\/span><\/span>\n<span data-line=\"\"><span style=\"color:#EEFFFF\">        McpUiToolResultNotificationSchema<\/span><span style=\"color:#89DDFF\">,<\/span><\/span>\n<span data-line=\"\"><span style=\"color:#C792EA\">        async<\/span><span style=\"color:#89DDFF\"> (<\/span><span style=\"color:#EEFFFF;font-style:italic\">notification<\/span><span style=\"color:#89DDFF\">)<\/span><span style=\"color:#C792EA\"> =&gt;<\/span><span style=\"color:#89DDFF\"> {<\/span><\/span>\n<span data-line=\"\"><span style=\"color:#82AAFF\">          setToolResults<\/span><span style=\"color:#F07178\">(<\/span><span style=\"color:#89DDFF\">(<\/span><span style=\"color:#EEFFFF;font-style:italic\">prev<\/span><span style=\"color:#89DDFF\">)<\/span><span style=\"color:#C792EA\"> =&gt;<\/span><span style=\"color:#F07178\"> [<\/span><span style=\"color:#89DDFF\">...<\/span><span style=\"color:#EEFFFF\">prev<\/span><span style=\"color:#89DDFF\">,<\/span><span style=\"color:#EEFFFF\"> notification<\/span><span style=\"color:#89DDFF\">.<\/span><span style=\"color:#EEFFFF\">params<\/span><span style=\"color:#F07178\">])<\/span><span style=\"color:#89DDFF\">;<\/span><\/span>\n<span data-line=\"\"><span style=\"color:#89DDFF\">        }<\/span><\/span>\n<span data-line=\"\"><span style=\"color:#F07178\">      )<\/span><span style=\"color:#89DDFF\">;<\/span><\/span>\n<span data-line=\"\"><span style=\"color:#EEFFFF\">      app<\/span><span style=\"color:#89DDFF\">.<\/span><span style=\"color:#82AAFF\">setNotificationHandler<\/span><span style=\"color:#F07178\">(<\/span><\/span>\n<span data-line=\"\"><span style=\"color:#EEFFFF\">        McpUiSizeChangeNotificationSchema<\/span><span style=\"color:#89DDFF\">,<\/span><\/span>\n<span data-line=\"\"><span style=\"color:#C792EA\">        async<\/span><span style=\"color:#89DDFF\"> (<\/span><span style=\"color:#EEFFFF;font-style:italic\">notification<\/span><span style=\"color:#89DDFF\">)<\/span><span style=\"color:#C792EA\"> =&gt;<\/span><span style=\"color:#89DDFF\"> {<\/span><\/span>\n<span data-line=\"\"><span style=\"color:#EEFFFF\">          document<\/span><span style=\"color:#89DDFF\">.<\/span><span style=\"color:#EEFFFF\">body<\/span><span style=\"color:#89DDFF\">.<\/span><span style=\"color:#EEFFFF\">style<\/span><span style=\"color:#89DDFF\">.<\/span><span style=\"color:#EEFFFF\">width<\/span><span style=\"color:#89DDFF\"> =<\/span><span style=\"color:#89DDFF\"> `${<\/span><span style=\"color:#EEFFFF\">notification<\/span><span style=\"color:#89DDFF\">.<\/span><span style=\"color:#EEFFFF\">params<\/span><span style=\"color:#89DDFF\">.<\/span><span style=\"color:#EEFFFF\">width<\/span><span style=\"color:#89DDFF\">}<\/span><span style=\"color:#C3E88D\">px<\/span><span style=\"color:#89DDFF\">`<\/span><span style=\"color:#89DDFF\">;<\/span><\/span>\n<span data-line=\"\"><span style=\"color:#EEFFFF\">          document<\/span><span style=\"color:#89DDFF\">.<\/span><span style=\"color:#EEFFFF\">body<\/span><span style=\"color:#89DDFF\">.<\/span><span style=\"color:#EEFFFF\">style<\/span><span style=\"color:#89DDFF\">.<\/span><span style=\"color:#EEFFFF\">height<\/span><span style=\"color:#89DDFF\"> =<\/span><span style=\"color:#89DDFF\"> `${<\/span><span style=\"color:#EEFFFF\">notification<\/span><span style=\"color:#89DDFF\">.<\/span><span style=\"color:#EEFFFF\">params<\/span><span style=\"color:#89DDFF\">.<\/span><span style=\"color:#EEFFFF\">height<\/span><span style=\"color:#89DDFF\">}<\/span><span style=\"color:#C3E88D\">px<\/span><span style=\"color:#89DDFF\">`<\/span><span style=\"color:#89DDFF\">;<\/span><\/span>\n<span data-line=\"\"><span style=\"color:#89DDFF\">        }<\/span><\/span>\n<span data-line=\"\"><span style=\"color:#F07178\">      )<\/span><span style=\"color:#89DDFF\">;<\/span><\/span>\n<span data-line=\"\"><span style=\"color:#89DDFF\">    },<\/span><\/span>\n<span data-line=\"\"><span style=\"color:#89DDFF\">  }<\/span><span style=\"color:#F07178\">)<\/span><span style=\"color:#89DDFF\">;<\/span><\/span>\n<span data-line=\"\"> <\/span>\n<span data-line=\"\"><span style=\"color:#89DDFF;font-style:italic\">  if<\/span><span style=\"color:#F07178\"> (<\/span><span style=\"color:#EEFFFF\">error<\/span><span style=\"color:#F07178\">) <\/span><span style=\"color:#89DDFF\">{<\/span><\/span>\n<span data-line=\"\"><span style=\"color:#89DDFF;font-style:italic\">    return<\/span><span style=\"color:#89DDFF\"> <span style=\"color:#F07178\">div<\/span><span style=\"color:#89DDFF\">&gt;<\/span><span style=\"color:#EEFFFF\">Error: <\/span><span style=\"color:#89DDFF\">{<\/span><span style=\"color:#EEFFFF\">error<\/span><span style=\"color:#89DDFF\">.<\/span><span style=\"color:#EEFFFF\">message<\/span><span style=\"color:#89DDFF\">}<\/span><span style=\"color:#F07178\">div<\/span><span style=\"color:#89DDFF\">&gt;;<\/span><\/span>\n<span data-line=\"\"><span style=\"color:#89DDFF\">  }<\/span><\/span>\n<span data-line=\"\"> <\/span>\n<span data-line=\"\"><span style=\"color:#89DDFF;font-style:italic\">  if<\/span><span style=\"color:#F07178\"> (<\/span><span style=\"color:#89DDFF\">!<\/span><span style=\"color:#EEFFFF\">isConnected<\/span><span style=\"color:#F07178\">) <\/span><span style=\"color:#89DDFF\">{<\/span><\/span>\n<span data-line=\"\"><span style=\"color:#89DDFF;font-style:italic\">    return<\/span><span style=\"color:#89DDFF\"> <span style=\"color:#F07178\">div<\/span><span style=\"color:#89DDFF\">&gt;<\/span><span style=\"color:#EEFFFF\">Connecting to host application...<\/span><span style=\"color:#89DDFF\"\/><span style=\"color:#F07178\">div<\/span><span style=\"color:#89DDFF\">&gt;;<\/span><\/span>\n<span data-line=\"\"><span style=\"color:#89DDFF\">  }<\/span><\/span>\n<span data-line=\"\"> <\/span>\n<span data-line=\"\"><span style=\"color:#89DDFF;font-style:italic\">  return<\/span><span style=\"color:#F07178\"> (<\/span><\/span>\n<span data-line=\"\"><span style=\"color:#89DDFF\">    <span style=\"color:#F07178\">div<\/span><span style=\"color:#89DDFF\">&gt;<\/span><\/span>\n<span data-line=\"\"><span style=\"color:#89DDFF\">      <span style=\"color:#F07178\">h1<\/span><span style=\"color:#89DDFF\">&gt;<\/span><span style=\"color:#EEFFFF\">UI React App<\/span><span style=\"color:#89DDFF\"\/><span style=\"color:#F07178\">h1<\/span><span style=\"color:#89DDFF\">&gt;<\/span><\/span>\n<span data-line=\"\"> <\/span>\n<span data-line=\"\"><span style=\"color:#89DDFF\">      {<\/span><span style=\"color:#EEFFFF\">toolResults<\/span><span style=\"color:#89DDFF\">.<\/span><span style=\"color:#82AAFF\">map<\/span><span style=\"color:#EEFFFF\">(<\/span><span style=\"color:#89DDFF\">(<\/span><span style=\"color:#EEFFFF;font-style:italic\">result<\/span><span style=\"color:#89DDFF\">,<\/span><span style=\"color:#EEFFFF;font-style:italic\"> index<\/span><span style=\"color:#89DDFF\">)<\/span><span style=\"color:#C792EA\"> =&gt;<\/span><span style=\"color:#EEFFFF\"> (<\/span><\/span>\n<span data-line=\"\"><span style=\"color:#89DDFF\">        <span style=\"color:#F07178\">div<\/span><\/span>\n<span data-line=\"\"><span style=\"color:#C792EA\">          key<\/span><span style=\"color:#89DDFF\">={<\/span><span style=\"color:#EEFFFF\">index<\/span><span style=\"color:#89DDFF\">}<\/span><\/span>\n<span data-line=\"\"><span style=\"color:#C792EA\">          style<\/span><span style=\"color:#89DDFF\">={{<\/span><span style=\"color:#F07178\"> border<\/span><span style=\"color:#89DDFF\">:<\/span><span style=\"color:#89DDFF\"> \"<\/span><span style=\"color:#C3E88D\">1px solid black<\/span><span style=\"color:#89DDFF\">\"<\/span><span style=\"color:#89DDFF\">,<\/span><span style=\"color:#F07178\"> margin<\/span><span style=\"color:#89DDFF\">:<\/span><span style=\"color:#89DDFF\"> \"<\/span><span style=\"color:#C3E88D\">10px<\/span><span style=\"color:#89DDFF\">\"<\/span><span style=\"color:#89DDFF\">,<\/span><span style=\"color:#F07178\"> padding<\/span><span style=\"color:#89DDFF\">:<\/span><span style=\"color:#89DDFF\"> \"<\/span><span style=\"color:#C3E88D\">10px<\/span><span style=\"color:#89DDFF\">\"<\/span><span style=\"color:#89DDFF\"> }}<\/span><\/span>\n<span data-line=\"\"><span style=\"color:#89DDFF\">        &gt;<\/span><\/span>\n<span data-line=\"\"><span style=\"color:#89DDFF\">          <span style=\"color:#F07178\">h2<\/span><span style=\"color:#89DDFF\">&gt;<\/span><span style=\"color:#EEFFFF\">Tool Result <\/span><span style=\"color:#89DDFF\">{<\/span><span style=\"color:#EEFFFF\">index <\/span><span style=\"color:#89DDFF\">+<\/span><span style=\"color:#F78C6C\"> 1<\/span><span style=\"color:#89DDFF\">}<\/span><span style=\"color:#F07178\">h2<\/span><span style=\"color:#89DDFF\">&gt;<\/span><\/span>\n<span data-line=\"\"><span style=\"color:#89DDFF\">          {<\/span><span style=\"color:#EEFFFF\">result<\/span><span style=\"color:#89DDFF\">.<\/span><span style=\"color:#EEFFFF\">structuredContent <\/span><span style=\"color:#89DDFF\">?<\/span><span style=\"color:#EEFFFF\"> (<\/span><\/span>\n<span data-line=\"\"><span style=\"color:#89DDFF\">            <span style=\"color:#F07178\">pre<\/span><span style=\"color:#89DDFF\">&gt;{<\/span><span style=\"color:#EEFFFF\">JSON<\/span><span style=\"color:#89DDFF\">.<\/span><span style=\"color:#82AAFF\">stringify<\/span><span style=\"color:#EEFFFF\">(result<\/span><span style=\"color:#89DDFF\">.<\/span><span style=\"color:#EEFFFF\">structuredContent<\/span><span style=\"color:#89DDFF\">,<\/span><span style=\"color:#89DDFF\"> null,<\/span><span style=\"color:#F78C6C\"> 2<\/span><span style=\"color:#EEFFFF\">)<\/span><span style=\"color:#89DDFF\">}<\/span><span style=\"color:#F07178\">pre<\/span><span style=\"color:#89DDFF\">&gt;<\/span><\/span>\n<span data-line=\"\"><span style=\"color:#EEFFFF\">          ) <\/span><span style=\"color:#89DDFF\">:<\/span><span style=\"color:#EEFFFF\"> (<\/span><\/span>\n<span data-line=\"\"><span style=\"color:#89DDFF\">            <span style=\"color:#F07178\">p<\/span><span style=\"color:#89DDFF\">&gt;<\/span><span style=\"color:#EEFFFF\">No structured content<\/span><span style=\"color:#89DDFF\"\/><span style=\"color:#F07178\">p<\/span><span style=\"color:#89DDFF\">&gt;<\/span><\/span>\n<span data-line=\"\"><span style=\"color:#EEFFFF\">          )<\/span><span style=\"color:#89DDFF\">}<\/span><\/span>\n<span data-line=\"\"><span style=\"color:#89DDFF\">        <\/span><span style=\"color:#F07178\">div<\/span><span style=\"color:#89DDFF\">&gt;<\/span><\/span>\n<span data-line=\"\"><span style=\"color:#EEFFFF\">      ))<\/span><span style=\"color:#89DDFF\">}<\/span><\/span>\n<span data-line=\"\"><span style=\"color:#89DDFF\">    <\/span><span style=\"color:#F07178\">div<\/span><span style=\"color:#89DDFF\">&gt;<\/span><\/span>\n<span data-line=\"\"><span style=\"color:#F07178\">  )<\/span><span style=\"color:#89DDFF\">;<\/span><\/span>\n<span data-line=\"\"><span style=\"color:#89DDFF\">}<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/code><\/pre>\n<\/figure>\n<p>\u3053\u3053\u3067\u306f <code>onAppCreated<\/code> \u30b3\u30fc\u30eb\u30d0\u30c3\u30af\u5185\u3067 <code>ui\/tool-result<\/code> \u3068 <code>ui\/size-change<\/code> \u901a\u77e5\u306e\u30cf\u30f3\u30c9\u30e9\u3092\u767b\u9332\u3057\u3066\u3044\u307e\u3059\u3002<code>ui\/tool-result<\/code> \u901a\u77e5\u304c\u53d7\u4fe1\u3055\u308c\u308b\u3068\u3001\u30c4\u30fc\u30eb\u306e\u5b9f\u884c\u7d50\u679c\u304c\u72b6\u614b\u306b\u8ffd\u52a0\u3055\u308c\u3001<code>ui\/size-change<\/code> \u901a\u77e5\u304c\u53d7\u4fe1\u3055\u308c\u308b\u3068\u3001UI \u306e\u8868\u793a\u30b5\u30a4\u30ba\u304c\u66f4\u65b0\u3055\u308c\u307e\u3059\u3002\u305d\u306e\u307b\u304b\u3001UI \u306e\u63a5\u7d9a\u72b6\u614b\u3084\u30a8\u30e9\u30fc\u60c5\u5831\u3082\u53d6\u5f97\u3067\u304d\u307e\u3059\u3002<\/p>\n<p>MCP \u30db\u30b9\u30c8\u3068\u3084\u308a\u53d6\u308a\u3059\u308b\u5834\u5408\u306b\u306f <code>useApp<\/code> \u30d5\u30c3\u30af\u304b\u3089\u8fd4\u3055\u308c\u308b <code>app<\/code> \u30aa\u30d6\u30b8\u30a7\u30af\u30c8\u3092\u4f7f\u7528\u3059\u308b\u3053\u3068\u306b\u306a\u308a\u307e\u3059\u3002<code>app<\/code> \u30aa\u30d6\u30b8\u30a7\u30af\u30c8\u3092\u4ecb\u3057\u3066\u3001MCP \u30c4\u30fc\u30eb\u306e\u547c\u3073\u51fa\u3057\u3084\u5916\u90e8\u30ea\u30f3\u30af\u306e\u30aa\u30fc\u30d7\u30f3\u306e\u8981\u6c42\u306a\u3069\u304c\u53ef\u80fd\u3067\u3059\u3002<\/p>\n<p>src\/ui-react.tsx<\/p>\n<figure data-rehype-pretty-code-figure=\"\">\n<pre style=\"background-color:#212121;color:#EEFFFF\" tabindex=\"0\" data-language=\"tsx\" data-theme=\"material-theme-darker\"><code data-language=\"tsx\" data-theme=\"material-theme-darker\" style=\"display: grid;\"><span data-line=\"\"><span style=\"color:#89DDFF;font-style:italic\">export<\/span><span style=\"color:#C792EA\"> function<\/span><span style=\"color:#82AAFF\"> UiReact<\/span><span style=\"color:#89DDFF\">()<\/span><span style=\"color:#89DDFF\"> {<\/span><\/span>\n<span data-line=\"\"><span style=\"color:#C792EA\">  const<\/span><span style=\"color:#89DDFF\"> [<\/span><span style=\"color:#EEFFFF\">messages<\/span><span style=\"color:#89DDFF\">,<\/span><span style=\"color:#EEFFFF\"> setMessages<\/span><span style=\"color:#89DDFF\">]<\/span><span style=\"color:#89DDFF\"> =<\/span><span style=\"color:#82AAFF\"> useState<\/span><span style=\"color:#89DDFF\"><span style=\"color:#FFCB6B\">string<\/span><span style=\"color:#F07178\">[]<\/span><span style=\"color:#89DDFF\">&gt;<\/span><span style=\"color:#F07178\">([])<\/span><span style=\"color:#89DDFF\">;<\/span><\/span>\n<span data-line=\"\"><span style=\"color:#C792EA\">  const<\/span><span style=\"color:#89DDFF\"> {<\/span><span style=\"color:#EEFFFF\"> app<\/span><span style=\"color:#89DDFF\">,<\/span><span style=\"color:#EEFFFF\"> isConnected<\/span><span style=\"color:#89DDFF\">,<\/span><span style=\"color:#EEFFFF\"> error<\/span><span style=\"color:#89DDFF\"> }<\/span><span style=\"color:#89DDFF\"> =<\/span><span style=\"color:#82AAFF\"> useApp<\/span><span style=\"color:#F07178\">(<\/span><span style=\"color:#89DDFF\">{<\/span><span style=\"color:#545454;font-style:italic\"> \/* ... *\/<\/span><span style=\"color:#89DDFF\"> }<\/span><span style=\"color:#F07178\">)<\/span><span style=\"color:#89DDFF\">;<\/span><\/span>\n<span data-line=\"\"> <\/span>\n<span data-line=\"\"><span style=\"color:#C792EA\">  const<\/span><span style=\"color:#EEFFFF\"> handleGetWeatherTool<\/span><span style=\"color:#89DDFF\"> =<\/span><span style=\"color:#82AAFF\"> useCallback<\/span><span style=\"color:#F07178\">(<\/span><span style=\"color:#C792EA\">async<\/span><span style=\"color:#89DDFF\"> ()<\/span><span style=\"color:#C792EA\"> =&gt;<\/span><span style=\"color:#89DDFF\"> {<\/span><\/span>\n<span data-line=\"\"><span style=\"color:#89DDFF;font-style:italic\">    if<\/span><span style=\"color:#F07178\"> (<\/span><span style=\"color:#89DDFF\">!<\/span><span style=\"color:#EEFFFF\">app<\/span><span style=\"color:#F07178\">) <\/span><span style=\"color:#89DDFF;font-style:italic\">return<\/span><span style=\"color:#89DDFF\">;<\/span><\/span>\n<span data-line=\"\"><span style=\"color:#89DDFF;font-style:italic\">    try<\/span><span style=\"color:#89DDFF\"> {<\/span><\/span>\n<span data-line=\"\"><span style=\"color:#C792EA\">      const<\/span><span style=\"color:#EEFFFF\"> result<\/span><span style=\"color:#89DDFF\"> =<\/span><span style=\"color:#89DDFF;font-style:italic\"> await<\/span><span style=\"color:#EEFFFF\"> app<\/span><span style=\"color:#89DDFF\">.<\/span><span style=\"color:#82AAFF\">callServerTool<\/span><span style=\"color:#F07178\">(<\/span><span style=\"color:#89DDFF\">{<\/span><\/span>\n<span data-line=\"\"><span style=\"color:#F07178\">        name<\/span><span style=\"color:#89DDFF\">:<\/span><span style=\"color:#89DDFF\"> \"<\/span><span style=\"color:#C3E88D\">get-weather<\/span><span style=\"color:#89DDFF\">\"<\/span><span style=\"color:#89DDFF\">,<\/span><\/span>\n<span data-line=\"\"><span style=\"color:#F07178\">        arguments<\/span><span style=\"color:#89DDFF\">:<\/span><span style=\"color:#89DDFF\"> {<\/span><span style=\"color:#F07178\"> location<\/span><span style=\"color:#89DDFF\">:<\/span><span style=\"color:#89DDFF\"> \"<\/span><span style=\"color:#C3E88D\">New York<\/span><span style=\"color:#89DDFF\">\"<\/span><span style=\"color:#89DDFF\"> },<\/span><\/span>\n<span data-line=\"\"><span style=\"color:#89DDFF\">      }<\/span><span style=\"color:#F07178\">)<\/span><span style=\"color:#89DDFF\">;<\/span><\/span>\n<span data-line=\"\"><span style=\"color:#82AAFF\">      setMessages<\/span><span style=\"color:#F07178\">(<\/span><span style=\"color:#89DDFF\">(<\/span><span style=\"color:#EEFFFF;font-style:italic\">prev<\/span><span style=\"color:#89DDFF\">)<\/span><span style=\"color:#C792EA\"> =&gt;<\/span><span style=\"color:#F07178\"> [<\/span><\/span>\n<span data-line=\"\"><span style=\"color:#89DDFF\">        ...<\/span><span style=\"color:#EEFFFF\">prev<\/span><span style=\"color:#89DDFF\">,<\/span><\/span>\n<span data-line=\"\"><span style=\"color:#89DDFF\">        `<\/span><span style=\"color:#C3E88D\">Weather tool result: <\/span><span style=\"color:#89DDFF\">${<\/span><span style=\"color:#EEFFFF\">JSON<\/span><span style=\"color:#89DDFF\">.<\/span><span style=\"color:#82AAFF\">stringify<\/span><span style=\"color:#EEFFFF\">(result)<\/span><span style=\"color:#89DDFF\">}`<\/span><span style=\"color:#89DDFF\">,<\/span><\/span>\n<span data-line=\"\"><span style=\"color:#F07178\">      ])<\/span><span style=\"color:#89DDFF\">;<\/span><\/span>\n<span data-line=\"\"><span style=\"color:#89DDFF\">    }<\/span><span style=\"color:#89DDFF;font-style:italic\"> catch<\/span><span style=\"color:#F07178\"> (<\/span><span style=\"color:#EEFFFF\">error<\/span><span style=\"color:#F07178\">) <\/span><span style=\"color:#89DDFF\">{<\/span><\/span>\n<span data-line=\"\"><span style=\"color:#82AAFF\">      setMessages<\/span><span style=\"color:#F07178\">(<\/span><span style=\"color:#89DDFF\">(<\/span><span style=\"color:#EEFFFF;font-style:italic\">prev<\/span><span style=\"color:#89DDFF\">)<\/span><span style=\"color:#C792EA\"> =&gt;<\/span><span style=\"color:#F07178\"> [<\/span><span style=\"color:#89DDFF\">...<\/span><span style=\"color:#EEFFFF\">prev<\/span><span style=\"color:#89DDFF\">,<\/span><span style=\"color:#89DDFF\"> `<\/span><span style=\"color:#C3E88D\">Error calling weather tool: <\/span><span style=\"color:#89DDFF\">${<\/span><span style=\"color:#EEFFFF\">error<\/span><span style=\"color:#89DDFF\">}`<\/span><span style=\"color:#F07178\">])<\/span><span style=\"color:#89DDFF\">;<\/span><\/span>\n<span data-line=\"\"><span style=\"color:#89DDFF\">    }<\/span><\/span>\n<span data-line=\"\"><span style=\"color:#89DDFF\">  },<\/span><span style=\"color:#F07178\"> [<\/span><span style=\"color:#EEFFFF\">app<\/span><span style=\"color:#F07178\">])<\/span><span style=\"color:#89DDFF\">;<\/span><\/span>\n<span data-line=\"\"> <\/span>\n<span data-line=\"\"><span style=\"color:#C792EA\">  const<\/span><span style=\"color:#EEFFFF\"> handleOpenLink<\/span><span style=\"color:#89DDFF\"> =<\/span><span style=\"color:#82AAFF\"> useCallback<\/span><span style=\"color:#F07178\">(<\/span><span style=\"color:#C792EA\">async<\/span><span style=\"color:#89DDFF\"> ()<\/span><span style=\"color:#C792EA\"> =&gt;<\/span><span style=\"color:#89DDFF\"> {<\/span><\/span>\n<span data-line=\"\"><span style=\"color:#89DDFF;font-style:italic\">    if<\/span><span style=\"color:#F07178\"> (<\/span><span style=\"color:#89DDFF\">!<\/span><span style=\"color:#EEFFFF\">app<\/span><span style=\"color:#F07178\">) <\/span><span style=\"color:#89DDFF;font-style:italic\">return<\/span><span style=\"color:#89DDFF\">;<\/span><\/span>\n<span data-line=\"\"><span style=\"color:#89DDFF;font-style:italic\">    try<\/span><span style=\"color:#89DDFF\"> {<\/span><\/span>\n<span data-line=\"\"><span style=\"color:#C792EA\">      const<\/span><span style=\"color:#EEFFFF\"> result<\/span><span style=\"color:#89DDFF\"> =<\/span><span style=\"color:#89DDFF;font-style:italic\"> await<\/span><span style=\"color:#EEFFFF\"> app<\/span><span style=\"color:#89DDFF\">.<\/span><span style=\"color:#82AAFF\">sendOpenLink<\/span><span style=\"color:#F07178\">(<\/span><span style=\"color:#89DDFF\">{<\/span><\/span>\n<span data-line=\"\"><span style=\"color:#F07178\">        url<\/span><span style=\"color:#89DDFF\">:<\/span><span style=\"color:#89DDFF\"> \"<\/span><span style=\"color:#C3E88D\">https:\/\/www.example.com<\/span><span style=\"color:#89DDFF\">\"<\/span><span style=\"color:#89DDFF\">,<\/span><\/span>\n<span data-line=\"\"><span style=\"color:#89DDFF\">      }<\/span><span style=\"color:#F07178\">)<\/span><span style=\"color:#89DDFF\">;<\/span><\/span>\n<span data-line=\"\"><span style=\"color:#82AAFF\">      setMessages<\/span><span style=\"color:#F07178\">(<\/span><span style=\"color:#89DDFF\">(<\/span><span style=\"color:#EEFFFF;font-style:italic\">prev<\/span><span style=\"color:#89DDFF\">)<\/span><span style=\"color:#C792EA\"> =&gt;<\/span><span style=\"color:#F07178\"> [<\/span><\/span>\n<span data-line=\"\"><span style=\"color:#89DDFF\">        ...<\/span><span style=\"color:#EEFFFF\">prev<\/span><span style=\"color:#89DDFF\">,<\/span><\/span>\n<span data-line=\"\"><span style=\"color:#89DDFF\">        `<\/span><span style=\"color:#C3E88D\">Open link result: <\/span><span style=\"color:#89DDFF\">${<\/span><span style=\"color:#EEFFFF\">JSON<\/span><span style=\"color:#89DDFF\">.<\/span><span style=\"color:#82AAFF\">stringify<\/span><span style=\"color:#EEFFFF\">(result)<\/span><span style=\"color:#89DDFF\">}`<\/span><span style=\"color:#89DDFF\">,<\/span><\/span>\n<span data-line=\"\"><span style=\"color:#F07178\">      ])<\/span><span style=\"color:#89DDFF\">;<\/span><\/span>\n<span data-line=\"\"><span style=\"color:#89DDFF\">    }<\/span><span style=\"color:#89DDFF;font-style:italic\"> catch<\/span><span style=\"color:#F07178\"> (<\/span><span style=\"color:#EEFFFF\">error<\/span><span style=\"color:#F07178\">) <\/span><span style=\"color:#89DDFF\">{<\/span><\/span>\n<span data-line=\"\"><span style=\"color:#82AAFF\">      setMessages<\/span><span style=\"color:#F07178\">(<\/span><span style=\"color:#89DDFF\">(<\/span><span style=\"color:#EEFFFF;font-style:italic\">prev<\/span><span style=\"color:#89DDFF\">)<\/span><span style=\"color:#C792EA\"> =&gt;<\/span><span style=\"color:#F07178\"> [<\/span><span style=\"color:#89DDFF\">...<\/span><span style=\"color:#EEFFFF\">prev<\/span><span style=\"color:#89DDFF\">,<\/span><span style=\"color:#89DDFF\"> `<\/span><span style=\"color:#C3E88D\">Error opening link: <\/span><span style=\"color:#89DDFF\">${<\/span><span style=\"color:#EEFFFF\">error<\/span><span style=\"color:#89DDFF\">}`<\/span><span style=\"color:#F07178\">])<\/span><span style=\"color:#89DDFF\">;<\/span><\/span>\n<span data-line=\"\"><span style=\"color:#89DDFF\">    }<\/span><\/span>\n<span data-line=\"\"><span style=\"color:#89DDFF\">  },<\/span><span style=\"color:#F07178\"> [<\/span><span style=\"color:#EEFFFF\">app<\/span><span style=\"color:#F07178\">])<\/span><span style=\"color:#89DDFF\">;<\/span><\/span>\n<span data-line=\"\"> <\/span>\n<span data-line=\"\"><span style=\"color:#89DDFF;font-style:italic\">  if<\/span><span style=\"color:#F07178\"> (<\/span><span style=\"color:#EEFFFF\">error<\/span><span style=\"color:#F07178\">) <\/span><span style=\"color:#89DDFF\">{<\/span><\/span>\n<span data-line=\"\"><span style=\"color:#89DDFF;font-style:italic\">    return<\/span><span style=\"color:#89DDFF\"> <span style=\"color:#F07178\">div<\/span><span style=\"color:#89DDFF\">&gt;<\/span><span style=\"color:#EEFFFF\">Error: <\/span><span style=\"color:#89DDFF\">{<\/span><span style=\"color:#EEFFFF\">error<\/span><span style=\"color:#89DDFF\">.<\/span><span style=\"color:#EEFFFF\">message<\/span><span style=\"color:#89DDFF\">}<\/span><span style=\"color:#F07178\">div<\/span><span style=\"color:#89DDFF\">&gt;;<\/span><\/span>\n<span data-line=\"\"><span style=\"color:#89DDFF\">  }<\/span><\/span>\n<span data-line=\"\"> <\/span>\n<span data-line=\"\"><span style=\"color:#545454;font-style:italic\">  \/\/ ...\u7701\u7565...<\/span><\/span>\n<span data-line=\"\"> <\/span>\n<span data-line=\"\"><span style=\"color:#89DDFF;font-style:italic\">  return<\/span><span style=\"color:#F07178\"> (<\/span><\/span>\n<span data-line=\"\"><span style=\"color:#89DDFF\">    <span style=\"color:#F07178\">div<\/span><span style=\"color:#89DDFF\">&gt;<\/span><\/span>\n<span data-line=\"\"><span style=\"color:#89DDFF\">      <span style=\"color:#F07178\">h1<\/span><span style=\"color:#89DDFF\">&gt;<\/span><span style=\"color:#EEFFFF\">UI React App<\/span><span style=\"color:#89DDFF\"\/><span style=\"color:#F07178\">h1<\/span><span style=\"color:#89DDFF\">&gt;<\/span><\/span>\n<span data-line=\"\"><span style=\"color:#89DDFF\">      <span style=\"color:#F07178\">button<\/span><span style=\"color:#C792EA\"> onClick<\/span><span style=\"color:#89DDFF\">={<\/span><span style=\"color:#EEFFFF\">handleGetWeatherTool<\/span><span style=\"color:#89DDFF\">}&gt;<\/span><span style=\"color:#EEFFFF\">Get Weather<\/span><span style=\"color:#89DDFF\"\/><span style=\"color:#F07178\">button<\/span><span style=\"color:#89DDFF\">&gt;<\/span><\/span>\n<span data-line=\"\"><span style=\"color:#89DDFF\">      <span style=\"color:#F07178\">button<\/span><span style=\"color:#C792EA\"> onClick<\/span><span style=\"color:#89DDFF\">={<\/span><span style=\"color:#EEFFFF\">handleOpenLink<\/span><span style=\"color:#89DDFF\">}&gt;<\/span><span style=\"color:#EEFFFF\">Open Example.com<\/span><span style=\"color:#89DDFF\"\/><span style=\"color:#F07178\">button<\/span><span style=\"color:#89DDFF\">&gt;<\/span><\/span>\n<span data-line=\"\"> <\/span>\n<span data-line=\"\"><span style=\"color:#89DDFF\">      <span style=\"color:#F07178\">div<\/span><span style=\"color:#89DDFF\">&gt;<\/span><\/span>\n<span data-line=\"\"><span style=\"color:#89DDFF\">        <span style=\"color:#F07178\">h2<\/span><span style=\"color:#89DDFF\">&gt;<\/span><span style=\"color:#EEFFFF\">Messages<\/span><span style=\"color:#89DDFF\"\/><span style=\"color:#F07178\">h2<\/span><span style=\"color:#89DDFF\">&gt;<\/span><\/span>\n<span data-line=\"\"><span style=\"color:#89DDFF\">        {<\/span><span style=\"color:#EEFFFF\">messages<\/span><span style=\"color:#89DDFF\">.<\/span><span style=\"color:#82AAFF\">map<\/span><span style=\"color:#EEFFFF\">(<\/span><span style=\"color:#89DDFF\">(<\/span><span style=\"color:#EEFFFF;font-style:italic\">msg<\/span><span style=\"color:#89DDFF\">,<\/span><span style=\"color:#EEFFFF;font-style:italic\"> index<\/span><span style=\"color:#89DDFF\">)<\/span><span style=\"color:#C792EA\"> =&gt;<\/span><span style=\"color:#EEFFFF\"> (<\/span><\/span>\n<span data-line=\"\"><span style=\"color:#89DDFF\">          <span style=\"color:#F07178\">p<\/span><span style=\"color:#C792EA\"> key<\/span><span style=\"color:#89DDFF\">={<\/span><span style=\"color:#EEFFFF\">index<\/span><span style=\"color:#89DDFF\">}&gt;{<\/span><span style=\"color:#EEFFFF\">msg<\/span><span style=\"color:#89DDFF\">}<\/span><span style=\"color:#F07178\">p<\/span><span style=\"color:#89DDFF\">&gt;<\/span><\/span>\n<span data-line=\"\"><span style=\"color:#EEFFFF\">        ))<\/span><span style=\"color:#89DDFF\">}<\/span><\/span>\n<span data-line=\"\"><span style=\"color:#89DDFF\">      <\/span><span style=\"color:#F07178\">div<\/span><span style=\"color:#89DDFF\">&gt;<\/span><\/span>\n<span data-line=\"\"><span style=\"color:#89DDFF\">    <\/span><span style=\"color:#F07178\">div<\/span><span style=\"color:#89DDFF\">&gt;<\/span><\/span>\n<span data-line=\"\"> <\/span>\n<span data-line=\"\"><span style=\"color:#89DDFF\">    {<\/span><span style=\"color:#545454;font-style:italic\"> \/* ...\u7701\u7565... *\/<\/span><span style=\"color:#89DDFF\"> }<\/span><\/span>\n<span data-line=\"\"><span style=\"color:#F07178\">  )<\/span><span style=\"color:#89DDFF\">;<\/span><\/span>\n<span data-line=\"\"><span style=\"color:#89DDFF\">}<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/code><\/pre>\n<\/figure>\n<p>\u6700\u5f8c\u306b React \u306e <code>createRoot<\/code> \u3092\u4f7f\u7528\u3057\u3066 <code>UiReact<\/code> \u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u3092\u30ec\u30f3\u30c0\u30ea\u30f3\u30b0\u3057\u307e\u3059\u3002<\/p>\n<p>src\/ui-react.tsx<\/p>\n<figure data-rehype-pretty-code-figure=\"\">\n<pre style=\"background-color:#212121;color:#EEFFFF\" tabindex=\"0\" data-language=\"tsx\" data-theme=\"material-theme-darker\"><code data-language=\"tsx\" data-theme=\"material-theme-darker\" style=\"display: grid;\"><span data-line=\"\"><span style=\"color:#89DDFF;font-style:italic\">import<\/span><span style=\"color:#89DDFF\"> {<\/span><span style=\"color:#EEFFFF\"> createRoot<\/span><span style=\"color:#89DDFF\"> }<\/span><span style=\"color:#89DDFF;font-style:italic\"> from<\/span><span style=\"color:#89DDFF\"> \"<\/span><span style=\"color:#C3E88D\">react-dom\/client<\/span><span style=\"color:#89DDFF\">\"<\/span><span style=\"color:#89DDFF\">;<\/span><\/span>\n<span data-line=\"\"> <\/span>\n<span data-line=\"\"><span style=\"color:#EEFFFF\">window<\/span><span style=\"color:#89DDFF\">.<\/span><span style=\"color:#82AAFF\">addEventListener<\/span><span style=\"color:#EEFFFF\">(<\/span><span style=\"color:#89DDFF\">\"<\/span><span style=\"color:#C3E88D\">load<\/span><span style=\"color:#89DDFF\">\"<\/span><span style=\"color:#89DDFF\">,<\/span><span style=\"color:#89DDFF\"> ()<\/span><span style=\"color:#C792EA\"> =&gt;<\/span><span style=\"color:#89DDFF\"> {<\/span><\/span>\n<span data-line=\"\"><span style=\"color:#C792EA\">  const<\/span><span style=\"color:#EEFFFF\"> root<\/span><span style=\"color:#89DDFF\"> =<\/span><span style=\"color:#EEFFFF\"> document<\/span><span style=\"color:#89DDFF\">.<\/span><span style=\"color:#82AAFF\">getElementById<\/span><span style=\"color:#F07178\">(<\/span><span style=\"color:#89DDFF\">\"<\/span><span style=\"color:#C3E88D\">root<\/span><span style=\"color:#89DDFF\">\"<\/span><span style=\"color:#F07178\">)<\/span><span style=\"color:#89DDFF\">;<\/span><\/span>\n<span data-line=\"\"><span style=\"color:#89DDFF;font-style:italic\">  if<\/span><span style=\"color:#F07178\"> (<\/span><span style=\"color:#89DDFF\">!<\/span><span style=\"color:#EEFFFF\">root<\/span><span style=\"color:#F07178\">) <\/span><span style=\"color:#89DDFF\">{<\/span><\/span>\n<span data-line=\"\"><span style=\"color:#89DDFF;font-style:italic\">    throw<\/span><span style=\"color:#89DDFF\"> new<\/span><span style=\"color:#82AAFF\"> Error<\/span><span style=\"color:#F07178\">(<\/span><span style=\"color:#89DDFF\">\"<\/span><span style=\"color:#C3E88D\">Root element not found<\/span><span style=\"color:#89DDFF\">\"<\/span><span style=\"color:#F07178\">)<\/span><span style=\"color:#89DDFF\">;<\/span><\/span>\n<span data-line=\"\"><span style=\"color:#89DDFF\">  }<\/span><\/span>\n<span data-line=\"\"> <\/span>\n<span data-line=\"\"><span style=\"color:#82AAFF\">  createRoot<\/span><span style=\"color:#F07178\">(<\/span><span style=\"color:#EEFFFF\">root<\/span><span style=\"color:#F07178\">)<\/span><span style=\"color:#89DDFF\">.<\/span><span style=\"color:#82AAFF\">render<\/span><span style=\"color:#F07178\">(<\/span><span style=\"color:#89DDFF\"><span style=\"color:#FFCB6B\">UiReact<\/span><span style=\"color:#89DDFF\"> \/&gt;<\/span><span style=\"color:#F07178\">)<\/span><span style=\"color:#89DDFF\">;<\/span><\/span>\n<span data-line=\"\"><span style=\"color:#89DDFF\">}<\/span><span style=\"color:#EEFFFF\">)<\/span><span style=\"color:#89DDFF\">;<\/span><\/span><\/span><\/code><\/pre>\n<\/figure>\n<p><code>npm run build<\/code> \u30b3\u30de\u30f3\u30c9\u3092\u5b9f\u884c\u3057\u3066 UI \u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u3092\u30d3\u30eb\u30c9\u3057\u307e\u3059\u3002\u30d3\u30eb\u30c9\u304c\u6210\u529f\u3059\u308b\u3068\u3001<code>dist<\/code> \u30c7\u30a3\u30ec\u30af\u30c8\u30ea\u306b <code>ui-react.html<\/code> \u30d5\u30a1\u30a4\u30eb\u304c\u751f\u6210\u3055\u308c\u307e\u3059\u3002<\/p>\n<figure data-rehype-pretty-code-figure=\"\">\n<pre style=\"background-color:#212121;color:#EEFFFF\" tabindex=\"0\" data-language=\"bash\" data-theme=\"material-theme-darker\"><code data-language=\"bash\" data-theme=\"material-theme-darker\" style=\"display: grid;\"><span data-line=\"\"><span style=\"color:#FFCB6B\">$<\/span><span style=\"color:#C3E88D\"> npm<\/span><span style=\"color:#C3E88D\"> run<\/span><span style=\"color:#C3E88D\"> build<\/span><\/span>\n<span data-line=\"\"> <\/span>\n<span data-line=\"\"><span style=\"color:#89DDFF\">&gt;<\/span><span style=\"color:#EEFFFF\"> <a target=\"_blank\" href=\"https:\/\/azukiazusa.dev\/cdn-cgi\/l\/email-protection\" class=\"__cf_email__\" data-cfemail=\"94f9f7e4b9f5e4e4e7b9f1ecf5f9e4f8f1d4a5baa4baa4\">[email\u00a0protected]<\/a> build<\/span><\/span>\n<span data-line=\"\"><span style=\"color:#89DDFF\">&gt;<\/span><span style=\"color:#EEFFFF\"> rm -rf dist <\/span><span style=\"color:#89DDFF\">&amp;&amp;<\/span><span style=\"color:#EEFFFF\"> VITE_ENTRY<\/span><span style=\"color:#89DDFF\">=<\/span><span style=\"color:#C3E88D\">ui-react<\/span><span style=\"color:#FFCB6B\"> vite<\/span><span style=\"color:#C3E88D\"> build<\/span><\/span>\n<span data-line=\"\"> <\/span>\n<span data-line=\"\"><span style=\"color:#FFCB6B\">vite<\/span><span style=\"color:#C3E88D\"> v7.2.4<\/span><span style=\"color:#C3E88D\"> building<\/span><span style=\"color:#C3E88D\"> client<\/span><span style=\"color:#C3E88D\"> environment<\/span><span style=\"color:#C3E88D\"> for<\/span><span style=\"color:#C3E88D\"> production...<\/span><\/span>\n<span data-line=\"\"><span style=\"color:#FFCB6B\">\u2713<\/span><span style=\"color:#F78C6C\"> 33<\/span><span style=\"color:#C3E88D\"> modules<\/span><span style=\"color:#C3E88D\"> transformed.<\/span><\/span>\n<span data-line=\"\"><span style=\"color:#89DDFF\">[<\/span><span style=\"color:#EEFFFF\">plugin vite:singlefile<\/span><span style=\"color:#89DDFF\">]<\/span><\/span>\n<span data-line=\"\"> <\/span>\n<span data-line=\"\"><span style=\"color:#89DDFF\">[<\/span><span style=\"color:#EEFFFF\">plugin vite:singlefile<\/span><span style=\"color:#89DDFF\">]<\/span><span style=\"color:#EEFFFF\"> Inlining: ui-react-qBT9I1qt.js<\/span><\/span>\n<span data-line=\"\"><span style=\"color:#FFCB6B\">dist\/ui-react.html<\/span><span style=\"color:#F78C6C\">  287.03<\/span><span style=\"color:#C3E88D\"> kB<\/span><span style=\"color:#C3E88D\"> \u2502<\/span><span style=\"color:#C3E88D\"> gzip:<\/span><span style=\"color:#F78C6C\"> 82.72<\/span><span style=\"color:#C3E88D\"> kB<\/span><\/span>\n<span data-line=\"\"><span style=\"color:#FFCB6B\">\u2713<\/span><span style=\"color:#C3E88D\"> built<\/span><span style=\"color:#C3E88D\"> in<\/span><span style=\"color:#C3E88D\"> 496ms<\/span><\/span><\/code><\/pre>\n<\/figure>\n<h3 id=\"mcp-\u30b5\u30fc\u30d0\u30fc\u306e\u5b9f\u88c5\"><a target=\"_blank\" aria-hidden=\"true\" tabindex=\"-1\" href=\"#mcp-\u30b5\u30fc\u30d0\u30fc\u306e\u5b9f\u88c5\"><span class=\"icon icon-link\"\/><\/a>MCP \u30b5\u30fc\u30d0\u30fc\u306e\u5b9f\u88c5<\/h3>\n<p><code>server.ts<\/code> \u30d5\u30a1\u30a4\u30eb\u3092\u4f5c\u6210\u3057\u3001MCP \u30b5\u30fc\u30d0\u30fc\u3092\u5b9f\u88c5\u3057\u307e\u3059\u3002\u57fa\u672c\u7684\u306a\u69cb\u9020\u306f\u5f93\u6765\u306e MCP \u30b5\u30fc\u30d0\u30fc\u306e\u5b9f\u88c5\u3068\u540c\u69d8\u3067\u3059\u304c\u3001UI \u30ea\u30bd\u30fc\u30b9\u306e\u767b\u9332\u3068\u30c4\u30fc\u30eb\u306e\u30e1\u30bf\u30c7\u30fc\u30bf\u306b <code>ui\/resourceUri<\/code> \u30d5\u30a3\u30fc\u30eb\u30c9\u3092\u8ffd\u52a0\u3059\u308b\u70b9\u304c\u7570\u306a\u308a\u307e\u3059\u3002\u521d\u3081\u306b <code>dist<\/code> \u30c7\u30a3\u30ec\u30af\u30c8\u30ea\u304b\u3089 UI \u30ea\u30bd\u30fc\u30b9\u306e\u30b3\u30f3\u30c6\u30f3\u30c4\u3092\u8aad\u307f\u8fbc\u3080 <code>loadHtml<\/code> \u95a2\u6570\u3092\u7528\u610f\u3057\u3066\u304a\u304d\u307e\u3057\u3087\u3046\u3002<\/p>\n<p>server.ts<\/p>\n<figure data-rehype-pretty-code-figure=\"\">\n<pre style=\"background-color:#212121;color:#EEFFFF\" tabindex=\"0\" data-language=\"ts\" data-theme=\"material-theme-darker\"><code data-language=\"ts\" data-theme=\"material-theme-darker\" style=\"display: grid;\"><span data-line=\"\"><span style=\"color:#89DDFF;font-style:italic\">import<\/span><span style=\"color:#EEFFFF\"> path <\/span><span style=\"color:#89DDFF;font-style:italic\">from<\/span><span style=\"color:#89DDFF\"> \"<\/span><span style=\"color:#C3E88D\">node:path<\/span><span style=\"color:#89DDFF\">\"<\/span><span style=\"color:#89DDFF\">;<\/span><\/span>\n<span data-line=\"\"><span style=\"color:#89DDFF;font-style:italic\">import<\/span><span style=\"color:#89DDFF\"> {<\/span><span style=\"color:#EEFFFF\"> fileURLToPath<\/span><span style=\"color:#89DDFF\"> }<\/span><span style=\"color:#89DDFF;font-style:italic\"> from<\/span><span style=\"color:#89DDFF\"> \"<\/span><span style=\"color:#C3E88D\">node:url<\/span><span style=\"color:#89DDFF\">\"<\/span><span style=\"color:#89DDFF\">;<\/span><\/span>\n<span data-line=\"\"><span style=\"color:#89DDFF;font-style:italic\">import<\/span><span style=\"color:#EEFFFF\"> fs <\/span><span style=\"color:#89DDFF;font-style:italic\">from<\/span><span style=\"color:#89DDFF\"> \"<\/span><span style=\"color:#C3E88D\">node:fs\/promises<\/span><span style=\"color:#89DDFF\">\"<\/span><span style=\"color:#89DDFF\">;<\/span><\/span>\n<span data-line=\"\"> <\/span>\n<span data-line=\"\"><span style=\"color:#C792EA\">const<\/span><span style=\"color:#EEFFFF\"> __filename <\/span><span style=\"color:#89DDFF\">=<\/span><span style=\"color:#82AAFF\"> fileURLToPath<\/span><span style=\"color:#EEFFFF\">(<\/span><span style=\"color:#89DDFF;font-style:italic\">import<\/span><span style=\"color:#89DDFF\">.<\/span><span style=\"color:#EEFFFF\">meta<\/span><span style=\"color:#89DDFF\">.<\/span><span style=\"color:#EEFFFF\">url)<\/span><span style=\"color:#89DDFF\">;<\/span><\/span>\n<span data-line=\"\"><span style=\"color:#C792EA\">const<\/span><span style=\"color:#EEFFFF\"> __dirname <\/span><span style=\"color:#89DDFF\">=<\/span><span style=\"color:#EEFFFF\"> path<\/span><span style=\"color:#89DDFF\">.<\/span><span style=\"color:#82AAFF\">dirname<\/span><span style=\"color:#EEFFFF\">(__filename)<\/span><span style=\"color:#89DDFF\">;<\/span><\/span>\n<span data-line=\"\"> <\/span>\n<span data-line=\"\"><span style=\"color:#545454;font-style:italic\">\/\/ Load both UI HTML files from dist\/<\/span><\/span>\n<span data-line=\"\"><span style=\"color:#C792EA\">const<\/span><span style=\"color:#EEFFFF\"> distDir <\/span><span style=\"color:#89DDFF\">=<\/span><span style=\"color:#EEFFFF\"> path<\/span><span style=\"color:#89DDFF\">.<\/span><span style=\"color:#82AAFF\">join<\/span><span style=\"color:#EEFFFF\">(__dirname<\/span><span style=\"color:#89DDFF\">,<\/span><span style=\"color:#89DDFF\"> \"<\/span><span style=\"color:#C3E88D\">dist<\/span><span style=\"color:#89DDFF\">\"<\/span><span style=\"color:#EEFFFF\">)<\/span><span style=\"color:#89DDFF\">;<\/span><\/span>\n<span data-line=\"\"><span style=\"color:#C792EA\">const<\/span><span style=\"color:#EEFFFF\"> loadHtml <\/span><span style=\"color:#89DDFF\">=<\/span><span style=\"color:#C792EA\"> async<\/span><span style=\"color:#89DDFF\"> (<\/span><span style=\"color:#EEFFFF;font-style:italic\">name<\/span><span style=\"color:#89DDFF\">:<\/span><span style=\"color:#FFCB6B\"> string<\/span><span style=\"color:#89DDFF\">)<\/span><span style=\"color:#C792EA\"> =&gt;<\/span><span style=\"color:#89DDFF\"> {<\/span><\/span>\n<span data-line=\"\"><span style=\"color:#C792EA\">  const<\/span><span style=\"color:#EEFFFF\"> htmlPath<\/span><span style=\"color:#89DDFF\"> =<\/span><span style=\"color:#EEFFFF\"> path<\/span><span style=\"color:#89DDFF\">.<\/span><span style=\"color:#82AAFF\">join<\/span><span style=\"color:#F07178\">(<\/span><span style=\"color:#EEFFFF\">distDir<\/span><span style=\"color:#89DDFF\">,<\/span><span style=\"color:#89DDFF\"> `${<\/span><span style=\"color:#EEFFFF\">name<\/span><span style=\"color:#89DDFF\">}<\/span><span style=\"color:#C3E88D\">.html<\/span><span style=\"color:#89DDFF\">`<\/span><span style=\"color:#F07178\">)<\/span><span style=\"color:#89DDFF\">;<\/span><\/span>\n<span data-line=\"\"><span style=\"color:#89DDFF;font-style:italic\">  return<\/span><span style=\"color:#EEFFFF\"> fs<\/span><span style=\"color:#89DDFF\">.<\/span><span style=\"color:#82AAFF\">readFile<\/span><span style=\"color:#F07178\">(<\/span><span style=\"color:#EEFFFF\">htmlPath<\/span><span style=\"color:#89DDFF\">,<\/span><span style=\"color:#89DDFF\"> \"<\/span><span style=\"color:#C3E88D\">utf-8<\/span><span style=\"color:#89DDFF\">\"<\/span><span style=\"color:#F07178\">)<\/span><span style=\"color:#89DDFF\">;<\/span><\/span>\n<span data-line=\"\"><span style=\"color:#89DDFF\">};<\/span><\/span><\/code><\/pre>\n<\/figure>\n<p>MCP \u30b5\u30fc\u30d0\u30fc\u306e\u30bb\u30c3\u30c8\u30a2\u30c3\u30d7\u3092\u884c\u3044\u307e\u3059\u3002<code>server.registerResource<\/code> \u30e1\u30bd\u30c3\u30c9\u3092\u4f7f\u7528\u3057\u3066 UI \u30ea\u30bd\u30fc\u30b9\u3092\u767b\u9332\u3057\u307e\u3059\u3002<\/p>\n<p>server.ts<\/p>\n<figure data-rehype-pretty-code-figure=\"\">\n<pre style=\"background-color:#212121;color:#EEFFFF\" tabindex=\"0\" data-language=\"ts\" data-theme=\"material-theme-darker\"><code data-language=\"ts\" data-theme=\"material-theme-darker\" style=\"display: grid;\"><span data-line=\"\"><span style=\"color:#89DDFF;font-style:italic\">import<\/span><span style=\"color:#89DDFF\"> {<\/span><span style=\"color:#EEFFFF\"> McpServer<\/span><span style=\"color:#89DDFF\"> }<\/span><span style=\"color:#89DDFF;font-style:italic\"> from<\/span><span style=\"color:#89DDFF\"> \"<\/span><span style=\"color:#C3E88D\">@modelcontextprotocol\/sdk\/server\/mcp.js<\/span><span style=\"color:#89DDFF\">\"<\/span><span style=\"color:#89DDFF\">;<\/span><\/span>\n<span data-line=\"\"><span style=\"color:#89DDFF;font-style:italic\">import<\/span><span style=\"color:#89DDFF\"> {<\/span><span style=\"color:#EEFFFF\"> ReadResourceResult<\/span><span style=\"color:#89DDFF\"> }<\/span><span style=\"color:#89DDFF;font-style:italic\"> from<\/span><span style=\"color:#89DDFF\"> \"<\/span><span style=\"color:#C3E88D\">@modelcontextprotocol\/sdk\/types.js<\/span><span style=\"color:#89DDFF\">\"<\/span><span style=\"color:#89DDFF\">;<\/span><\/span>\n<span data-line=\"\"> <\/span>\n<span data-line=\"\"><span style=\"color:#C792EA\">const<\/span><span style=\"color:#EEFFFF\"> server <\/span><span style=\"color:#89DDFF\">=<\/span><span style=\"color:#89DDFF\"> new<\/span><span style=\"color:#82AAFF\"> McpServer<\/span><span style=\"color:#EEFFFF\">(<\/span><span style=\"color:#89DDFF\">{<\/span><\/span>\n<span data-line=\"\"><span style=\"color:#F07178\">  name<\/span><span style=\"color:#89DDFF\">:<\/span><span style=\"color:#89DDFF\"> \"<\/span><span style=\"color:#C3E88D\">example-server<\/span><span style=\"color:#89DDFF\">\"<\/span><span style=\"color:#89DDFF\">,<\/span><\/span>\n<span data-line=\"\"><span style=\"color:#F07178\">  version<\/span><span style=\"color:#89DDFF\">:<\/span><span style=\"color:#89DDFF\"> \"<\/span><span style=\"color:#C3E88D\">0.1.0<\/span><span style=\"color:#89DDFF\">\"<\/span><span style=\"color:#89DDFF\">,<\/span><\/span>\n<span data-line=\"\"><span style=\"color:#89DDFF\">}<\/span><span style=\"color:#EEFFFF\">)<\/span><span style=\"color:#89DDFF\">;<\/span><\/span>\n<span data-line=\"\"> <\/span>\n<span data-line=\"\"><span style=\"color:#EEFFFF\">server<\/span><span style=\"color:#89DDFF\">.<\/span><span style=\"color:#82AAFF\">registerResource<\/span><span style=\"color:#EEFFFF\">(<\/span><\/span>\n<span data-line=\"\"><span style=\"color:#545454;font-style:italic\">  \/\/ \u30ea\u30bd\u30fc\u30b9\u540d<\/span><\/span>\n<span data-line=\"\"><span style=\"color:#89DDFF\">  \"<\/span><span style=\"color:#C3E88D\">ui-react<\/span><span style=\"color:#89DDFF\">\"<\/span><span style=\"color:#89DDFF\">,<\/span><\/span>\n<span data-line=\"\"><span style=\"color:#545454;font-style:italic\">  \/\/ \u30ea\u30bd\u30fc\u30b9\u306eURI<\/span><\/span>\n<span data-line=\"\"><span style=\"color:#89DDFF\">  \"<\/span><span style=\"color:#C3E88D\">ui:\/\/example\/ui-react<\/span><span style=\"color:#89DDFF\">\"<\/span><span style=\"color:#89DDFF\">,<\/span><\/span>\n<span data-line=\"\"><span style=\"color:#89DDFF\">  {<\/span><\/span>\n<span data-line=\"\"><span style=\"color:#545454;font-style:italic\">    \/\/ \u4eba\u9593\u304c\u8aad\u3080\u305f\u3081\u306e\u30bf\u30a4\u30c8\u30eb<\/span><\/span>\n<span data-line=\"\"><span style=\"color:#F07178\">    title<\/span><span style=\"color:#89DDFF\">:<\/span><span style=\"color:#89DDFF\"> \"<\/span><span style=\"color:#C3E88D\">UI React Example<\/span><span style=\"color:#89DDFF\">\"<\/span><span style=\"color:#89DDFF\">,<\/span><\/span>\n<span data-line=\"\"><span style=\"color:#545454;font-style:italic\">    \/\/ MIME\u30bf\u30a4\u30d7\u306f\u5fc5\u305a text\/html+mcp<\/span><\/span>\n<span data-line=\"\"><span style=\"color:#F07178\">    mimeType<\/span><span style=\"color:#89DDFF\">:<\/span><span style=\"color:#89DDFF\"> \"<\/span><span style=\"color:#C3E88D\">text\/html+mcp<\/span><span style=\"color:#89DDFF\">\"<\/span><span style=\"color:#89DDFF\">,<\/span><\/span>\n<span data-line=\"\"><span style=\"color:#89DDFF\">  },<\/span><\/span>\n<span data-line=\"\"><span style=\"color:#545454;font-style:italic\">  \/\/ UI \u30ea\u30bd\u30fc\u30b9\u306e\u5185\u5bb9\u3092\u8fd4\u3059\u95a2\u6570<\/span><\/span>\n<span data-line=\"\"><span style=\"color:#C792EA\">  async<\/span><span style=\"color:#89DDFF\"> ():<\/span><span style=\"color:#FFCB6B\"> Promise<\/span><span style=\"color:#89DDFF\"><span style=\"color:#FFCB6B\">ReadResourceResult<\/span><span style=\"color:#89DDFF\">&gt;<\/span><span style=\"color:#C792EA\"> =&gt;<\/span><span style=\"color:#89DDFF\"> {<\/span><\/span>\n<span data-line=\"\"><span style=\"color:#C792EA\">    const<\/span><span style=\"color:#EEFFFF\"> contentUiReact<\/span><span style=\"color:#89DDFF\"> =<\/span><span style=\"color:#89DDFF;font-style:italic\"> await<\/span><span style=\"color:#82AAFF\"> loadHtml<\/span><span style=\"color:#F07178\">(<\/span><span style=\"color:#89DDFF\">\"<\/span><span style=\"color:#C3E88D\">ui-react<\/span><span style=\"color:#89DDFF\">\"<\/span><span style=\"color:#F07178\">)<\/span><span style=\"color:#89DDFF\">;<\/span><\/span>\n<span data-line=\"\"><span style=\"color:#89DDFF;font-style:italic\">    return<\/span><span style=\"color:#89DDFF\"> {<\/span><\/span>\n<span data-line=\"\"><span style=\"color:#F07178\">      contents<\/span><span style=\"color:#89DDFF\">:<\/span><span style=\"color:#F07178\"> [<\/span><\/span>\n<span data-line=\"\"><span style=\"color:#89DDFF\">        {<\/span><\/span>\n<span data-line=\"\"><span style=\"color:#F07178\">          uri<\/span><span style=\"color:#89DDFF\">:<\/span><span style=\"color:#89DDFF\"> \"<\/span><span style=\"color:#C3E88D\">ui:\/\/example\/ui-react<\/span><span style=\"color:#89DDFF\">\"<\/span><span style=\"color:#89DDFF\">,<\/span><\/span>\n<span data-line=\"\"><span style=\"color:#F07178\">          text<\/span><span style=\"color:#89DDFF\">:<\/span><span style=\"color:#EEFFFF\"> contentUiReact<\/span><span style=\"color:#89DDFF\">,<\/span><\/span>\n<span data-line=\"\"><span style=\"color:#F07178\">          mimeType<\/span><span style=\"color:#89DDFF\">:<\/span><span style=\"color:#89DDFF\"> \"<\/span><span style=\"color:#C3E88D\">text\/html+mcp<\/span><span style=\"color:#89DDFF\">\"<\/span><span style=\"color:#89DDFF\">,<\/span><\/span>\n<span data-line=\"\"><span style=\"color:#89DDFF\">        },<\/span><\/span>\n<span data-line=\"\"><span style=\"color:#F07178\">      ]<\/span><span style=\"color:#89DDFF\">,<\/span><\/span>\n<span data-line=\"\"><span style=\"color:#89DDFF\">    };<\/span><\/span>\n<span data-line=\"\"><span style=\"color:#89DDFF\">  }<\/span><\/span>\n<span data-line=\"\"><span style=\"color:#EEFFFF\">)<\/span><span style=\"color:#89DDFF\">;<\/span><\/span><\/span><\/code><\/pre>\n<\/figure>\n<p>\u6b21\u306b\u3001<code>server.registerTool<\/code> \u30e1\u30bd\u30c3\u30c9\u3092\u4f7f\u7528\u3057\u3066 UI \u30ea\u30bd\u30fc\u30b9\u3092\u4f7f\u7528\u3059\u308b\u30c4\u30fc\u30eb\u3092\u767b\u9332\u3057\u307e\u3059\u3002\u30c4\u30fc\u30eb\u306e\u30e1\u30bf\u30c7\u30fc\u30bf\u306b <code>ui\/resourceUri<\/code> \u30d5\u30a3\u30fc\u30eb\u30c9\u3092\u8ffd\u52a0\u3057\u3066\u3001\u95a2\u9023\u4ed8\u3051\u3092\u884c\u3044\u307e\u3059\u3002<\/p>\n<p>server.ts<\/p>\n<figure data-rehype-pretty-code-figure=\"\">\n<pre style=\"background-color:#212121;color:#EEFFFF\" tabindex=\"0\" data-language=\"ts\" data-theme=\"material-theme-darker\"><code data-language=\"ts\" data-theme=\"material-theme-darker\" style=\"display: grid;\"><span data-line=\"\"><span style=\"color:#89DDFF;font-style:italic\">import<\/span><span style=\"color:#89DDFF;font-style:italic\"> type<\/span><span style=\"color:#89DDFF\"> {<\/span><span style=\"color:#EEFFFF\"> CallToolResult<\/span><span style=\"color:#89DDFF\"> }<\/span><span style=\"color:#89DDFF;font-style:italic\"> from<\/span><span style=\"color:#89DDFF\"> \"<\/span><span style=\"color:#C3E88D\">@modelcontextprotocol\/sdk\/types.js<\/span><span style=\"color:#89DDFF\">\"<\/span><span style=\"color:#89DDFF\">;<\/span><\/span>\n<span data-line=\"\"><span style=\"color:#89DDFF;font-style:italic\">import<\/span><span style=\"color:#89DDFF\"> {<\/span><span style=\"color:#EEFFFF\"> z<\/span><span style=\"color:#89DDFF\"> }<\/span><span style=\"color:#89DDFF;font-style:italic\"> from<\/span><span style=\"color:#89DDFF\"> \"<\/span><span style=\"color:#C3E88D\">zod<\/span><span style=\"color:#89DDFF\">\"<\/span><span style=\"color:#89DDFF\">;<\/span><\/span>\n<span data-line=\"\"> <\/span>\n<span data-line=\"\"><span style=\"color:#EEFFFF\">server<\/span><span style=\"color:#89DDFF\">.<\/span><span style=\"color:#82AAFF\">registerTool<\/span><span style=\"color:#EEFFFF\">(<\/span><\/span>\n<span data-line=\"\"><span style=\"color:#89DDFF\">  \"<\/span><span style=\"color:#C3E88D\">create-react-ui<\/span><span style=\"color:#89DDFF\">\"<\/span><span style=\"color:#89DDFF\">,<\/span><\/span>\n<span data-line=\"\"><span style=\"color:#89DDFF\">  {<\/span><\/span>\n<span data-line=\"\"><span style=\"color:#F07178\">    title<\/span><span style=\"color:#89DDFF\">:<\/span><span style=\"color:#89DDFF\"> \"<\/span><span style=\"color:#C3E88D\">Create React UI<\/span><span style=\"color:#89DDFF\">\"<\/span><span style=\"color:#89DDFF\">,<\/span><\/span>\n<span data-line=\"\"><span style=\"color:#F07178\">    description<\/span><span style=\"color:#89DDFF\">:<\/span><span style=\"color:#89DDFF\"> \"<\/span><span style=\"color:#C3E88D\">Returns a React-based UI<\/span><span style=\"color:#89DDFF\">\"<\/span><span style=\"color:#89DDFF\">,<\/span><\/span>\n<span data-line=\"\"><span style=\"color:#F07178\">    inputSchema<\/span><span style=\"color:#89DDFF\">:<\/span><span style=\"color:#89DDFF\"> {},<\/span><\/span>\n<span data-line=\"\"><span style=\"color:#F07178\">    outputSchema<\/span><span style=\"color:#89DDFF\">:<\/span><span style=\"color:#89DDFF\"> {<\/span><\/span>\n<span data-line=\"\"><span style=\"color:#F07178\">      message<\/span><span style=\"color:#89DDFF\">:<\/span><span style=\"color:#EEFFFF\"> z<\/span><span style=\"color:#89DDFF\">.<\/span><span style=\"color:#82AAFF\">string<\/span><span style=\"color:#EEFFFF\">()<\/span><span style=\"color:#89DDFF\">.<\/span><span style=\"color:#82AAFF\">describe<\/span><span style=\"color:#EEFFFF\">(<\/span><span style=\"color:#89DDFF\">\"<\/span><span style=\"color:#C3E88D\">Message to display<\/span><span style=\"color:#89DDFF\">\"<\/span><span style=\"color:#EEFFFF\">)<\/span><span style=\"color:#89DDFF\">,<\/span><\/span>\n<span data-line=\"\"><span style=\"color:#89DDFF\">    },<\/span><\/span>\n<span data-line=\"\"><span style=\"color:#545454;font-style:italic\">    \/\/ registerResource\u3067\u767b\u9332\u3057\u305fUI\u30ea\u30bd\u30fc\u30b9\u3092\u8fd4\u3059<\/span><\/span>\n<span data-line=\"\"><span style=\"color:#F07178\">    _meta<\/span><span style=\"color:#89DDFF\">:<\/span><span style=\"color:#89DDFF\"> {<\/span><\/span>\n<span data-line=\"\"><span style=\"color:#89DDFF\">      \"<\/span><span style=\"color:#F07178\">ui\/resourceUri<\/span><span style=\"color:#89DDFF\">\"<\/span><span style=\"color:#89DDFF\">:<\/span><span style=\"color:#89DDFF\"> \"<\/span><span style=\"color:#C3E88D\">ui:\/\/example\/ui-react<\/span><span style=\"color:#89DDFF\">\"<\/span><span style=\"color:#89DDFF\">,<\/span><\/span>\n<span data-line=\"\"><span style=\"color:#89DDFF\">    },<\/span><\/span>\n<span data-line=\"\"><span style=\"color:#89DDFF\">  },<\/span><\/span>\n<span data-line=\"\"><span style=\"color:#545454;font-style:italic\">  \/\/ \u30c4\u30fc\u30eb\u306e\u51e6\u7406\u5185\u5bb9\u3092\u5b9f\u88c5\u3059\u308b\u95a2\u6570<\/span><\/span>\n<span data-line=\"\"><span style=\"color:#C792EA\">  async<\/span><span style=\"color:#89DDFF\"> ():<\/span><span style=\"color:#FFCB6B\"> Promise<\/span><span style=\"color:#89DDFF\"><span style=\"color:#FFCB6B\">CallToolResult<\/span><span style=\"color:#89DDFF\">&gt;<\/span><span style=\"color:#C792EA\"> =&gt;<\/span><span style=\"color:#89DDFF\"> {<\/span><\/span>\n<span data-line=\"\"><span style=\"color:#C792EA\">    const<\/span><span style=\"color:#EEFFFF\"> message<\/span><span style=\"color:#89DDFF\"> =<\/span><span style=\"color:#89DDFF\"> \"<\/span><span style=\"color:#C3E88D\">This is a React-based UI!<\/span><span style=\"color:#89DDFF\">\"<\/span><span style=\"color:#89DDFF\">;<\/span><\/span>\n<span data-line=\"\"><span style=\"color:#89DDFF;font-style:italic\">    return<\/span><span style=\"color:#89DDFF\"> {<\/span><\/span>\n<span data-line=\"\"><span style=\"color:#F07178\">      content<\/span><span style=\"color:#89DDFF\">:<\/span><span style=\"color:#F07178\"> [<\/span><span style=\"color:#89DDFF\">{<\/span><span style=\"color:#F07178\"> type<\/span><span style=\"color:#89DDFF\">:<\/span><span style=\"color:#89DDFF\"> \"<\/span><span style=\"color:#C3E88D\">text<\/span><span style=\"color:#89DDFF\">\"<\/span><span style=\"color:#89DDFF\">,<\/span><span style=\"color:#F07178\"> text<\/span><span style=\"color:#89DDFF\">:<\/span><span style=\"color:#EEFFFF\"> JSON<\/span><span style=\"color:#89DDFF\">.<\/span><span style=\"color:#82AAFF\">stringify<\/span><span style=\"color:#F07178\">(<\/span><span style=\"color:#89DDFF\">{<\/span><span style=\"color:#EEFFFF\"> message<\/span><span style=\"color:#89DDFF\"> }<\/span><span style=\"color:#F07178\">) <\/span><span style=\"color:#89DDFF\">}<\/span><span style=\"color:#F07178\">]<\/span><span style=\"color:#89DDFF\">,<\/span><\/span>\n<span data-line=\"\"><span style=\"color:#F07178\">      structuredContent<\/span><span style=\"color:#89DDFF\">:<\/span><span style=\"color:#89DDFF\"> {<\/span><span style=\"color:#EEFFFF\"> message<\/span><span style=\"color:#89DDFF\"> },<\/span><\/span>\n<span data-line=\"\"><span style=\"color:#89DDFF\">    };<\/span><\/span>\n<span data-line=\"\"><span style=\"color:#89DDFF\">  },<\/span><\/span>\n<span data-line=\"\"><span style=\"color:#EEFFFF\">)<\/span><span style=\"color:#89DDFF\">;<\/span><\/span><\/span><\/code><\/pre>\n<\/figure>\n<p>\u6700\u5f8c\u306b Express \u30b5\u30fc\u30d0\u30fc\u3092\u30bb\u30c3\u30c8\u30a2\u30c3\u30d7\u3057\u3066 MCP \u30b5\u30fc\u30d0\u30fc\u306e\u4ed5\u69d8\u306b\u5f93\u3044\u30ea\u30af\u30a8\u30b9\u30c8\u3092\u51e6\u7406\u3057\u307e\u3059\u3002<\/p>\n<p>server.ts<\/p>\n<figure data-rehype-pretty-code-figure=\"\">\n<pre style=\"background-color:#212121;color:#EEFFFF\" tabindex=\"0\" data-language=\"ts\" data-theme=\"material-theme-darker\"><code data-language=\"ts\" data-theme=\"material-theme-darker\" style=\"display: grid;\"><span data-line=\"\"><span style=\"color:#89DDFF;font-style:italic\">import<\/span><span style=\"color:#EEFFFF\"> express<\/span><span style=\"color:#89DDFF\">,<\/span><span style=\"color:#89DDFF\"> {<\/span><span style=\"color:#EEFFFF\"> Request<\/span><span style=\"color:#89DDFF\">,<\/span><span style=\"color:#EEFFFF\"> Response<\/span><span style=\"color:#89DDFF\"> }<\/span><span style=\"color:#89DDFF;font-style:italic\"> from<\/span><span style=\"color:#89DDFF\"> \"<\/span><span style=\"color:#C3E88D\">express<\/span><span style=\"color:#89DDFF\">\"<\/span><span style=\"color:#89DDFF\">;<\/span><\/span>\n<span data-line=\"\"><span style=\"color:#89DDFF;font-style:italic\">import<\/span><span style=\"color:#89DDFF\"> {<\/span><span style=\"color:#EEFFFF\"> randomUUID<\/span><span style=\"color:#89DDFF\"> }<\/span><span style=\"color:#89DDFF;font-style:italic\"> from<\/span><span style=\"color:#89DDFF\"> \"<\/span><span style=\"color:#C3E88D\">node:crypto<\/span><span style=\"color:#89DDFF\">\"<\/span><span style=\"color:#89DDFF\">;<\/span><\/span>\n<span data-line=\"\"><span style=\"color:#89DDFF;font-style:italic\">import<\/span><span style=\"color:#EEFFFF\"> cors <\/span><span style=\"color:#89DDFF;font-style:italic\">from<\/span><span style=\"color:#89DDFF\"> \"<\/span><span style=\"color:#C3E88D\">cors<\/span><span style=\"color:#89DDFF\">\"<\/span><span style=\"color:#89DDFF\">;<\/span><\/span>\n<span data-line=\"\"><span style=\"color:#89DDFF;font-style:italic\">import<\/span><span style=\"color:#89DDFF\"> {<\/span><span style=\"color:#EEFFFF\"> StreamableHTTPServerTransport<\/span><span style=\"color:#89DDFF\"> }<\/span><span style=\"color:#89DDFF;font-style:italic\"> from<\/span><span style=\"color:#89DDFF\"> \"<\/span><span style=\"color:#C3E88D\">@modelcontextprotocol\/sdk\/server\/streamableHttp.js<\/span><span style=\"color:#89DDFF\">\"<\/span><span style=\"color:#89DDFF\">;<\/span><\/span>\n<span data-line=\"\"><span style=\"color:#89DDFF;font-style:italic\">import<\/span><span style=\"color:#89DDFF\"> {<\/span><span style=\"color:#EEFFFF\"> InMemoryEventStore<\/span><span style=\"color:#89DDFF\"> }<\/span><span style=\"color:#89DDFF;font-style:italic\"> from<\/span><span style=\"color:#89DDFF\"> \"<\/span><span style=\"color:#C3E88D\">@modelcontextprotocol\/sdk\/examples\/shared\/inMemoryEventStore.js<\/span><span style=\"color:#89DDFF\">\"<\/span><span style=\"color:#89DDFF\">;<\/span><\/span>\n<span data-line=\"\"> <\/span>\n<span data-line=\"\"><span style=\"color:#C792EA\">const<\/span><span style=\"color:#EEFFFF\"> app <\/span><span style=\"color:#89DDFF\">=<\/span><span style=\"color:#82AAFF\"> express<\/span><span style=\"color:#EEFFFF\">()<\/span><span style=\"color:#89DDFF\">;<\/span><\/span>\n<span data-line=\"\"><span style=\"color:#EEFFFF\">app<\/span><span style=\"color:#89DDFF\">.<\/span><span style=\"color:#82AAFF\">use<\/span><span style=\"color:#EEFFFF\">(express<\/span><span style=\"color:#89DDFF\">.<\/span><span style=\"color:#82AAFF\">json<\/span><span style=\"color:#EEFFFF\">())<\/span><span style=\"color:#89DDFF\">;<\/span><\/span>\n<span data-line=\"\"><span style=\"color:#EEFFFF\">app<\/span><span style=\"color:#89DDFF\">.<\/span><span style=\"color:#82AAFF\">use<\/span><span style=\"color:#EEFFFF\">(<\/span><\/span>\n<span data-line=\"\"><span style=\"color:#82AAFF\">  cors<\/span><span style=\"color:#EEFFFF\">(<\/span><span style=\"color:#89DDFF\">{<\/span><\/span>\n<span data-line=\"\"><span style=\"color:#F07178\">    origin<\/span><span style=\"color:#89DDFF\">:<\/span><span style=\"color:#89DDFF\"> \"<\/span><span style=\"color:#C3E88D\">*<\/span><span style=\"color:#89DDFF\">\"<\/span><span style=\"color:#89DDFF\">,<\/span><\/span>\n<span data-line=\"\"><span style=\"color:#F07178\">    exposedHeaders<\/span><span style=\"color:#89DDFF\">:<\/span><span style=\"color:#EEFFFF\"> [<\/span><span style=\"color:#89DDFF\">\"<\/span><span style=\"color:#C3E88D\">Mcp-Session-Id<\/span><span style=\"color:#89DDFF\">\"<\/span><span style=\"color:#EEFFFF\">]<\/span><span style=\"color:#89DDFF\">,<\/span><\/span>\n<span data-line=\"\"><span style=\"color:#89DDFF\">  }<\/span><span style=\"color:#EEFFFF\">)<\/span><\/span>\n<span data-line=\"\"><span style=\"color:#EEFFFF\">)<\/span><span style=\"color:#89DDFF\">;<\/span><\/span>\n<span data-line=\"\"> <\/span>\n<span data-line=\"\"><span style=\"color:#545454;font-style:italic\">\/\/ Map to store transports by session ID<\/span><\/span>\n<span data-line=\"\"><span style=\"color:#C792EA\">const<\/span><span style=\"color:#EEFFFF\"> transports<\/span><span style=\"color:#89DDFF\">:<\/span><span style=\"color:#89DDFF\"> {<\/span><span style=\"color:#EEFFFF\"> [<\/span><span style=\"color:#EEFFFF;font-style:italic\">sessionId<\/span><span style=\"color:#89DDFF\">:<\/span><span style=\"color:#FFCB6B\"> string<\/span><span style=\"color:#EEFFFF\">]<\/span><span style=\"color:#89DDFF\">:<\/span><span style=\"color:#FFCB6B\"> StreamableHTTPServerTransport<\/span><span style=\"color:#89DDFF\"> }<\/span><span style=\"color:#89DDFF\"> =<\/span><span style=\"color:#89DDFF\"> {};<\/span><\/span>\n<span data-line=\"\"> <\/span>\n<span data-line=\"\"><span style=\"color:#C792EA\">const<\/span><span style=\"color:#EEFFFF\"> mcpPostHandler <\/span><span style=\"color:#89DDFF\">=<\/span><span style=\"color:#C792EA\"> async<\/span><span style=\"color:#89DDFF\"> (<\/span><span style=\"color:#EEFFFF;font-style:italic\">req<\/span><span style=\"color:#89DDFF\">:<\/span><span style=\"color:#FFCB6B\"> Request<\/span><span style=\"color:#89DDFF\">,<\/span><span style=\"color:#EEFFFF;font-style:italic\"> res<\/span><span style=\"color:#89DDFF\">:<\/span><span style=\"color:#FFCB6B\"> Response<\/span><span style=\"color:#89DDFF\">)<\/span><span style=\"color:#C792EA\"> =&gt;<\/span><span style=\"color:#89DDFF\"> {<\/span><\/span>\n<span data-line=\"\"><span style=\"color:#C792EA\">  const<\/span><span style=\"color:#EEFFFF\"> sessionId<\/span><span style=\"color:#89DDFF\"> =<\/span><span style=\"color:#EEFFFF\"> req<\/span><span style=\"color:#89DDFF\">.<\/span><span style=\"color:#EEFFFF\">headers<\/span><span style=\"color:#F07178\">[<\/span><span style=\"color:#89DDFF\">\"<\/span><span style=\"color:#C3E88D\">mcp-session-id<\/span><span style=\"color:#89DDFF\">\"<\/span><span style=\"color:#F07178\">] <\/span><span style=\"color:#89DDFF;font-style:italic\">as<\/span><span style=\"color:#FFCB6B\"> string<\/span><span style=\"color:#89DDFF\"> |<\/span><span style=\"color:#FFCB6B\"> undefined<\/span><span style=\"color:#89DDFF\">;<\/span><\/span>\n<span data-line=\"\"> <\/span>\n<span data-line=\"\"><span style=\"color:#89DDFF;font-style:italic\">  try<\/span><span style=\"color:#89DDFF\"> {<\/span><\/span>\n<span data-line=\"\"><span style=\"color:#C792EA\">    let<\/span><span style=\"color:#EEFFFF\"> transport<\/span><span style=\"color:#89DDFF\">:<\/span><span style=\"color:#FFCB6B\"> StreamableHTTPServerTransport<\/span><span style=\"color:#89DDFF\">;<\/span><\/span>\n<span data-line=\"\"><span style=\"color:#89DDFF;font-style:italic\">    if<\/span><span style=\"color:#F07178\"> (<\/span><span style=\"color:#EEFFFF\">sessionId<\/span><span style=\"color:#89DDFF\"> &amp;&amp;<\/span><span style=\"color:#EEFFFF\"> transports<\/span><span style=\"color:#F07178\">[<\/span><span style=\"color:#EEFFFF\">sessionId<\/span><span style=\"color:#F07178\">]) <\/span><span style=\"color:#89DDFF\">{<\/span><\/span>\n<span data-line=\"\"><span style=\"color:#EEFFFF\">      transport<\/span><span style=\"color:#89DDFF\"> =<\/span><span style=\"color:#EEFFFF\"> transports<\/span><span style=\"color:#F07178\">[<\/span><span style=\"color:#EEFFFF\">sessionId<\/span><span style=\"color:#F07178\">]<\/span><span style=\"color:#89DDFF\">;<\/span><\/span>\n<span data-line=\"\"><span style=\"color:#89DDFF\">    }<\/span><span style=\"color:#89DDFF;font-style:italic\"> else<\/span><span style=\"color:#89DDFF;font-style:italic\"> if<\/span><span style=\"color:#F07178\"> (<\/span><span style=\"color:#89DDFF\">!<\/span><span style=\"color:#EEFFFF\">sessionId<\/span><span style=\"color:#89DDFF\"> &amp;&amp;<\/span><span style=\"color:#82AAFF\"> isInitializeRequest<\/span><span style=\"color:#F07178\">(<\/span><span style=\"color:#EEFFFF\">req<\/span><span style=\"color:#89DDFF\">.<\/span><span style=\"color:#EEFFFF\">body<\/span><span style=\"color:#F07178\">)) <\/span><span style=\"color:#89DDFF\">{<\/span><\/span>\n<span data-line=\"\"><span style=\"color:#C792EA\">      const<\/span><span style=\"color:#EEFFFF\"> eventStore<\/span><span style=\"color:#89DDFF\"> =<\/span><span style=\"color:#89DDFF\"> new<\/span><span style=\"color:#82AAFF\"> InMemoryEventStore<\/span><span style=\"color:#F07178\">()<\/span><span style=\"color:#89DDFF\">;<\/span><\/span>\n<span data-line=\"\"><span style=\"color:#EEFFFF\">      transport<\/span><span style=\"color:#89DDFF\"> =<\/span><span style=\"color:#89DDFF\"> new<\/span><span style=\"color:#82AAFF\"> StreamableHTTPServerTransport<\/span><span style=\"color:#F07178\">(<\/span><span style=\"color:#89DDFF\">{<\/span><\/span>\n<span data-line=\"\"><span style=\"color:#82AAFF\">        sessionIdGenerator<\/span><span style=\"color:#89DDFF\">:<\/span><span style=\"color:#89DDFF\"> ()<\/span><span style=\"color:#C792EA\"> =&gt;<\/span><span style=\"color:#82AAFF\"> randomUUID<\/span><span style=\"color:#F07178\">()<\/span><span style=\"color:#89DDFF\">,<\/span><\/span>\n<span data-line=\"\"><span style=\"color:#EEFFFF\">        eventStore<\/span><span style=\"color:#89DDFF\">,<\/span><\/span>\n<span data-line=\"\"><span style=\"color:#82AAFF\">        onsessioninitialized<\/span><span style=\"color:#89DDFF\">:<\/span><span style=\"color:#89DDFF\"> (<\/span><span style=\"color:#EEFFFF;font-style:italic\">sessionId<\/span><span style=\"color:#89DDFF\">)<\/span><span style=\"color:#C792EA\"> =&gt;<\/span><span style=\"color:#89DDFF\"> {<\/span><\/span>\n<span data-line=\"\"><span style=\"color:#EEFFFF\">          console<\/span><span style=\"color:#89DDFF\">.<\/span><span style=\"color:#82AAFF\">log<\/span><span style=\"color:#F07178\">(<\/span><span style=\"color:#89DDFF\">`<\/span><span style=\"color:#C3E88D\">Session initialized: <\/span><span style=\"color:#89DDFF\">${<\/span><span style=\"color:#EEFFFF\">sessionId<\/span><span style=\"color:#89DDFF\">}`<\/span><span style=\"color:#F07178\">)<\/span><span style=\"color:#89DDFF\">;<\/span><\/span>\n<span data-line=\"\"><span style=\"color:#EEFFFF\">          transports<\/span><span style=\"color:#F07178\">[<\/span><span style=\"color:#EEFFFF\">sessionId<\/span><span style=\"color:#F07178\">] <\/span><span style=\"color:#89DDFF\">=<\/span><span style=\"color:#EEFFFF\"> transport<\/span><span style=\"color:#89DDFF\">;<\/span><\/span>\n<span data-line=\"\"><span style=\"color:#89DDFF\">        },<\/span><\/span>\n<span data-line=\"\"><span style=\"color:#89DDFF\">      }<\/span><span style=\"color:#F07178\">)<\/span><span style=\"color:#89DDFF\">;<\/span><\/span>\n<span data-line=\"\"> <\/span>\n<span data-line=\"\"><span style=\"color:#EEFFFF\">      transport<\/span><span style=\"color:#89DDFF\">.<\/span><span style=\"color:#82AAFF\">onclose<\/span><span style=\"color:#89DDFF\"> =<\/span><span style=\"color:#89DDFF\"> ()<\/span><span style=\"color:#C792EA\"> =&gt;<\/span><span style=\"color:#89DDFF\"> {<\/span><\/span>\n<span data-line=\"\"><span style=\"color:#C792EA\">        const<\/span><span style=\"color:#EEFFFF\"> sid<\/span><span style=\"color:#89DDFF\"> =<\/span><span style=\"color:#EEFFFF\"> transport<\/span><span style=\"color:#89DDFF\">.<\/span><span style=\"color:#EEFFFF\">sessionId<\/span><span style=\"color:#89DDFF\">;<\/span><\/span>\n<span data-line=\"\"><span style=\"color:#89DDFF;font-style:italic\">        if<\/span><span style=\"color:#F07178\"> (<\/span><span style=\"color:#EEFFFF\">sid<\/span><span style=\"color:#89DDFF\"> &amp;&amp;<\/span><span style=\"color:#EEFFFF\"> transports<\/span><span style=\"color:#F07178\">[<\/span><span style=\"color:#EEFFFF\">sid<\/span><span style=\"color:#F07178\">]) <\/span><span style=\"color:#89DDFF\">{<\/span><\/span>\n<span data-line=\"\"><span style=\"color:#EEFFFF\">          console<\/span><span style=\"color:#89DDFF\">.<\/span><span style=\"color:#82AAFF\">log<\/span><span style=\"color:#F07178\">(<\/span><span style=\"color:#89DDFF\">`<\/span><span style=\"color:#C3E88D\">Session closed: <\/span><span style=\"color:#89DDFF\">${<\/span><span style=\"color:#EEFFFF\">sid<\/span><span style=\"color:#89DDFF\">}`<\/span><span style=\"color:#F07178\">)<\/span><span style=\"color:#89DDFF\">;<\/span><\/span>\n<span data-line=\"\"><span style=\"color:#89DDFF\">          delete<\/span><span style=\"color:#EEFFFF\"> transports<\/span><span style=\"color:#F07178\">[<\/span><span style=\"color:#EEFFFF\">sid<\/span><span style=\"color:#F07178\">]<\/span><span style=\"color:#89DDFF\">;<\/span><\/span>\n<span data-line=\"\"><span style=\"color:#89DDFF\">        }<\/span><\/span>\n<span data-line=\"\"><span style=\"color:#89DDFF\">      };<\/span><\/span>\n<span data-line=\"\"> <\/span>\n<span data-line=\"\"><span style=\"color:#89DDFF;font-style:italic\">      await<\/span><span style=\"color:#EEFFFF\"> server<\/span><span style=\"color:#89DDFF\">.<\/span><span style=\"color:#82AAFF\">connect<\/span><span style=\"color:#F07178\">(<\/span><span style=\"color:#EEFFFF\">transport<\/span><span style=\"color:#F07178\">)<\/span><span style=\"color:#89DDFF\">;<\/span><\/span>\n<span data-line=\"\"><span style=\"color:#89DDFF;font-style:italic\">      await<\/span><span style=\"color:#EEFFFF\"> transport<\/span><span style=\"color:#89DDFF\">.<\/span><span style=\"color:#82AAFF\">handleRequest<\/span><span style=\"color:#F07178\">(<\/span><span style=\"color:#EEFFFF\">req<\/span><span style=\"color:#89DDFF\">,<\/span><span style=\"color:#EEFFFF\"> res<\/span><span style=\"color:#89DDFF\">,<\/span><span style=\"color:#EEFFFF\"> req<\/span><span style=\"color:#89DDFF\">.<\/span><span style=\"color:#EEFFFF\">body<\/span><span style=\"color:#F07178\">)<\/span><span style=\"color:#89DDFF\">;<\/span><\/span>\n<span data-line=\"\"><span style=\"color:#89DDFF;font-style:italic\">      return<\/span><span style=\"color:#89DDFF\">;<\/span><\/span>\n<span data-line=\"\"><span style=\"color:#89DDFF\">    }<\/span><span style=\"color:#89DDFF;font-style:italic\"> else<\/span><span style=\"color:#89DDFF\"> {<\/span><\/span>\n<span data-line=\"\"><span style=\"color:#EEFFFF\">      res<\/span><span style=\"color:#89DDFF\">.<\/span><span style=\"color:#82AAFF\">status<\/span><span style=\"color:#F07178\">(<\/span><span style=\"color:#F78C6C\">400<\/span><span style=\"color:#F07178\">)<\/span><span style=\"color:#89DDFF\">.<\/span><span style=\"color:#82AAFF\">json<\/span><span style=\"color:#F07178\">(<\/span><span style=\"color:#89DDFF\">{<\/span><\/span>\n<span data-line=\"\"><span style=\"color:#F07178\">        jsonrpc<\/span><span style=\"color:#89DDFF\">:<\/span><span style=\"color:#89DDFF\"> \"<\/span><span style=\"color:#C3E88D\">2.0<\/span><span style=\"color:#89DDFF\">\"<\/span><span style=\"color:#89DDFF\">,<\/span><\/span>\n<span data-line=\"\"><span style=\"color:#F07178\">        error<\/span><span style=\"color:#89DDFF\">:<\/span><span style=\"color:#89DDFF\"> {<\/span><span style=\"color:#F07178\"> code<\/span><span style=\"color:#89DDFF\">:<\/span><span style=\"color:#89DDFF\"> -<\/span><span style=\"color:#F78C6C\">32000<\/span><span style=\"color:#89DDFF\">,<\/span><span style=\"color:#F07178\"> message<\/span><span style=\"color:#89DDFF\">:<\/span><span style=\"color:#89DDFF\"> \"<\/span><span style=\"color:#C3E88D\">Bad Request: No valid session ID<\/span><span style=\"color:#89DDFF\">\"<\/span><span style=\"color:#89DDFF\"> },<\/span><\/span>\n<span data-line=\"\"><span style=\"color:#F07178\">        id<\/span><span style=\"color:#89DDFF\">:<\/span><span style=\"color:#89DDFF\"> null,<\/span><\/span>\n<span data-line=\"\"><span style=\"color:#89DDFF\">      }<\/span><span style=\"color:#F07178\">)<\/span><span style=\"color:#89DDFF\">;<\/span><\/span>\n<span data-line=\"\"><span style=\"color:#89DDFF;font-style:italic\">      return<\/span><span style=\"color:#89DDFF\">;<\/span><\/span>\n<span data-line=\"\"><span style=\"color:#89DDFF\">    }<\/span><\/span>\n<span data-line=\"\"> <\/span>\n<span data-line=\"\"><span style=\"color:#89DDFF;font-style:italic\">    await<\/span><span style=\"color:#EEFFFF\"> transport<\/span><span style=\"color:#89DDFF\">.<\/span><span style=\"color:#82AAFF\">handleRequest<\/span><span style=\"color:#F07178\">(<\/span><span style=\"color:#EEFFFF\">req<\/span><span style=\"color:#89DDFF\">,<\/span><span style=\"color:#EEFFFF\"> res<\/span><span style=\"color:#89DDFF\">,<\/span><span style=\"color:#EEFFFF\"> req<\/span><span style=\"color:#89DDFF\">.<\/span><span style=\"color:#EEFFFF\">body<\/span><span style=\"color:#F07178\">)<\/span><span style=\"color:#89DDFF\">;<\/span><\/span>\n<span data-line=\"\"><span style=\"color:#89DDFF\">  }<\/span><span style=\"color:#89DDFF;font-style:italic\"> catch<\/span><span style=\"color:#F07178\"> (<\/span><span style=\"color:#EEFFFF\">error<\/span><span style=\"color:#F07178\">) <\/span><span style=\"color:#89DDFF\">{<\/span><\/span>\n<span data-line=\"\"><span style=\"color:#EEFFFF\">    console<\/span><span style=\"color:#89DDFF\">.<\/span><span style=\"color:#82AAFF\">error<\/span><span style=\"color:#F07178\">(<\/span><span style=\"color:#89DDFF\">\"<\/span><span style=\"color:#C3E88D\">Error handling MCP request:<\/span><span style=\"color:#89DDFF\">\"<\/span><span style=\"color:#89DDFF\">,<\/span><span style=\"color:#EEFFFF\"> error<\/span><span style=\"color:#F07178\">)<\/span><span style=\"color:#89DDFF\">;<\/span><\/span>\n<span data-line=\"\"><span style=\"color:#89DDFF;font-style:italic\">    if<\/span><span style=\"color:#F07178\"> (<\/span><span style=\"color:#89DDFF\">!<\/span><span style=\"color:#EEFFFF\">res<\/span><span style=\"color:#89DDFF\">.<\/span><span style=\"color:#EEFFFF\">headersSent<\/span><span style=\"color:#F07178\">) <\/span><span style=\"color:#89DDFF\">{<\/span><\/span>\n<span data-line=\"\"><span style=\"color:#EEFFFF\">      res<\/span><span style=\"color:#89DDFF\">.<\/span><span style=\"color:#82AAFF\">status<\/span><span style=\"color:#F07178\">(<\/span><span style=\"color:#F78C6C\">500<\/span><span style=\"color:#F07178\">)<\/span><span style=\"color:#89DDFF\">.<\/span><span style=\"color:#82AAFF\">json<\/span><span style=\"color:#F07178\">(<\/span><span style=\"color:#89DDFF\">{<\/span><\/span>\n<span data-line=\"\"><span style=\"color:#F07178\">        jsonrpc<\/span><span style=\"color:#89DDFF\">:<\/span><span style=\"color:#89DDFF\"> \"<\/span><span style=\"color:#C3E88D\">2.0<\/span><span style=\"color:#89DDFF\">\"<\/span><span style=\"color:#89DDFF\">,<\/span><\/span>\n<span data-line=\"\"><span style=\"color:#F07178\">        error<\/span><span style=\"color:#89DDFF\">:<\/span><span style=\"color:#89DDFF\"> {<\/span><span style=\"color:#F07178\"> code<\/span><span style=\"color:#89DDFF\">:<\/span><span style=\"color:#89DDFF\"> -<\/span><span style=\"color:#F78C6C\">32603<\/span><span style=\"color:#89DDFF\">,<\/span><span style=\"color:#F07178\"> message<\/span><span style=\"color:#89DDFF\">:<\/span><span style=\"color:#89DDFF\"> \"<\/span><span style=\"color:#C3E88D\">Internal server error<\/span><span style=\"color:#89DDFF\">\"<\/span><span style=\"color:#89DDFF\"> },<\/span><\/span>\n<span data-line=\"\"><span style=\"color:#F07178\">        id<\/span><span style=\"color:#89DDFF\">:<\/span><span style=\"color:#89DDFF\"> null,<\/span><\/span>\n<span data-line=\"\"><span style=\"color:#89DDFF\">      }<\/span><span style=\"color:#F07178\">)<\/span><span style=\"color:#89DDFF\">;<\/span><\/span>\n<span data-line=\"\"><span style=\"color:#89DDFF\">    }<\/span><\/span>\n<span data-line=\"\"><span style=\"color:#89DDFF\">  }<\/span><\/span>\n<span data-line=\"\"><span style=\"color:#89DDFF\">};<\/span><\/span>\n<span data-line=\"\"> <\/span>\n<span data-line=\"\"><span style=\"color:#EEFFFF\">app<\/span><span style=\"color:#89DDFF\">.<\/span><span style=\"color:#82AAFF\">post<\/span><span style=\"color:#EEFFFF\">(<\/span><span style=\"color:#89DDFF\">\"<\/span><span style=\"color:#C3E88D\">\/mcp<\/span><span style=\"color:#89DDFF\">\"<\/span><span style=\"color:#89DDFF\">,<\/span><span style=\"color:#EEFFFF\"> mcpPostHandler)<\/span><span style=\"color:#89DDFF\">;<\/span><\/span>\n<span data-line=\"\"> <\/span>\n<span data-line=\"\"><span style=\"color:#EEFFFF\">app<\/span><span style=\"color:#89DDFF\">.<\/span><span style=\"color:#82AAFF\">get<\/span><span style=\"color:#EEFFFF\">(<\/span><span style=\"color:#89DDFF\">\"<\/span><span style=\"color:#C3E88D\">\/mcp<\/span><span style=\"color:#89DDFF\">\"<\/span><span style=\"color:#89DDFF\">,<\/span><span style=\"color:#C792EA\"> async<\/span><span style=\"color:#89DDFF\"> (<\/span><span style=\"color:#EEFFFF;font-style:italic\">req<\/span><span style=\"color:#89DDFF\">:<\/span><span style=\"color:#FFCB6B\"> Request<\/span><span style=\"color:#89DDFF\">,<\/span><span style=\"color:#EEFFFF;font-style:italic\"> res<\/span><span style=\"color:#89DDFF\">:<\/span><span style=\"color:#FFCB6B\"> Response<\/span><span style=\"color:#89DDFF\">)<\/span><span style=\"color:#C792EA\"> =&gt;<\/span><span style=\"color:#89DDFF\"> {<\/span><\/span>\n<span data-line=\"\"><span style=\"color:#C792EA\">  const<\/span><span style=\"color:#EEFFFF\"> sessionId<\/span><span style=\"color:#89DDFF\"> =<\/span><span style=\"color:#EEFFFF\"> req<\/span><span style=\"color:#89DDFF\">.<\/span><span style=\"color:#EEFFFF\">headers<\/span><span style=\"color:#F07178\">[<\/span><span style=\"color:#89DDFF\">\"<\/span><span style=\"color:#C3E88D\">mcp-session-id<\/span><span style=\"color:#89DDFF\">\"<\/span><span style=\"color:#F07178\">] <\/span><span style=\"color:#89DDFF;font-style:italic\">as<\/span><span style=\"color:#FFCB6B\"> string<\/span><span style=\"color:#89DDFF\"> |<\/span><span style=\"color:#FFCB6B\"> undefined<\/span><span style=\"color:#89DDFF\">;<\/span><\/span>\n<span data-line=\"\"><span style=\"color:#89DDFF;font-style:italic\">  if<\/span><span style=\"color:#F07178\"> (<\/span><span style=\"color:#89DDFF\">!<\/span><span style=\"color:#EEFFFF\">sessionId<\/span><span style=\"color:#89DDFF\"> ||<\/span><span style=\"color:#89DDFF\"> !<\/span><span style=\"color:#EEFFFF\">transports<\/span><span style=\"color:#F07178\">[<\/span><span style=\"color:#EEFFFF\">sessionId<\/span><span style=\"color:#F07178\">]) <\/span><span style=\"color:#89DDFF\">{<\/span><\/span>\n<span data-line=\"\"><span style=\"color:#EEFFFF\">    res<\/span><span style=\"color:#89DDFF\">.<\/span><span style=\"color:#82AAFF\">status<\/span><span style=\"color:#F07178\">(<\/span><span style=\"color:#F78C6C\">400<\/span><span style=\"color:#F07178\">)<\/span><span style=\"color:#89DDFF\">.<\/span><span style=\"color:#82AAFF\">send<\/span><span style=\"color:#F07178\">(<\/span><span style=\"color:#89DDFF\">\"<\/span><span style=\"color:#C3E88D\">Invalid or missing session ID<\/span><span style=\"color:#89DDFF\">\"<\/span><span style=\"color:#F07178\">)<\/span><span style=\"color:#89DDFF\">;<\/span><\/span>\n<span data-line=\"\"><span style=\"color:#89DDFF;font-style:italic\">    return<\/span><span style=\"color:#89DDFF\">;<\/span><\/span>\n<span data-line=\"\"><span style=\"color:#89DDFF\">  }<\/span><\/span>\n<span data-line=\"\"><span style=\"color:#C792EA\">  const<\/span><span style=\"color:#EEFFFF\"> transport<\/span><span style=\"color:#89DDFF\"> =<\/span><span style=\"color:#EEFFFF\"> transports<\/span><span style=\"color:#F07178\">[<\/span><span style=\"color:#EEFFFF\">sessionId<\/span><span style=\"color:#F07178\">]<\/span><span style=\"color:#89DDFF\">;<\/span><\/span>\n<span data-line=\"\"><span style=\"color:#89DDFF;font-style:italic\">  await<\/span><span style=\"color:#EEFFFF\"> transport<\/span><span style=\"color:#89DDFF\">.<\/span><span style=\"color:#82AAFF\">handleRequest<\/span><span style=\"color:#F07178\">(<\/span><span style=\"color:#EEFFFF\">req<\/span><span style=\"color:#89DDFF\">,<\/span><span style=\"color:#EEFFFF\"> res<\/span><span style=\"color:#F07178\">)<\/span><span style=\"color:#89DDFF\">;<\/span><\/span>\n<span data-line=\"\"><span style=\"color:#89DDFF\">}<\/span><span style=\"color:#EEFFFF\">)<\/span><span style=\"color:#89DDFF\">;<\/span><\/span>\n<span data-line=\"\"> <\/span>\n<span data-line=\"\"><span style=\"color:#EEFFFF\">app<\/span><span style=\"color:#89DDFF\">.<\/span><span style=\"color:#82AAFF\">delete<\/span><span style=\"color:#EEFFFF\">(<\/span><span style=\"color:#89DDFF\">\"<\/span><span style=\"color:#C3E88D\">\/mcp<\/span><span style=\"color:#89DDFF\">\"<\/span><span style=\"color:#89DDFF\">,<\/span><span style=\"color:#C792EA\"> async<\/span><span style=\"color:#89DDFF\"> (<\/span><span style=\"color:#EEFFFF;font-style:italic\">req<\/span><span style=\"color:#89DDFF\">:<\/span><span style=\"color:#FFCB6B\"> Request<\/span><span style=\"color:#89DDFF\">,<\/span><span style=\"color:#EEFFFF;font-style:italic\"> res<\/span><span style=\"color:#89DDFF\">:<\/span><span style=\"color:#FFCB6B\"> Response<\/span><span style=\"color:#89DDFF\">)<\/span><span style=\"color:#C792EA\"> =&gt;<\/span><span style=\"color:#89DDFF\"> {<\/span><\/span>\n<span data-line=\"\"><span style=\"color:#C792EA\">  const<\/span><span style=\"color:#EEFFFF\"> sessionId<\/span><span style=\"color:#89DDFF\"> =<\/span><span style=\"color:#EEFFFF\"> req<\/span><span style=\"color:#89DDFF\">.<\/span><span style=\"color:#EEFFFF\">headers<\/span><span style=\"color:#F07178\">[<\/span><span style=\"color:#89DDFF\">\"<\/span><span style=\"color:#C3E88D\">mcp-session-id<\/span><span style=\"color:#89DDFF\">\"<\/span><span style=\"color:#F07178\">] <\/span><span style=\"color:#89DDFF;font-style:italic\">as<\/span><span style=\"color:#FFCB6B\"> string<\/span><span style=\"color:#89DDFF\"> |<\/span><span style=\"color:#FFCB6B\"> undefined<\/span><span style=\"color:#89DDFF\">;<\/span><\/span>\n<span data-line=\"\"><span style=\"color:#89DDFF;font-style:italic\">  if<\/span><span style=\"color:#F07178\"> (<\/span><span style=\"color:#89DDFF\">!<\/span><span style=\"color:#EEFFFF\">sessionId<\/span><span style=\"color:#89DDFF\"> ||<\/span><span style=\"color:#89DDFF\"> !<\/span><span style=\"color:#EEFFFF\">transports<\/span><span style=\"color:#F07178\">[<\/span><span style=\"color:#EEFFFF\">sessionId<\/span><span style=\"color:#F07178\">]) <\/span><span style=\"color:#89DDFF\">{<\/span><\/span>\n<span data-line=\"\"><span style=\"color:#EEFFFF\">    res<\/span><span style=\"color:#89DDFF\">.<\/span><span style=\"color:#82AAFF\">status<\/span><span style=\"color:#F07178\">(<\/span><span style=\"color:#F78C6C\">400<\/span><span style=\"color:#F07178\">)<\/span><span style=\"color:#89DDFF\">.<\/span><span style=\"color:#82AAFF\">send<\/span><span style=\"color:#F07178\">(<\/span><span style=\"color:#89DDFF\">\"<\/span><span style=\"color:#C3E88D\">Invalid or missing session ID<\/span><span style=\"color:#89DDFF\">\"<\/span><span style=\"color:#F07178\">)<\/span><span style=\"color:#89DDFF\">;<\/span><\/span>\n<span data-line=\"\"><span style=\"color:#89DDFF;font-style:italic\">    return<\/span><span style=\"color:#89DDFF\">;<\/span><\/span>\n<span data-line=\"\"><span style=\"color:#89DDFF\">  }<\/span><\/span>\n<span data-line=\"\"><span style=\"color:#89DDFF;font-style:italic\">  try<\/span><span style=\"color:#89DDFF\"> {<\/span><\/span>\n<span data-line=\"\"><span style=\"color:#C792EA\">    const<\/span><span style=\"color:#EEFFFF\"> transport<\/span><span style=\"color:#89DDFF\"> =<\/span><span style=\"color:#EEFFFF\"> transports<\/span><span style=\"color:#F07178\">[<\/span><span style=\"color:#EEFFFF\">sessionId<\/span><span style=\"color:#F07178\">]<\/span><span style=\"color:#89DDFF\">;<\/span><\/span>\n<span data-line=\"\"><span style=\"color:#89DDFF;font-style:italic\">    await<\/span><span style=\"color:#EEFFFF\"> transport<\/span><span style=\"color:#89DDFF\">.<\/span><span style=\"color:#82AAFF\">handleRequest<\/span><span style=\"color:#F07178\">(<\/span><span style=\"color:#EEFFFF\">req<\/span><span style=\"color:#89DDFF\">,<\/span><span style=\"color:#EEFFFF\"> res<\/span><span style=\"color:#F07178\">)<\/span><span style=\"color:#89DDFF\">;<\/span><\/span>\n<span data-line=\"\"><span style=\"color:#89DDFF\">  }<\/span><span style=\"color:#89DDFF;font-style:italic\"> catch<\/span><span style=\"color:#F07178\"> (<\/span><span style=\"color:#EEFFFF\">error<\/span><span style=\"color:#F07178\">) <\/span><span style=\"color:#89DDFF\">{<\/span><\/span>\n<span data-line=\"\"><span style=\"color:#EEFFFF\">    console<\/span><span style=\"color:#89DDFF\">.<\/span><span style=\"color:#82AAFF\">error<\/span><span style=\"color:#F07178\">(<\/span><span style=\"color:#89DDFF\">\"<\/span><span style=\"color:#C3E88D\">Error handling session termination:<\/span><span style=\"color:#89DDFF\">\"<\/span><span style=\"color:#89DDFF\">,<\/span><span style=\"color:#EEFFFF\"> error<\/span><span style=\"color:#F07178\">)<\/span><span style=\"color:#89DDFF\">;<\/span><\/span>\n<span data-line=\"\"><span style=\"color:#89DDFF;font-style:italic\">    if<\/span><span style=\"color:#F07178\"> (<\/span><span style=\"color:#89DDFF\">!<\/span><span style=\"color:#EEFFFF\">res<\/span><span style=\"color:#89DDFF\">.<\/span><span style=\"color:#EEFFFF\">headersSent<\/span><span style=\"color:#F07178\">) <\/span><span style=\"color:#89DDFF\">{<\/span><\/span>\n<span data-line=\"\"><span style=\"color:#EEFFFF\">      res<\/span><span style=\"color:#89DDFF\">.<\/span><span style=\"color:#82AAFF\">status<\/span><span style=\"color:#F07178\">(<\/span><span style=\"color:#F78C6C\">500<\/span><span style=\"color:#F07178\">)<\/span><span style=\"color:#89DDFF\">.<\/span><span style=\"color:#82AAFF\">send<\/span><span style=\"color:#F07178\">(<\/span><span style=\"color:#89DDFF\">\"<\/span><span style=\"color:#C3E88D\">Error processing session termination<\/span><span style=\"color:#89DDFF\">\"<\/span><span style=\"color:#F07178\">)<\/span><span style=\"color:#89DDFF\">;<\/span><\/span>\n<span data-line=\"\"><span style=\"color:#89DDFF\">    }<\/span><\/span>\n<span data-line=\"\"><span style=\"color:#89DDFF\">  }<\/span><\/span>\n<span data-line=\"\"><span style=\"color:#89DDFF\">}<\/span><span style=\"color:#EEFFFF\">)<\/span><span style=\"color:#89DDFF\">;<\/span><\/span>\n<span data-line=\"\"> <\/span>\n<span data-line=\"\"><span style=\"color:#C792EA\">const<\/span><span style=\"color:#EEFFFF\"> PORT <\/span><span style=\"color:#89DDFF\">=<\/span><span style=\"color:#EEFFFF\"> process<\/span><span style=\"color:#89DDFF\">.<\/span><span style=\"color:#EEFFFF\">env<\/span><span style=\"color:#89DDFF\">.<\/span><span style=\"color:#EEFFFF\">PORT <\/span><span style=\"color:#89DDFF\">?<\/span><span style=\"color:#82AAFF\"> parseInt<\/span><span style=\"color:#EEFFFF\">(process<\/span><span style=\"color:#89DDFF\">.<\/span><span style=\"color:#EEFFFF\">env<\/span><span style=\"color:#89DDFF\">.<\/span><span style=\"color:#EEFFFF\">PORT) <\/span><span style=\"color:#89DDFF\">:<\/span><span style=\"color:#F78C6C\"> 3000<\/span><span style=\"color:#89DDFF\">;<\/span><\/span>\n<span data-line=\"\"> <\/span>\n<span data-line=\"\"><span style=\"color:#EEFFFF\">app<\/span><span style=\"color:#89DDFF\">.<\/span><span style=\"color:#82AAFF\">listen<\/span><span style=\"color:#EEFFFF\">(PORT<\/span><span style=\"color:#89DDFF\">,<\/span><span style=\"color:#89DDFF\"> ()<\/span><span style=\"color:#C792EA\"> =&gt;<\/span><span style=\"color:#89DDFF\"> {<\/span><\/span>\n<span data-line=\"\"><span style=\"color:#EEFFFF\">  console<\/span><span style=\"color:#89DDFF\">.<\/span><span style=\"color:#82AAFF\">log<\/span><span style=\"color:#F07178\">(<\/span><span style=\"color:#89DDFF\">`<\/span><span style=\"color:#C3E88D\">MCP Server listening on http:\/\/localhost:<\/span><span style=\"color:#89DDFF\">${<\/span><span style=\"color:#EEFFFF\">PORT<\/span><span style=\"color:#89DDFF\">}<\/span><span style=\"color:#C3E88D\">\/mcp<\/span><span style=\"color:#89DDFF\">`<\/span><span style=\"color:#F07178\">)<\/span><span style=\"color:#89DDFF\">;<\/span><\/span>\n<span data-line=\"\"><span style=\"color:#89DDFF\">}<\/span><span style=\"color:#EEFFFF\">)<\/span><span style=\"color:#89DDFF\">;<\/span><\/span><\/code><\/pre>\n<\/figure>\n<p><code>npm run server<\/code> \u30b3\u30de\u30f3\u30c9\u3092\u5b9f\u884c\u3057\u3066 MCP \u30b5\u30fc\u30d0\u30fc\u3092\u8d77\u52d5\u3057\u307e\u3059\u3002<\/p>\n<figure data-rehype-pretty-code-figure=\"\">\n<pre style=\"background-color:#212121;color:#EEFFFF\" tabindex=\"0\" data-language=\"bash\" data-theme=\"material-theme-darker\"><code data-language=\"bash\" data-theme=\"material-theme-darker\" style=\"display: grid;\"><span data-line=\"\"><span style=\"color:#FFCB6B\">$<\/span><span style=\"color:#C3E88D\"> npm<\/span><span style=\"color:#C3E88D\"> run<\/span><span style=\"color:#C3E88D\"> start<\/span><\/span>\n<span data-line=\"\"> <\/span>\n<span data-line=\"\"><span style=\"color:#89DDFF\">&gt;<\/span><span style=\"color:#EEFFFF\"> <a target=\"_blank\" href=\"https:\/\/azukiazusa.dev\/cdn-cgi\/l\/email-protection\" class=\"__cf_email__\" data-cfemail=\"55383625783425252678302d343825393015647b657b65\">[email\u00a0protected]<\/a> server<\/span><\/span>\n<span data-line=\"\"><span style=\"color:#89DDFF\">&gt;<\/span><span style=\"color:#EEFFFF\"> tsx server.ts<\/span><\/span>\n<span data-line=\"\"> <\/span>\n<span data-line=\"\"><span style=\"color:#FFCB6B\">MCP<\/span><span style=\"color:#C3E88D\"> Server<\/span><span style=\"color:#C3E88D\"> listening<\/span><span style=\"color:#C3E88D\"> on<\/span><span style=\"color:#C3E88D\"> http:\/\/localhost:3000\/mcp<\/span><\/span><\/code><\/pre>\n<\/figure>\n<p><code>@modelcontextprotocol\/inspector<\/code> \u3092\u4f7f\u7528\u3057\u3066 MCP \u30b5\u30fc\u30d0\u30fc\u306e\u5b9f\u88c5\u3092\u30c6\u30b9\u30c8\u3057\u307e\u3059\u3002<\/p>\n<figure data-rehype-pretty-code-figure=\"\">\n<pre style=\"background-color:#212121;color:#EEFFFF\" tabindex=\"0\" data-language=\"bash\" data-theme=\"material-theme-darker\"><code data-language=\"bash\" data-theme=\"material-theme-darker\" style=\"display: grid;\"><span data-line=\"\"><span style=\"color:#FFCB6B\">npx<\/span><span style=\"color:#C3E88D\"> @modelcontextprotocol\/inspector<\/span><\/span><\/code><\/pre>\n<\/figure>\n<p>\u30ea\u30bd\u30fc\u30b9\u30bf\u30d6\u3067 <code>ui:\/\/example\/ui-react<\/code> \u30ea\u30bd\u30fc\u30b9\u304c\u767b\u9332\u3055\u308c\u3066\u3044\u308b\u3053\u3068\u3092\u3001\u30c4\u30fc\u30eb\u30bf\u30d6\u3067 <code>create-react-ui<\/code> \u30c4\u30fc\u30eb\u304c\u767b\u9332\u3055\u308c\u3066\u3044\u308b\u3053\u3068\u3092\u78ba\u8a8d\u3057\u307e\u3059\u3002<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/images.ctfassets.net\/in6v9lxmm5c8\/3hp8ZE71j3hk3ZQUAR1Fug\/7a3a1d0bf7bd3a56c38f8a9b7d2e1e24\/%C3%A3__%C3%A3__%C3%A3_%C2%AA%C3%A3__%C3%A3__%C3%A3__%C3%A3__%C3%A3__%C3%A3___2025-11-22_18.26.54.png?q=50&amp;fm=webp\" alt=\"\" loading=\"lazy\" srcset=\"https:\/\/images.ctfassets.net\/in6v9lxmm5c8\/3hp8ZE71j3hk3ZQUAR1Fug\/7a3a1d0bf7bd3a56c38f8a9b7d2e1e24\/%C3%A3__%C3%A3__%C3%A3_%C2%AA%C3%A3__%C3%A3__%C3%A3__%C3%A3__%C3%A3__%C3%A3___2025-11-22_18.26.54.png?q=50&amp;fm=webp&amp;w=100 100w,https:\/\/images.ctfassets.net\/in6v9lxmm5c8\/3hp8ZE71j3hk3ZQUAR1Fug\/7a3a1d0bf7bd3a56c38f8a9b7d2e1e24\/%C3%A3__%C3%A3__%C3%A3_%C2%AA%C3%A3__%C3%A3__%C3%A3__%C3%A3__%C3%A3__%C3%A3___2025-11-22_18.26.54.png?q=50&amp;fm=webp&amp;w=200 200w,https:\/\/images.ctfassets.net\/in6v9lxmm5c8\/3hp8ZE71j3hk3ZQUAR1Fug\/7a3a1d0bf7bd3a56c38f8a9b7d2e1e24\/%C3%A3__%C3%A3__%C3%A3_%C2%AA%C3%A3__%C3%A3__%C3%A3__%C3%A3__%C3%A3__%C3%A3___2025-11-22_18.26.54.png?q=50&amp;fm=webp&amp;w=300 300w,https:\/\/images.ctfassets.net\/in6v9lxmm5c8\/3hp8ZE71j3hk3ZQUAR1Fug\/7a3a1d0bf7bd3a56c38f8a9b7d2e1e24\/%C3%A3__%C3%A3__%C3%A3_%C2%AA%C3%A3__%C3%A3__%C3%A3__%C3%A3__%C3%A3__%C3%A3___2025-11-22_18.26.54.png?q=50&amp;fm=webp&amp;w=400 400w,https:\/\/images.ctfassets.net\/in6v9lxmm5c8\/3hp8ZE71j3hk3ZQUAR1Fug\/7a3a1d0bf7bd3a56c38f8a9b7d2e1e24\/%C3%A3__%C3%A3__%C3%A3_%C2%AA%C3%A3__%C3%A3__%C3%A3__%C3%A3__%C3%A3__%C3%A3___2025-11-22_18.26.54.png?q=50&amp;fm=webp&amp;w=500 500w,https:\/\/images.ctfassets.net\/in6v9lxmm5c8\/3hp8ZE71j3hk3ZQUAR1Fug\/7a3a1d0bf7bd3a56c38f8a9b7d2e1e24\/%C3%A3__%C3%A3__%C3%A3_%C2%AA%C3%A3__%C3%A3__%C3%A3__%C3%A3__%C3%A3__%C3%A3___2025-11-22_18.26.54.png?q=50&amp;fm=webp&amp;w=600 600w,https:\/\/images.ctfassets.net\/in6v9lxmm5c8\/3hp8ZE71j3hk3ZQUAR1Fug\/7a3a1d0bf7bd3a56c38f8a9b7d2e1e24\/%C3%A3__%C3%A3__%C3%A3_%C2%AA%C3%A3__%C3%A3__%C3%A3__%C3%A3__%C3%A3__%C3%A3___2025-11-22_18.26.54.png?q=50&amp;fm=webp&amp;w=700 700w,https:\/\/images.ctfassets.net\/in6v9lxmm5c8\/3hp8ZE71j3hk3ZQUAR1Fug\/7a3a1d0bf7bd3a56c38f8a9b7d2e1e24\/%C3%A3__%C3%A3__%C3%A3_%C2%AA%C3%A3__%C3%A3__%C3%A3__%C3%A3__%C3%A3__%C3%A3___2025-11-22_18.26.54.png?q=50&amp;fm=webp&amp;w=800 800w,https:\/\/images.ctfassets.net\/in6v9lxmm5c8\/3hp8ZE71j3hk3ZQUAR1Fug\/7a3a1d0bf7bd3a56c38f8a9b7d2e1e24\/%C3%A3__%C3%A3__%C3%A3_%C2%AA%C3%A3__%C3%A3__%C3%A3__%C3%A3__%C3%A3__%C3%A3___2025-11-22_18.26.54.png?q=50&amp;fm=webp&amp;w=900 900w,https:\/\/images.ctfassets.net\/in6v9lxmm5c8\/3hp8ZE71j3hk3ZQUAR1Fug\/7a3a1d0bf7bd3a56c38f8a9b7d2e1e24\/%C3%A3__%C3%A3__%C3%A3_%C2%AA%C3%A3__%C3%A3__%C3%A3__%C3%A3__%C3%A3__%C3%A3___2025-11-22_18.26.54.png?q=50&amp;fm=webp&amp;w=1000 1000w,https:\/\/images.ctfassets.net\/in6v9lxmm5c8\/3hp8ZE71j3hk3ZQUAR1Fug\/7a3a1d0bf7bd3a56c38f8a9b7d2e1e24\/%C3%A3__%C3%A3__%C3%A3_%C2%AA%C3%A3__%C3%A3__%C3%A3__%C3%A3__%C3%A3__%C3%A3___2025-11-22_18.26.54.png?q=50&amp;fm=webp&amp;w=1100 1100w,https:\/\/images.ctfassets.net\/in6v9lxmm5c8\/3hp8ZE71j3hk3ZQUAR1Fug\/7a3a1d0bf7bd3a56c38f8a9b7d2e1e24\/%C3%A3__%C3%A3__%C3%A3_%C2%AA%C3%A3__%C3%A3__%C3%A3__%C3%A3__%C3%A3__%C3%A3___2025-11-22_18.26.54.png?q=50&amp;fm=webp&amp;w=1200 1200w\" sizes=\"(max-width: 1024px) 100vw, 1024px\"\/><\/p>\n<p><img decoding=\"async\" src=\"https:\/\/images.ctfassets.net\/in6v9lxmm5c8\/522nWJp9cpiT2AvbG5aA0i\/e72c3e370bdefd4bf978c1f13866a677\/%C3%A3__%C3%A3__%C3%A3_%C2%AA%C3%A3__%C3%A3__%C3%A3__%C3%A3__%C3%A3__%C3%A3___2025-11-22_18.27.15.png?q=50&amp;fm=webp\" alt=\"\" loading=\"lazy\" srcset=\"https:\/\/images.ctfassets.net\/in6v9lxmm5c8\/522nWJp9cpiT2AvbG5aA0i\/e72c3e370bdefd4bf978c1f13866a677\/%C3%A3__%C3%A3__%C3%A3_%C2%AA%C3%A3__%C3%A3__%C3%A3__%C3%A3__%C3%A3__%C3%A3___2025-11-22_18.27.15.png?q=50&amp;fm=webp&amp;w=100 100w,https:\/\/images.ctfassets.net\/in6v9lxmm5c8\/522nWJp9cpiT2AvbG5aA0i\/e72c3e370bdefd4bf978c1f13866a677\/%C3%A3__%C3%A3__%C3%A3_%C2%AA%C3%A3__%C3%A3__%C3%A3__%C3%A3__%C3%A3__%C3%A3___2025-11-22_18.27.15.png?q=50&amp;fm=webp&amp;w=200 200w,https:\/\/images.ctfassets.net\/in6v9lxmm5c8\/522nWJp9cpiT2AvbG5aA0i\/e72c3e370bdefd4bf978c1f13866a677\/%C3%A3__%C3%A3__%C3%A3_%C2%AA%C3%A3__%C3%A3__%C3%A3__%C3%A3__%C3%A3__%C3%A3___2025-11-22_18.27.15.png?q=50&amp;fm=webp&amp;w=300 300w,https:\/\/images.ctfassets.net\/in6v9lxmm5c8\/522nWJp9cpiT2AvbG5aA0i\/e72c3e370bdefd4bf978c1f13866a677\/%C3%A3__%C3%A3__%C3%A3_%C2%AA%C3%A3__%C3%A3__%C3%A3__%C3%A3__%C3%A3__%C3%A3___2025-11-22_18.27.15.png?q=50&amp;fm=webp&amp;w=400 400w,https:\/\/images.ctfassets.net\/in6v9lxmm5c8\/522nWJp9cpiT2AvbG5aA0i\/e72c3e370bdefd4bf978c1f13866a677\/%C3%A3__%C3%A3__%C3%A3_%C2%AA%C3%A3__%C3%A3__%C3%A3__%C3%A3__%C3%A3__%C3%A3___2025-11-22_18.27.15.png?q=50&amp;fm=webp&amp;w=500 500w,https:\/\/images.ctfassets.net\/in6v9lxmm5c8\/522nWJp9cpiT2AvbG5aA0i\/e72c3e370bdefd4bf978c1f13866a677\/%C3%A3__%C3%A3__%C3%A3_%C2%AA%C3%A3__%C3%A3__%C3%A3__%C3%A3__%C3%A3__%C3%A3___2025-11-22_18.27.15.png?q=50&amp;fm=webp&amp;w=600 600w,https:\/\/images.ctfassets.net\/in6v9lxmm5c8\/522nWJp9cpiT2AvbG5aA0i\/e72c3e370bdefd4bf978c1f13866a677\/%C3%A3__%C3%A3__%C3%A3_%C2%AA%C3%A3__%C3%A3__%C3%A3__%C3%A3__%C3%A3__%C3%A3___2025-11-22_18.27.15.png?q=50&amp;fm=webp&amp;w=700 700w,https:\/\/images.ctfassets.net\/in6v9lxmm5c8\/522nWJp9cpiT2AvbG5aA0i\/e72c3e370bdefd4bf978c1f13866a677\/%C3%A3__%C3%A3__%C3%A3_%C2%AA%C3%A3__%C3%A3__%C3%A3__%C3%A3__%C3%A3__%C3%A3___2025-11-22_18.27.15.png?q=50&amp;fm=webp&amp;w=800 800w,https:\/\/images.ctfassets.net\/in6v9lxmm5c8\/522nWJp9cpiT2AvbG5aA0i\/e72c3e370bdefd4bf978c1f13866a677\/%C3%A3__%C3%A3__%C3%A3_%C2%AA%C3%A3__%C3%A3__%C3%A3__%C3%A3__%C3%A3__%C3%A3___2025-11-22_18.27.15.png?q=50&amp;fm=webp&amp;w=900 900w,https:\/\/images.ctfassets.net\/in6v9lxmm5c8\/522nWJp9cpiT2AvbG5aA0i\/e72c3e370bdefd4bf978c1f13866a677\/%C3%A3__%C3%A3__%C3%A3_%C2%AA%C3%A3__%C3%A3__%C3%A3__%C3%A3__%C3%A3__%C3%A3___2025-11-22_18.27.15.png?q=50&amp;fm=webp&amp;w=1000 1000w,https:\/\/images.ctfassets.net\/in6v9lxmm5c8\/522nWJp9cpiT2AvbG5aA0i\/e72c3e370bdefd4bf978c1f13866a677\/%C3%A3__%C3%A3__%C3%A3_%C2%AA%C3%A3__%C3%A3__%C3%A3__%C3%A3__%C3%A3__%C3%A3___2025-11-22_18.27.15.png?q=50&amp;fm=webp&amp;w=1100 1100w,https:\/\/images.ctfassets.net\/in6v9lxmm5c8\/522nWJp9cpiT2AvbG5aA0i\/e72c3e370bdefd4bf978c1f13866a677\/%C3%A3__%C3%A3__%C3%A3_%C2%AA%C3%A3__%C3%A3__%C3%A3__%C3%A3__%C3%A3__%C3%A3___2025-11-22_18.27.15.png?q=50&amp;fm=webp&amp;w=1200 1200w\" sizes=\"(max-width: 1024px) 100vw, 1024px\"\/><\/p>\n<p>2025-11-22 \u6642\u70b9\u3067\u306f MCP Apps \u3092\u30b5\u30dd\u30fc\u30c8\u3059\u308b\u30db\u30b9\u30c8\u5b9f\u88c5\u306f\u307e\u3060\u5b58\u5728\u3057\u306a\u3044\u305f\u3081 UI \u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u3092\u5b9f\u969b\u306b\u8868\u793a\u3067\u304d\u307e\u305b\u3093\u304c MCP-UI \u3067\u306f<a target=\"_blank\" href=\"https:\/\/github.com\/MCP-UI-Org\/mcp-ui\/pull\/147\">\u66ab\u5b9a\u7684\u306a\u5b9f\u88c5<\/a>\u304c\u884c\u308f\u308c\u3066\u3044\u308b\u3088\u3046\u3067\u3059\u3002<\/p>\n<h2 id=\"\u307e\u3068\u3081\"><a target=\"_blank\" aria-hidden=\"true\" tabindex=\"-1\" href=\"#\u307e\u3068\u3081\"><span class=\"icon icon-link\"\/><\/a>\u307e\u3068\u3081<\/h2>\n<ul>\n<li>ChatGPT \u306e Apps SDK \u3084 MCP-UI \u306e\u3088\u3046\u306b\u3001AI \u30a8\u30fc\u30b8\u30a7\u30f3\u30c8\u304c\u30a4\u30f3\u30bf\u30e9\u30af\u30c6\u30a3\u30d6\u306a UI \u3092\u8fd4\u3059\u4ed5\u7d44\u307f\u304c\u6ce8\u76ee\u3055\u308c\u3066\u3044\u308b<\/li>\n<li>MCP Apps \u306f MCP \u306e\u62e1\u5f35\u6a5f\u80fd\u3068\u3057\u3066\u3001<code>ui:\/\/<\/code> URI \u30b9\u30ad\u30fc\u30e0\u3092\u4f7f\u7528\u3057\u305f UI \u30ea\u30bd\u30fc\u30b9\u306e\u5ba3\u8a00\u3068\u30c4\u30fc\u30eb\u3068\u306e\u95a2\u9023\u4ed8\u3051\u3092\u6a19\u6e96\u5316\u3059\u308b<\/li>\n<li>JSON-RPC \u3092\u4f7f\u7528\u3057\u305f\u30db\u30b9\u30c8\u3068 iframe \u9593\u306e\u53cc\u65b9\u5411\u901a\u4fe1\u306b\u3088\u308a\u3001UI \u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u304c\u30c4\u30fc\u30eb\u306e\u547c\u3073\u51fa\u3057\u3084\u5916\u90e8\u30ea\u30f3\u30af\u306e\u30aa\u30fc\u30d7\u30f3\u306a\u3069\u3092\u884c\u3048\u308b<\/li>\n<li><code>@modelcontextprotocol\/ext-apps<\/code> SDK \u3092\u4f7f\u7528\u3059\u308b\u3053\u3068\u3067\u3001React \u306a\u3069\u306e\u30d5\u30ec\u30fc\u30e0\u30ef\u30fc\u30af\u3092\u7528\u3044\u305f UI \u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u306e\u5b9f\u88c5\u304c\u53ef\u80fd<\/li>\n<li>2025-11-22 \u6642\u70b9\u3067\u306f MCP Apps \u3092\u30b5\u30dd\u30fc\u30c8\u3059\u308b\u30db\u30b9\u30c8\u5b9f\u88c5\u306f\u307e\u3060\u5b58\u5728\u3057\u306a\u3044\u304c\u3001\u4eca\u5f8c\u306e\u666e\u53ca\u304c\u671f\u5f85\u3055\u308c\u308b<\/li>\n<\/ul>\n<h2 id=\"\u53c2\u8003\"><a target=\"_blank\" aria-hidden=\"true\" tabindex=\"-1\" href=\"#\u53c2\u8003\"><span class=\"icon icon-link\"\/><\/a>\u53c2\u8003<\/h2>\n<\/div>\n\n<br \/><a href=\"https:\/\/azukiazusa.dev\/blog\/mcp-standard-ui-extension\/\">\u5143\u306e\u8a18\u4e8b\u3092\u78ba\u8a8d\u3059\u308b <\/a><\/p>\n","protected":false},"excerpt":{"rendered":"ChatGPT \u306e Apps SDK \u3084 MCP-UI \u306e\u3088\u3046\u306b AI \u30a8\u30fc\u30b8\u30a7\u30f3\u30c8\u304c\u30c1\u30e3\u30c3\u30c8\u5f62\u5f0f\u306e\u5bfe\u8a71\u3060\u3051\u3067\u306a\u304f\u3001\u30a4\u30f3\u30bf\u30e9\u30af\u30c6\u30a3\u30d6\u306a UI \u3092\u901a\u3058\u3066\u30e6\u30fc\u30b6\u30fc\u3068\u3084\u308a\u53d6\u308a\u3067\u304d\u308b\u4ed5\u7d44\u307f\u304c\u6ce8\u76ee\u3055\u308c\u3066\u3044\u307e\u3059\u3002AI \u30a8\u30fc\u30b8\u30a7\u30f3\u30c8\u304c [&hellip;]","protected":false},"author":1,"featured_media":24783,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[2],"tags":[],"class_list":["post-24782","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-hatena-blog"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.6 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>MCP \u306b\u304a\u3051\u308b\u30a4\u30f3\u30bf\u30e9\u30af\u30c6\u30a3\u30d6\u306a UI \u3092\u6a19\u6e96\u5316\u3059\u308b\u62e1\u5f35\u6a5f\u80fd MCP Apps \u306e\u63d0\u6848 - \u30dd\u30b1\u30b3\u30f3<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/azukiazusa.dev\/blog\/mcp-standard-ui-extension\/\" \/>\n<meta property=\"og:locale\" content=\"ja_JP\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"MCP \u306b\u304a\u3051\u308b\u30a4\u30f3\u30bf\u30e9\u30af\u30c6\u30a3\u30d6\u306a UI \u3092\u6a19\u6e96\u5316\u3059\u308b\u62e1\u5f35\u6a5f\u80fd MCP Apps \u306e\u63d0\u6848 - \u30dd\u30b1\u30b3\u30f3\" \/>\n<meta property=\"og:description\" content=\"ChatGPT \u306e Apps SDK \u3084 MCP-UI \u306e\u3088\u3046\u306b AI \u30a8\u30fc\u30b8\u30a7\u30f3\u30c8\u304c\u30c1\u30e3\u30c3\u30c8\u5f62\u5f0f\u306e\u5bfe\u8a71\u3060\u3051\u3067\u306a\u304f\u3001\u30a4\u30f3\u30bf\u30e9\u30af\u30c6\u30a3\u30d6\u306a UI \u3092\u901a\u3058\u3066\u30e6\u30fc\u30b6\u30fc\u3068\u3084\u308a\u53d6\u308a\u3067\u304d\u308b\u4ed5\u7d44\u307f\u304c\u6ce8\u76ee\u3055\u308c\u3066\u3044\u307e\u3059\u3002AI \u30a8\u30fc\u30b8\u30a7\u30f3\u30c8\u304c [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/azukiazusa.dev\/blog\/mcp-standard-ui-extension\/\" \/>\n<meta property=\"og:site_name\" content=\"\u30dd\u30b1\u30b3\u30f3\" \/>\n<meta property=\"article:published_time\" content=\"2025-11-22T20:31:21+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/pokecon.jp\/job\/wp-content\/uploads\/2025\/11\/mcp-standard-ui-extension.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"630\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"info@pokecon.jp\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"\u57f7\u7b46\u8005\" \/>\n\t<meta name=\"twitter:data1\" content=\"info@pokecon.jp\" \/>\n\t<meta name=\"twitter:label2\" content=\"\u63a8\u5b9a\u8aad\u307f\u53d6\u308a\u6642\u9593\" \/>\n\t<meta name=\"twitter:data2\" content=\"8\u5206\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/azukiazusa.dev\\\/blog\\\/mcp-standard-ui-extension\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/pokecon.jp\\\/job\\\/24782\\\/\"},\"author\":{\"name\":\"info@pokecon.jp\",\"@id\":\"https:\\\/\\\/pokecon.jp\\\/job\\\/#\\\/schema\\\/person\\\/16c9f07b1ba984d165d9aee259bda997\"},\"headline\":\"MCP \u306b\u304a\u3051\u308b\u30a4\u30f3\u30bf\u30e9\u30af\u30c6\u30a3\u30d6\u306a UI \u3092\u6a19\u6e96\u5316\u3059\u308b\u62e1\u5f35\u6a5f\u80fd MCP Apps \u306e\u63d0\u6848\",\"datePublished\":\"2025-11-22T20:31:21+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/pokecon.jp\\\/job\\\/24782\\\/\"},\"wordCount\":206,\"image\":{\"@id\":\"https:\\\/\\\/azukiazusa.dev\\\/blog\\\/mcp-standard-ui-extension\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/pokecon.jp\\\/job\\\/wp-content\\\/uploads\\\/2025\\\/11\\\/mcp-standard-ui-extension.png\",\"articleSection\":[\"\u306f\u3066\u306a\u30d6\u30ed\u30b0\"],\"inLanguage\":\"ja\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/pokecon.jp\\\/job\\\/24782\\\/\",\"url\":\"https:\\\/\\\/azukiazusa.dev\\\/blog\\\/mcp-standard-ui-extension\\\/\",\"name\":\"MCP \u306b\u304a\u3051\u308b\u30a4\u30f3\u30bf\u30e9\u30af\u30c6\u30a3\u30d6\u306a UI \u3092\u6a19\u6e96\u5316\u3059\u308b\u62e1\u5f35\u6a5f\u80fd MCP Apps \u306e\u63d0\u6848 - \u30dd\u30b1\u30b3\u30f3\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/pokecon.jp\\\/job\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/azukiazusa.dev\\\/blog\\\/mcp-standard-ui-extension\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/azukiazusa.dev\\\/blog\\\/mcp-standard-ui-extension\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/pokecon.jp\\\/job\\\/wp-content\\\/uploads\\\/2025\\\/11\\\/mcp-standard-ui-extension.png\",\"datePublished\":\"2025-11-22T20:31:21+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/pokecon.jp\\\/job\\\/#\\\/schema\\\/person\\\/16c9f07b1ba984d165d9aee259bda997\"},\"breadcrumb\":{\"@id\":\"https:\\\/\\\/azukiazusa.dev\\\/blog\\\/mcp-standard-ui-extension\\\/#breadcrumb\"},\"inLanguage\":\"ja\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/azukiazusa.dev\\\/blog\\\/mcp-standard-ui-extension\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"ja\",\"@id\":\"https:\\\/\\\/azukiazusa.dev\\\/blog\\\/mcp-standard-ui-extension\\\/#primaryimage\",\"url\":\"https:\\\/\\\/pokecon.jp\\\/job\\\/wp-content\\\/uploads\\\/2025\\\/11\\\/mcp-standard-ui-extension.png\",\"contentUrl\":\"https:\\\/\\\/pokecon.jp\\\/job\\\/wp-content\\\/uploads\\\/2025\\\/11\\\/mcp-standard-ui-extension.png\",\"width\":1200,\"height\":630},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/azukiazusa.dev\\\/blog\\\/mcp-standard-ui-extension\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"\u30db\u30fc\u30e0\",\"item\":\"https:\\\/\\\/pokecon.jp\\\/job\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"MCP \u306b\u304a\u3051\u308b\u30a4\u30f3\u30bf\u30e9\u30af\u30c6\u30a3\u30d6\u306a UI \u3092\u6a19\u6e96\u5316\u3059\u308b\u62e1\u5f35\u6a5f\u80fd MCP Apps \u306e\u63d0\u6848\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/pokecon.jp\\\/job\\\/#website\",\"url\":\"https:\\\/\\\/pokecon.jp\\\/job\\\/\",\"name\":\"\u30dd\u30b1\u30b3\u30f3\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/pokecon.jp\\\/job\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"ja\"},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/pokecon.jp\\\/job\\\/#\\\/schema\\\/person\\\/16c9f07b1ba984d165d9aee259bda997\",\"name\":\"info@pokecon.jp\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"ja\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/2b0549cd9f7907c092ca5fbb283baf72337f235726e4b46fa39ec0b701ac2fe2?s=96&d=wavatar&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/2b0549cd9f7907c092ca5fbb283baf72337f235726e4b46fa39ec0b701ac2fe2?s=96&d=wavatar&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/2b0549cd9f7907c092ca5fbb283baf72337f235726e4b46fa39ec0b701ac2fe2?s=96&d=wavatar&r=g\",\"caption\":\"info@pokecon.jp\"},\"url\":\"https:\\\/\\\/pokecon.jp\\\/job\\\/author\\\/infopokecon-jp\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"MCP \u306b\u304a\u3051\u308b\u30a4\u30f3\u30bf\u30e9\u30af\u30c6\u30a3\u30d6\u306a UI \u3092\u6a19\u6e96\u5316\u3059\u308b\u62e1\u5f35\u6a5f\u80fd MCP Apps \u306e\u63d0\u6848 - \u30dd\u30b1\u30b3\u30f3","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/azukiazusa.dev\/blog\/mcp-standard-ui-extension\/","og_locale":"ja_JP","og_type":"article","og_title":"MCP \u306b\u304a\u3051\u308b\u30a4\u30f3\u30bf\u30e9\u30af\u30c6\u30a3\u30d6\u306a UI \u3092\u6a19\u6e96\u5316\u3059\u308b\u62e1\u5f35\u6a5f\u80fd MCP Apps \u306e\u63d0\u6848 - \u30dd\u30b1\u30b3\u30f3","og_description":"ChatGPT \u306e Apps SDK \u3084 MCP-UI \u306e\u3088\u3046\u306b AI \u30a8\u30fc\u30b8\u30a7\u30f3\u30c8\u304c\u30c1\u30e3\u30c3\u30c8\u5f62\u5f0f\u306e\u5bfe\u8a71\u3060\u3051\u3067\u306a\u304f\u3001\u30a4\u30f3\u30bf\u30e9\u30af\u30c6\u30a3\u30d6\u306a UI \u3092\u901a\u3058\u3066\u30e6\u30fc\u30b6\u30fc\u3068\u3084\u308a\u53d6\u308a\u3067\u304d\u308b\u4ed5\u7d44\u307f\u304c\u6ce8\u76ee\u3055\u308c\u3066\u3044\u307e\u3059\u3002AI \u30a8\u30fc\u30b8\u30a7\u30f3\u30c8\u304c [&hellip;]","og_url":"https:\/\/azukiazusa.dev\/blog\/mcp-standard-ui-extension\/","og_site_name":"\u30dd\u30b1\u30b3\u30f3","article_published_time":"2025-11-22T20:31:21+00:00","og_image":[{"width":1200,"height":630,"url":"https:\/\/pokecon.jp\/job\/wp-content\/uploads\/2025\/11\/mcp-standard-ui-extension.png","type":"image\/png"}],"author":"info@pokecon.jp","twitter_card":"summary_large_image","twitter_misc":{"\u57f7\u7b46\u8005":"info@pokecon.jp","\u63a8\u5b9a\u8aad\u307f\u53d6\u308a\u6642\u9593":"8\u5206"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/azukiazusa.dev\/blog\/mcp-standard-ui-extension\/#article","isPartOf":{"@id":"https:\/\/pokecon.jp\/job\/24782\/"},"author":{"name":"info@pokecon.jp","@id":"https:\/\/pokecon.jp\/job\/#\/schema\/person\/16c9f07b1ba984d165d9aee259bda997"},"headline":"MCP \u306b\u304a\u3051\u308b\u30a4\u30f3\u30bf\u30e9\u30af\u30c6\u30a3\u30d6\u306a UI \u3092\u6a19\u6e96\u5316\u3059\u308b\u62e1\u5f35\u6a5f\u80fd MCP Apps \u306e\u63d0\u6848","datePublished":"2025-11-22T20:31:21+00:00","mainEntityOfPage":{"@id":"https:\/\/pokecon.jp\/job\/24782\/"},"wordCount":206,"image":{"@id":"https:\/\/azukiazusa.dev\/blog\/mcp-standard-ui-extension\/#primaryimage"},"thumbnailUrl":"https:\/\/pokecon.jp\/job\/wp-content\/uploads\/2025\/11\/mcp-standard-ui-extension.png","articleSection":["\u306f\u3066\u306a\u30d6\u30ed\u30b0"],"inLanguage":"ja"},{"@type":"WebPage","@id":"https:\/\/pokecon.jp\/job\/24782\/","url":"https:\/\/azukiazusa.dev\/blog\/mcp-standard-ui-extension\/","name":"MCP \u306b\u304a\u3051\u308b\u30a4\u30f3\u30bf\u30e9\u30af\u30c6\u30a3\u30d6\u306a UI \u3092\u6a19\u6e96\u5316\u3059\u308b\u62e1\u5f35\u6a5f\u80fd MCP Apps \u306e\u63d0\u6848 - \u30dd\u30b1\u30b3\u30f3","isPartOf":{"@id":"https:\/\/pokecon.jp\/job\/#website"},"primaryImageOfPage":{"@id":"https:\/\/azukiazusa.dev\/blog\/mcp-standard-ui-extension\/#primaryimage"},"image":{"@id":"https:\/\/azukiazusa.dev\/blog\/mcp-standard-ui-extension\/#primaryimage"},"thumbnailUrl":"https:\/\/pokecon.jp\/job\/wp-content\/uploads\/2025\/11\/mcp-standard-ui-extension.png","datePublished":"2025-11-22T20:31:21+00:00","author":{"@id":"https:\/\/pokecon.jp\/job\/#\/schema\/person\/16c9f07b1ba984d165d9aee259bda997"},"breadcrumb":{"@id":"https:\/\/azukiazusa.dev\/blog\/mcp-standard-ui-extension\/#breadcrumb"},"inLanguage":"ja","potentialAction":[{"@type":"ReadAction","target":["https:\/\/azukiazusa.dev\/blog\/mcp-standard-ui-extension\/"]}]},{"@type":"ImageObject","inLanguage":"ja","@id":"https:\/\/azukiazusa.dev\/blog\/mcp-standard-ui-extension\/#primaryimage","url":"https:\/\/pokecon.jp\/job\/wp-content\/uploads\/2025\/11\/mcp-standard-ui-extension.png","contentUrl":"https:\/\/pokecon.jp\/job\/wp-content\/uploads\/2025\/11\/mcp-standard-ui-extension.png","width":1200,"height":630},{"@type":"BreadcrumbList","@id":"https:\/\/azukiazusa.dev\/blog\/mcp-standard-ui-extension\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"\u30db\u30fc\u30e0","item":"https:\/\/pokecon.jp\/job\/"},{"@type":"ListItem","position":2,"name":"MCP \u306b\u304a\u3051\u308b\u30a4\u30f3\u30bf\u30e9\u30af\u30c6\u30a3\u30d6\u306a UI \u3092\u6a19\u6e96\u5316\u3059\u308b\u62e1\u5f35\u6a5f\u80fd MCP Apps \u306e\u63d0\u6848"}]},{"@type":"WebSite","@id":"https:\/\/pokecon.jp\/job\/#website","url":"https:\/\/pokecon.jp\/job\/","name":"\u30dd\u30b1\u30b3\u30f3","description":"","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/pokecon.jp\/job\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"ja"},{"@type":"Person","@id":"https:\/\/pokecon.jp\/job\/#\/schema\/person\/16c9f07b1ba984d165d9aee259bda997","name":"info@pokecon.jp","image":{"@type":"ImageObject","inLanguage":"ja","@id":"https:\/\/secure.gravatar.com\/avatar\/2b0549cd9f7907c092ca5fbb283baf72337f235726e4b46fa39ec0b701ac2fe2?s=96&d=wavatar&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/2b0549cd9f7907c092ca5fbb283baf72337f235726e4b46fa39ec0b701ac2fe2?s=96&d=wavatar&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/2b0549cd9f7907c092ca5fbb283baf72337f235726e4b46fa39ec0b701ac2fe2?s=96&d=wavatar&r=g","caption":"info@pokecon.jp"},"url":"https:\/\/pokecon.jp\/job\/author\/infopokecon-jp\/"}]}},"_links":{"self":[{"href":"https:\/\/pokecon.jp\/job\/wp-json\/wp\/v2\/posts\/24782","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/pokecon.jp\/job\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/pokecon.jp\/job\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/pokecon.jp\/job\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/pokecon.jp\/job\/wp-json\/wp\/v2\/comments?post=24782"}],"version-history":[{"count":1,"href":"https:\/\/pokecon.jp\/job\/wp-json\/wp\/v2\/posts\/24782\/revisions"}],"predecessor-version":[{"id":24784,"href":"https:\/\/pokecon.jp\/job\/wp-json\/wp\/v2\/posts\/24782\/revisions\/24784"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/pokecon.jp\/job\/wp-json\/wp\/v2\/media\/24783"}],"wp:attachment":[{"href":"https:\/\/pokecon.jp\/job\/wp-json\/wp\/v2\/media?parent=24782"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/pokecon.jp\/job\/wp-json\/wp\/v2\/categories?post=24782"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/pokecon.jp\/job\/wp-json\/wp\/v2\/tags?post=24782"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}