Support MCP-UI / MCP Apps #19
Description
When accessing ui://{name}, the server should return the following from resource/read:
{
contents: [{
uri: string; // Matching UI resource URI
mimeType: "text/html;profile=mcp-app"; // MUST be "text/html;profile=mcp-app"
text?: string; // HTML content as string
blob?: string; // OR base64-encoded HTML
_meta?: {
ui?: {
csp?: {
connectDomains?: string[]; // Origins for network requests (fetch/XHR/WebSocket).
resourceDomains?: string[]; // Origins for static resources (scripts, images, styles, fonts).
frameDomains?: string[]; // Origins for nested iframes (frame-src directive).
baseUriDomains?: string[]; // Allowed base URIs for the document (base-uri directive).
};
permissions?: {
camera?: {}; // Request camera access
microphone?: {}; // Request microphone access
geolocation?: {}; // Request geolocation access
clipboardWrite?: {}; // Request clipboard write access
};
domain?: string;
prefersBorder?: boolean;
};
};
}];
}Tools are associated with UI resources through the _meta.ui field, which contains a reference to the resource URI.
Implementation idea
First low-level idea which we might build upon with an App annotation:
use io\modelcontextprotocol\server\{Implementation, Resource, Meta, Tool};
#[Implementation]
class Greeting {
/** Greeting app */
#[Resource('ui://greeting/app', 'text/html;profile=mcp-app')]
public function app() {
return [
'_meta' => ['ui' => ['csp' => ['resourceDomains' => ['http://localhost:8080']]]],
'text' => <<<'HTML'
<html>
<head>
<title>Greeting card</title>
</head>
<body>
<h1>Hello!</h1>
<p>This is the first XP MCP app</p>
</body>
</html>
HTML
];
}
/** Greeting card */
#[Tool(meta: ['ui' => ['resourceUri' => 'ui://greeting/app']])]
public function card() {
return 'App launching...';
}
}Testing
See also
- https://blog.modelcontextprotocol.io/posts/2026-01-26-mcp-apps/
- https://modelcontextprotocol.io/docs/extensions/apps
- https://github.com/modelcontextprotocol/ext-apps/blob/main/specification/2026-01-26/apps.mdx
- https://medium.com/@kenzic/mcp-ui-just-gave-mcp-a-frontend-aea0ebc02253
- https://medium.com/@gurpartap.sandhu3/build-chatgpt-app-sdk-experiences-in-simple-python-db19b1d3d70e