Function registerAppResource

registerAppResource(
    server: Pick<McpServer, "registerResource">,
    name: string,
    uri: string,
    config: McpUiAppResourceConfig,
    readCallback: ReadResourceCallback,
): 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: ReadResourceCallback
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 external domains

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
            },
          },
        },
      },
    ],
  }),
);

See

registerAppTool to register tools that reference this resource