From 3ac7c7935b62a6e549d85acf5aba875311115910 Mon Sep 17 00:00:00 2001
From: Olivier Chafik <ochafik@anthropic.com>
Date: Tue, 9 Dec 2025 19:10:56 +0100
Subject: [PATCH] Add RESOURCE_MIME_TYPE constant (#108)

* Add RESOURCE_MIME_TYPE constant

* Update app-bridge.ts

* update syntax
---
 examples/basic-host/src/implementation.ts       | 5 ++---
 examples/basic-server-react/server.ts           | 4 ++--
 examples/basic-server-vanillajs/server.ts       | 4 ++--
 examples/budget-allocator-server/server.ts      | 4 ++--
 examples/cohort-heatmap-server/server.ts        | 4 ++--
 examples/customer-segmentation-server/server.ts | 4 ++--
 examples/scenario-modeler-server/server.ts      | 4 ++--
 examples/system-monitor-server/server.ts        | 4 ++--
 examples/threejs-server/server.ts               | 4 ++--
 src/app-bridge.ts                               | 2 +-
 src/app.ts                                      | 5 +++++
 11 files changed, 24 insertions(+), 20 deletions(-)
 mode change 100644 => 100755 examples/budget-allocator-server/server.ts

diff --git a/examples/basic-host/src/implementation.ts b/examples/basic-host/src/implementation.ts
index 3fc8463..af9ed1b 100644
--- a/examples/basic-host/src/implementation.ts
+++ b/examples/basic-host/src/implementation.ts
@@ -1,5 +1,4 @@
-import { RESOURCE_URI_META_KEY, type McpUiSandboxProxyReadyNotification } from "@modelcontextprotocol/ext-apps";
-import { AppBridge, PostMessageTransport } from "@modelcontextprotocol/ext-apps/app-bridge";
+import { RESOURCE_MIME_TYPE, RESOURCE_URI_META_KEY, type McpUiSandboxProxyReadyNotification, AppBridge, PostMessageTransport } from "@modelcontextprotocol/ext-apps/app-bridge";
 import { Client } from "@modelcontextprotocol/sdk/client/index.js";
 import { StreamableHTTPClientTransport } from "@modelcontextprotocol/sdk/client/streamableHttp.js";
 import type { CallToolResult, Tool } from "@modelcontextprotocol/sdk/types.js";
@@ -111,7 +110,7 @@ async function getUiResourceHtml(serverInfo: ServerInfo, uri: string): Promise<s
 
   // Per the MCP App specification, "text/html;profile=mcp-app" signals this
   // resource is indeed for an MCP App UI.
-  if (content.mimeType !== "text/html;profile=mcp-app") {
+  if (content.mimeType !== RESOURCE_MIME_TYPE) {
     throw new Error(`Unsupported MIME type: ${content.mimeType}`);
   }
 
diff --git a/examples/basic-server-react/server.ts b/examples/basic-server-react/server.ts
index 4770633..ac2cffe 100644
--- a/examples/basic-server-react/server.ts
+++ b/examples/basic-server-react/server.ts
@@ -5,7 +5,7 @@ import cors from "cors";
 import express, { type Request, type Response } from "express";
 import fs from "node:fs/promises";
 import path from "node:path";
-import { RESOURCE_URI_META_KEY } from "../../dist/src/app";
+import { RESOURCE_MIME_TYPE, RESOURCE_URI_META_KEY } from "../../dist/src/app";
 
 const PORT = process.env.PORT ? parseInt(process.env.PORT, 10) : 3001;
 const DIST_DIR = path.join(import.meta.dirname, "dist");
@@ -50,7 +50,7 @@ const server = new McpServer({
         contents: [
           // Per the MCP App specification, "text/html;profile=mcp-app" signals
           // to the Host that this resource is indeed for an MCP App UI.
-          { uri: resourceUri, mimeType: "text/html;profile=mcp-app", text: html },
+          { uri: resourceUri, mimeType: RESOURCE_MIME_TYPE, text: html },
         ],
       };
     },
diff --git a/examples/basic-server-vanillajs/server.ts b/examples/basic-server-vanillajs/server.ts
index d42cac2..993d35e 100644
--- a/examples/basic-server-vanillajs/server.ts
+++ b/examples/basic-server-vanillajs/server.ts
@@ -5,7 +5,7 @@ import cors from "cors";
 import express, { type Request, type Response } from "express";
 import fs from "node:fs/promises";
 import path from "node:path";
-import { RESOURCE_URI_META_KEY } from "../../dist/src/app";
+import { RESOURCE_MIME_TYPE, RESOURCE_URI_META_KEY } from "../../dist/src/app";
 
 const PORT = process.env.PORT ? parseInt(process.env.PORT, 10) : 3001;
 const DIST_DIR = path.join(import.meta.dirname, "dist");
@@ -50,7 +50,7 @@ const server = new McpServer({
         contents: [
           // Per the MCP App specification, "text/html;profile=mcp-app" signals
           // to the Host that this resource is indeed for an MCP App UI.
-          { uri: resourceUri, mimeType: "text/html;profile=mcp-app", text: html },
+          { uri: resourceUri, mimeType: RESOURCE_MIME_TYPE, text: html },
         ],
       };
     },
diff --git a/examples/budget-allocator-server/server.ts b/examples/budget-allocator-server/server.ts
old mode 100644
new mode 100755
index c05c873..daf147d
--- a/examples/budget-allocator-server/server.ts
+++ b/examples/budget-allocator-server/server.ts
@@ -16,7 +16,7 @@ import express, { type Request, type Response } from "express";
 import fs from "node:fs/promises";
 import path from "node:path";
 import { z } from "zod";
-import { RESOURCE_URI_META_KEY } from "../../dist/src/app";
+import { RESOURCE_MIME_TYPE, RESOURCE_URI_META_KEY } from "../../dist/src/app";
 
 const PORT = process.env.PORT ? parseInt(process.env.PORT, 10) : 3001;
 const DIST_DIR = path.join(import.meta.dirname, "dist");
@@ -286,7 +286,7 @@ server.registerResource(
     );
     return {
       contents: [
-        { uri: resourceUri, mimeType: "text/html;profile=mcp-app", text: html },
+        { uri: resourceUri, mimeType: RESOURCE_MIME_TYPE, text: html },
       ],
     };
   },
diff --git a/examples/cohort-heatmap-server/server.ts b/examples/cohort-heatmap-server/server.ts
index 76fa86e..63a93f2 100644
--- a/examples/cohort-heatmap-server/server.ts
+++ b/examples/cohort-heatmap-server/server.ts
@@ -7,7 +7,7 @@ import express, { type Request, type Response } from "express";
 import fs from "node:fs/promises";
 import path from "node:path";
 import { z } from "zod";
-import { RESOURCE_URI_META_KEY } from "../../dist/src/app";
+import { RESOURCE_MIME_TYPE, RESOURCE_URI_META_KEY } from "../../dist/src/app";
 
 const PORT = process.env.PORT ? parseInt(process.env.PORT, 10) : 3001;
 const DIST_DIR = path.join(import.meta.dirname, "dist");
@@ -196,7 +196,7 @@ const server = new McpServer({
         contents: [
           {
             uri: resourceUri,
-            mimeType: "text/html;profile=mcp-app",
+            mimeType: RESOURCE_MIME_TYPE,
             text: html,
           },
         ],
diff --git a/examples/customer-segmentation-server/server.ts b/examples/customer-segmentation-server/server.ts
index 63f8bb9..bc95c7e 100644
--- a/examples/customer-segmentation-server/server.ts
+++ b/examples/customer-segmentation-server/server.ts
@@ -10,7 +10,7 @@ import express, { type Request, type Response } from "express";
 import fs from "node:fs/promises";
 import path from "node:path";
 import { z } from "zod";
-import { RESOURCE_URI_META_KEY } from "../../dist/src/app";
+import { RESOURCE_MIME_TYPE, RESOURCE_URI_META_KEY } from "../../dist/src/app";
 import {
   generateCustomers,
   generateSegmentSummaries,
@@ -95,7 +95,7 @@ const server = new McpServer({
         contents: [
           {
             uri: resourceUri,
-            mimeType: "text/html;profile=mcp-app",
+            mimeType: RESOURCE_MIME_TYPE,
             text: html,
           },
         ],
diff --git a/examples/scenario-modeler-server/server.ts b/examples/scenario-modeler-server/server.ts
index cc92a7c..4a9ef48 100644
--- a/examples/scenario-modeler-server/server.ts
+++ b/examples/scenario-modeler-server/server.ts
@@ -10,7 +10,7 @@ import express, { type Request, type Response } from "express";
 import fs from "node:fs/promises";
 import path from "node:path";
 import { z } from "zod";
-import { RESOURCE_URI_META_KEY } from "../../dist/src/app";
+import { RESOURCE_MIME_TYPE, RESOURCE_URI_META_KEY } from "../../dist/src/app";
 
 const PORT = process.env.PORT ? parseInt(process.env.PORT, 10) : 3001;
 const DIST_DIR = path.join(import.meta.dirname, "dist");
@@ -299,7 +299,7 @@ const server = new McpServer({
         contents: [
           {
             uri: resourceUri,
-            mimeType: "text/html;profile=mcp-app",
+            mimeType: RESOURCE_MIME_TYPE,
             text: html,
           },
         ],
diff --git a/examples/system-monitor-server/server.ts b/examples/system-monitor-server/server.ts
index 8ccd134..9fca371 100644
--- a/examples/system-monitor-server/server.ts
+++ b/examples/system-monitor-server/server.ts
@@ -12,7 +12,7 @@ import os from "node:os";
 import path from "node:path";
 import si from "systeminformation";
 import { z } from "zod";
-import { RESOURCE_URI_META_KEY } from "../../dist/src/app";
+import { RESOURCE_MIME_TYPE, RESOURCE_URI_META_KEY } from "../../dist/src/app";
 
 const PORT = process.env.PORT ? parseInt(process.env.PORT, 10) : 3001;
 
@@ -167,7 +167,7 @@ const server = new McpServer({
         contents: [
           {
             uri: resourceUri,
-            mimeType: "text/html;profile=mcp-app",
+            mimeType: RESOURCE_MIME_TYPE,
             text: html,
           },
         ],
diff --git a/examples/threejs-server/server.ts b/examples/threejs-server/server.ts
index ea623ee..81d860c 100644
--- a/examples/threejs-server/server.ts
+++ b/examples/threejs-server/server.ts
@@ -12,7 +12,7 @@ import express, { type Request, type Response } from "express";
 import fs from "node:fs/promises";
 import path from "node:path";
 import { z } from "zod";
-import { RESOURCE_URI_META_KEY } from "../../dist/src/app";
+import { RESOURCE_MIME_TYPE, RESOURCE_URI_META_KEY } from "../../dist/src/app";
 
 const PORT = process.env.PORT ? parseInt(process.env.PORT, 10) : 3001;
 const DIST_DIR = path.join(import.meta.dirname, "dist");
@@ -176,7 +176,7 @@ const server = new McpServer({
         contents: [
           {
             uri: resourceUri,
-            mimeType: "text/html;profile=mcp-app",
+            mimeType: RESOURCE_MIME_TYPE,
             text: html,
           },
         ],
diff --git a/src/app-bridge.ts b/src/app-bridge.ts
index 43c9898..c4b2bdb 100644
--- a/src/app-bridge.ts
+++ b/src/app-bridge.ts
@@ -60,7 +60,7 @@ import {
   McpUiSizeChangedNotificationSchema,
 } from "./types";
 export * from "./types";
-export { RESOURCE_URI_META_KEY } from "./app";
+export { RESOURCE_URI_META_KEY, RESOURCE_MIME_TYPE } from "./app";
 export { PostMessageTransport } from "./message-transport";
 
 /**
diff --git a/src/app.ts b/src/app.ts
index c0be541..e2190f2 100644
--- a/src/app.ts
+++ b/src/app.ts
@@ -76,6 +76,11 @@ export * from "./types";
  */
 export const RESOURCE_URI_META_KEY = "ui/resourceUri";
 
+/**
+ * MIME type for MCP UI resources.
+ */
+export const RESOURCE_MIME_TYPE = "text/html;profile=mcp";
+
 /**
  * Options for configuring App behavior.
  *