# Digitarald MCP Apps Playground MCP Apps
> MCP Apps Development
- Skill: `tomevault-io/digitarald-mcp-apps-playground-mcp-apps` (Agent Skill, multi-file: 2 files)
- Install (CLI): `npx skillmds@latest add tomevault-io/digitarald-mcp-apps-playground-mcp-apps`
- Raw SKILL.md: https://api.skillmd.com/api/skills/tomevault-io/digitarald-mcp-apps-playground-mcp-apps/raw
- Safety review: pending (external: skill-scanner PASS, skillspector PASS)
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: AI & ML
- Author: tomevault-io (https://skillmd.com/u/tomevault-io)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/tomevault-io/digitarald-mcp-apps-playground-mcp-apps
---
# MCP Apps Development
MCP Apps let MCP tools render interactive HTML UIs in chat. The UI runs in a sandboxed iframe and communicates via JSON-RPC postMessage.
## External References
- **Spec**: https://github.com/modelcontextprotocol/ext-apps/blob/main/specification/draft/apps.mdx
- **Blog**: https://blog.modelcontextprotocol.io/posts/2025-11-21-mcp-apps/
- **VS Code impl**: https://github.com/microsoft/vscode (search `chatMcpAppModel.ts`)
## Quick Start
### 1. Register UI Resource
```typescript
server.resource(
"my-ui",
"ui://my-server/my-tool", // ui:// scheme required
{ mimeType: "text/html;profile=mcp-app" }, // profile required
async (uri) => ({
contents: [{
uri: uri.href,
mimeType: "text/html;profile=mcp-app", // must match
text: MY_UI_HTML()
}]
})
);
```
### 2. Register Tool with UI Link
```typescript
server.registerTool("my_tool", {
inputSchema: { query: z.string() },
_meta: { ui: { resourceUri: "ui://my-server/my-tool" } }
}, async ({ query }) => ({
content: [{ type: "text", text: `Result: ${query}` }],
structuredContent: { query, result: "..." } // sent to UI
}));
```
### 3. UI Template (Static HTML)
```typescript
export function MY_UI_HTML(): string {
return `
Loading...