Function registerAppResource

registerAppResource(
    server: Pick<McpServer, "registerResource">,
    name: string,
    uri: string,
    config: McpUiAppResourceConfig,
    readCallback: McpUiReadResourceCallback,
): RegisteredResource

This is a convenience wrapper around server.registerResource that:

Defaults the MIME type to RESOURCE_MIME_TYPE ("text/html;profile=mcp-app")
Provides a cleaner API matching the SDK's callback signature

Parameters

server: Pick<McpServer, "registerResource">
The MCP server instance
name: string
Human-readable resource name
uri: string
Resource URI (should match the _meta.ui field in tool config)
config: McpUiAppResourceConfig
Resource configuration
readCallback: McpUiReadResourceCallback
Callback that returns the resource contents

Returns RegisteredResource

Example: Basic usage

registerAppResource(
  server,
  "Weather View",
  "ui://weather/view.html",
  {
    description: "Interactive weather display",
  },
  async () => ({
    contents: [
      {
        uri: "ui://weather/view.html",
        mimeType: RESOURCE_MIME_TYPE,
        text: await fs.readFile("dist/view.html", "utf-8"),
      },
    ],
  }),
);

Example: With CSP configuration for network access

registerAppResource(
  server,
  "Music Player",
  "ui://music/player.html",
  {
    description: "Audio player with external soundfonts",
  },
  async () => ({
    contents: [
      {
        uri: "ui://music/player.html",
        mimeType: RESOURCE_MIME_TYPE,
        text: musicPlayerHtml,
        _meta: {
          ui: {
            csp: {
              resourceDomains: ["https://cdn.example.com"], // For scripts/styles/images
              connectDomains: ["https://api.example.com"], // For fetch/WebSocket
            },
          },
        },
      },
    ],
  }),
);

Example: With stable origin for external API CORS allowlists

// Computes a stable origin from an MCP server URL for hosting in Claude.
function computeAppDomainForClaude(mcpServerUrl: string): string {
  const hash = crypto
    .createHash("sha256")
    .update(mcpServerUrl)
    .digest("hex")
    .slice(0, 32);
  return `${hash}.claudemcpcontent.com`;
}

const APP_DOMAIN = computeAppDomainForClaude("https://example.com/mcp");

registerAppResource(
  server,
  "Company Dashboard",
  "ui://dashboard/view.html",
  {
    description: "Internal dashboard with company data",
  },
  async () => ({
    contents: [
      {
        uri: "ui://dashboard/view.html",
        mimeType: RESOURCE_MIME_TYPE,
        text: dashboardHtml,
        _meta: {
          ui: {
            // CSP: tell browser the app is allowed to make requests
            csp: {
              connectDomains: ["https://api.example.com"],
            },
            // CORS: give app a stable origin for the API server to allowlist
            //
            // (Public APIs that use `Access-Control-Allow-Origin: *` or API
            // key auth don't need this.)
            domain: APP_DOMAIN,
          },
        },
      },
    ],
  }),
);

See

McpUiResourceMeta for _meta.ui configuration options
McpUiResourceCsp for CSP domain allowlist configuration
registerAppTool to register tools that reference this resource