[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill-aws-labs-create-mcp-app":3,"mdc-1ejezi-key":33,"related-repo-aws-labs-create-mcp-app":2388,"related-org-aws-labs-create-mcp-app":2493},{"slug":4,"name":4,"fn":5,"description":6,"org":7,"tags":12,"stars":23,"repoUrl":24,"updatedAt":25,"license":26,"forks":27,"topics":28,"repo":29,"sourceUrl":31,"mdContent":32},"create-mcp-app","build interactive MCP applications","This skill should be used when the user asks to \"create an MCP App\", \"add a UI to an MCP tool\", \"build an interactive MCP View\", \"scaffold an MCP App\", or needs guidance on MCP Apps SDK patterns, UI-resource registration, MCP App lifecycle, or host integration. Provides comprehensive guidance for building MCP Apps with interactive UIs.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":11},"aws-labs","AWS Labs","https:\u002F\u002Fpexgzepcugksgbtrxkhf.supabase.co\u002Fstorage\u002Fv1\u002Fobject\u002Fpublic\u002Forg-logos\u002Faws-labs.png","awslabs",[13,17,20],{"name":14,"slug":15,"type":16},"Apps SDK","apps-sdk","tag",{"name":18,"slug":19,"type":16},"MCP","mcp",{"name":21,"slug":22,"type":16},"API Development","api-development",871,"https:\u002F\u002Fgithub.com\u002Fawslabs\u002Fcli-agent-orchestrator","2026-07-12T08:41:41.64678",null,164,[],{"repoUrl":24,"stars":23,"forks":27,"topics":30,"description":26},[],"https:\u002F\u002Fgithub.com\u002Fawslabs\u002Fcli-agent-orchestrator\u002Ftree\u002FHEAD\u002Fskills\u002Fvendor\u002Fext-apps\u002Fcreate-mcp-app","---\nname: create-mcp-app\ndescription: This skill should be used when the user asks to \"create an MCP App\", \"add a UI to an MCP tool\", \"build an interactive MCP View\", \"scaffold an MCP App\", or needs guidance on MCP Apps SDK patterns, UI-resource registration, MCP App lifecycle, or host integration. Provides comprehensive guidance for building MCP Apps with interactive UIs.\n---\n\n# Create MCP App\n\nBuild interactive UIs that run inside MCP-enabled hosts like Claude Desktop. An MCP App combines an MCP tool with an HTML resource to display rich, interactive content.\n\n## Core Concept: Tool + Resource\n\nEvery MCP App requires two parts linked together:\n\n1. **Tool** - Called by the LLM\u002Fhost, returns data\n2. **Resource** - Serves the bundled HTML UI that displays the data\n\nThe tool's `_meta.ui.resourceUri` references the resource's URI.\n\nHost calls tool → Host renders resource UI → Server returns result → UI receives result.\n\n## Quick Start Decision Tree\n\n### Framework Selection\n\n| Framework | SDK Support | Best For |\n|-----------|-------------|----------|\n| React | `useApp` hook provided | Teams familiar with React |\n| Vanilla JS | Manual lifecycle | Simple apps, no build complexity |\n| Vue\u002FSvelte\u002FPreact\u002FSolid | Manual lifecycle | Framework preference |\n\n### Project Context\n\n**Adding to existing MCP server:**\n- Import `registerAppTool`, `registerAppResource` from SDK\n- Add tool registration with `_meta.ui.resourceUri`\n- Add resource registration serving bundled HTML\n\n**Creating new MCP server:**\n- Set up server with transport (stdio or HTTP)\n- Register tools and resources\n- Configure build system with `vite-plugin-singlefile`\n\n## Getting Reference Code\n\nClone the SDK repository for working examples and API documentation:\n\n```bash\ngit clone --branch \"v$(npm view @modelcontextprotocol\u002Fext-apps version)\" --depth 1 https:\u002F\u002Fgithub.com\u002Fmodelcontextprotocol\u002Fext-apps.git \u002Ftmp\u002Fmcp-ext-apps\n```\n\n### Framework Templates\n\nLearn and adapt from `\u002Ftmp\u002Fmcp-ext-apps\u002Fexamples\u002Fbasic-server-{framework}\u002F`:\n\n| Template | Key Files |\n|----------|-----------|\n| `basic-server-vanillajs\u002F` | `server.ts`, `src\u002Fmcp-app.ts`, `mcp-app.html` |\n| `basic-server-react\u002F` | `server.ts`, `src\u002Fmcp-app.tsx` (uses `useApp` hook) |\n| `basic-server-vue\u002F` | `server.ts`, `src\u002FApp.vue` |\n| `basic-server-svelte\u002F` | `server.ts`, `src\u002FApp.svelte` |\n| `basic-server-preact\u002F` | `server.ts`, `src\u002Fmcp-app.tsx` |\n| `basic-server-solid\u002F` | `server.ts`, `src\u002Fmcp-app.tsx` |\n\nEach template includes:\n- `server.ts` with `registerAppTool` and `registerAppResource`\n- `main.ts` entry point with HTTP and stdio transport setup\n- Client-side app (e.g., `src\u002Fmcp-app.ts`, `src\u002Fmcp-app.tsx`) with lifecycle handlers\n- `src\u002Fglobal.css` with global styles and host style variable fallbacks\n- `vite.config.ts` using `vite-plugin-singlefile`\n- `package.json` with `npm run` scripts and required dependencies\n- `.gitignore` excluding `node_modules\u002F` and `dist\u002F`\n\n### API Reference (Source Files)\n\nRead JSDoc documentation directly from `\u002Ftmp\u002Fmcp-ext-apps\u002Fsrc\u002F`:\n\n| File | Contents |\n|------|----------|\n| `src\u002Fapp.ts` | `App` class, handlers (`ontoolinput`, `ontoolresult`, `onhostcontextchanged`, `onteardown`, etc.), lifecycle |\n| `src\u002Fserver\u002Findex.ts` | `registerAppTool`, `registerAppResource`, helper functions |\n| `src\u002Fspec.types.ts` | All type definitions: `McpUiHostContext`, `McpUiStyleVariableKey` (CSS variable names), `McpUiResourceCsp` (CSP configuration), etc. |\n| `src\u002Fstyles.ts` | `applyDocumentTheme`, `applyHostStyleVariables`, `applyHostFonts` |\n| `src\u002Freact\u002FuseApp.tsx` | `useApp` hook for React apps |\n\n### Advanced Patterns\n\nSee `\u002Ftmp\u002Fmcp-ext-apps\u002Fdocs\u002Fpatterns.md` for detailed recipes:\n\n- **App-only tools** — `visibility: [\"app\"]`, hiding tools from model\n- **Polling** — real-time dashboards, interval management\n- **Chunked responses** — large files, pagination, base64 encoding\n- **Error handling** — `isError`, informing model of failures\n- **Binary resources** — audio\u002Fvideo\u002Fetc via `resources\u002Fread`, blob field\n- **Network requests** — assets, fetch, CSP, `_meta.ui.csp`, CORS, `_meta.ui.domain`\n- **Host context** — theme, styling, fonts, safe area insets\n- **Fullscreen mode** — `requestDisplayMode`, display mode changes\n- **Model context** — `updateModelContext`, `sendMessage`, keeping model informed\n- **View state** — `viewUUID`, localStorage, state recovery\n- **Visibility-based pause** — IntersectionObserver, pausing animations\u002FWebGL\n- **Streaming input** — `ontoolinputpartial`, progressive rendering\n\n### Reference Host Implementation\n\n`\u002Ftmp\u002Fmcp-ext-apps\u002Fexamples\u002Fbasic-host\u002F` shows one way an MCP Apps-capable host could be implemented. Real-world hosts like Claude Desktop are more sophisticated—use basic-host for local testing and protocol understanding, not as a guarantee of host behavior.\n\n## Critical Implementation Notes\n\n### Adding Dependencies\n\n**Always** use `npm install` to add dependencies rather than manually writing version numbers:\n\n```bash\nnpm install @modelcontextprotocol\u002Fext-apps @modelcontextprotocol\u002Fsdk zod express cors\nnpm install -D typescript vite vite-plugin-singlefile concurrently cross-env @types\u002Fnode @types\u002Fexpress @types\u002Fcors\n```\n\nThis lets npm resolve the latest compatible versions. **Never** specify version numbers from memory.\n\n### TypeScript Server Execution\n\nUnless the user has specified otherwise, use `tsx` for running TypeScript server files. For example:\n\n```bash\nnpm install -D tsx\n\nnpm pkg set scripts.dev=\"cross-env NODE_ENV=development concurrently 'cross-env INPUT=mcp-app.html vite build --watch' 'tsx --watch main.ts'\"\n```\n\n> [!NOTE]\n> The SDK examples use `bun` but generated projects should default to `tsx` for broader compatibility.\n\n### Handler Registration Order\n\nRegister ALL handlers BEFORE calling `app.connect()`:\n\n```typescript\nconst app = new App({ name: \"My App\", version: \"1.0.0\" });\n\n\u002F\u002F Register handlers first\napp.ontoolinput = (params) => { \u002F* handle input *\u002F };\napp.ontoolresult = (result) => { \u002F* handle result *\u002F };\napp.onhostcontextchanged = (ctx) => { \u002F* handle context *\u002F };\napp.onteardown = async () => { return {}; };\n\u002F\u002F etc.\n\n\u002F\u002F Then connect\nawait app.connect();\n```\n\n## Common Mistakes to Avoid\n\n1. **No text fallback** - Always provide `content` array for non-UI hosts\n2. **Missing CSP configuration** - MCP Apps HTML is served as an MCP resource with no same-origin server; ALL network requests—even to `localhost`—require a CSP configuration\n3. **CSP or CORS config in wrong _meta object** - `_meta.ui.csp` and `_meta.ui.domain` go in the `contents[]` objects returned by `registerAppResource()`'s read callback, not in `registerAppResource()`'s config object\n4. **Handlers after app.connect()** - Register ALL handlers BEFORE calling `app.connect()`\n5. **No streaming for large inputs** - Use `ontoolinputpartial` to show progress during input generation\n\n## Testing\n\n### Using basic-host\n\nTest MCP Apps locally with the basic-host example:\n\n```bash\n# Terminal 1: Build and run your server\nnpm run build && npm run serve\n\n# Terminal 2: Run basic-host (from cloned repo)\ncd \u002Ftmp\u002Fmcp-ext-apps\u002Fexamples\u002Fbasic-host\nnpm install\nSERVERS='[\"http:\u002F\u002Flocalhost:3001\u002Fmcp\"]' npm run start\n# Open http:\u002F\u002Flocalhost:8080\n```\n\nConfigure `SERVERS` with a JSON array of your server URLs (default: `http:\u002F\u002Flocalhost:3001\u002Fmcp`).\n\n### Debug with sendLog\n\nSend debug logs to the host application (rather than just the iframe's dev console):\n\n```typescript\nawait app.sendLog({ level: \"info\", data: \"Debug message\" });\nawait app.sendLog({ level: \"error\", data: { error: err.message } });\n```\n",{"data":34,"body":35},{"name":4,"description":6},{"type":36,"children":37},"root",[38,46,52,59,64,90,104,109,115,122,214,220,228,268,276,300,306,311,397,403,416,615,620,743,749,761,960,966,979,1174,1180,1191,1197,1203,1221,1322,1334,1340,1353,1427,1456,1462,1474,1874,1880,1997,2003,2009,2014,2152,2172,2178,2183,2382],{"type":39,"tag":40,"props":41,"children":42},"element","h1",{"id":4},[43],{"type":44,"value":45},"text","Create MCP App",{"type":39,"tag":47,"props":48,"children":49},"p",{},[50],{"type":44,"value":51},"Build interactive UIs that run inside MCP-enabled hosts like Claude Desktop. An MCP App combines an MCP tool with an HTML resource to display rich, interactive content.",{"type":39,"tag":53,"props":54,"children":56},"h2",{"id":55},"core-concept-tool-resource",[57],{"type":44,"value":58},"Core Concept: Tool + Resource",{"type":39,"tag":47,"props":60,"children":61},{},[62],{"type":44,"value":63},"Every MCP App requires two parts linked together:",{"type":39,"tag":65,"props":66,"children":67},"ol",{},[68,80],{"type":39,"tag":69,"props":70,"children":71},"li",{},[72,78],{"type":39,"tag":73,"props":74,"children":75},"strong",{},[76],{"type":44,"value":77},"Tool",{"type":44,"value":79}," - Called by the LLM\u002Fhost, returns data",{"type":39,"tag":69,"props":81,"children":82},{},[83,88],{"type":39,"tag":73,"props":84,"children":85},{},[86],{"type":44,"value":87},"Resource",{"type":44,"value":89}," - Serves the bundled HTML UI that displays the data",{"type":39,"tag":47,"props":91,"children":92},{},[93,95,102],{"type":44,"value":94},"The tool's ",{"type":39,"tag":96,"props":97,"children":99},"code",{"className":98},[],[100],{"type":44,"value":101},"_meta.ui.resourceUri",{"type":44,"value":103}," references the resource's URI.",{"type":39,"tag":47,"props":105,"children":106},{},[107],{"type":44,"value":108},"Host calls tool → Host renders resource UI → Server returns result → UI receives result.",{"type":39,"tag":53,"props":110,"children":112},{"id":111},"quick-start-decision-tree",[113],{"type":44,"value":114},"Quick Start Decision Tree",{"type":39,"tag":116,"props":117,"children":119},"h3",{"id":118},"framework-selection",[120],{"type":44,"value":121},"Framework Selection",{"type":39,"tag":123,"props":124,"children":125},"table",{},[126,150],{"type":39,"tag":127,"props":128,"children":129},"thead",{},[130],{"type":39,"tag":131,"props":132,"children":133},"tr",{},[134,140,145],{"type":39,"tag":135,"props":136,"children":137},"th",{},[138],{"type":44,"value":139},"Framework",{"type":39,"tag":135,"props":141,"children":142},{},[143],{"type":44,"value":144},"SDK Support",{"type":39,"tag":135,"props":146,"children":147},{},[148],{"type":44,"value":149},"Best For",{"type":39,"tag":151,"props":152,"children":153},"tbody",{},[154,179,197],{"type":39,"tag":131,"props":155,"children":156},{},[157,163,174],{"type":39,"tag":158,"props":159,"children":160},"td",{},[161],{"type":44,"value":162},"React",{"type":39,"tag":158,"props":164,"children":165},{},[166,172],{"type":39,"tag":96,"props":167,"children":169},{"className":168},[],[170],{"type":44,"value":171},"useApp",{"type":44,"value":173}," hook provided",{"type":39,"tag":158,"props":175,"children":176},{},[177],{"type":44,"value":178},"Teams familiar with React",{"type":39,"tag":131,"props":180,"children":181},{},[182,187,192],{"type":39,"tag":158,"props":183,"children":184},{},[185],{"type":44,"value":186},"Vanilla JS",{"type":39,"tag":158,"props":188,"children":189},{},[190],{"type":44,"value":191},"Manual lifecycle",{"type":39,"tag":158,"props":193,"children":194},{},[195],{"type":44,"value":196},"Simple apps, no build complexity",{"type":39,"tag":131,"props":198,"children":199},{},[200,205,209],{"type":39,"tag":158,"props":201,"children":202},{},[203],{"type":44,"value":204},"Vue\u002FSvelte\u002FPreact\u002FSolid",{"type":39,"tag":158,"props":206,"children":207},{},[208],{"type":44,"value":191},{"type":39,"tag":158,"props":210,"children":211},{},[212],{"type":44,"value":213},"Framework preference",{"type":39,"tag":116,"props":215,"children":217},{"id":216},"project-context",[218],{"type":44,"value":219},"Project Context",{"type":39,"tag":47,"props":221,"children":222},{},[223],{"type":39,"tag":73,"props":224,"children":225},{},[226],{"type":44,"value":227},"Adding to existing MCP server:",{"type":39,"tag":229,"props":230,"children":231},"ul",{},[232,253,263],{"type":39,"tag":69,"props":233,"children":234},{},[235,237,243,245,251],{"type":44,"value":236},"Import ",{"type":39,"tag":96,"props":238,"children":240},{"className":239},[],[241],{"type":44,"value":242},"registerAppTool",{"type":44,"value":244},", ",{"type":39,"tag":96,"props":246,"children":248},{"className":247},[],[249],{"type":44,"value":250},"registerAppResource",{"type":44,"value":252}," from SDK",{"type":39,"tag":69,"props":254,"children":255},{},[256,258],{"type":44,"value":257},"Add tool registration with ",{"type":39,"tag":96,"props":259,"children":261},{"className":260},[],[262],{"type":44,"value":101},{"type":39,"tag":69,"props":264,"children":265},{},[266],{"type":44,"value":267},"Add resource registration serving bundled HTML",{"type":39,"tag":47,"props":269,"children":270},{},[271],{"type":39,"tag":73,"props":272,"children":273},{},[274],{"type":44,"value":275},"Creating new MCP server:",{"type":39,"tag":229,"props":277,"children":278},{},[279,284,289],{"type":39,"tag":69,"props":280,"children":281},{},[282],{"type":44,"value":283},"Set up server with transport (stdio or HTTP)",{"type":39,"tag":69,"props":285,"children":286},{},[287],{"type":44,"value":288},"Register tools and resources",{"type":39,"tag":69,"props":290,"children":291},{},[292,294],{"type":44,"value":293},"Configure build system with ",{"type":39,"tag":96,"props":295,"children":297},{"className":296},[],[298],{"type":44,"value":299},"vite-plugin-singlefile",{"type":39,"tag":53,"props":301,"children":303},{"id":302},"getting-reference-code",[304],{"type":44,"value":305},"Getting Reference Code",{"type":39,"tag":47,"props":307,"children":308},{},[309],{"type":44,"value":310},"Clone the SDK repository for working examples and API documentation:",{"type":39,"tag":312,"props":313,"children":318},"pre",{"className":314,"code":315,"language":316,"meta":317,"style":317},"language-bash shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","git clone --branch \"v$(npm view @modelcontextprotocol\u002Fext-apps version)\" --depth 1 https:\u002F\u002Fgithub.com\u002Fmodelcontextprotocol\u002Fext-apps.git \u002Ftmp\u002Fmcp-ext-apps\n","bash","",[319],{"type":39,"tag":96,"props":320,"children":321},{"__ignoreMap":317},[322],{"type":39,"tag":323,"props":324,"children":327},"span",{"class":325,"line":326},"line",1,[328,334,340,345,351,356,361,366,371,376,381,387,392],{"type":39,"tag":323,"props":329,"children":331},{"style":330},"--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B",[332],{"type":44,"value":333},"git",{"type":39,"tag":323,"props":335,"children":337},{"style":336},"--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D",[338],{"type":44,"value":339}," clone",{"type":39,"tag":323,"props":341,"children":342},{"style":336},[343],{"type":44,"value":344}," --branch",{"type":39,"tag":323,"props":346,"children":348},{"style":347},"--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF",[349],{"type":44,"value":350}," \"",{"type":39,"tag":323,"props":352,"children":353},{"style":336},[354],{"type":44,"value":355},"v",{"type":39,"tag":323,"props":357,"children":358},{"style":347},[359],{"type":44,"value":360},"$(",{"type":39,"tag":323,"props":362,"children":363},{"style":330},[364],{"type":44,"value":365},"npm",{"type":39,"tag":323,"props":367,"children":368},{"style":336},[369],{"type":44,"value":370}," view @modelcontextprotocol\u002Fext-apps version",{"type":39,"tag":323,"props":372,"children":373},{"style":347},[374],{"type":44,"value":375},")\"",{"type":39,"tag":323,"props":377,"children":378},{"style":336},[379],{"type":44,"value":380}," --depth",{"type":39,"tag":323,"props":382,"children":384},{"style":383},"--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C",[385],{"type":44,"value":386}," 1",{"type":39,"tag":323,"props":388,"children":389},{"style":336},[390],{"type":44,"value":391}," https:\u002F\u002Fgithub.com\u002Fmodelcontextprotocol\u002Fext-apps.git",{"type":39,"tag":323,"props":393,"children":394},{"style":336},[395],{"type":44,"value":396}," \u002Ftmp\u002Fmcp-ext-apps\n",{"type":39,"tag":116,"props":398,"children":400},{"id":399},"framework-templates",[401],{"type":44,"value":402},"Framework Templates",{"type":39,"tag":47,"props":404,"children":405},{},[406,408,414],{"type":44,"value":407},"Learn and adapt from ",{"type":39,"tag":96,"props":409,"children":411},{"className":410},[],[412],{"type":44,"value":413},"\u002Ftmp\u002Fmcp-ext-apps\u002Fexamples\u002Fbasic-server-{framework}\u002F",{"type":44,"value":415},":",{"type":39,"tag":123,"props":417,"children":418},{},[419,435],{"type":39,"tag":127,"props":420,"children":421},{},[422],{"type":39,"tag":131,"props":423,"children":424},{},[425,430],{"type":39,"tag":135,"props":426,"children":427},{},[428],{"type":44,"value":429},"Template",{"type":39,"tag":135,"props":431,"children":432},{},[433],{"type":44,"value":434},"Key Files",{"type":39,"tag":151,"props":436,"children":437},{},[438,473,509,536,563,589],{"type":39,"tag":131,"props":439,"children":440},{},[441,450],{"type":39,"tag":158,"props":442,"children":443},{},[444],{"type":39,"tag":96,"props":445,"children":447},{"className":446},[],[448],{"type":44,"value":449},"basic-server-vanillajs\u002F",{"type":39,"tag":158,"props":451,"children":452},{},[453,459,460,466,467],{"type":39,"tag":96,"props":454,"children":456},{"className":455},[],[457],{"type":44,"value":458},"server.ts",{"type":44,"value":244},{"type":39,"tag":96,"props":461,"children":463},{"className":462},[],[464],{"type":44,"value":465},"src\u002Fmcp-app.ts",{"type":44,"value":244},{"type":39,"tag":96,"props":468,"children":470},{"className":469},[],[471],{"type":44,"value":472},"mcp-app.html",{"type":39,"tag":131,"props":474,"children":475},{},[476,485],{"type":39,"tag":158,"props":477,"children":478},{},[479],{"type":39,"tag":96,"props":480,"children":482},{"className":481},[],[483],{"type":44,"value":484},"basic-server-react\u002F",{"type":39,"tag":158,"props":486,"children":487},{},[488,493,494,500,502,507],{"type":39,"tag":96,"props":489,"children":491},{"className":490},[],[492],{"type":44,"value":458},{"type":44,"value":244},{"type":39,"tag":96,"props":495,"children":497},{"className":496},[],[498],{"type":44,"value":499},"src\u002Fmcp-app.tsx",{"type":44,"value":501}," (uses ",{"type":39,"tag":96,"props":503,"children":505},{"className":504},[],[506],{"type":44,"value":171},{"type":44,"value":508}," hook)",{"type":39,"tag":131,"props":510,"children":511},{},[512,521],{"type":39,"tag":158,"props":513,"children":514},{},[515],{"type":39,"tag":96,"props":516,"children":518},{"className":517},[],[519],{"type":44,"value":520},"basic-server-vue\u002F",{"type":39,"tag":158,"props":522,"children":523},{},[524,529,530],{"type":39,"tag":96,"props":525,"children":527},{"className":526},[],[528],{"type":44,"value":458},{"type":44,"value":244},{"type":39,"tag":96,"props":531,"children":533},{"className":532},[],[534],{"type":44,"value":535},"src\u002FApp.vue",{"type":39,"tag":131,"props":537,"children":538},{},[539,548],{"type":39,"tag":158,"props":540,"children":541},{},[542],{"type":39,"tag":96,"props":543,"children":545},{"className":544},[],[546],{"type":44,"value":547},"basic-server-svelte\u002F",{"type":39,"tag":158,"props":549,"children":550},{},[551,556,557],{"type":39,"tag":96,"props":552,"children":554},{"className":553},[],[555],{"type":44,"value":458},{"type":44,"value":244},{"type":39,"tag":96,"props":558,"children":560},{"className":559},[],[561],{"type":44,"value":562},"src\u002FApp.svelte",{"type":39,"tag":131,"props":564,"children":565},{},[566,575],{"type":39,"tag":158,"props":567,"children":568},{},[569],{"type":39,"tag":96,"props":570,"children":572},{"className":571},[],[573],{"type":44,"value":574},"basic-server-preact\u002F",{"type":39,"tag":158,"props":576,"children":577},{},[578,583,584],{"type":39,"tag":96,"props":579,"children":581},{"className":580},[],[582],{"type":44,"value":458},{"type":44,"value":244},{"type":39,"tag":96,"props":585,"children":587},{"className":586},[],[588],{"type":44,"value":499},{"type":39,"tag":131,"props":590,"children":591},{},[592,601],{"type":39,"tag":158,"props":593,"children":594},{},[595],{"type":39,"tag":96,"props":596,"children":598},{"className":597},[],[599],{"type":44,"value":600},"basic-server-solid\u002F",{"type":39,"tag":158,"props":602,"children":603},{},[604,609,610],{"type":39,"tag":96,"props":605,"children":607},{"className":606},[],[608],{"type":44,"value":458},{"type":44,"value":244},{"type":39,"tag":96,"props":611,"children":613},{"className":612},[],[614],{"type":44,"value":499},{"type":39,"tag":47,"props":616,"children":617},{},[618],{"type":44,"value":619},"Each template includes:",{"type":39,"tag":229,"props":621,"children":622},{},[623,645,656,674,685,701,719],{"type":39,"tag":69,"props":624,"children":625},{},[626,631,633,638,640],{"type":39,"tag":96,"props":627,"children":629},{"className":628},[],[630],{"type":44,"value":458},{"type":44,"value":632}," with ",{"type":39,"tag":96,"props":634,"children":636},{"className":635},[],[637],{"type":44,"value":242},{"type":44,"value":639}," and ",{"type":39,"tag":96,"props":641,"children":643},{"className":642},[],[644],{"type":44,"value":250},{"type":39,"tag":69,"props":646,"children":647},{},[648,654],{"type":39,"tag":96,"props":649,"children":651},{"className":650},[],[652],{"type":44,"value":653},"main.ts",{"type":44,"value":655}," entry point with HTTP and stdio transport setup",{"type":39,"tag":69,"props":657,"children":658},{},[659,661,666,667,672],{"type":44,"value":660},"Client-side app (e.g., ",{"type":39,"tag":96,"props":662,"children":664},{"className":663},[],[665],{"type":44,"value":465},{"type":44,"value":244},{"type":39,"tag":96,"props":668,"children":670},{"className":669},[],[671],{"type":44,"value":499},{"type":44,"value":673},") with lifecycle handlers",{"type":39,"tag":69,"props":675,"children":676},{},[677,683],{"type":39,"tag":96,"props":678,"children":680},{"className":679},[],[681],{"type":44,"value":682},"src\u002Fglobal.css",{"type":44,"value":684}," with global styles and host style variable fallbacks",{"type":39,"tag":69,"props":686,"children":687},{},[688,694,696],{"type":39,"tag":96,"props":689,"children":691},{"className":690},[],[692],{"type":44,"value":693},"vite.config.ts",{"type":44,"value":695}," using ",{"type":39,"tag":96,"props":697,"children":699},{"className":698},[],[700],{"type":44,"value":299},{"type":39,"tag":69,"props":702,"children":703},{},[704,710,711,717],{"type":39,"tag":96,"props":705,"children":707},{"className":706},[],[708],{"type":44,"value":709},"package.json",{"type":44,"value":632},{"type":39,"tag":96,"props":712,"children":714},{"className":713},[],[715],{"type":44,"value":716},"npm run",{"type":44,"value":718}," scripts and required dependencies",{"type":39,"tag":69,"props":720,"children":721},{},[722,728,730,736,737],{"type":39,"tag":96,"props":723,"children":725},{"className":724},[],[726],{"type":44,"value":727},".gitignore",{"type":44,"value":729}," excluding ",{"type":39,"tag":96,"props":731,"children":733},{"className":732},[],[734],{"type":44,"value":735},"node_modules\u002F",{"type":44,"value":639},{"type":39,"tag":96,"props":738,"children":740},{"className":739},[],[741],{"type":44,"value":742},"dist\u002F",{"type":39,"tag":116,"props":744,"children":746},{"id":745},"api-reference-source-files",[747],{"type":44,"value":748},"API Reference (Source Files)",{"type":39,"tag":47,"props":750,"children":751},{},[752,754,760],{"type":44,"value":753},"Read JSDoc documentation directly from ",{"type":39,"tag":96,"props":755,"children":757},{"className":756},[],[758],{"type":44,"value":759},"\u002Ftmp\u002Fmcp-ext-apps\u002Fsrc\u002F",{"type":44,"value":415},{"type":39,"tag":123,"props":762,"children":763},{},[764,780],{"type":39,"tag":127,"props":765,"children":766},{},[767],{"type":39,"tag":131,"props":768,"children":769},{},[770,775],{"type":39,"tag":135,"props":771,"children":772},{},[773],{"type":44,"value":774},"File",{"type":39,"tag":135,"props":776,"children":777},{},[778],{"type":44,"value":779},"Contents",{"type":39,"tag":151,"props":781,"children":782},{},[783,835,863,903,938],{"type":39,"tag":131,"props":784,"children":785},{},[786,795],{"type":39,"tag":158,"props":787,"children":788},{},[789],{"type":39,"tag":96,"props":790,"children":792},{"className":791},[],[793],{"type":44,"value":794},"src\u002Fapp.ts",{"type":39,"tag":158,"props":796,"children":797},{},[798,804,806,812,813,819,820,826,827,833],{"type":39,"tag":96,"props":799,"children":801},{"className":800},[],[802],{"type":44,"value":803},"App",{"type":44,"value":805}," class, handlers (",{"type":39,"tag":96,"props":807,"children":809},{"className":808},[],[810],{"type":44,"value":811},"ontoolinput",{"type":44,"value":244},{"type":39,"tag":96,"props":814,"children":816},{"className":815},[],[817],{"type":44,"value":818},"ontoolresult",{"type":44,"value":244},{"type":39,"tag":96,"props":821,"children":823},{"className":822},[],[824],{"type":44,"value":825},"onhostcontextchanged",{"type":44,"value":244},{"type":39,"tag":96,"props":828,"children":830},{"className":829},[],[831],{"type":44,"value":832},"onteardown",{"type":44,"value":834},", etc.), lifecycle",{"type":39,"tag":131,"props":836,"children":837},{},[838,847],{"type":39,"tag":158,"props":839,"children":840},{},[841],{"type":39,"tag":96,"props":842,"children":844},{"className":843},[],[845],{"type":44,"value":846},"src\u002Fserver\u002Findex.ts",{"type":39,"tag":158,"props":848,"children":849},{},[850,855,856,861],{"type":39,"tag":96,"props":851,"children":853},{"className":852},[],[854],{"type":44,"value":242},{"type":44,"value":244},{"type":39,"tag":96,"props":857,"children":859},{"className":858},[],[860],{"type":44,"value":250},{"type":44,"value":862},", helper functions",{"type":39,"tag":131,"props":864,"children":865},{},[866,875],{"type":39,"tag":158,"props":867,"children":868},{},[869],{"type":39,"tag":96,"props":870,"children":872},{"className":871},[],[873],{"type":44,"value":874},"src\u002Fspec.types.ts",{"type":39,"tag":158,"props":876,"children":877},{},[878,880,886,887,893,895,901],{"type":44,"value":879},"All type definitions: ",{"type":39,"tag":96,"props":881,"children":883},{"className":882},[],[884],{"type":44,"value":885},"McpUiHostContext",{"type":44,"value":244},{"type":39,"tag":96,"props":888,"children":890},{"className":889},[],[891],{"type":44,"value":892},"McpUiStyleVariableKey",{"type":44,"value":894}," (CSS variable names), ",{"type":39,"tag":96,"props":896,"children":898},{"className":897},[],[899],{"type":44,"value":900},"McpUiResourceCsp",{"type":44,"value":902}," (CSP configuration), etc.",{"type":39,"tag":131,"props":904,"children":905},{},[906,915],{"type":39,"tag":158,"props":907,"children":908},{},[909],{"type":39,"tag":96,"props":910,"children":912},{"className":911},[],[913],{"type":44,"value":914},"src\u002Fstyles.ts",{"type":39,"tag":158,"props":916,"children":917},{},[918,924,925,931,932],{"type":39,"tag":96,"props":919,"children":921},{"className":920},[],[922],{"type":44,"value":923},"applyDocumentTheme",{"type":44,"value":244},{"type":39,"tag":96,"props":926,"children":928},{"className":927},[],[929],{"type":44,"value":930},"applyHostStyleVariables",{"type":44,"value":244},{"type":39,"tag":96,"props":933,"children":935},{"className":934},[],[936],{"type":44,"value":937},"applyHostFonts",{"type":39,"tag":131,"props":939,"children":940},{},[941,950],{"type":39,"tag":158,"props":942,"children":943},{},[944],{"type":39,"tag":96,"props":945,"children":947},{"className":946},[],[948],{"type":44,"value":949},"src\u002Freact\u002FuseApp.tsx",{"type":39,"tag":158,"props":951,"children":952},{},[953,958],{"type":39,"tag":96,"props":954,"children":956},{"className":955},[],[957],{"type":44,"value":171},{"type":44,"value":959}," hook for React apps",{"type":39,"tag":116,"props":961,"children":963},{"id":962},"advanced-patterns",[964],{"type":44,"value":965},"Advanced Patterns",{"type":39,"tag":47,"props":967,"children":968},{},[969,971,977],{"type":44,"value":970},"See ",{"type":39,"tag":96,"props":972,"children":974},{"className":973},[],[975],{"type":44,"value":976},"\u002Ftmp\u002Fmcp-ext-apps\u002Fdocs\u002Fpatterns.md",{"type":44,"value":978}," for detailed recipes:",{"type":39,"tag":229,"props":980,"children":981},{},[982,1000,1010,1020,1037,1055,1079,1089,1106,1130,1147,1157],{"type":39,"tag":69,"props":983,"children":984},{},[985,990,992,998],{"type":39,"tag":73,"props":986,"children":987},{},[988],{"type":44,"value":989},"App-only tools",{"type":44,"value":991}," — ",{"type":39,"tag":96,"props":993,"children":995},{"className":994},[],[996],{"type":44,"value":997},"visibility: [\"app\"]",{"type":44,"value":999},", hiding tools from model",{"type":39,"tag":69,"props":1001,"children":1002},{},[1003,1008],{"type":39,"tag":73,"props":1004,"children":1005},{},[1006],{"type":44,"value":1007},"Polling",{"type":44,"value":1009}," — real-time dashboards, interval management",{"type":39,"tag":69,"props":1011,"children":1012},{},[1013,1018],{"type":39,"tag":73,"props":1014,"children":1015},{},[1016],{"type":44,"value":1017},"Chunked responses",{"type":44,"value":1019}," — large files, pagination, base64 encoding",{"type":39,"tag":69,"props":1021,"children":1022},{},[1023,1028,1029,1035],{"type":39,"tag":73,"props":1024,"children":1025},{},[1026],{"type":44,"value":1027},"Error handling",{"type":44,"value":991},{"type":39,"tag":96,"props":1030,"children":1032},{"className":1031},[],[1033],{"type":44,"value":1034},"isError",{"type":44,"value":1036},", informing model of failures",{"type":39,"tag":69,"props":1038,"children":1039},{},[1040,1045,1047,1053],{"type":39,"tag":73,"props":1041,"children":1042},{},[1043],{"type":44,"value":1044},"Binary resources",{"type":44,"value":1046}," — audio\u002Fvideo\u002Fetc via ",{"type":39,"tag":96,"props":1048,"children":1050},{"className":1049},[],[1051],{"type":44,"value":1052},"resources\u002Fread",{"type":44,"value":1054},", blob field",{"type":39,"tag":69,"props":1056,"children":1057},{},[1058,1063,1065,1071,1073],{"type":39,"tag":73,"props":1059,"children":1060},{},[1061],{"type":44,"value":1062},"Network requests",{"type":44,"value":1064}," — assets, fetch, CSP, ",{"type":39,"tag":96,"props":1066,"children":1068},{"className":1067},[],[1069],{"type":44,"value":1070},"_meta.ui.csp",{"type":44,"value":1072},", CORS, ",{"type":39,"tag":96,"props":1074,"children":1076},{"className":1075},[],[1077],{"type":44,"value":1078},"_meta.ui.domain",{"type":39,"tag":69,"props":1080,"children":1081},{},[1082,1087],{"type":39,"tag":73,"props":1083,"children":1084},{},[1085],{"type":44,"value":1086},"Host context",{"type":44,"value":1088}," — theme, styling, fonts, safe area insets",{"type":39,"tag":69,"props":1090,"children":1091},{},[1092,1097,1098,1104],{"type":39,"tag":73,"props":1093,"children":1094},{},[1095],{"type":44,"value":1096},"Fullscreen mode",{"type":44,"value":991},{"type":39,"tag":96,"props":1099,"children":1101},{"className":1100},[],[1102],{"type":44,"value":1103},"requestDisplayMode",{"type":44,"value":1105},", display mode changes",{"type":39,"tag":69,"props":1107,"children":1108},{},[1109,1114,1115,1121,1122,1128],{"type":39,"tag":73,"props":1110,"children":1111},{},[1112],{"type":44,"value":1113},"Model context",{"type":44,"value":991},{"type":39,"tag":96,"props":1116,"children":1118},{"className":1117},[],[1119],{"type":44,"value":1120},"updateModelContext",{"type":44,"value":244},{"type":39,"tag":96,"props":1123,"children":1125},{"className":1124},[],[1126],{"type":44,"value":1127},"sendMessage",{"type":44,"value":1129},", keeping model informed",{"type":39,"tag":69,"props":1131,"children":1132},{},[1133,1138,1139,1145],{"type":39,"tag":73,"props":1134,"children":1135},{},[1136],{"type":44,"value":1137},"View state",{"type":44,"value":991},{"type":39,"tag":96,"props":1140,"children":1142},{"className":1141},[],[1143],{"type":44,"value":1144},"viewUUID",{"type":44,"value":1146},", localStorage, state recovery",{"type":39,"tag":69,"props":1148,"children":1149},{},[1150,1155],{"type":39,"tag":73,"props":1151,"children":1152},{},[1153],{"type":44,"value":1154},"Visibility-based pause",{"type":44,"value":1156}," — IntersectionObserver, pausing animations\u002FWebGL",{"type":39,"tag":69,"props":1158,"children":1159},{},[1160,1165,1166,1172],{"type":39,"tag":73,"props":1161,"children":1162},{},[1163],{"type":44,"value":1164},"Streaming input",{"type":44,"value":991},{"type":39,"tag":96,"props":1167,"children":1169},{"className":1168},[],[1170],{"type":44,"value":1171},"ontoolinputpartial",{"type":44,"value":1173},", progressive rendering",{"type":39,"tag":116,"props":1175,"children":1177},{"id":1176},"reference-host-implementation",[1178],{"type":44,"value":1179},"Reference Host Implementation",{"type":39,"tag":47,"props":1181,"children":1182},{},[1183,1189],{"type":39,"tag":96,"props":1184,"children":1186},{"className":1185},[],[1187],{"type":44,"value":1188},"\u002Ftmp\u002Fmcp-ext-apps\u002Fexamples\u002Fbasic-host\u002F",{"type":44,"value":1190}," shows one way an MCP Apps-capable host could be implemented. Real-world hosts like Claude Desktop are more sophisticated—use basic-host for local testing and protocol understanding, not as a guarantee of host behavior.",{"type":39,"tag":53,"props":1192,"children":1194},{"id":1193},"critical-implementation-notes",[1195],{"type":44,"value":1196},"Critical Implementation Notes",{"type":39,"tag":116,"props":1198,"children":1200},{"id":1199},"adding-dependencies",[1201],{"type":44,"value":1202},"Adding Dependencies",{"type":39,"tag":47,"props":1204,"children":1205},{},[1206,1211,1213,1219],{"type":39,"tag":73,"props":1207,"children":1208},{},[1209],{"type":44,"value":1210},"Always",{"type":44,"value":1212}," use ",{"type":39,"tag":96,"props":1214,"children":1216},{"className":1215},[],[1217],{"type":44,"value":1218},"npm install",{"type":44,"value":1220}," to add dependencies rather than manually writing version numbers:",{"type":39,"tag":312,"props":1222,"children":1224},{"className":314,"code":1223,"language":316,"meta":317,"style":317},"npm install @modelcontextprotocol\u002Fext-apps @modelcontextprotocol\u002Fsdk zod express cors\nnpm install -D typescript vite vite-plugin-singlefile concurrently cross-env @types\u002Fnode @types\u002Fexpress @types\u002Fcors\n",[1225],{"type":39,"tag":96,"props":1226,"children":1227},{"__ignoreMap":317},[1228,1265],{"type":39,"tag":323,"props":1229,"children":1230},{"class":325,"line":326},[1231,1235,1240,1245,1250,1255,1260],{"type":39,"tag":323,"props":1232,"children":1233},{"style":330},[1234],{"type":44,"value":365},{"type":39,"tag":323,"props":1236,"children":1237},{"style":336},[1238],{"type":44,"value":1239}," install",{"type":39,"tag":323,"props":1241,"children":1242},{"style":336},[1243],{"type":44,"value":1244}," @modelcontextprotocol\u002Fext-apps",{"type":39,"tag":323,"props":1246,"children":1247},{"style":336},[1248],{"type":44,"value":1249}," @modelcontextprotocol\u002Fsdk",{"type":39,"tag":323,"props":1251,"children":1252},{"style":336},[1253],{"type":44,"value":1254}," zod",{"type":39,"tag":323,"props":1256,"children":1257},{"style":336},[1258],{"type":44,"value":1259}," express",{"type":39,"tag":323,"props":1261,"children":1262},{"style":336},[1263],{"type":44,"value":1264}," cors\n",{"type":39,"tag":323,"props":1266,"children":1268},{"class":325,"line":1267},2,[1269,1273,1277,1282,1287,1292,1297,1302,1307,1312,1317],{"type":39,"tag":323,"props":1270,"children":1271},{"style":330},[1272],{"type":44,"value":365},{"type":39,"tag":323,"props":1274,"children":1275},{"style":336},[1276],{"type":44,"value":1239},{"type":39,"tag":323,"props":1278,"children":1279},{"style":336},[1280],{"type":44,"value":1281}," -D",{"type":39,"tag":323,"props":1283,"children":1284},{"style":336},[1285],{"type":44,"value":1286}," typescript",{"type":39,"tag":323,"props":1288,"children":1289},{"style":336},[1290],{"type":44,"value":1291}," vite",{"type":39,"tag":323,"props":1293,"children":1294},{"style":336},[1295],{"type":44,"value":1296}," vite-plugin-singlefile",{"type":39,"tag":323,"props":1298,"children":1299},{"style":336},[1300],{"type":44,"value":1301}," concurrently",{"type":39,"tag":323,"props":1303,"children":1304},{"style":336},[1305],{"type":44,"value":1306}," cross-env",{"type":39,"tag":323,"props":1308,"children":1309},{"style":336},[1310],{"type":44,"value":1311}," @types\u002Fnode",{"type":39,"tag":323,"props":1313,"children":1314},{"style":336},[1315],{"type":44,"value":1316}," @types\u002Fexpress",{"type":39,"tag":323,"props":1318,"children":1319},{"style":336},[1320],{"type":44,"value":1321}," @types\u002Fcors\n",{"type":39,"tag":47,"props":1323,"children":1324},{},[1325,1327,1332],{"type":44,"value":1326},"This lets npm resolve the latest compatible versions. ",{"type":39,"tag":73,"props":1328,"children":1329},{},[1330],{"type":44,"value":1331},"Never",{"type":44,"value":1333}," specify version numbers from memory.",{"type":39,"tag":116,"props":1335,"children":1337},{"id":1336},"typescript-server-execution",[1338],{"type":44,"value":1339},"TypeScript Server Execution",{"type":39,"tag":47,"props":1341,"children":1342},{},[1343,1345,1351],{"type":44,"value":1344},"Unless the user has specified otherwise, use ",{"type":39,"tag":96,"props":1346,"children":1348},{"className":1347},[],[1349],{"type":44,"value":1350},"tsx",{"type":44,"value":1352}," for running TypeScript server files. For example:",{"type":39,"tag":312,"props":1354,"children":1356},{"className":314,"code":1355,"language":316,"meta":317,"style":317},"npm install -D tsx\n\nnpm pkg set scripts.dev=\"cross-env NODE_ENV=development concurrently 'cross-env INPUT=mcp-app.html vite build --watch' 'tsx --watch main.ts'\"\n",[1357],{"type":39,"tag":96,"props":1358,"children":1359},{"__ignoreMap":317},[1360,1380,1389],{"type":39,"tag":323,"props":1361,"children":1362},{"class":325,"line":326},[1363,1367,1371,1375],{"type":39,"tag":323,"props":1364,"children":1365},{"style":330},[1366],{"type":44,"value":365},{"type":39,"tag":323,"props":1368,"children":1369},{"style":336},[1370],{"type":44,"value":1239},{"type":39,"tag":323,"props":1372,"children":1373},{"style":336},[1374],{"type":44,"value":1281},{"type":39,"tag":323,"props":1376,"children":1377},{"style":336},[1378],{"type":44,"value":1379}," tsx\n",{"type":39,"tag":323,"props":1381,"children":1382},{"class":325,"line":1267},[1383],{"type":39,"tag":323,"props":1384,"children":1386},{"emptyLinePlaceholder":1385},true,[1387],{"type":44,"value":1388},"\n",{"type":39,"tag":323,"props":1390,"children":1392},{"class":325,"line":1391},3,[1393,1397,1402,1407,1412,1417,1422],{"type":39,"tag":323,"props":1394,"children":1395},{"style":330},[1396],{"type":44,"value":365},{"type":39,"tag":323,"props":1398,"children":1399},{"style":336},[1400],{"type":44,"value":1401}," pkg",{"type":39,"tag":323,"props":1403,"children":1404},{"style":336},[1405],{"type":44,"value":1406}," set",{"type":39,"tag":323,"props":1408,"children":1409},{"style":336},[1410],{"type":44,"value":1411}," scripts.dev=",{"type":39,"tag":323,"props":1413,"children":1414},{"style":347},[1415],{"type":44,"value":1416},"\"",{"type":39,"tag":323,"props":1418,"children":1419},{"style":336},[1420],{"type":44,"value":1421},"cross-env NODE_ENV=development concurrently 'cross-env INPUT=mcp-app.html vite build --watch' 'tsx --watch main.ts'",{"type":39,"tag":323,"props":1423,"children":1424},{"style":347},[1425],{"type":44,"value":1426},"\"\n",{"type":39,"tag":1428,"props":1429,"children":1430},"blockquote",{},[1431],{"type":39,"tag":47,"props":1432,"children":1433},{},[1434,1439,1441,1447,1449,1454],{"type":39,"tag":323,"props":1435,"children":1436},{},[1437],{"type":44,"value":1438},"!NOTE",{"type":44,"value":1440},"\nThe SDK examples use ",{"type":39,"tag":96,"props":1442,"children":1444},{"className":1443},[],[1445],{"type":44,"value":1446},"bun",{"type":44,"value":1448}," but generated projects should default to ",{"type":39,"tag":96,"props":1450,"children":1452},{"className":1451},[],[1453],{"type":44,"value":1350},{"type":44,"value":1455}," for broader compatibility.",{"type":39,"tag":116,"props":1457,"children":1459},{"id":1458},"handler-registration-order",[1460],{"type":44,"value":1461},"Handler Registration Order",{"type":39,"tag":47,"props":1463,"children":1464},{},[1465,1467,1473],{"type":44,"value":1466},"Register ALL handlers BEFORE calling ",{"type":39,"tag":96,"props":1468,"children":1470},{"className":1469},[],[1471],{"type":44,"value":1472},"app.connect()",{"type":44,"value":415},{"type":39,"tag":312,"props":1475,"children":1479},{"className":1476,"code":1477,"language":1478,"meta":317,"style":317},"language-typescript shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","const app = new App({ name: \"My App\", version: \"1.0.0\" });\n\n\u002F\u002F Register handlers first\napp.ontoolinput = (params) => { \u002F* handle input *\u002F };\napp.ontoolresult = (result) => { \u002F* handle result *\u002F };\napp.onhostcontextchanged = (ctx) => { \u002F* handle context *\u002F };\napp.onteardown = async () => { return {}; };\n\u002F\u002F etc.\n\n\u002F\u002F Then connect\nawait app.connect();\n","typescript",[1480],{"type":39,"tag":96,"props":1481,"children":1482},{"__ignoreMap":317},[1483,1589,1596,1605,1663,1713,1763,1816,1825,1833,1842],{"type":39,"tag":323,"props":1484,"children":1485},{"class":325,"line":326},[1486,1492,1498,1503,1508,1514,1519,1524,1530,1534,1538,1543,1547,1552,1557,1561,1565,1570,1574,1579,1584],{"type":39,"tag":323,"props":1487,"children":1489},{"style":1488},"--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA",[1490],{"type":44,"value":1491},"const",{"type":39,"tag":323,"props":1493,"children":1495},{"style":1494},"--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8",[1496],{"type":44,"value":1497}," app ",{"type":39,"tag":323,"props":1499,"children":1500},{"style":347},[1501],{"type":44,"value":1502},"=",{"type":39,"tag":323,"props":1504,"children":1505},{"style":347},[1506],{"type":44,"value":1507}," new",{"type":39,"tag":323,"props":1509,"children":1511},{"style":1510},"--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF",[1512],{"type":44,"value":1513}," App",{"type":39,"tag":323,"props":1515,"children":1516},{"style":1494},[1517],{"type":44,"value":1518},"(",{"type":39,"tag":323,"props":1520,"children":1521},{"style":347},[1522],{"type":44,"value":1523},"{",{"type":39,"tag":323,"props":1525,"children":1527},{"style":1526},"--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178",[1528],{"type":44,"value":1529}," name",{"type":39,"tag":323,"props":1531,"children":1532},{"style":347},[1533],{"type":44,"value":415},{"type":39,"tag":323,"props":1535,"children":1536},{"style":347},[1537],{"type":44,"value":350},{"type":39,"tag":323,"props":1539,"children":1540},{"style":336},[1541],{"type":44,"value":1542},"My App",{"type":39,"tag":323,"props":1544,"children":1545},{"style":347},[1546],{"type":44,"value":1416},{"type":39,"tag":323,"props":1548,"children":1549},{"style":347},[1550],{"type":44,"value":1551},",",{"type":39,"tag":323,"props":1553,"children":1554},{"style":1526},[1555],{"type":44,"value":1556}," version",{"type":39,"tag":323,"props":1558,"children":1559},{"style":347},[1560],{"type":44,"value":415},{"type":39,"tag":323,"props":1562,"children":1563},{"style":347},[1564],{"type":44,"value":350},{"type":39,"tag":323,"props":1566,"children":1567},{"style":336},[1568],{"type":44,"value":1569},"1.0.0",{"type":39,"tag":323,"props":1571,"children":1572},{"style":347},[1573],{"type":44,"value":1416},{"type":39,"tag":323,"props":1575,"children":1576},{"style":347},[1577],{"type":44,"value":1578}," }",{"type":39,"tag":323,"props":1580,"children":1581},{"style":1494},[1582],{"type":44,"value":1583},")",{"type":39,"tag":323,"props":1585,"children":1586},{"style":347},[1587],{"type":44,"value":1588},";\n",{"type":39,"tag":323,"props":1590,"children":1591},{"class":325,"line":1267},[1592],{"type":39,"tag":323,"props":1593,"children":1594},{"emptyLinePlaceholder":1385},[1595],{"type":44,"value":1388},{"type":39,"tag":323,"props":1597,"children":1598},{"class":325,"line":1391},[1599],{"type":39,"tag":323,"props":1600,"children":1602},{"style":1601},"--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#546E7A;--shiki-default-font-style:italic;--shiki-dark:#676E95;--shiki-dark-font-style:italic",[1603],{"type":44,"value":1604},"\u002F\u002F Register handlers first\n",{"type":39,"tag":323,"props":1606,"children":1608},{"class":325,"line":1607},4,[1609,1614,1619,1623,1628,1633,1639,1643,1648,1653,1658],{"type":39,"tag":323,"props":1610,"children":1611},{"style":1494},[1612],{"type":44,"value":1613},"app",{"type":39,"tag":323,"props":1615,"children":1616},{"style":347},[1617],{"type":44,"value":1618},".",{"type":39,"tag":323,"props":1620,"children":1621},{"style":1510},[1622],{"type":44,"value":811},{"type":39,"tag":323,"props":1624,"children":1625},{"style":347},[1626],{"type":44,"value":1627}," =",{"type":39,"tag":323,"props":1629,"children":1630},{"style":347},[1631],{"type":44,"value":1632}," (",{"type":39,"tag":323,"props":1634,"children":1636},{"style":1635},"--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#EEFFFF;--shiki-default-font-style:italic;--shiki-dark:#BABED8;--shiki-dark-font-style:italic",[1637],{"type":44,"value":1638},"params",{"type":39,"tag":323,"props":1640,"children":1641},{"style":347},[1642],{"type":44,"value":1583},{"type":39,"tag":323,"props":1644,"children":1645},{"style":1488},[1646],{"type":44,"value":1647}," =>",{"type":39,"tag":323,"props":1649,"children":1650},{"style":347},[1651],{"type":44,"value":1652}," {",{"type":39,"tag":323,"props":1654,"children":1655},{"style":1601},[1656],{"type":44,"value":1657}," \u002F* handle input *\u002F",{"type":39,"tag":323,"props":1659,"children":1660},{"style":347},[1661],{"type":44,"value":1662}," };\n",{"type":39,"tag":323,"props":1664,"children":1666},{"class":325,"line":1665},5,[1667,1671,1675,1679,1683,1687,1692,1696,1700,1704,1709],{"type":39,"tag":323,"props":1668,"children":1669},{"style":1494},[1670],{"type":44,"value":1613},{"type":39,"tag":323,"props":1672,"children":1673},{"style":347},[1674],{"type":44,"value":1618},{"type":39,"tag":323,"props":1676,"children":1677},{"style":1510},[1678],{"type":44,"value":818},{"type":39,"tag":323,"props":1680,"children":1681},{"style":347},[1682],{"type":44,"value":1627},{"type":39,"tag":323,"props":1684,"children":1685},{"style":347},[1686],{"type":44,"value":1632},{"type":39,"tag":323,"props":1688,"children":1689},{"style":1635},[1690],{"type":44,"value":1691},"result",{"type":39,"tag":323,"props":1693,"children":1694},{"style":347},[1695],{"type":44,"value":1583},{"type":39,"tag":323,"props":1697,"children":1698},{"style":1488},[1699],{"type":44,"value":1647},{"type":39,"tag":323,"props":1701,"children":1702},{"style":347},[1703],{"type":44,"value":1652},{"type":39,"tag":323,"props":1705,"children":1706},{"style":1601},[1707],{"type":44,"value":1708}," \u002F* handle result *\u002F",{"type":39,"tag":323,"props":1710,"children":1711},{"style":347},[1712],{"type":44,"value":1662},{"type":39,"tag":323,"props":1714,"children":1716},{"class":325,"line":1715},6,[1717,1721,1725,1729,1733,1737,1742,1746,1750,1754,1759],{"type":39,"tag":323,"props":1718,"children":1719},{"style":1494},[1720],{"type":44,"value":1613},{"type":39,"tag":323,"props":1722,"children":1723},{"style":347},[1724],{"type":44,"value":1618},{"type":39,"tag":323,"props":1726,"children":1727},{"style":1510},[1728],{"type":44,"value":825},{"type":39,"tag":323,"props":1730,"children":1731},{"style":347},[1732],{"type":44,"value":1627},{"type":39,"tag":323,"props":1734,"children":1735},{"style":347},[1736],{"type":44,"value":1632},{"type":39,"tag":323,"props":1738,"children":1739},{"style":1635},[1740],{"type":44,"value":1741},"ctx",{"type":39,"tag":323,"props":1743,"children":1744},{"style":347},[1745],{"type":44,"value":1583},{"type":39,"tag":323,"props":1747,"children":1748},{"style":1488},[1749],{"type":44,"value":1647},{"type":39,"tag":323,"props":1751,"children":1752},{"style":347},[1753],{"type":44,"value":1652},{"type":39,"tag":323,"props":1755,"children":1756},{"style":1601},[1757],{"type":44,"value":1758}," \u002F* handle context *\u002F",{"type":39,"tag":323,"props":1760,"children":1761},{"style":347},[1762],{"type":44,"value":1662},{"type":39,"tag":323,"props":1764,"children":1766},{"class":325,"line":1765},7,[1767,1771,1775,1779,1783,1788,1793,1797,1801,1807,1812],{"type":39,"tag":323,"props":1768,"children":1769},{"style":1494},[1770],{"type":44,"value":1613},{"type":39,"tag":323,"props":1772,"children":1773},{"style":347},[1774],{"type":44,"value":1618},{"type":39,"tag":323,"props":1776,"children":1777},{"style":1510},[1778],{"type":44,"value":832},{"type":39,"tag":323,"props":1780,"children":1781},{"style":347},[1782],{"type":44,"value":1627},{"type":39,"tag":323,"props":1784,"children":1785},{"style":1488},[1786],{"type":44,"value":1787}," async",{"type":39,"tag":323,"props":1789,"children":1790},{"style":347},[1791],{"type":44,"value":1792}," ()",{"type":39,"tag":323,"props":1794,"children":1795},{"style":1488},[1796],{"type":44,"value":1647},{"type":39,"tag":323,"props":1798,"children":1799},{"style":347},[1800],{"type":44,"value":1652},{"type":39,"tag":323,"props":1802,"children":1804},{"style":1803},"--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic",[1805],{"type":44,"value":1806}," return",{"type":39,"tag":323,"props":1808,"children":1809},{"style":347},[1810],{"type":44,"value":1811}," {};",{"type":39,"tag":323,"props":1813,"children":1814},{"style":347},[1815],{"type":44,"value":1662},{"type":39,"tag":323,"props":1817,"children":1819},{"class":325,"line":1818},8,[1820],{"type":39,"tag":323,"props":1821,"children":1822},{"style":1601},[1823],{"type":44,"value":1824},"\u002F\u002F etc.\n",{"type":39,"tag":323,"props":1826,"children":1828},{"class":325,"line":1827},9,[1829],{"type":39,"tag":323,"props":1830,"children":1831},{"emptyLinePlaceholder":1385},[1832],{"type":44,"value":1388},{"type":39,"tag":323,"props":1834,"children":1836},{"class":325,"line":1835},10,[1837],{"type":39,"tag":323,"props":1838,"children":1839},{"style":1601},[1840],{"type":44,"value":1841},"\u002F\u002F Then connect\n",{"type":39,"tag":323,"props":1843,"children":1845},{"class":325,"line":1844},11,[1846,1851,1856,1860,1865,1870],{"type":39,"tag":323,"props":1847,"children":1848},{"style":1803},[1849],{"type":44,"value":1850},"await",{"type":39,"tag":323,"props":1852,"children":1853},{"style":1494},[1854],{"type":44,"value":1855}," app",{"type":39,"tag":323,"props":1857,"children":1858},{"style":347},[1859],{"type":44,"value":1618},{"type":39,"tag":323,"props":1861,"children":1862},{"style":1510},[1863],{"type":44,"value":1864},"connect",{"type":39,"tag":323,"props":1866,"children":1867},{"style":1494},[1868],{"type":44,"value":1869},"()",{"type":39,"tag":323,"props":1871,"children":1872},{"style":347},[1873],{"type":44,"value":1588},{"type":39,"tag":53,"props":1875,"children":1877},{"id":1876},"common-mistakes-to-avoid",[1878],{"type":44,"value":1879},"Common Mistakes to Avoid",{"type":39,"tag":65,"props":1881,"children":1882},{},[1883,1901,1919,1965,1980],{"type":39,"tag":69,"props":1884,"children":1885},{},[1886,1891,1893,1899],{"type":39,"tag":73,"props":1887,"children":1888},{},[1889],{"type":44,"value":1890},"No text fallback",{"type":44,"value":1892}," - Always provide ",{"type":39,"tag":96,"props":1894,"children":1896},{"className":1895},[],[1897],{"type":44,"value":1898},"content",{"type":44,"value":1900}," array for non-UI hosts",{"type":39,"tag":69,"props":1902,"children":1903},{},[1904,1909,1911,1917],{"type":39,"tag":73,"props":1905,"children":1906},{},[1907],{"type":44,"value":1908},"Missing CSP configuration",{"type":44,"value":1910}," - MCP Apps HTML is served as an MCP resource with no same-origin server; ALL network requests—even to ",{"type":39,"tag":96,"props":1912,"children":1914},{"className":1913},[],[1915],{"type":44,"value":1916},"localhost",{"type":44,"value":1918},"—require a CSP configuration",{"type":39,"tag":69,"props":1920,"children":1921},{},[1922,1927,1929,1934,1935,1940,1942,1948,1950,1956,1958,1963],{"type":39,"tag":73,"props":1923,"children":1924},{},[1925],{"type":44,"value":1926},"CSP or CORS config in wrong _meta object",{"type":44,"value":1928}," - ",{"type":39,"tag":96,"props":1930,"children":1932},{"className":1931},[],[1933],{"type":44,"value":1070},{"type":44,"value":639},{"type":39,"tag":96,"props":1936,"children":1938},{"className":1937},[],[1939],{"type":44,"value":1078},{"type":44,"value":1941}," go in the ",{"type":39,"tag":96,"props":1943,"children":1945},{"className":1944},[],[1946],{"type":44,"value":1947},"contents[]",{"type":44,"value":1949}," objects returned by ",{"type":39,"tag":96,"props":1951,"children":1953},{"className":1952},[],[1954],{"type":44,"value":1955},"registerAppResource()",{"type":44,"value":1957},"'s read callback, not in ",{"type":39,"tag":96,"props":1959,"children":1961},{"className":1960},[],[1962],{"type":44,"value":1955},{"type":44,"value":1964},"'s config object",{"type":39,"tag":69,"props":1966,"children":1967},{},[1968,1973,1975],{"type":39,"tag":73,"props":1969,"children":1970},{},[1971],{"type":44,"value":1972},"Handlers after app.connect()",{"type":44,"value":1974}," - Register ALL handlers BEFORE calling ",{"type":39,"tag":96,"props":1976,"children":1978},{"className":1977},[],[1979],{"type":44,"value":1472},{"type":39,"tag":69,"props":1981,"children":1982},{},[1983,1988,1990,1995],{"type":39,"tag":73,"props":1984,"children":1985},{},[1986],{"type":44,"value":1987},"No streaming for large inputs",{"type":44,"value":1989}," - Use ",{"type":39,"tag":96,"props":1991,"children":1993},{"className":1992},[],[1994],{"type":44,"value":1171},{"type":44,"value":1996}," to show progress during input generation",{"type":39,"tag":53,"props":1998,"children":2000},{"id":1999},"testing",[2001],{"type":44,"value":2002},"Testing",{"type":39,"tag":116,"props":2004,"children":2006},{"id":2005},"using-basic-host",[2007],{"type":44,"value":2008},"Using basic-host",{"type":39,"tag":47,"props":2010,"children":2011},{},[2012],{"type":44,"value":2013},"Test MCP Apps locally with the basic-host example:",{"type":39,"tag":312,"props":2015,"children":2017},{"className":314,"code":2016,"language":316,"meta":317,"style":317},"# Terminal 1: Build and run your server\nnpm run build && npm run serve\n\n# Terminal 2: Run basic-host (from cloned repo)\ncd \u002Ftmp\u002Fmcp-ext-apps\u002Fexamples\u002Fbasic-host\nnpm install\nSERVERS='[\"http:\u002F\u002Flocalhost:3001\u002Fmcp\"]' npm run start\n# Open http:\u002F\u002Flocalhost:8080\n",[2018],{"type":39,"tag":96,"props":2019,"children":2020},{"__ignoreMap":317},[2021,2029,2065,2072,2080,2093,2105,2144],{"type":39,"tag":323,"props":2022,"children":2023},{"class":325,"line":326},[2024],{"type":39,"tag":323,"props":2025,"children":2026},{"style":1601},[2027],{"type":44,"value":2028},"# Terminal 1: Build and run your server\n",{"type":39,"tag":323,"props":2030,"children":2031},{"class":325,"line":1267},[2032,2036,2041,2046,2051,2056,2060],{"type":39,"tag":323,"props":2033,"children":2034},{"style":330},[2035],{"type":44,"value":365},{"type":39,"tag":323,"props":2037,"children":2038},{"style":336},[2039],{"type":44,"value":2040}," run",{"type":39,"tag":323,"props":2042,"children":2043},{"style":336},[2044],{"type":44,"value":2045}," build",{"type":39,"tag":323,"props":2047,"children":2048},{"style":347},[2049],{"type":44,"value":2050}," &&",{"type":39,"tag":323,"props":2052,"children":2053},{"style":330},[2054],{"type":44,"value":2055}," npm",{"type":39,"tag":323,"props":2057,"children":2058},{"style":336},[2059],{"type":44,"value":2040},{"type":39,"tag":323,"props":2061,"children":2062},{"style":336},[2063],{"type":44,"value":2064}," serve\n",{"type":39,"tag":323,"props":2066,"children":2067},{"class":325,"line":1391},[2068],{"type":39,"tag":323,"props":2069,"children":2070},{"emptyLinePlaceholder":1385},[2071],{"type":44,"value":1388},{"type":39,"tag":323,"props":2073,"children":2074},{"class":325,"line":1607},[2075],{"type":39,"tag":323,"props":2076,"children":2077},{"style":1601},[2078],{"type":44,"value":2079},"# Terminal 2: Run basic-host (from cloned repo)\n",{"type":39,"tag":323,"props":2081,"children":2082},{"class":325,"line":1665},[2083,2088],{"type":39,"tag":323,"props":2084,"children":2085},{"style":1510},[2086],{"type":44,"value":2087},"cd",{"type":39,"tag":323,"props":2089,"children":2090},{"style":336},[2091],{"type":44,"value":2092}," \u002Ftmp\u002Fmcp-ext-apps\u002Fexamples\u002Fbasic-host\n",{"type":39,"tag":323,"props":2094,"children":2095},{"class":325,"line":1715},[2096,2100],{"type":39,"tag":323,"props":2097,"children":2098},{"style":330},[2099],{"type":44,"value":365},{"type":39,"tag":323,"props":2101,"children":2102},{"style":336},[2103],{"type":44,"value":2104}," install\n",{"type":39,"tag":323,"props":2106,"children":2107},{"class":325,"line":1765},[2108,2113,2117,2122,2127,2131,2135,2139],{"type":39,"tag":323,"props":2109,"children":2110},{"style":1494},[2111],{"type":44,"value":2112},"SERVERS",{"type":39,"tag":323,"props":2114,"children":2115},{"style":347},[2116],{"type":44,"value":1502},{"type":39,"tag":323,"props":2118,"children":2119},{"style":347},[2120],{"type":44,"value":2121},"'",{"type":39,"tag":323,"props":2123,"children":2124},{"style":336},[2125],{"type":44,"value":2126},"[\"http:\u002F\u002Flocalhost:3001\u002Fmcp\"]",{"type":39,"tag":323,"props":2128,"children":2129},{"style":347},[2130],{"type":44,"value":2121},{"type":39,"tag":323,"props":2132,"children":2133},{"style":330},[2134],{"type":44,"value":2055},{"type":39,"tag":323,"props":2136,"children":2137},{"style":336},[2138],{"type":44,"value":2040},{"type":39,"tag":323,"props":2140,"children":2141},{"style":336},[2142],{"type":44,"value":2143}," start\n",{"type":39,"tag":323,"props":2145,"children":2146},{"class":325,"line":1818},[2147],{"type":39,"tag":323,"props":2148,"children":2149},{"style":1601},[2150],{"type":44,"value":2151},"# Open http:\u002F\u002Flocalhost:8080\n",{"type":39,"tag":47,"props":2153,"children":2154},{},[2155,2157,2162,2164,2170],{"type":44,"value":2156},"Configure ",{"type":39,"tag":96,"props":2158,"children":2160},{"className":2159},[],[2161],{"type":44,"value":2112},{"type":44,"value":2163}," with a JSON array of your server URLs (default: ",{"type":39,"tag":96,"props":2165,"children":2167},{"className":2166},[],[2168],{"type":44,"value":2169},"http:\u002F\u002Flocalhost:3001\u002Fmcp",{"type":44,"value":2171},").",{"type":39,"tag":116,"props":2173,"children":2175},{"id":2174},"debug-with-sendlog",[2176],{"type":44,"value":2177},"Debug with sendLog",{"type":39,"tag":47,"props":2179,"children":2180},{},[2181],{"type":44,"value":2182},"Send debug logs to the host application (rather than just the iframe's dev console):",{"type":39,"tag":312,"props":2184,"children":2186},{"className":1476,"code":2185,"language":1478,"meta":317,"style":317},"await app.sendLog({ level: \"info\", data: \"Debug message\" });\nawait app.sendLog({ level: \"error\", data: { error: err.message } });\n",[2187],{"type":39,"tag":96,"props":2188,"children":2189},{"__ignoreMap":317},[2190,2278],{"type":39,"tag":323,"props":2191,"children":2192},{"class":325,"line":326},[2193,2197,2201,2205,2210,2214,2218,2223,2227,2231,2236,2240,2244,2249,2253,2257,2262,2266,2270,2274],{"type":39,"tag":323,"props":2194,"children":2195},{"style":1803},[2196],{"type":44,"value":1850},{"type":39,"tag":323,"props":2198,"children":2199},{"style":1494},[2200],{"type":44,"value":1855},{"type":39,"tag":323,"props":2202,"children":2203},{"style":347},[2204],{"type":44,"value":1618},{"type":39,"tag":323,"props":2206,"children":2207},{"style":1510},[2208],{"type":44,"value":2209},"sendLog",{"type":39,"tag":323,"props":2211,"children":2212},{"style":1494},[2213],{"type":44,"value":1518},{"type":39,"tag":323,"props":2215,"children":2216},{"style":347},[2217],{"type":44,"value":1523},{"type":39,"tag":323,"props":2219,"children":2220},{"style":1526},[2221],{"type":44,"value":2222}," level",{"type":39,"tag":323,"props":2224,"children":2225},{"style":347},[2226],{"type":44,"value":415},{"type":39,"tag":323,"props":2228,"children":2229},{"style":347},[2230],{"type":44,"value":350},{"type":39,"tag":323,"props":2232,"children":2233},{"style":336},[2234],{"type":44,"value":2235},"info",{"type":39,"tag":323,"props":2237,"children":2238},{"style":347},[2239],{"type":44,"value":1416},{"type":39,"tag":323,"props":2241,"children":2242},{"style":347},[2243],{"type":44,"value":1551},{"type":39,"tag":323,"props":2245,"children":2246},{"style":1526},[2247],{"type":44,"value":2248}," data",{"type":39,"tag":323,"props":2250,"children":2251},{"style":347},[2252],{"type":44,"value":415},{"type":39,"tag":323,"props":2254,"children":2255},{"style":347},[2256],{"type":44,"value":350},{"type":39,"tag":323,"props":2258,"children":2259},{"style":336},[2260],{"type":44,"value":2261},"Debug message",{"type":39,"tag":323,"props":2263,"children":2264},{"style":347},[2265],{"type":44,"value":1416},{"type":39,"tag":323,"props":2267,"children":2268},{"style":347},[2269],{"type":44,"value":1578},{"type":39,"tag":323,"props":2271,"children":2272},{"style":1494},[2273],{"type":44,"value":1583},{"type":39,"tag":323,"props":2275,"children":2276},{"style":347},[2277],{"type":44,"value":1588},{"type":39,"tag":323,"props":2279,"children":2280},{"class":325,"line":1267},[2281,2285,2289,2293,2297,2301,2305,2309,2313,2317,2322,2326,2330,2334,2338,2342,2347,2351,2356,2360,2365,2370,2374,2378],{"type":39,"tag":323,"props":2282,"children":2283},{"style":1803},[2284],{"type":44,"value":1850},{"type":39,"tag":323,"props":2286,"children":2287},{"style":1494},[2288],{"type":44,"value":1855},{"type":39,"tag":323,"props":2290,"children":2291},{"style":347},[2292],{"type":44,"value":1618},{"type":39,"tag":323,"props":2294,"children":2295},{"style":1510},[2296],{"type":44,"value":2209},{"type":39,"tag":323,"props":2298,"children":2299},{"style":1494},[2300],{"type":44,"value":1518},{"type":39,"tag":323,"props":2302,"children":2303},{"style":347},[2304],{"type":44,"value":1523},{"type":39,"tag":323,"props":2306,"children":2307},{"style":1526},[2308],{"type":44,"value":2222},{"type":39,"tag":323,"props":2310,"children":2311},{"style":347},[2312],{"type":44,"value":415},{"type":39,"tag":323,"props":2314,"children":2315},{"style":347},[2316],{"type":44,"value":350},{"type":39,"tag":323,"props":2318,"children":2319},{"style":336},[2320],{"type":44,"value":2321},"error",{"type":39,"tag":323,"props":2323,"children":2324},{"style":347},[2325],{"type":44,"value":1416},{"type":39,"tag":323,"props":2327,"children":2328},{"style":347},[2329],{"type":44,"value":1551},{"type":39,"tag":323,"props":2331,"children":2332},{"style":1526},[2333],{"type":44,"value":2248},{"type":39,"tag":323,"props":2335,"children":2336},{"style":347},[2337],{"type":44,"value":415},{"type":39,"tag":323,"props":2339,"children":2340},{"style":347},[2341],{"type":44,"value":1652},{"type":39,"tag":323,"props":2343,"children":2344},{"style":1526},[2345],{"type":44,"value":2346}," error",{"type":39,"tag":323,"props":2348,"children":2349},{"style":347},[2350],{"type":44,"value":415},{"type":39,"tag":323,"props":2352,"children":2353},{"style":1494},[2354],{"type":44,"value":2355}," err",{"type":39,"tag":323,"props":2357,"children":2358},{"style":347},[2359],{"type":44,"value":1618},{"type":39,"tag":323,"props":2361,"children":2362},{"style":1494},[2363],{"type":44,"value":2364},"message ",{"type":39,"tag":323,"props":2366,"children":2367},{"style":347},[2368],{"type":44,"value":2369},"}",{"type":39,"tag":323,"props":2371,"children":2372},{"style":347},[2373],{"type":44,"value":1578},{"type":39,"tag":323,"props":2375,"children":2376},{"style":1494},[2377],{"type":44,"value":1583},{"type":39,"tag":323,"props":2379,"children":2380},{"style":347},[2381],{"type":44,"value":1588},{"type":39,"tag":2383,"props":2384,"children":2385},"style",{},[2386],{"type":44,"value":2387},"html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}",{"items":2389,"total":2492},[2390,2407,2422,2436,2452,2465,2479],{"slug":2391,"name":2391,"fn":2392,"description":2393,"org":2394,"tags":2395,"stars":23,"repoUrl":24,"updatedAt":2406},"add-app-to-server","add interactive UI to MCP servers","This skill should be used when the user asks to \"add an app to my MCP server\", \"add UI to my MCP server\", \"add a view to my MCP tool\", \"enrich MCP tools with UI\", \"add interactive UI to existing server\", \"add MCP Apps to my server\", or needs to add interactive UI capabilities to an existing MCP server that already has tools. Provides guidance for analyzing existing tools and adding MCP Apps UI resources.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":11},[2396,2399,2400,2403],{"name":2397,"slug":2398,"type":16},"Frontend","frontend",{"name":18,"slug":19,"type":16},{"name":2401,"slug":2402,"type":16},"Plugin Development","plugin-development",{"name":2404,"slug":2405,"type":16},"UI Components","ui-components","2026-07-12T08:41:40.4008",{"slug":2408,"name":2408,"fn":2409,"description":2410,"org":2411,"tags":2412,"stars":23,"repoUrl":24,"updatedAt":2421},"agui-author","emit interactive dashboard UI components","Author live dashboard UI from an agent via the `emit_ui` MCP tool. Emit one of six allow-listed components (approval_card, choice_prompt, diff_summary, progress, metric, agent_card) with JSON props and it renders in any AG-UI client watching the fleet. Use when you want the operator to see a decision, a diff, or a status readout instead of scrolling terminal text. Arbitrary HTML\u002Fmarkup is refused.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":11},[2413,2416,2419,2420],{"name":2414,"slug":2415,"type":16},"Agents","agents",{"name":2417,"slug":2418,"type":16},"Dashboards","dashboards",{"name":18,"slug":19,"type":16},{"name":2404,"slug":2405,"type":16},"2026-07-22T05:35:50.851108",{"slug":2423,"name":2423,"fn":2424,"description":2425,"org":2426,"tags":2427,"stars":23,"repoUrl":24,"updatedAt":2435},"cao-agent-routing","route tasks to appropriate CAO agents","Find and select the best installed CAO agent profile for a task before delegating with assign or handoff. Use when a supervisor needs to route coding, documentation, infrastructure, review, research, or other specialist work and the user has not already chosen an agent profile.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":11},[2428,2429,2432],{"name":2414,"slug":2415,"type":16},{"name":2430,"slug":2431,"type":16},"AWS","aws",{"name":2433,"slug":2434,"type":16},"Orchestration","orchestration","2026-07-25T05:56:34.255071",{"slug":2437,"name":2437,"fn":2438,"description":2439,"org":2440,"tags":2441,"stars":23,"repoUrl":24,"updatedAt":2451},"cao-learning","report task outcomes and distill lessons","Report task outcomes and distill lessons so the team improves across runs — report_outcome after each unit of work, retrospector handoffs at natural boundaries, and applying injected lessons. Use in workflows that run repeatedly over similar work items. Requires memory.learning_enabled; degrade silently when the tools report disabled.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":11},[2442,2445,2448],{"name":2443,"slug":2444,"type":16},"Best Practices","best-practices",{"name":2446,"slug":2447,"type":16},"Engineering","engineering",{"name":2449,"slug":2450,"type":16},"Operations","operations","2026-07-29T06:00:28.147989",{"slug":2453,"name":2453,"fn":2454,"description":2455,"org":2456,"tags":2457,"stars":23,"repoUrl":24,"updatedAt":2464},"cao-mcp-apps","operate CAO MCP application surfaces","Enable, operate, and extend CAO's MCP Apps surface — the host-rendered fleet dashboard visible inside MCP App hosts (Claude Desktop, ChatGPT, VS Code Copilot, Goose, Postman). Use when the user says \"enable MCP Apps in CAO\", \"the ui:\u002F\u002Fcao views aren't rendering\", \"rebuild MCP Apps bundles\", \"add a new ui:\u002F\u002Fcao\u002F* view\", or \"configure the MCP Apps OAuth scope layer\". Operates on the CAO_MCP_APPS_ENABLED surface and cao_mcp_apps\u002F build system. Not for the localhost:9889 browser dashboard, not for plugins, providers, or session management.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":11},[2458,2459,2462,2463],{"name":2414,"slug":2415,"type":16},{"name":2460,"slug":2461,"type":16},"CLI","cli",{"name":18,"slug":19,"type":16},{"name":2404,"slug":2405,"type":16},"2026-07-22T05:35:52.952289",{"slug":2466,"name":2466,"fn":2467,"description":2468,"org":2469,"tags":2470,"stars":23,"repoUrl":24,"updatedAt":2478},"cao-memory","manage durable agent memory and preferences","Store, recall, and forget durable facts with CAO memory — user preferences, project conventions, decisions, and corrections that should persist across sessions and agents. Use proactively to check memory before asking the user, and to save anything worth remembering. Distinct from any provider-native memory.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":11},[2471,2472,2475],{"name":2414,"slug":2415,"type":16},{"name":2473,"slug":2474,"type":16},"Memory","memory",{"name":2476,"slug":2477,"type":16},"Productivity","productivity","2026-07-12T08:37:03.180421",{"slug":2480,"name":2480,"fn":2481,"description":2482,"org":2483,"tags":2484,"stars":23,"repoUrl":24,"updatedAt":2491},"cao-plugin","scaffold CAO agent plugins","Create a new CAO (CLI Agent Orchestrator) plugin. Use this skill whenever the user wants to add a plugin that reacts to CAO lifecycle or messaging events, scaffold a plugin package, understand plugin requirements, or integrate an external system (Discord, Slack, dashboards, logging, metrics) with CAO. Also use when the user asks what plugin events are available, how plugin discovery works, or how to install a plugin into a CAO environment.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":11},[2485,2486,2489,2490],{"name":2414,"slug":2415,"type":16},{"name":2487,"slug":2488,"type":16},"Automation","automation",{"name":2460,"slug":2461,"type":16},{"name":2401,"slug":2402,"type":16},"2026-07-12T08:36:49.784639",16,{"items":2494,"total":2670},[2495,2514,2535,2545,2558,2571,2581,2591,2612,2627,2642,2655],{"slug":2496,"name":2496,"fn":2497,"description":2498,"org":2499,"tags":2500,"stars":2511,"repoUrl":2512,"updatedAt":2513},"agentcore-investigation","investigate Bedrock AgentCore runtime sessions","Investigate Bedrock AgentCore runtime sessions via CloudWatch Logs Insights — resolve session\u002Ftrace IDs, query OTEL spans, filter noise, build timelines. Use when debugging AgentCore agent sessions, tracing tool calls, or analyzing latency.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":11},[2501,2502,2505,2508],{"name":2430,"slug":2431,"type":16},{"name":2503,"slug":2504,"type":16},"Debugging","debugging",{"name":2506,"slug":2507,"type":16},"Logs","logs",{"name":2509,"slug":2510,"type":16},"Observability","observability",9427,"https:\u002F\u002Fgithub.com\u002Fawslabs\u002Fmcp","2026-07-12T08:37:22.601527",{"slug":2515,"name":2516,"fn":2517,"description":2518,"org":2519,"tags":2520,"stars":2511,"repoUrl":2512,"updatedAt":2534},"amazon-aurora-dsql","amazon aurora dsql","build applications with Aurora DSQL","Build with Aurora DSQL — manage schemas, execute queries, handle migrations, diagnose query plans, load data, and develop applications with a serverless, distributed SQL database. Covers IAM auth, multi-tenant patterns, MySQL-to-DSQL and PostgreSQL-to-DSQL schema conversion, FK replacement code generation, OCC retry patterns, ORM migration (Django\u002FHibernate\u002FRails), DDL operations, query plan explainability, SQL compatibility validation, and bulk data loading. Triggers on phrases like: DSQL, Aurora DSQL, create DSQL table, DSQL schema, migrate to DSQL, distributed SQL database, serverless PostgreSQL-compatible database, DSQL query plan, DSQL EXPLAIN ANALYZE, why is my DSQL query slow, DSQL foreign key, DSQL OCC retry, DSQL multi-region, load into DSQL, load CSV into DSQL, bulk load DSQL, aurora-dsql-loader.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":11},[2521,2524,2525,2528,2531],{"name":2522,"slug":2523,"type":16},"Aurora","aurora",{"name":2430,"slug":2431,"type":16},{"name":2526,"slug":2527,"type":16},"Database","database",{"name":2529,"slug":2530,"type":16},"Serverless","serverless",{"name":2532,"slug":2533,"type":16},"SQL","sql","2026-07-12T08:36:45.053393",{"slug":2536,"name":2537,"fn":2517,"description":2518,"org":2538,"tags":2539,"stars":2511,"repoUrl":2512,"updatedAt":2544},"aurora-dsql","aurora dsql",{"slug":8,"name":9,"logoUrl":10,"githubOrg":11},[2540,2541,2542,2543],{"name":2430,"slug":2431,"type":16},{"name":2526,"slug":2527,"type":16},{"name":2529,"slug":2530,"type":16},{"name":2532,"slug":2533,"type":16},"2026-07-12T08:36:42.694299",{"slug":2546,"name":2547,"fn":2517,"description":2518,"org":2548,"tags":2549,"stars":2511,"repoUrl":2512,"updatedAt":2557},"aws-dsql","aws dsql",{"slug":8,"name":9,"logoUrl":10,"githubOrg":11},[2550,2551,2552,2555,2556],{"name":2430,"slug":2431,"type":16},{"name":2526,"slug":2527,"type":16},{"name":2553,"slug":2554,"type":16},"Migration","migration",{"name":2529,"slug":2530,"type":16},{"name":2532,"slug":2533,"type":16},"2026-07-12T08:36:38.584057",{"slug":2559,"name":2560,"fn":2517,"description":2518,"org":2561,"tags":2562,"stars":2511,"repoUrl":2512,"updatedAt":2570},"distributed-postgres","distributed postgres",{"slug":8,"name":9,"logoUrl":10,"githubOrg":11},[2563,2564,2565,2568,2569],{"name":2430,"slug":2431,"type":16},{"name":2526,"slug":2527,"type":16},{"name":2566,"slug":2567,"type":16},"PostgreSQL","postgresql",{"name":2529,"slug":2530,"type":16},{"name":2532,"slug":2533,"type":16},"2026-07-12T08:36:46.530743",{"slug":2572,"name":2573,"fn":2517,"description":2518,"org":2574,"tags":2575,"stars":2511,"repoUrl":2512,"updatedAt":2580},"distributed-sql","distributed sql",{"slug":8,"name":9,"logoUrl":10,"githubOrg":11},[2576,2577,2578,2579],{"name":2430,"slug":2431,"type":16},{"name":2526,"slug":2527,"type":16},{"name":2529,"slug":2530,"type":16},{"name":2532,"slug":2533,"type":16},"2026-07-12T08:36:48.104182",{"slug":2582,"name":2582,"fn":2517,"description":2518,"org":2583,"tags":2584,"stars":2511,"repoUrl":2512,"updatedAt":2590},"dsql",{"slug":8,"name":9,"logoUrl":10,"githubOrg":11},[2585,2586,2587,2588,2589],{"name":2430,"slug":2431,"type":16},{"name":2526,"slug":2527,"type":16},{"name":2553,"slug":2554,"type":16},{"name":2529,"slug":2530,"type":16},{"name":2532,"slug":2533,"type":16},"2026-07-12T08:36:36.374512",{"slug":2592,"name":2592,"fn":2593,"description":2594,"org":2595,"tags":2596,"stars":2609,"repoUrl":2610,"updatedAt":2611},"cost-efficiency-analyzer","analyze cost efficiency and expenses","Analyzes cost structure, cost efficiency, and expense management from P&L data. Use when the user asks about costs, expenses, COGS, operating expenses, cost ratios, cost control, spending efficiency, margin compression from cost side, or wants to understand where money is going. Also use for \"are we spending too much\", \"cost breakdown\", \"expense analysis\", or \"how efficient are our operations\". NOT for revenue or top-line analysis.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":11},[2597,2600,2603,2606],{"name":2598,"slug":2599,"type":16},"Accounting","accounting",{"name":2601,"slug":2602,"type":16},"Analytics","analytics",{"name":2604,"slug":2605,"type":16},"Cost Optimization","cost-optimization",{"name":2607,"slug":2608,"type":16},"Finance","finance",3176,"https:\u002F\u002Fgithub.com\u002Fawslabs\u002Fagentcore-samples","2026-07-12T08:40:03.29555",{"slug":2613,"name":2613,"fn":2614,"description":2615,"org":2616,"tags":2617,"stars":2609,"repoUrl":2610,"updatedAt":2626},"executive-financial-briefing","generate executive financial briefings","Generates a concise executive-level financial briefing or summary suitable for a CEO, CFO, or board presentation. Use when the user asks for a summary, briefing, executive summary, board update, financial overview, financial health check, or \"how is the business doing\". Covers the full P&L picture in one page. Also use for \"give me the highlights\", \"what do I need to know\", or \"quick financial update\".",{"slug":8,"name":9,"logoUrl":10,"githubOrg":11},[2618,2619,2620,2623],{"name":2430,"slug":2431,"type":16},{"name":2607,"slug":2608,"type":16},{"name":2621,"slug":2622,"type":16},"Management","management",{"name":2624,"slug":2625,"type":16},"Reporting","reporting","2026-07-12T08:40:02.066471",{"slug":2628,"name":2628,"fn":2629,"description":2630,"org":2631,"tags":2632,"stars":2609,"repoUrl":2610,"updatedAt":2641},"multi-quarter-trend-analysis","analyze multi-quarter financial trends","Analyzes financial trends across multiple quarters by comparing P&L metrics over time. Use when the user wants to see trends, patterns, trajectories, or directional movement across 3 or more quarters. Also use for \"how are we trending\", \"show me the trend\", \"track performance over time\", \"quarter over quarter comparison across all quarters\", or any multi-period longitudinal analysis.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":11},[2633,2634,2635,2638],{"name":2601,"slug":2602,"type":16},{"name":2607,"slug":2608,"type":16},{"name":2636,"slug":2637,"type":16},"Financial Statements","financial-statements",{"name":2639,"slug":2640,"type":16},"Variance Analysis","variance-analysis","2026-07-12T08:40:00.79141",{"slug":2643,"name":2643,"fn":2644,"description":2645,"org":2646,"tags":2647,"stars":2609,"repoUrl":2610,"updatedAt":2654},"pdf","process and manipulate PDF documents","Use this skill whenever the user wants to do anything with PDF files. This includes reading or extracting text\u002Ftables from PDFs, combining or merging multiple PDFs into one, splitting PDFs apart, rotating pages, adding watermarks, creating new PDFs, filling PDF forms, encrypting\u002Fdecrypting PDFs, extracting images, and OCR on scanned PDFs to make them searchable. If the user mentions a .pdf file or asks to produce one, use this skill.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":11},[2648,2649,2652],{"name":2487,"slug":2488,"type":16},{"name":2650,"slug":2651,"type":16},"Documents","documents",{"name":2653,"slug":2643,"type":16},"PDF","2026-07-12T08:41:44.135656",{"slug":2656,"name":2656,"fn":2657,"description":2658,"org":2659,"tags":2660,"stars":2609,"repoUrl":2610,"updatedAt":2669},"quarterly-kpi-calculator","calculate quarterly financial KPIs","Calculates quarterly financial KPIs from P&L data. P&L figures can be provided directly by the user or fetched from the financial data MCP server. Use when the user wants KPI calculations such as Gross Margin %, EBITDA Margin %, Operating Expense Ratio, or Revenue Growth % QoQ. Also use for quarterly performance review, P&L analysis, or interpreting financial ratios against benchmarks.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":11},[2661,2662,2665,2666],{"name":2598,"slug":2599,"type":16},{"name":2663,"slug":2664,"type":16},"Data Analysis","data-analysis",{"name":2607,"slug":2608,"type":16},{"name":2667,"slug":2668,"type":16},"KPI","kpi","2026-07-12T08:39:59.54971",150]