[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill-aws-labs-convert-web-app":3,"mdc-tw0fo0-key":33,"related-repo-aws-labs-convert-web-app":9583,"related-org-aws-labs-convert-web-app":9687},{"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},"convert-web-app","convert web apps into hybrid MCP apps","This skill should be used when the user asks to \"add MCP App support to my web app\", \"turn my web app into a hybrid MCP App\", \"make my web page work as an MCP App too\", \"wrap my existing UI as an MCP App\", \"convert iframe embed to MCP App\", \"turn my SPA into an MCP App\", or needs to add MCP App support to an existing web application while keeping it working standalone. Provides guidance for analyzing existing web apps and creating a hybrid web + MCP App with server-side tool and resource registration.",{"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},"MCP","mcp","tag",{"name":18,"slug":19,"type":16},"Web Development","web-development",{"name":21,"slug":22,"type":16},"API Development","api-development",871,"https:\u002F\u002Fgithub.com\u002Fawslabs\u002Fcli-agent-orchestrator","2026-07-12T08:41:39.078653",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\u002Fconvert-web-app","---\nname: convert-web-app\ndescription: This skill should be used when the user asks to \"add MCP App support to my web app\", \"turn my web app into a hybrid MCP App\", \"make my web page work as an MCP App too\", \"wrap my existing UI as an MCP App\", \"convert iframe embed to MCP App\", \"turn my SPA into an MCP App\", or needs to add MCP App support to an existing web application while keeping it working standalone. Provides guidance for analyzing existing web apps and creating a hybrid web + MCP App with server-side tool and resource registration.\n---\n\n# Add MCP App Support to a Web App\n\nAdd MCP App support to an existing web application so it works both as a standalone web app **and** as an MCP App that renders inline in MCP-enabled hosts like Claude Desktop — from a single codebase.\n\n## How It Works\n\nThe existing web app stays intact. A thin initialization layer detects whether the app is running inside an MCP host or as a regular web page, and fetches parameters from the appropriate source. A new MCP server wraps the app's bundled HTML as a resource and registers a tool to display it.\n\n```\nStandalone:  Browser loads page → App reads URL params \u002F APIs → renders\nMCP App:     Host calls tool → Server returns result → Host renders app in iframe → App reads MCP lifecycle → renders\n```\n\nThe app's rendering logic is shared — only the data source changes.\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### 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`), lifecycle |\n| `src\u002Fserver\u002Findex.ts` | `registerAppTool`, `registerAppResource`, tool visibility options |\n| `src\u002Fspec.types.ts` | All type definitions: `McpUiHostContext`, CSS variable keys, display modes |\n| `src\u002Fstyles.ts` | `applyDocumentTheme`, `applyHostStyleVariables`, `applyHostFonts` |\n| `src\u002Freact\u002FuseApp.tsx` | `useApp` hook for React apps |\n| `src\u002Freact\u002FuseHostStyles.ts` | `useHostStyles`, `useHostStyleVariables`, `useHostFonts` hooks |\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\n### Reference Examples\n\n| Example | Relevant Pattern |\n|---------|-----------------|\n| `examples\u002Fmap-server\u002F` | External API integration + CSP (`connectDomains`, `resourceDomains`) |\n| `examples\u002Fsheet-music-server\u002F` | Library that loads external assets (soundfonts) |\n| `examples\u002Fpdf-server\u002F` | Binary content handling + app-only helper tools |\n\n## Step 1: Analyze the Existing Web App\n\nBefore writing any code, examine the existing web app to plan what needs to change.\n\n### What to Investigate\n\n1. **Data sources** — How does the app get its data? (URL params, API calls, props, hardcoded, localStorage)\n2. **External dependencies** — CDN scripts, fonts, API endpoints, iframe embeds, WebSocket connections\n3. **Build system** — Current bundler (Webpack, Vite, Rollup, none), framework (React, Vue, vanilla), entry points\n4. **User interactions** — Does the app have inputs\u002Fforms that should map to tool parameters?\n5. **Runtime detection** — How to tell if the app is running inside an MCP host (e.g., check the current origin, a query param, or whether `window.parent !== window`)\n\nPresent findings to the user and confirm the approach.\n\n### Data Source Mapping\n\nIn hybrid mode, the app keeps its existing data sources for standalone use and adds MCP equivalents:\n\n| Standalone data source | MCP App equivalent |\n|---|---|\n| URL query parameters | `ontoolinput` \u002F `ontoolresult` `arguments` or `structuredContent` |\n| REST API calls | `app.callServerTool()` to server-side tools, or keep direct API calls with CSP `connectDomains` |\n| Props \u002F component inputs | `ontoolinput` `arguments` |\n| localStorage \u002F sessionStorage | Not available in sandboxed iframe — pass via `structuredContent` or server-side state |\n| WebSocket connections | Keep with CSP `connectDomains`, or convert to polling via app-only tools |\n| Hardcoded data | Move to tool `structuredContent` to make it dynamic |\n\n## Step 2: Investigate CSP Requirements\n\nMCP Apps HTML runs in a sandboxed iframe with no same-origin server. **Every** external origin must be declared in CSP — missing origins fail silently.\n\n**Before writing any code**, build the app and investigate all origins it references:\n\n1. Build the app using the existing build command\n2. Search the resulting HTML, CSS, and JS for **every** origin (not just \"external\" origins — every network request will need CSP approval)\n3. For each origin found, trace back to source:\n   - If it comes from a constant → universal (same in dev and prod)\n   - If it comes from an env var or conditional → note the mechanism and identify both dev and prod values\n4. Check for third-party libraries that may make their own requests (analytics, error tracking, etc.)\n\n**Document your findings** as three lists, and note for each origin whether it's universal, dev-only, or prod-only:\n\n- **resourceDomains**: origins serving images, fonts, styles, scripts\n- **connectDomains**: origins for API\u002Ffetch requests\n- **frameDomains**: origins for nested iframes\n\nIf no origins are found, the app may not need custom CSP domains.\n\n## Step 3: Set Up the MCP Server\n\nCreate a new MCP server with tool and resource registration. This wraps the existing web app for MCP hosts.\n\n### Dependencies\n\n```bash\nnpm install @modelcontextprotocol\u002Fext-apps @modelcontextprotocol\u002Fsdk zod\nnpm install -D tsx vite vite-plugin-singlefile\n```\n\nUse `npm install` to add dependencies rather than manually writing version numbers. This lets npm resolve the latest compatible versions. Never specify version numbers from memory.\n\n### Server Code\n\nCreate `server.ts`:\n\n```typescript\nimport { McpServer } from \"@modelcontextprotocol\u002Fsdk\u002Fserver\u002Fmcp.js\";\nimport { StdioServerTransport } from \"@modelcontextprotocol\u002Fsdk\u002Fserver\u002Fstdio.js\";\nimport { registerAppTool, registerAppResource, RESOURCE_MIME_TYPE } from \"@modelcontextprotocol\u002Fext-apps\u002Fserver\";\nimport fs from \"node:fs\u002Fpromises\";\nimport path from \"node:path\";\nimport { z } from \"zod\";\n\nconst server = new McpServer({ name: \"my-app\", version: \"1.0.0\" });\n\nconst resourceUri = \"ui:\u002F\u002Fmy-app\u002Fmcp-app.html\";\n\n\u002F\u002F Register the tool — inputSchema maps to the app's data sources\nregisterAppTool(server, \"show-app\", {\n  description: \"Displays the app with the given parameters\",\n  inputSchema: { query: z.string().describe(\"The search query\") },\n  _meta: { ui: { resourceUri } },\n}, async (args) => {\n  \u002F\u002F Process args server-side if needed\n  return {\n    content: [{ type: \"text\", text: `Showing app for: ${args.query}` }],\n    structuredContent: { query: args.query },\n  };\n});\n\n\u002F\u002F Register the HTML resource\nregisterAppResource(server, {\n  uri: resourceUri,\n  name: \"My App UI\",\n  mimeType: RESOURCE_MIME_TYPE,\n  \u002F\u002F Add CSP domains from Step 2 if needed:\n  \u002F\u002F _meta: { ui: { connectDomains: [\"api.example.com\"], resourceDomains: [\"cdn.example.com\"] } },\n}, async () => {\n  const html = await fs.readFile(\n    path.resolve(import.meta.dirname, \"dist\", \"mcp-app.html\"),\n    \"utf-8\",\n  );\n  return { contents: [{ uri: resourceUri, mimeType: RESOURCE_MIME_TYPE, text: html }] };\n});\n\n\u002F\u002F Start the server\nconst transport = new StdioServerTransport();\nawait server.connect(transport);\n```\n\n### Package Scripts\n\nAdd to `package.json`:\n\n```json\n{\n  \"scripts\": {\n    \"build:ui\": \"vite build\",\n    \"build:server\": \"tsc\",\n    \"build\": \"npm run build:ui && npm run build:server\",\n    \"serve\": \"tsx server.ts\"\n  }\n}\n```\n\n## Step 4: Adapt the Build Pipeline\n\nThe MCP App build must produce a single HTML file using `vite-plugin-singlefile`. The standalone web app build stays unchanged.\n\n### Vite Configuration\n\nCreate or update `vite.config.ts`. If the app already uses Vite, add `vite-plugin-singlefile` and a separate entry point for the MCP App build. If it uses another bundler, add a Vite config alongside for the MCP App build only.\n\n```typescript\nimport { defineConfig } from \"vite\";\nimport { viteSingleFile } from \"vite-plugin-singlefile\";\n\nexport default defineConfig({\n  plugins: [viteSingleFile()],\n  build: {\n    outDir: \"dist\",\n    rollupOptions: {\n      input: \"mcp-app.html\",\n    },\n  },\n});\n```\n\nAdd framework-specific Vite plugins as needed (e.g., `@vitejs\u002Fplugin-react` for React, `@vitejs\u002Fplugin-vue` for Vue).\n\n### HTML Entry Point\n\nCreate `mcp-app.html` as a separate entry point for the MCP App build. This can point to the same app code — the runtime detection handles the rest:\n\n```html\n\u003C!doctype html>\n\u003Chtml lang=\"en\">\n  \u003Chead>\n    \u003Cmeta charset=\"UTF-8\" \u002F>\n    \u003Cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" \u002F>\n    \u003Ctitle>MCP App\u003C\u002Ftitle>\n  \u003C\u002Fhead>\n  \u003Cbody>\n    \u003Cdiv id=\"root\">\u003C\u002Fdiv>\n    \u003Cscript type=\"module\" src=\".\u002Fsrc\u002Fmain.ts\">\u003C\u002Fscript>\n  \u003C\u002Fbody>\n\u003C\u002Fhtml>\n```\n\n### Two-Phase Build\n\n1. Vite bundles the UI → `dist\u002Fmcp-app.html` (single file with all assets inlined)\n2. Server is compiled separately (TypeScript → JavaScript)\n\nThe standalone web app continues to build and deploy as before.\n\n## Step 5: Add MCP App Initialization Alongside Existing Logic\n\nThis is the core step. Instead of replacing the app's data sources, add an alternative initialization path for MCP mode. The app detects its environment at startup and reads parameters from the right source.\n\n### The Hybrid Pattern\n\n```typescript\nimport { App, PostMessageTransport } from \"@modelcontextprotocol\u002Fext-apps\";\n\n\u002F\u002F Detect whether we're running inside an MCP host.\n\u002F\u002F Choose a detection method that fits the app:\n\u002F\u002F   - Origin check: window.location.origin !== 'https:\u002F\u002Fmyhost.com'\n\u002F\u002F   - Null origin (sandboxed iframe): window.location.origin === 'null'\n\u002F\u002F   - Query param: new URL(location.href).searchParams.has('mcp')\nconst isMcpApp = window.location.origin === \"null\";\n\nasync function getParameters(): Promise\u003CRecord\u003Cstring, string>> {\n  if (isMcpApp) {\n    \u002F\u002F Running as MCP App — get params from tool lifecycle\n    const app = new App({ name: \"My App\", version: \"1.0.0\" });\n\n    \u002F\u002F Register handlers BEFORE connect()\n    const params = await new Promise\u003CRecord\u003Cstring, string>>((resolve) => {\n      app.ontoolresult = (result) => resolve(result.structuredContent ?? {});\n    });\n\n    await app.connect(new PostMessageTransport());\n    return params;\n  } else {\n    \u002F\u002F Running as standalone web app — get params from URL\n    return Object.fromEntries(new URL(location.href).searchParams);\n  }\n}\n\nasync function main() {\n  const params = await getParameters();\n  renderApp(params); \u002F\u002F Same rendering logic for both modes\n}\n\nmain().catch(console.error);\n```\n\n### URL Parameters (Hybrid)\n\n```typescript\n\u002F\u002F Before (standalone only):\nconst query = new URL(location.href).searchParams.get(\"q\");\nrenderApp(query);\n\n\u002F\u002F After (hybrid):\nasync function getQuery(): Promise\u003Cstring> {\n  if (isMcpApp) {\n    const app = new App({ name: \"My App\", version: \"1.0.0\" });\n    return new Promise((resolve) => {\n      app.ontoolinput = (params) => resolve(params.arguments?.q ?? \"\");\n      app.connect(new PostMessageTransport());\n    });\n  }\n  return new URL(location.href).searchParams.get(\"q\") ?? \"\";\n}\n\nconst query = await getQuery();\nrenderApp(query); \u002F\u002F Unchanged rendering logic\n```\n\n### API Calls (Hybrid)\n\n```typescript\n\u002F\u002F Before (standalone only):\nconst data = await fetch(\"\u002Fapi\u002Fdata\").then(r => r.json());\n\n\u002F\u002F After (hybrid):\nasync function fetchData(): Promise\u003Cany> {\n  if (isMcpApp) {\n    const result = await app.callServerTool(\"fetch-data\", {});\n    return result.structuredContent;\n  }\n  return fetch(\"\u002Fapi\u002Fdata\").then(r => r.json());\n}\n```\n\nOr keep direct API calls in both modes with CSP `connectDomains`:\n\n```typescript\n\u002F\u002F API calls can stay unchanged if the API is external and the CSP declares the domain\n\u002F\u002F Declare connectDomains: [\"api.example.com\"] in the resource registration\n```\n\n### localStorage \u002F sessionStorage (Hybrid)\n\n```typescript\n\u002F\u002F Before (standalone only):\nconst saved = localStorage.getItem(\"settings\");\n\n\u002F\u002F After (hybrid) — localStorage isn't available in sandboxed iframes:\nfunction getSettings(): any {\n  if (isMcpApp) {\n    \u002F\u002F Will be provided via tool result\n    return null; \u002F\u002F or a default\n  }\n  return JSON.parse(localStorage.getItem(\"settings\") ?? \"null\");\n}\n```\n\n### Complete Hybrid Example\n\n```typescript\nimport { App, PostMessageTransport, applyDocumentTheme, applyHostStyleVariables, applyHostFonts } from \"@modelcontextprotocol\u002Fext-apps\";\n\nconst isMcpApp = window.location.origin === \"null\";\n\nasync function initMcpApp(): Promise\u003CRecord\u003Cstring, any>> {\n  const app = new App({ name: \"My App\", version: \"1.0.0\" });\n\n  \u002F\u002F Register ALL handlers BEFORE connect()\n  const params = await new Promise\u003CRecord\u003Cstring, any>>((resolve) => {\n    app.ontoolinput = (input) => resolve(input.arguments ?? {});\n  });\n\n  app.onhostcontextchanged = (ctx) => {\n    if (ctx.theme) applyDocumentTheme(ctx.theme);\n    if (ctx.styles?.variables) applyHostStyleVariables(ctx.styles.variables);\n    if (ctx.styles?.css?.fonts) applyHostFonts(ctx.styles.css.fonts);\n    if (ctx.safeAreaInsets) {\n      const { top, right, bottom, left } = ctx.safeAreaInsets;\n      document.body.style.padding = `${top}px ${right}px ${bottom}px ${left}px`;\n    }\n  };\n\n  app.onteardown = async () => {\n    return {};\n  };\n\n  await app.connect(new PostMessageTransport());\n  return params;\n}\n\nasync function initStandaloneApp(): Promise\u003CRecord\u003Cstring, any>> {\n  return Object.fromEntries(new URL(location.href).searchParams);\n}\n\nasync function main() {\n  const params = isMcpApp ? await initMcpApp() : await initStandaloneApp();\n  renderApp(params); \u002F\u002F Same rendering logic — no fork needed\n}\n\nmain().catch(console.error);\n```\n\n## Step 6: Add Host Styling Integration (MCP Mode Only)\n\nWhen running as an MCP App, integrate with host styling for theme consistency. Use CSS variable fallbacks so the app looks correct in both modes.\n\n**Vanilla JS** — use helper functions:\n```typescript\nimport { applyDocumentTheme, applyHostStyleVariables, applyHostFonts } from \"@modelcontextprotocol\u002Fext-apps\";\n\napp.onhostcontextchanged = (ctx) => {\n  if (ctx.theme) applyDocumentTheme(ctx.theme);\n  if (ctx.styles?.variables) applyHostStyleVariables(ctx.styles.variables);\n  if (ctx.styles?.css?.fonts) applyHostFonts(ctx.styles.css.fonts);\n};\n```\n\n**React** — use hooks:\n```typescript\nimport { useApp, useHostStyles } from \"@modelcontextprotocol\u002Fext-apps\u002Freact\";\n\nconst { app } = useApp({ appInfo, capabilities, onAppCreated });\nuseHostStyles(app);\n```\n\n**Using variables in CSS** — use `var()` with fallbacks so standalone mode still looks right:\n\n```css\n.container {\n  background: var(--color-background-secondary, #f5f5f5);\n  color: var(--color-text-primary, #333);\n  font-family: var(--font-sans, system-ui);\n  border-radius: var(--border-radius-md, 8px);\n}\n```\n\nKey variable groups: `--color-background-*`, `--color-text-*`, `--color-border-*`, `--font-sans`, `--font-mono`, `--font-text-*-size`, `--font-heading-*-size`, `--border-radius-*`. See `src\u002Fspec.types.ts` for the full list.\n\n## Optional Enhancements\n\n### App-Only Helper Tools\n\nFor data the UI needs to poll or fetch that the model doesn't need to call directly:\n\n```typescript\nregisterAppTool(server, \"refresh-data\", {\n  description: \"Fetches latest data for the UI\",\n  _meta: { ui: { resourceUri, visibility: [\"app\"] } },\n}, async () => {\n  const data = await getLatestData();\n  return { content: [{ type: \"text\", text: JSON.stringify(data) }] };\n});\n```\n\nThe UI calls these via `app.callServerTool(\"refresh-data\", {})`.\n\n### Streaming Partial Input\n\nFor large tool inputs, use `ontoolinputpartial` to show progress during LLM generation:\n\n```typescript\napp.ontoolinputpartial = (params) => {\n  const args = params.arguments; \u002F\u002F Healed partial JSON - always valid\n  renderPreview(args);\n};\n\napp.ontoolinput = (params) => {\n  renderFull(params.arguments);\n};\n```\n\n### Fullscreen Mode\n\n```typescript\napp.onhostcontextchanged = (ctx) => {\n  if (ctx.availableDisplayModes?.includes(\"fullscreen\")) {\n    fullscreenBtn.style.display = \"block\";\n  }\n  if (ctx.displayMode) {\n    container.classList.toggle(\"fullscreen\", ctx.displayMode === \"fullscreen\");\n  }\n};\n\nasync function toggleFullscreen() {\n  const newMode = currentMode === \"fullscreen\" ? \"inline\" : \"fullscreen\";\n  const result = await app.requestDisplayMode({ mode: newMode });\n  currentMode = result.mode;\n}\n```\n\n### Text Fallback\n\nAlways provide a `content` array for non-UI hosts:\n\n```typescript\nreturn {\n  content: [{ type: \"text\", text: \"Fallback description of the result\" }],\n  structuredContent: { \u002F* data for the UI *\u002F },\n};\n```\n\n## Common Mistakes to Avoid\n\n1. **Forgetting CSP declarations for external origins** — fails silently in the sandboxed iframe\n2. **Using `localStorage` \u002F `sessionStorage` in MCP mode** — not available in sandboxed iframe; use fallbacks or pass via `structuredContent`\n3. **Missing `vite-plugin-singlefile`** — external assets won't load in the iframe\n4. **Registering handlers after `connect()`** — register ALL handlers BEFORE calling `app.connect()`\n5. **Hardcoding styles without fallbacks** — use host CSS variables with `var(..., fallback)` so both modes look correct\n6. **Not handling safe area insets** — always apply `ctx.safeAreaInsets` in `onhostcontextchanged`\n7. **Forgetting text `content` fallback** — always provide `content` array for non-UI hosts\n8. **Forgetting resource registration** — the tool references a `resourceUri` that must have a matching resource\n9. **Replacing standalone logic instead of branching** — keep the original data sources intact; add the MCP path alongside them\n\n## Testing\n\n### Using basic-host\n\nTest the MCP App mode 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### Verify\n\n1. **MCP mode**: App loads in basic-host without console errors\n2. `ontoolinput` handler fires with tool arguments\n3. `ontoolresult` handler fires with tool result\n4. Host styling (theme, fonts, colors) applies correctly\n5. External resources load (if CSP domains are configured)\n6. **Standalone mode**: App still works when opened directly in a browser\n",{"data":34,"body":35},{"name":4,"description":6},{"type":36,"children":37},"root",[38,47,61,68,73,86,91,97,102,186,193,206,437,443,455,654,660,748,754,759,765,827,832,838,843,1010,1016,1028,1038,1082,1092,1123,1128,1134,1139,1145,1211,1224,1230,1241,2610,2616,2628,2831,2837,2850,2856,2876,3145,3166,3172,3183,3576,3582,3603,3608,3614,3619,3625,4492,4498,5101,5107,5462,5473,5496,5502,5756,5762,7170,7176,7181,7191,7520,7530,7681,7699,7894,7962,7968,7974,7979,8290,8302,8308,8321,8519,8525,9019,9025,9038,9166,9172,9344,9350,9356,9361,9499,9519,9525,9578],{"type":39,"tag":40,"props":41,"children":43},"element","h1",{"id":42},"add-mcp-app-support-to-a-web-app",[44],{"type":45,"value":46},"text","Add MCP App Support to a Web App",{"type":39,"tag":48,"props":49,"children":50},"p",{},[51,53,59],{"type":45,"value":52},"Add MCP App support to an existing web application so it works both as a standalone web app ",{"type":39,"tag":54,"props":55,"children":56},"strong",{},[57],{"type":45,"value":58},"and",{"type":45,"value":60}," as an MCP App that renders inline in MCP-enabled hosts like Claude Desktop — from a single codebase.",{"type":39,"tag":62,"props":63,"children":65},"h2",{"id":64},"how-it-works",[66],{"type":45,"value":67},"How It Works",{"type":39,"tag":48,"props":69,"children":70},{},[71],{"type":45,"value":72},"The existing web app stays intact. A thin initialization layer detects whether the app is running inside an MCP host or as a regular web page, and fetches parameters from the appropriate source. A new MCP server wraps the app's bundled HTML as a resource and registers a tool to display it.",{"type":39,"tag":74,"props":75,"children":79},"pre",{"className":76,"code":78,"language":45},[77],"language-text","Standalone:  Browser loads page → App reads URL params \u002F APIs → renders\nMCP App:     Host calls tool → Server returns result → Host renders app in iframe → App reads MCP lifecycle → renders\n",[80],{"type":39,"tag":81,"props":82,"children":84},"code",{"__ignoreMap":83},"",[85],{"type":45,"value":78},{"type":39,"tag":48,"props":87,"children":88},{},[89],{"type":45,"value":90},"The app's rendering logic is shared — only the data source changes.",{"type":39,"tag":62,"props":92,"children":94},{"id":93},"getting-reference-code",[95],{"type":45,"value":96},"Getting Reference Code",{"type":39,"tag":48,"props":98,"children":99},{},[100],{"type":45,"value":101},"Clone the SDK repository for working examples and API documentation:",{"type":39,"tag":74,"props":103,"children":107},{"className":104,"code":105,"language":106,"meta":83,"style":83},"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",[108],{"type":39,"tag":81,"props":109,"children":110},{"__ignoreMap":83},[111],{"type":39,"tag":112,"props":113,"children":116},"span",{"class":114,"line":115},"line",1,[117,123,129,134,140,145,150,155,160,165,170,176,181],{"type":39,"tag":112,"props":118,"children":120},{"style":119},"--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B",[121],{"type":45,"value":122},"git",{"type":39,"tag":112,"props":124,"children":126},{"style":125},"--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D",[127],{"type":45,"value":128}," clone",{"type":39,"tag":112,"props":130,"children":131},{"style":125},[132],{"type":45,"value":133}," --branch",{"type":39,"tag":112,"props":135,"children":137},{"style":136},"--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF",[138],{"type":45,"value":139}," \"",{"type":39,"tag":112,"props":141,"children":142},{"style":125},[143],{"type":45,"value":144},"v",{"type":39,"tag":112,"props":146,"children":147},{"style":136},[148],{"type":45,"value":149},"$(",{"type":39,"tag":112,"props":151,"children":152},{"style":119},[153],{"type":45,"value":154},"npm",{"type":39,"tag":112,"props":156,"children":157},{"style":125},[158],{"type":45,"value":159}," view @modelcontextprotocol\u002Fext-apps version",{"type":39,"tag":112,"props":161,"children":162},{"style":136},[163],{"type":45,"value":164},")\"",{"type":39,"tag":112,"props":166,"children":167},{"style":125},[168],{"type":45,"value":169}," --depth",{"type":39,"tag":112,"props":171,"children":173},{"style":172},"--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C",[174],{"type":45,"value":175}," 1",{"type":39,"tag":112,"props":177,"children":178},{"style":125},[179],{"type":45,"value":180}," https:\u002F\u002Fgithub.com\u002Fmodelcontextprotocol\u002Fext-apps.git",{"type":39,"tag":112,"props":182,"children":183},{"style":125},[184],{"type":45,"value":185}," \u002Ftmp\u002Fmcp-ext-apps\n",{"type":39,"tag":187,"props":188,"children":190},"h3",{"id":189},"api-reference-source-files",[191],{"type":45,"value":192},"API Reference (Source Files)",{"type":39,"tag":48,"props":194,"children":195},{},[196,198,204],{"type":45,"value":197},"Read JSDoc documentation directly from ",{"type":39,"tag":81,"props":199,"children":201},{"className":200},[],[202],{"type":45,"value":203},"\u002Ftmp\u002Fmcp-ext-apps\u002Fsrc\u002F",{"type":45,"value":205},":",{"type":39,"tag":207,"props":208,"children":209},"table",{},[210,229],{"type":39,"tag":211,"props":212,"children":213},"thead",{},[214],{"type":39,"tag":215,"props":216,"children":217},"tr",{},[218,224],{"type":39,"tag":219,"props":220,"children":221},"th",{},[222],{"type":45,"value":223},"File",{"type":39,"tag":219,"props":225,"children":226},{},[227],{"type":45,"value":228},"Contents",{"type":39,"tag":230,"props":231,"children":232},"tbody",{},[233,287,317,342,377,400],{"type":39,"tag":215,"props":234,"children":235},{},[236,246],{"type":39,"tag":237,"props":238,"children":239},"td",{},[240],{"type":39,"tag":81,"props":241,"children":243},{"className":242},[],[244],{"type":45,"value":245},"src\u002Fapp.ts",{"type":39,"tag":237,"props":247,"children":248},{},[249,255,257,263,265,271,272,278,279,285],{"type":39,"tag":81,"props":250,"children":252},{"className":251},[],[253],{"type":45,"value":254},"App",{"type":45,"value":256}," class, handlers (",{"type":39,"tag":81,"props":258,"children":260},{"className":259},[],[261],{"type":45,"value":262},"ontoolinput",{"type":45,"value":264},", ",{"type":39,"tag":81,"props":266,"children":268},{"className":267},[],[269],{"type":45,"value":270},"ontoolresult",{"type":45,"value":264},{"type":39,"tag":81,"props":273,"children":275},{"className":274},[],[276],{"type":45,"value":277},"onhostcontextchanged",{"type":45,"value":264},{"type":39,"tag":81,"props":280,"children":282},{"className":281},[],[283],{"type":45,"value":284},"onteardown",{"type":45,"value":286},"), lifecycle",{"type":39,"tag":215,"props":288,"children":289},{},[290,299],{"type":39,"tag":237,"props":291,"children":292},{},[293],{"type":39,"tag":81,"props":294,"children":296},{"className":295},[],[297],{"type":45,"value":298},"src\u002Fserver\u002Findex.ts",{"type":39,"tag":237,"props":300,"children":301},{},[302,308,309,315],{"type":39,"tag":81,"props":303,"children":305},{"className":304},[],[306],{"type":45,"value":307},"registerAppTool",{"type":45,"value":264},{"type":39,"tag":81,"props":310,"children":312},{"className":311},[],[313],{"type":45,"value":314},"registerAppResource",{"type":45,"value":316},", tool visibility options",{"type":39,"tag":215,"props":318,"children":319},{},[320,329],{"type":39,"tag":237,"props":321,"children":322},{},[323],{"type":39,"tag":81,"props":324,"children":326},{"className":325},[],[327],{"type":45,"value":328},"src\u002Fspec.types.ts",{"type":39,"tag":237,"props":330,"children":331},{},[332,334,340],{"type":45,"value":333},"All type definitions: ",{"type":39,"tag":81,"props":335,"children":337},{"className":336},[],[338],{"type":45,"value":339},"McpUiHostContext",{"type":45,"value":341},", CSS variable keys, display modes",{"type":39,"tag":215,"props":343,"children":344},{},[345,354],{"type":39,"tag":237,"props":346,"children":347},{},[348],{"type":39,"tag":81,"props":349,"children":351},{"className":350},[],[352],{"type":45,"value":353},"src\u002Fstyles.ts",{"type":39,"tag":237,"props":355,"children":356},{},[357,363,364,370,371],{"type":39,"tag":81,"props":358,"children":360},{"className":359},[],[361],{"type":45,"value":362},"applyDocumentTheme",{"type":45,"value":264},{"type":39,"tag":81,"props":365,"children":367},{"className":366},[],[368],{"type":45,"value":369},"applyHostStyleVariables",{"type":45,"value":264},{"type":39,"tag":81,"props":372,"children":374},{"className":373},[],[375],{"type":45,"value":376},"applyHostFonts",{"type":39,"tag":215,"props":378,"children":379},{},[380,389],{"type":39,"tag":237,"props":381,"children":382},{},[383],{"type":39,"tag":81,"props":384,"children":386},{"className":385},[],[387],{"type":45,"value":388},"src\u002Freact\u002FuseApp.tsx",{"type":39,"tag":237,"props":390,"children":391},{},[392,398],{"type":39,"tag":81,"props":393,"children":395},{"className":394},[],[396],{"type":45,"value":397},"useApp",{"type":45,"value":399}," hook for React apps",{"type":39,"tag":215,"props":401,"children":402},{},[403,412],{"type":39,"tag":237,"props":404,"children":405},{},[406],{"type":39,"tag":81,"props":407,"children":409},{"className":408},[],[410],{"type":45,"value":411},"src\u002Freact\u002FuseHostStyles.ts",{"type":39,"tag":237,"props":413,"children":414},{},[415,421,422,428,429,435],{"type":39,"tag":81,"props":416,"children":418},{"className":417},[],[419],{"type":45,"value":420},"useHostStyles",{"type":45,"value":264},{"type":39,"tag":81,"props":423,"children":425},{"className":424},[],[426],{"type":45,"value":427},"useHostStyleVariables",{"type":45,"value":264},{"type":39,"tag":81,"props":430,"children":432},{"className":431},[],[433],{"type":45,"value":434},"useHostFonts",{"type":45,"value":436}," hooks",{"type":39,"tag":187,"props":438,"children":440},{"id":439},"framework-templates",[441],{"type":45,"value":442},"Framework Templates",{"type":39,"tag":48,"props":444,"children":445},{},[446,448,454],{"type":45,"value":447},"Learn and adapt from ",{"type":39,"tag":81,"props":449,"children":451},{"className":450},[],[452],{"type":45,"value":453},"\u002Ftmp\u002Fmcp-ext-apps\u002Fexamples\u002Fbasic-server-{framework}\u002F",{"type":45,"value":205},{"type":39,"tag":207,"props":456,"children":457},{},[458,474],{"type":39,"tag":211,"props":459,"children":460},{},[461],{"type":39,"tag":215,"props":462,"children":463},{},[464,469],{"type":39,"tag":219,"props":465,"children":466},{},[467],{"type":45,"value":468},"Template",{"type":39,"tag":219,"props":470,"children":471},{},[472],{"type":45,"value":473},"Key Files",{"type":39,"tag":230,"props":475,"children":476},{},[477,512,548,575,602,628],{"type":39,"tag":215,"props":478,"children":479},{},[480,489],{"type":39,"tag":237,"props":481,"children":482},{},[483],{"type":39,"tag":81,"props":484,"children":486},{"className":485},[],[487],{"type":45,"value":488},"basic-server-vanillajs\u002F",{"type":39,"tag":237,"props":490,"children":491},{},[492,498,499,505,506],{"type":39,"tag":81,"props":493,"children":495},{"className":494},[],[496],{"type":45,"value":497},"server.ts",{"type":45,"value":264},{"type":39,"tag":81,"props":500,"children":502},{"className":501},[],[503],{"type":45,"value":504},"src\u002Fmcp-app.ts",{"type":45,"value":264},{"type":39,"tag":81,"props":507,"children":509},{"className":508},[],[510],{"type":45,"value":511},"mcp-app.html",{"type":39,"tag":215,"props":513,"children":514},{},[515,524],{"type":39,"tag":237,"props":516,"children":517},{},[518],{"type":39,"tag":81,"props":519,"children":521},{"className":520},[],[522],{"type":45,"value":523},"basic-server-react\u002F",{"type":39,"tag":237,"props":525,"children":526},{},[527,532,533,539,541,546],{"type":39,"tag":81,"props":528,"children":530},{"className":529},[],[531],{"type":45,"value":497},{"type":45,"value":264},{"type":39,"tag":81,"props":534,"children":536},{"className":535},[],[537],{"type":45,"value":538},"src\u002Fmcp-app.tsx",{"type":45,"value":540}," (uses ",{"type":39,"tag":81,"props":542,"children":544},{"className":543},[],[545],{"type":45,"value":397},{"type":45,"value":547}," hook)",{"type":39,"tag":215,"props":549,"children":550},{},[551,560],{"type":39,"tag":237,"props":552,"children":553},{},[554],{"type":39,"tag":81,"props":555,"children":557},{"className":556},[],[558],{"type":45,"value":559},"basic-server-vue\u002F",{"type":39,"tag":237,"props":561,"children":562},{},[563,568,569],{"type":39,"tag":81,"props":564,"children":566},{"className":565},[],[567],{"type":45,"value":497},{"type":45,"value":264},{"type":39,"tag":81,"props":570,"children":572},{"className":571},[],[573],{"type":45,"value":574},"src\u002FApp.vue",{"type":39,"tag":215,"props":576,"children":577},{},[578,587],{"type":39,"tag":237,"props":579,"children":580},{},[581],{"type":39,"tag":81,"props":582,"children":584},{"className":583},[],[585],{"type":45,"value":586},"basic-server-svelte\u002F",{"type":39,"tag":237,"props":588,"children":589},{},[590,595,596],{"type":39,"tag":81,"props":591,"children":593},{"className":592},[],[594],{"type":45,"value":497},{"type":45,"value":264},{"type":39,"tag":81,"props":597,"children":599},{"className":598},[],[600],{"type":45,"value":601},"src\u002FApp.svelte",{"type":39,"tag":215,"props":603,"children":604},{},[605,614],{"type":39,"tag":237,"props":606,"children":607},{},[608],{"type":39,"tag":81,"props":609,"children":611},{"className":610},[],[612],{"type":45,"value":613},"basic-server-preact\u002F",{"type":39,"tag":237,"props":615,"children":616},{},[617,622,623],{"type":39,"tag":81,"props":618,"children":620},{"className":619},[],[621],{"type":45,"value":497},{"type":45,"value":264},{"type":39,"tag":81,"props":624,"children":626},{"className":625},[],[627],{"type":45,"value":538},{"type":39,"tag":215,"props":629,"children":630},{},[631,640],{"type":39,"tag":237,"props":632,"children":633},{},[634],{"type":39,"tag":81,"props":635,"children":637},{"className":636},[],[638],{"type":45,"value":639},"basic-server-solid\u002F",{"type":39,"tag":237,"props":641,"children":642},{},[643,648,649],{"type":39,"tag":81,"props":644,"children":646},{"className":645},[],[647],{"type":45,"value":497},{"type":45,"value":264},{"type":39,"tag":81,"props":650,"children":652},{"className":651},[],[653],{"type":45,"value":538},{"type":39,"tag":187,"props":655,"children":657},{"id":656},"reference-examples",[658],{"type":45,"value":659},"Reference Examples",{"type":39,"tag":207,"props":661,"children":662},{},[663,679],{"type":39,"tag":211,"props":664,"children":665},{},[666],{"type":39,"tag":215,"props":667,"children":668},{},[669,674],{"type":39,"tag":219,"props":670,"children":671},{},[672],{"type":45,"value":673},"Example",{"type":39,"tag":219,"props":675,"children":676},{},[677],{"type":45,"value":678},"Relevant Pattern",{"type":39,"tag":230,"props":680,"children":681},{},[682,714,731],{"type":39,"tag":215,"props":683,"children":684},{},[685,694],{"type":39,"tag":237,"props":686,"children":687},{},[688],{"type":39,"tag":81,"props":689,"children":691},{"className":690},[],[692],{"type":45,"value":693},"examples\u002Fmap-server\u002F",{"type":39,"tag":237,"props":695,"children":696},{},[697,699,705,706,712],{"type":45,"value":698},"External API integration + CSP (",{"type":39,"tag":81,"props":700,"children":702},{"className":701},[],[703],{"type":45,"value":704},"connectDomains",{"type":45,"value":264},{"type":39,"tag":81,"props":707,"children":709},{"className":708},[],[710],{"type":45,"value":711},"resourceDomains",{"type":45,"value":713},")",{"type":39,"tag":215,"props":715,"children":716},{},[717,726],{"type":39,"tag":237,"props":718,"children":719},{},[720],{"type":39,"tag":81,"props":721,"children":723},{"className":722},[],[724],{"type":45,"value":725},"examples\u002Fsheet-music-server\u002F",{"type":39,"tag":237,"props":727,"children":728},{},[729],{"type":45,"value":730},"Library that loads external assets (soundfonts)",{"type":39,"tag":215,"props":732,"children":733},{},[734,743],{"type":39,"tag":237,"props":735,"children":736},{},[737],{"type":39,"tag":81,"props":738,"children":740},{"className":739},[],[741],{"type":45,"value":742},"examples\u002Fpdf-server\u002F",{"type":39,"tag":237,"props":744,"children":745},{},[746],{"type":45,"value":747},"Binary content handling + app-only helper tools",{"type":39,"tag":62,"props":749,"children":751},{"id":750},"step-1-analyze-the-existing-web-app",[752],{"type":45,"value":753},"Step 1: Analyze the Existing Web App",{"type":39,"tag":48,"props":755,"children":756},{},[757],{"type":45,"value":758},"Before writing any code, examine the existing web app to plan what needs to change.",{"type":39,"tag":187,"props":760,"children":762},{"id":761},"what-to-investigate",[763],{"type":45,"value":764},"What to Investigate",{"type":39,"tag":766,"props":767,"children":768},"ol",{},[769,780,790,800,810],{"type":39,"tag":770,"props":771,"children":772},"li",{},[773,778],{"type":39,"tag":54,"props":774,"children":775},{},[776],{"type":45,"value":777},"Data sources",{"type":45,"value":779}," — How does the app get its data? (URL params, API calls, props, hardcoded, localStorage)",{"type":39,"tag":770,"props":781,"children":782},{},[783,788],{"type":39,"tag":54,"props":784,"children":785},{},[786],{"type":45,"value":787},"External dependencies",{"type":45,"value":789}," — CDN scripts, fonts, API endpoints, iframe embeds, WebSocket connections",{"type":39,"tag":770,"props":791,"children":792},{},[793,798],{"type":39,"tag":54,"props":794,"children":795},{},[796],{"type":45,"value":797},"Build system",{"type":45,"value":799}," — Current bundler (Webpack, Vite, Rollup, none), framework (React, Vue, vanilla), entry points",{"type":39,"tag":770,"props":801,"children":802},{},[803,808],{"type":39,"tag":54,"props":804,"children":805},{},[806],{"type":45,"value":807},"User interactions",{"type":45,"value":809}," — Does the app have inputs\u002Fforms that should map to tool parameters?",{"type":39,"tag":770,"props":811,"children":812},{},[813,818,820,826],{"type":39,"tag":54,"props":814,"children":815},{},[816],{"type":45,"value":817},"Runtime detection",{"type":45,"value":819}," — How to tell if the app is running inside an MCP host (e.g., check the current origin, a query param, or whether ",{"type":39,"tag":81,"props":821,"children":823},{"className":822},[],[824],{"type":45,"value":825},"window.parent !== window",{"type":45,"value":713},{"type":39,"tag":48,"props":828,"children":829},{},[830],{"type":45,"value":831},"Present findings to the user and confirm the approach.",{"type":39,"tag":187,"props":833,"children":835},{"id":834},"data-source-mapping",[836],{"type":45,"value":837},"Data Source Mapping",{"type":39,"tag":48,"props":839,"children":840},{},[841],{"type":45,"value":842},"In hybrid mode, the app keeps its existing data sources for standalone use and adds MCP equivalents:",{"type":39,"tag":207,"props":844,"children":845},{},[846,862],{"type":39,"tag":211,"props":847,"children":848},{},[849],{"type":39,"tag":215,"props":850,"children":851},{},[852,857],{"type":39,"tag":219,"props":853,"children":854},{},[855],{"type":45,"value":856},"Standalone data source",{"type":39,"tag":219,"props":858,"children":859},{},[860],{"type":45,"value":861},"MCP App equivalent",{"type":39,"tag":230,"props":863,"children":864},{},[865,904,928,950,970,990],{"type":39,"tag":215,"props":866,"children":867},{},[868,873],{"type":39,"tag":237,"props":869,"children":870},{},[871],{"type":45,"value":872},"URL query parameters",{"type":39,"tag":237,"props":874,"children":875},{},[876,881,883,888,890,896,898],{"type":39,"tag":81,"props":877,"children":879},{"className":878},[],[880],{"type":45,"value":262},{"type":45,"value":882}," \u002F ",{"type":39,"tag":81,"props":884,"children":886},{"className":885},[],[887],{"type":45,"value":270},{"type":45,"value":889}," ",{"type":39,"tag":81,"props":891,"children":893},{"className":892},[],[894],{"type":45,"value":895},"arguments",{"type":45,"value":897}," or ",{"type":39,"tag":81,"props":899,"children":901},{"className":900},[],[902],{"type":45,"value":903},"structuredContent",{"type":39,"tag":215,"props":905,"children":906},{},[907,912],{"type":39,"tag":237,"props":908,"children":909},{},[910],{"type":45,"value":911},"REST API calls",{"type":39,"tag":237,"props":913,"children":914},{},[915,921,923],{"type":39,"tag":81,"props":916,"children":918},{"className":917},[],[919],{"type":45,"value":920},"app.callServerTool()",{"type":45,"value":922}," to server-side tools, or keep direct API calls with CSP ",{"type":39,"tag":81,"props":924,"children":926},{"className":925},[],[927],{"type":45,"value":704},{"type":39,"tag":215,"props":929,"children":930},{},[931,936],{"type":39,"tag":237,"props":932,"children":933},{},[934],{"type":45,"value":935},"Props \u002F component inputs",{"type":39,"tag":237,"props":937,"children":938},{},[939,944,945],{"type":39,"tag":81,"props":940,"children":942},{"className":941},[],[943],{"type":45,"value":262},{"type":45,"value":889},{"type":39,"tag":81,"props":946,"children":948},{"className":947},[],[949],{"type":45,"value":895},{"type":39,"tag":215,"props":951,"children":952},{},[953,958],{"type":39,"tag":237,"props":954,"children":955},{},[956],{"type":45,"value":957},"localStorage \u002F sessionStorage",{"type":39,"tag":237,"props":959,"children":960},{},[961,963,968],{"type":45,"value":962},"Not available in sandboxed iframe — pass via ",{"type":39,"tag":81,"props":964,"children":966},{"className":965},[],[967],{"type":45,"value":903},{"type":45,"value":969}," or server-side state",{"type":39,"tag":215,"props":971,"children":972},{},[973,978],{"type":39,"tag":237,"props":974,"children":975},{},[976],{"type":45,"value":977},"WebSocket connections",{"type":39,"tag":237,"props":979,"children":980},{},[981,983,988],{"type":45,"value":982},"Keep with CSP ",{"type":39,"tag":81,"props":984,"children":986},{"className":985},[],[987],{"type":45,"value":704},{"type":45,"value":989},", or convert to polling via app-only tools",{"type":39,"tag":215,"props":991,"children":992},{},[993,998],{"type":39,"tag":237,"props":994,"children":995},{},[996],{"type":45,"value":997},"Hardcoded data",{"type":39,"tag":237,"props":999,"children":1000},{},[1001,1003,1008],{"type":45,"value":1002},"Move to tool ",{"type":39,"tag":81,"props":1004,"children":1006},{"className":1005},[],[1007],{"type":45,"value":903},{"type":45,"value":1009}," to make it dynamic",{"type":39,"tag":62,"props":1011,"children":1013},{"id":1012},"step-2-investigate-csp-requirements",[1014],{"type":45,"value":1015},"Step 2: Investigate CSP Requirements",{"type":39,"tag":48,"props":1017,"children":1018},{},[1019,1021,1026],{"type":45,"value":1020},"MCP Apps HTML runs in a sandboxed iframe with no same-origin server. ",{"type":39,"tag":54,"props":1022,"children":1023},{},[1024],{"type":45,"value":1025},"Every",{"type":45,"value":1027}," external origin must be declared in CSP — missing origins fail silently.",{"type":39,"tag":48,"props":1029,"children":1030},{},[1031,1036],{"type":39,"tag":54,"props":1032,"children":1033},{},[1034],{"type":45,"value":1035},"Before writing any code",{"type":45,"value":1037},", build the app and investigate all origins it references:",{"type":39,"tag":766,"props":1039,"children":1040},{},[1041,1046,1058,1077],{"type":39,"tag":770,"props":1042,"children":1043},{},[1044],{"type":45,"value":1045},"Build the app using the existing build command",{"type":39,"tag":770,"props":1047,"children":1048},{},[1049,1051,1056],{"type":45,"value":1050},"Search the resulting HTML, CSS, and JS for ",{"type":39,"tag":54,"props":1052,"children":1053},{},[1054],{"type":45,"value":1055},"every",{"type":45,"value":1057}," origin (not just \"external\" origins — every network request will need CSP approval)",{"type":39,"tag":770,"props":1059,"children":1060},{},[1061,1063],{"type":45,"value":1062},"For each origin found, trace back to source:\n",{"type":39,"tag":1064,"props":1065,"children":1066},"ul",{},[1067,1072],{"type":39,"tag":770,"props":1068,"children":1069},{},[1070],{"type":45,"value":1071},"If it comes from a constant → universal (same in dev and prod)",{"type":39,"tag":770,"props":1073,"children":1074},{},[1075],{"type":45,"value":1076},"If it comes from an env var or conditional → note the mechanism and identify both dev and prod values",{"type":39,"tag":770,"props":1078,"children":1079},{},[1080],{"type":45,"value":1081},"Check for third-party libraries that may make their own requests (analytics, error tracking, etc.)",{"type":39,"tag":48,"props":1083,"children":1084},{},[1085,1090],{"type":39,"tag":54,"props":1086,"children":1087},{},[1088],{"type":45,"value":1089},"Document your findings",{"type":45,"value":1091}," as three lists, and note for each origin whether it's universal, dev-only, or prod-only:",{"type":39,"tag":1064,"props":1093,"children":1094},{},[1095,1104,1113],{"type":39,"tag":770,"props":1096,"children":1097},{},[1098,1102],{"type":39,"tag":54,"props":1099,"children":1100},{},[1101],{"type":45,"value":711},{"type":45,"value":1103},": origins serving images, fonts, styles, scripts",{"type":39,"tag":770,"props":1105,"children":1106},{},[1107,1111],{"type":39,"tag":54,"props":1108,"children":1109},{},[1110],{"type":45,"value":704},{"type":45,"value":1112},": origins for API\u002Ffetch requests",{"type":39,"tag":770,"props":1114,"children":1115},{},[1116,1121],{"type":39,"tag":54,"props":1117,"children":1118},{},[1119],{"type":45,"value":1120},"frameDomains",{"type":45,"value":1122},": origins for nested iframes",{"type":39,"tag":48,"props":1124,"children":1125},{},[1126],{"type":45,"value":1127},"If no origins are found, the app may not need custom CSP domains.",{"type":39,"tag":62,"props":1129,"children":1131},{"id":1130},"step-3-set-up-the-mcp-server",[1132],{"type":45,"value":1133},"Step 3: Set Up the MCP Server",{"type":39,"tag":48,"props":1135,"children":1136},{},[1137],{"type":45,"value":1138},"Create a new MCP server with tool and resource registration. This wraps the existing web app for MCP hosts.",{"type":39,"tag":187,"props":1140,"children":1142},{"id":1141},"dependencies",[1143],{"type":45,"value":1144},"Dependencies",{"type":39,"tag":74,"props":1146,"children":1148},{"className":104,"code":1147,"language":106,"meta":83,"style":83},"npm install @modelcontextprotocol\u002Fext-apps @modelcontextprotocol\u002Fsdk zod\nnpm install -D tsx vite vite-plugin-singlefile\n",[1149],{"type":39,"tag":81,"props":1150,"children":1151},{"__ignoreMap":83},[1152,1179],{"type":39,"tag":112,"props":1153,"children":1154},{"class":114,"line":115},[1155,1159,1164,1169,1174],{"type":39,"tag":112,"props":1156,"children":1157},{"style":119},[1158],{"type":45,"value":154},{"type":39,"tag":112,"props":1160,"children":1161},{"style":125},[1162],{"type":45,"value":1163}," install",{"type":39,"tag":112,"props":1165,"children":1166},{"style":125},[1167],{"type":45,"value":1168}," @modelcontextprotocol\u002Fext-apps",{"type":39,"tag":112,"props":1170,"children":1171},{"style":125},[1172],{"type":45,"value":1173}," @modelcontextprotocol\u002Fsdk",{"type":39,"tag":112,"props":1175,"children":1176},{"style":125},[1177],{"type":45,"value":1178}," zod\n",{"type":39,"tag":112,"props":1180,"children":1182},{"class":114,"line":1181},2,[1183,1187,1191,1196,1201,1206],{"type":39,"tag":112,"props":1184,"children":1185},{"style":119},[1186],{"type":45,"value":154},{"type":39,"tag":112,"props":1188,"children":1189},{"style":125},[1190],{"type":45,"value":1163},{"type":39,"tag":112,"props":1192,"children":1193},{"style":125},[1194],{"type":45,"value":1195}," -D",{"type":39,"tag":112,"props":1197,"children":1198},{"style":125},[1199],{"type":45,"value":1200}," tsx",{"type":39,"tag":112,"props":1202,"children":1203},{"style":125},[1204],{"type":45,"value":1205}," vite",{"type":39,"tag":112,"props":1207,"children":1208},{"style":125},[1209],{"type":45,"value":1210}," vite-plugin-singlefile\n",{"type":39,"tag":48,"props":1212,"children":1213},{},[1214,1216,1222],{"type":45,"value":1215},"Use ",{"type":39,"tag":81,"props":1217,"children":1219},{"className":1218},[],[1220],{"type":45,"value":1221},"npm install",{"type":45,"value":1223}," to add dependencies rather than manually writing version numbers. This lets npm resolve the latest compatible versions. Never specify version numbers from memory.",{"type":39,"tag":187,"props":1225,"children":1227},{"id":1226},"server-code",[1228],{"type":45,"value":1229},"Server Code",{"type":39,"tag":48,"props":1231,"children":1232},{},[1233,1235,1240],{"type":45,"value":1234},"Create ",{"type":39,"tag":81,"props":1236,"children":1238},{"className":1237},[],[1239],{"type":45,"value":497},{"type":45,"value":205},{"type":39,"tag":74,"props":1242,"children":1246},{"className":1243,"code":1244,"language":1245,"meta":83,"style":83},"language-typescript shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","import { McpServer } from \"@modelcontextprotocol\u002Fsdk\u002Fserver\u002Fmcp.js\";\nimport { StdioServerTransport } from \"@modelcontextprotocol\u002Fsdk\u002Fserver\u002Fstdio.js\";\nimport { registerAppTool, registerAppResource, RESOURCE_MIME_TYPE } from \"@modelcontextprotocol\u002Fext-apps\u002Fserver\";\nimport fs from \"node:fs\u002Fpromises\";\nimport path from \"node:path\";\nimport { z } from \"zod\";\n\nconst server = new McpServer({ name: \"my-app\", version: \"1.0.0\" });\n\nconst resourceUri = \"ui:\u002F\u002Fmy-app\u002Fmcp-app.html\";\n\n\u002F\u002F Register the tool — inputSchema maps to the app's data sources\nregisterAppTool(server, \"show-app\", {\n  description: \"Displays the app with the given parameters\",\n  inputSchema: { query: z.string().describe(\"The search query\") },\n  _meta: { ui: { resourceUri } },\n}, async (args) => {\n  \u002F\u002F Process args server-side if needed\n  return {\n    content: [{ type: \"text\", text: `Showing app for: ${args.query}` }],\n    structuredContent: { query: args.query },\n  };\n});\n\n\u002F\u002F Register the HTML resource\nregisterAppResource(server, {\n  uri: resourceUri,\n  name: \"My App UI\",\n  mimeType: RESOURCE_MIME_TYPE,\n  \u002F\u002F Add CSP domains from Step 2 if needed:\n  \u002F\u002F _meta: { ui: { connectDomains: [\"api.example.com\"], resourceDomains: [\"cdn.example.com\"] } },\n}, async () => {\n  const html = await fs.readFile(\n    path.resolve(import.meta.dirname, \"dist\", \"mcp-app.html\"),\n    \"utf-8\",\n  );\n  return { contents: [{ uri: resourceUri, mimeType: RESOURCE_MIME_TYPE, text: html }] };\n});\n\n\u002F\u002F Start the server\nconst transport = new StdioServerTransport();\nawait server.connect(transport);\n","typescript",[1247],{"type":39,"tag":81,"props":1248,"children":1249},{"__ignoreMap":83},[1250,1299,1340,1401,1436,1470,1512,1522,1623,1631,1665,1673,1683,1722,1753,1834,1878,1916,1925,1938,2040,2082,2091,2107,2115,2124,2144,2166,2196,2217,2226,2235,2260,2303,2388,2410,2423,2512,2528,2536,2545,2578],{"type":39,"tag":112,"props":1251,"children":1252},{"class":114,"line":115},[1253,1259,1264,1270,1275,1280,1284,1289,1294],{"type":39,"tag":112,"props":1254,"children":1256},{"style":1255},"--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic",[1257],{"type":45,"value":1258},"import",{"type":39,"tag":112,"props":1260,"children":1261},{"style":136},[1262],{"type":45,"value":1263}," {",{"type":39,"tag":112,"props":1265,"children":1267},{"style":1266},"--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8",[1268],{"type":45,"value":1269}," McpServer",{"type":39,"tag":112,"props":1271,"children":1272},{"style":136},[1273],{"type":45,"value":1274}," }",{"type":39,"tag":112,"props":1276,"children":1277},{"style":1255},[1278],{"type":45,"value":1279}," from",{"type":39,"tag":112,"props":1281,"children":1282},{"style":136},[1283],{"type":45,"value":139},{"type":39,"tag":112,"props":1285,"children":1286},{"style":125},[1287],{"type":45,"value":1288},"@modelcontextprotocol\u002Fsdk\u002Fserver\u002Fmcp.js",{"type":39,"tag":112,"props":1290,"children":1291},{"style":136},[1292],{"type":45,"value":1293},"\"",{"type":39,"tag":112,"props":1295,"children":1296},{"style":136},[1297],{"type":45,"value":1298},";\n",{"type":39,"tag":112,"props":1300,"children":1301},{"class":114,"line":1181},[1302,1306,1310,1315,1319,1323,1327,1332,1336],{"type":39,"tag":112,"props":1303,"children":1304},{"style":1255},[1305],{"type":45,"value":1258},{"type":39,"tag":112,"props":1307,"children":1308},{"style":136},[1309],{"type":45,"value":1263},{"type":39,"tag":112,"props":1311,"children":1312},{"style":1266},[1313],{"type":45,"value":1314}," StdioServerTransport",{"type":39,"tag":112,"props":1316,"children":1317},{"style":136},[1318],{"type":45,"value":1274},{"type":39,"tag":112,"props":1320,"children":1321},{"style":1255},[1322],{"type":45,"value":1279},{"type":39,"tag":112,"props":1324,"children":1325},{"style":136},[1326],{"type":45,"value":139},{"type":39,"tag":112,"props":1328,"children":1329},{"style":125},[1330],{"type":45,"value":1331},"@modelcontextprotocol\u002Fsdk\u002Fserver\u002Fstdio.js",{"type":39,"tag":112,"props":1333,"children":1334},{"style":136},[1335],{"type":45,"value":1293},{"type":39,"tag":112,"props":1337,"children":1338},{"style":136},[1339],{"type":45,"value":1298},{"type":39,"tag":112,"props":1341,"children":1343},{"class":114,"line":1342},3,[1344,1348,1352,1357,1362,1367,1371,1376,1380,1384,1388,1393,1397],{"type":39,"tag":112,"props":1345,"children":1346},{"style":1255},[1347],{"type":45,"value":1258},{"type":39,"tag":112,"props":1349,"children":1350},{"style":136},[1351],{"type":45,"value":1263},{"type":39,"tag":112,"props":1353,"children":1354},{"style":1266},[1355],{"type":45,"value":1356}," registerAppTool",{"type":39,"tag":112,"props":1358,"children":1359},{"style":136},[1360],{"type":45,"value":1361},",",{"type":39,"tag":112,"props":1363,"children":1364},{"style":1266},[1365],{"type":45,"value":1366}," registerAppResource",{"type":39,"tag":112,"props":1368,"children":1369},{"style":136},[1370],{"type":45,"value":1361},{"type":39,"tag":112,"props":1372,"children":1373},{"style":1266},[1374],{"type":45,"value":1375}," RESOURCE_MIME_TYPE",{"type":39,"tag":112,"props":1377,"children":1378},{"style":136},[1379],{"type":45,"value":1274},{"type":39,"tag":112,"props":1381,"children":1382},{"style":1255},[1383],{"type":45,"value":1279},{"type":39,"tag":112,"props":1385,"children":1386},{"style":136},[1387],{"type":45,"value":139},{"type":39,"tag":112,"props":1389,"children":1390},{"style":125},[1391],{"type":45,"value":1392},"@modelcontextprotocol\u002Fext-apps\u002Fserver",{"type":39,"tag":112,"props":1394,"children":1395},{"style":136},[1396],{"type":45,"value":1293},{"type":39,"tag":112,"props":1398,"children":1399},{"style":136},[1400],{"type":45,"value":1298},{"type":39,"tag":112,"props":1402,"children":1404},{"class":114,"line":1403},4,[1405,1409,1414,1419,1423,1428,1432],{"type":39,"tag":112,"props":1406,"children":1407},{"style":1255},[1408],{"type":45,"value":1258},{"type":39,"tag":112,"props":1410,"children":1411},{"style":1266},[1412],{"type":45,"value":1413}," fs ",{"type":39,"tag":112,"props":1415,"children":1416},{"style":1255},[1417],{"type":45,"value":1418},"from",{"type":39,"tag":112,"props":1420,"children":1421},{"style":136},[1422],{"type":45,"value":139},{"type":39,"tag":112,"props":1424,"children":1425},{"style":125},[1426],{"type":45,"value":1427},"node:fs\u002Fpromises",{"type":39,"tag":112,"props":1429,"children":1430},{"style":136},[1431],{"type":45,"value":1293},{"type":39,"tag":112,"props":1433,"children":1434},{"style":136},[1435],{"type":45,"value":1298},{"type":39,"tag":112,"props":1437,"children":1439},{"class":114,"line":1438},5,[1440,1444,1449,1453,1457,1462,1466],{"type":39,"tag":112,"props":1441,"children":1442},{"style":1255},[1443],{"type":45,"value":1258},{"type":39,"tag":112,"props":1445,"children":1446},{"style":1266},[1447],{"type":45,"value":1448}," path ",{"type":39,"tag":112,"props":1450,"children":1451},{"style":1255},[1452],{"type":45,"value":1418},{"type":39,"tag":112,"props":1454,"children":1455},{"style":136},[1456],{"type":45,"value":139},{"type":39,"tag":112,"props":1458,"children":1459},{"style":125},[1460],{"type":45,"value":1461},"node:path",{"type":39,"tag":112,"props":1463,"children":1464},{"style":136},[1465],{"type":45,"value":1293},{"type":39,"tag":112,"props":1467,"children":1468},{"style":136},[1469],{"type":45,"value":1298},{"type":39,"tag":112,"props":1471,"children":1473},{"class":114,"line":1472},6,[1474,1478,1482,1487,1491,1495,1499,1504,1508],{"type":39,"tag":112,"props":1475,"children":1476},{"style":1255},[1477],{"type":45,"value":1258},{"type":39,"tag":112,"props":1479,"children":1480},{"style":136},[1481],{"type":45,"value":1263},{"type":39,"tag":112,"props":1483,"children":1484},{"style":1266},[1485],{"type":45,"value":1486}," z",{"type":39,"tag":112,"props":1488,"children":1489},{"style":136},[1490],{"type":45,"value":1274},{"type":39,"tag":112,"props":1492,"children":1493},{"style":1255},[1494],{"type":45,"value":1279},{"type":39,"tag":112,"props":1496,"children":1497},{"style":136},[1498],{"type":45,"value":139},{"type":39,"tag":112,"props":1500,"children":1501},{"style":125},[1502],{"type":45,"value":1503},"zod",{"type":39,"tag":112,"props":1505,"children":1506},{"style":136},[1507],{"type":45,"value":1293},{"type":39,"tag":112,"props":1509,"children":1510},{"style":136},[1511],{"type":45,"value":1298},{"type":39,"tag":112,"props":1513,"children":1515},{"class":114,"line":1514},7,[1516],{"type":39,"tag":112,"props":1517,"children":1519},{"emptyLinePlaceholder":1518},true,[1520],{"type":45,"value":1521},"\n",{"type":39,"tag":112,"props":1523,"children":1525},{"class":114,"line":1524},8,[1526,1532,1537,1542,1547,1552,1557,1562,1568,1572,1576,1581,1585,1589,1594,1598,1602,1607,1611,1615,1619],{"type":39,"tag":112,"props":1527,"children":1529},{"style":1528},"--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA",[1530],{"type":45,"value":1531},"const",{"type":39,"tag":112,"props":1533,"children":1534},{"style":1266},[1535],{"type":45,"value":1536}," server ",{"type":39,"tag":112,"props":1538,"children":1539},{"style":136},[1540],{"type":45,"value":1541},"=",{"type":39,"tag":112,"props":1543,"children":1544},{"style":136},[1545],{"type":45,"value":1546}," new",{"type":39,"tag":112,"props":1548,"children":1550},{"style":1549},"--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF",[1551],{"type":45,"value":1269},{"type":39,"tag":112,"props":1553,"children":1554},{"style":1266},[1555],{"type":45,"value":1556},"(",{"type":39,"tag":112,"props":1558,"children":1559},{"style":136},[1560],{"type":45,"value":1561},"{",{"type":39,"tag":112,"props":1563,"children":1565},{"style":1564},"--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178",[1566],{"type":45,"value":1567}," name",{"type":39,"tag":112,"props":1569,"children":1570},{"style":136},[1571],{"type":45,"value":205},{"type":39,"tag":112,"props":1573,"children":1574},{"style":136},[1575],{"type":45,"value":139},{"type":39,"tag":112,"props":1577,"children":1578},{"style":125},[1579],{"type":45,"value":1580},"my-app",{"type":39,"tag":112,"props":1582,"children":1583},{"style":136},[1584],{"type":45,"value":1293},{"type":39,"tag":112,"props":1586,"children":1587},{"style":136},[1588],{"type":45,"value":1361},{"type":39,"tag":112,"props":1590,"children":1591},{"style":1564},[1592],{"type":45,"value":1593}," version",{"type":39,"tag":112,"props":1595,"children":1596},{"style":136},[1597],{"type":45,"value":205},{"type":39,"tag":112,"props":1599,"children":1600},{"style":136},[1601],{"type":45,"value":139},{"type":39,"tag":112,"props":1603,"children":1604},{"style":125},[1605],{"type":45,"value":1606},"1.0.0",{"type":39,"tag":112,"props":1608,"children":1609},{"style":136},[1610],{"type":45,"value":1293},{"type":39,"tag":112,"props":1612,"children":1613},{"style":136},[1614],{"type":45,"value":1274},{"type":39,"tag":112,"props":1616,"children":1617},{"style":1266},[1618],{"type":45,"value":713},{"type":39,"tag":112,"props":1620,"children":1621},{"style":136},[1622],{"type":45,"value":1298},{"type":39,"tag":112,"props":1624,"children":1626},{"class":114,"line":1625},9,[1627],{"type":39,"tag":112,"props":1628,"children":1629},{"emptyLinePlaceholder":1518},[1630],{"type":45,"value":1521},{"type":39,"tag":112,"props":1632,"children":1634},{"class":114,"line":1633},10,[1635,1639,1644,1648,1652,1657,1661],{"type":39,"tag":112,"props":1636,"children":1637},{"style":1528},[1638],{"type":45,"value":1531},{"type":39,"tag":112,"props":1640,"children":1641},{"style":1266},[1642],{"type":45,"value":1643}," resourceUri ",{"type":39,"tag":112,"props":1645,"children":1646},{"style":136},[1647],{"type":45,"value":1541},{"type":39,"tag":112,"props":1649,"children":1650},{"style":136},[1651],{"type":45,"value":139},{"type":39,"tag":112,"props":1653,"children":1654},{"style":125},[1655],{"type":45,"value":1656},"ui:\u002F\u002Fmy-app\u002Fmcp-app.html",{"type":39,"tag":112,"props":1658,"children":1659},{"style":136},[1660],{"type":45,"value":1293},{"type":39,"tag":112,"props":1662,"children":1663},{"style":136},[1664],{"type":45,"value":1298},{"type":39,"tag":112,"props":1666,"children":1668},{"class":114,"line":1667},11,[1669],{"type":39,"tag":112,"props":1670,"children":1671},{"emptyLinePlaceholder":1518},[1672],{"type":45,"value":1521},{"type":39,"tag":112,"props":1674,"children":1676},{"class":114,"line":1675},12,[1677],{"type":39,"tag":112,"props":1678,"children":1680},{"style":1679},"--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#546E7A;--shiki-default-font-style:italic;--shiki-dark:#676E95;--shiki-dark-font-style:italic",[1681],{"type":45,"value":1682},"\u002F\u002F Register the tool — inputSchema maps to the app's data sources\n",{"type":39,"tag":112,"props":1684,"children":1686},{"class":114,"line":1685},13,[1687,1691,1696,1700,1704,1709,1713,1717],{"type":39,"tag":112,"props":1688,"children":1689},{"style":1549},[1690],{"type":45,"value":307},{"type":39,"tag":112,"props":1692,"children":1693},{"style":1266},[1694],{"type":45,"value":1695},"(server",{"type":39,"tag":112,"props":1697,"children":1698},{"style":136},[1699],{"type":45,"value":1361},{"type":39,"tag":112,"props":1701,"children":1702},{"style":136},[1703],{"type":45,"value":139},{"type":39,"tag":112,"props":1705,"children":1706},{"style":125},[1707],{"type":45,"value":1708},"show-app",{"type":39,"tag":112,"props":1710,"children":1711},{"style":136},[1712],{"type":45,"value":1293},{"type":39,"tag":112,"props":1714,"children":1715},{"style":136},[1716],{"type":45,"value":1361},{"type":39,"tag":112,"props":1718,"children":1719},{"style":136},[1720],{"type":45,"value":1721}," {\n",{"type":39,"tag":112,"props":1723,"children":1725},{"class":114,"line":1724},14,[1726,1731,1735,1739,1744,1748],{"type":39,"tag":112,"props":1727,"children":1728},{"style":1564},[1729],{"type":45,"value":1730},"  description",{"type":39,"tag":112,"props":1732,"children":1733},{"style":136},[1734],{"type":45,"value":205},{"type":39,"tag":112,"props":1736,"children":1737},{"style":136},[1738],{"type":45,"value":139},{"type":39,"tag":112,"props":1740,"children":1741},{"style":125},[1742],{"type":45,"value":1743},"Displays the app with the given parameters",{"type":39,"tag":112,"props":1745,"children":1746},{"style":136},[1747],{"type":45,"value":1293},{"type":39,"tag":112,"props":1749,"children":1750},{"style":136},[1751],{"type":45,"value":1752},",\n",{"type":39,"tag":112,"props":1754,"children":1756},{"class":114,"line":1755},15,[1757,1762,1766,1770,1775,1779,1783,1788,1793,1798,1802,1807,1811,1815,1820,1824,1829],{"type":39,"tag":112,"props":1758,"children":1759},{"style":1564},[1760],{"type":45,"value":1761},"  inputSchema",{"type":39,"tag":112,"props":1763,"children":1764},{"style":136},[1765],{"type":45,"value":205},{"type":39,"tag":112,"props":1767,"children":1768},{"style":136},[1769],{"type":45,"value":1263},{"type":39,"tag":112,"props":1771,"children":1772},{"style":1564},[1773],{"type":45,"value":1774}," query",{"type":39,"tag":112,"props":1776,"children":1777},{"style":136},[1778],{"type":45,"value":205},{"type":39,"tag":112,"props":1780,"children":1781},{"style":1266},[1782],{"type":45,"value":1486},{"type":39,"tag":112,"props":1784,"children":1785},{"style":136},[1786],{"type":45,"value":1787},".",{"type":39,"tag":112,"props":1789,"children":1790},{"style":1549},[1791],{"type":45,"value":1792},"string",{"type":39,"tag":112,"props":1794,"children":1795},{"style":1266},[1796],{"type":45,"value":1797},"()",{"type":39,"tag":112,"props":1799,"children":1800},{"style":136},[1801],{"type":45,"value":1787},{"type":39,"tag":112,"props":1803,"children":1804},{"style":1549},[1805],{"type":45,"value":1806},"describe",{"type":39,"tag":112,"props":1808,"children":1809},{"style":1266},[1810],{"type":45,"value":1556},{"type":39,"tag":112,"props":1812,"children":1813},{"style":136},[1814],{"type":45,"value":1293},{"type":39,"tag":112,"props":1816,"children":1817},{"style":125},[1818],{"type":45,"value":1819},"The search query",{"type":39,"tag":112,"props":1821,"children":1822},{"style":136},[1823],{"type":45,"value":1293},{"type":39,"tag":112,"props":1825,"children":1826},{"style":1266},[1827],{"type":45,"value":1828},") ",{"type":39,"tag":112,"props":1830,"children":1831},{"style":136},[1832],{"type":45,"value":1833},"},\n",{"type":39,"tag":112,"props":1835,"children":1837},{"class":114,"line":1836},16,[1838,1843,1847,1851,1856,1860,1864,1868,1873],{"type":39,"tag":112,"props":1839,"children":1840},{"style":1564},[1841],{"type":45,"value":1842},"  _meta",{"type":39,"tag":112,"props":1844,"children":1845},{"style":136},[1846],{"type":45,"value":205},{"type":39,"tag":112,"props":1848,"children":1849},{"style":136},[1850],{"type":45,"value":1263},{"type":39,"tag":112,"props":1852,"children":1853},{"style":1564},[1854],{"type":45,"value":1855}," ui",{"type":39,"tag":112,"props":1857,"children":1858},{"style":136},[1859],{"type":45,"value":205},{"type":39,"tag":112,"props":1861,"children":1862},{"style":136},[1863],{"type":45,"value":1263},{"type":39,"tag":112,"props":1865,"children":1866},{"style":1266},[1867],{"type":45,"value":1643},{"type":39,"tag":112,"props":1869,"children":1870},{"style":136},[1871],{"type":45,"value":1872},"}",{"type":39,"tag":112,"props":1874,"children":1875},{"style":136},[1876],{"type":45,"value":1877}," },\n",{"type":39,"tag":112,"props":1879,"children":1881},{"class":114,"line":1880},17,[1882,1887,1892,1897,1903,1907,1912],{"type":39,"tag":112,"props":1883,"children":1884},{"style":136},[1885],{"type":45,"value":1886},"},",{"type":39,"tag":112,"props":1888,"children":1889},{"style":1528},[1890],{"type":45,"value":1891}," async",{"type":39,"tag":112,"props":1893,"children":1894},{"style":136},[1895],{"type":45,"value":1896}," (",{"type":39,"tag":112,"props":1898,"children":1900},{"style":1899},"--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#EEFFFF;--shiki-default-font-style:italic;--shiki-dark:#BABED8;--shiki-dark-font-style:italic",[1901],{"type":45,"value":1902},"args",{"type":39,"tag":112,"props":1904,"children":1905},{"style":136},[1906],{"type":45,"value":713},{"type":39,"tag":112,"props":1908,"children":1909},{"style":1528},[1910],{"type":45,"value":1911}," =>",{"type":39,"tag":112,"props":1913,"children":1914},{"style":136},[1915],{"type":45,"value":1721},{"type":39,"tag":112,"props":1917,"children":1919},{"class":114,"line":1918},18,[1920],{"type":39,"tag":112,"props":1921,"children":1922},{"style":1679},[1923],{"type":45,"value":1924},"  \u002F\u002F Process args server-side if needed\n",{"type":39,"tag":112,"props":1926,"children":1928},{"class":114,"line":1927},19,[1929,1934],{"type":39,"tag":112,"props":1930,"children":1931},{"style":1255},[1932],{"type":45,"value":1933},"  return",{"type":39,"tag":112,"props":1935,"children":1936},{"style":136},[1937],{"type":45,"value":1721},{"type":39,"tag":112,"props":1939,"children":1941},{"class":114,"line":1940},20,[1942,1947,1951,1956,1960,1965,1969,1973,1977,1981,1985,1990,1994,1999,2004,2009,2013,2017,2022,2027,2031,2036],{"type":39,"tag":112,"props":1943,"children":1944},{"style":1564},[1945],{"type":45,"value":1946},"    content",{"type":39,"tag":112,"props":1948,"children":1949},{"style":136},[1950],{"type":45,"value":205},{"type":39,"tag":112,"props":1952,"children":1953},{"style":1564},[1954],{"type":45,"value":1955}," [",{"type":39,"tag":112,"props":1957,"children":1958},{"style":136},[1959],{"type":45,"value":1561},{"type":39,"tag":112,"props":1961,"children":1962},{"style":1564},[1963],{"type":45,"value":1964}," type",{"type":39,"tag":112,"props":1966,"children":1967},{"style":136},[1968],{"type":45,"value":205},{"type":39,"tag":112,"props":1970,"children":1971},{"style":136},[1972],{"type":45,"value":139},{"type":39,"tag":112,"props":1974,"children":1975},{"style":125},[1976],{"type":45,"value":45},{"type":39,"tag":112,"props":1978,"children":1979},{"style":136},[1980],{"type":45,"value":1293},{"type":39,"tag":112,"props":1982,"children":1983},{"style":136},[1984],{"type":45,"value":1361},{"type":39,"tag":112,"props":1986,"children":1987},{"style":1564},[1988],{"type":45,"value":1989}," text",{"type":39,"tag":112,"props":1991,"children":1992},{"style":136},[1993],{"type":45,"value":205},{"type":39,"tag":112,"props":1995,"children":1996},{"style":136},[1997],{"type":45,"value":1998}," `",{"type":39,"tag":112,"props":2000,"children":2001},{"style":125},[2002],{"type":45,"value":2003},"Showing app for: ",{"type":39,"tag":112,"props":2005,"children":2006},{"style":136},[2007],{"type":45,"value":2008},"${",{"type":39,"tag":112,"props":2010,"children":2011},{"style":1266},[2012],{"type":45,"value":1902},{"type":39,"tag":112,"props":2014,"children":2015},{"style":136},[2016],{"type":45,"value":1787},{"type":39,"tag":112,"props":2018,"children":2019},{"style":1266},[2020],{"type":45,"value":2021},"query",{"type":39,"tag":112,"props":2023,"children":2024},{"style":136},[2025],{"type":45,"value":2026},"}`",{"type":39,"tag":112,"props":2028,"children":2029},{"style":136},[2030],{"type":45,"value":1274},{"type":39,"tag":112,"props":2032,"children":2033},{"style":1564},[2034],{"type":45,"value":2035},"]",{"type":39,"tag":112,"props":2037,"children":2038},{"style":136},[2039],{"type":45,"value":1752},{"type":39,"tag":112,"props":2041,"children":2043},{"class":114,"line":2042},21,[2044,2049,2053,2057,2061,2065,2070,2074,2078],{"type":39,"tag":112,"props":2045,"children":2046},{"style":1564},[2047],{"type":45,"value":2048},"    structuredContent",{"type":39,"tag":112,"props":2050,"children":2051},{"style":136},[2052],{"type":45,"value":205},{"type":39,"tag":112,"props":2054,"children":2055},{"style":136},[2056],{"type":45,"value":1263},{"type":39,"tag":112,"props":2058,"children":2059},{"style":1564},[2060],{"type":45,"value":1774},{"type":39,"tag":112,"props":2062,"children":2063},{"style":136},[2064],{"type":45,"value":205},{"type":39,"tag":112,"props":2066,"children":2067},{"style":1266},[2068],{"type":45,"value":2069}," args",{"type":39,"tag":112,"props":2071,"children":2072},{"style":136},[2073],{"type":45,"value":1787},{"type":39,"tag":112,"props":2075,"children":2076},{"style":1266},[2077],{"type":45,"value":2021},{"type":39,"tag":112,"props":2079,"children":2080},{"style":136},[2081],{"type":45,"value":1877},{"type":39,"tag":112,"props":2083,"children":2085},{"class":114,"line":2084},22,[2086],{"type":39,"tag":112,"props":2087,"children":2088},{"style":136},[2089],{"type":45,"value":2090},"  };\n",{"type":39,"tag":112,"props":2092,"children":2094},{"class":114,"line":2093},23,[2095,2099,2103],{"type":39,"tag":112,"props":2096,"children":2097},{"style":136},[2098],{"type":45,"value":1872},{"type":39,"tag":112,"props":2100,"children":2101},{"style":1266},[2102],{"type":45,"value":713},{"type":39,"tag":112,"props":2104,"children":2105},{"style":136},[2106],{"type":45,"value":1298},{"type":39,"tag":112,"props":2108,"children":2110},{"class":114,"line":2109},24,[2111],{"type":39,"tag":112,"props":2112,"children":2113},{"emptyLinePlaceholder":1518},[2114],{"type":45,"value":1521},{"type":39,"tag":112,"props":2116,"children":2118},{"class":114,"line":2117},25,[2119],{"type":39,"tag":112,"props":2120,"children":2121},{"style":1679},[2122],{"type":45,"value":2123},"\u002F\u002F Register the HTML resource\n",{"type":39,"tag":112,"props":2125,"children":2127},{"class":114,"line":2126},26,[2128,2132,2136,2140],{"type":39,"tag":112,"props":2129,"children":2130},{"style":1549},[2131],{"type":45,"value":314},{"type":39,"tag":112,"props":2133,"children":2134},{"style":1266},[2135],{"type":45,"value":1695},{"type":39,"tag":112,"props":2137,"children":2138},{"style":136},[2139],{"type":45,"value":1361},{"type":39,"tag":112,"props":2141,"children":2142},{"style":136},[2143],{"type":45,"value":1721},{"type":39,"tag":112,"props":2145,"children":2147},{"class":114,"line":2146},27,[2148,2153,2157,2162],{"type":39,"tag":112,"props":2149,"children":2150},{"style":1564},[2151],{"type":45,"value":2152},"  uri",{"type":39,"tag":112,"props":2154,"children":2155},{"style":136},[2156],{"type":45,"value":205},{"type":39,"tag":112,"props":2158,"children":2159},{"style":1266},[2160],{"type":45,"value":2161}," resourceUri",{"type":39,"tag":112,"props":2163,"children":2164},{"style":136},[2165],{"type":45,"value":1752},{"type":39,"tag":112,"props":2167,"children":2169},{"class":114,"line":2168},28,[2170,2175,2179,2183,2188,2192],{"type":39,"tag":112,"props":2171,"children":2172},{"style":1564},[2173],{"type":45,"value":2174},"  name",{"type":39,"tag":112,"props":2176,"children":2177},{"style":136},[2178],{"type":45,"value":205},{"type":39,"tag":112,"props":2180,"children":2181},{"style":136},[2182],{"type":45,"value":139},{"type":39,"tag":112,"props":2184,"children":2185},{"style":125},[2186],{"type":45,"value":2187},"My App UI",{"type":39,"tag":112,"props":2189,"children":2190},{"style":136},[2191],{"type":45,"value":1293},{"type":39,"tag":112,"props":2193,"children":2194},{"style":136},[2195],{"type":45,"value":1752},{"type":39,"tag":112,"props":2197,"children":2199},{"class":114,"line":2198},29,[2200,2205,2209,2213],{"type":39,"tag":112,"props":2201,"children":2202},{"style":1564},[2203],{"type":45,"value":2204},"  mimeType",{"type":39,"tag":112,"props":2206,"children":2207},{"style":136},[2208],{"type":45,"value":205},{"type":39,"tag":112,"props":2210,"children":2211},{"style":1266},[2212],{"type":45,"value":1375},{"type":39,"tag":112,"props":2214,"children":2215},{"style":136},[2216],{"type":45,"value":1752},{"type":39,"tag":112,"props":2218,"children":2220},{"class":114,"line":2219},30,[2221],{"type":39,"tag":112,"props":2222,"children":2223},{"style":1679},[2224],{"type":45,"value":2225},"  \u002F\u002F Add CSP domains from Step 2 if needed:\n",{"type":39,"tag":112,"props":2227,"children":2229},{"class":114,"line":2228},31,[2230],{"type":39,"tag":112,"props":2231,"children":2232},{"style":1679},[2233],{"type":45,"value":2234},"  \u002F\u002F _meta: { ui: { connectDomains: [\"api.example.com\"], resourceDomains: [\"cdn.example.com\"] } },\n",{"type":39,"tag":112,"props":2236,"children":2238},{"class":114,"line":2237},32,[2239,2243,2247,2252,2256],{"type":39,"tag":112,"props":2240,"children":2241},{"style":136},[2242],{"type":45,"value":1886},{"type":39,"tag":112,"props":2244,"children":2245},{"style":1528},[2246],{"type":45,"value":1891},{"type":39,"tag":112,"props":2248,"children":2249},{"style":136},[2250],{"type":45,"value":2251}," ()",{"type":39,"tag":112,"props":2253,"children":2254},{"style":1528},[2255],{"type":45,"value":1911},{"type":39,"tag":112,"props":2257,"children":2258},{"style":136},[2259],{"type":45,"value":1721},{"type":39,"tag":112,"props":2261,"children":2263},{"class":114,"line":2262},33,[2264,2269,2274,2279,2284,2289,2293,2298],{"type":39,"tag":112,"props":2265,"children":2266},{"style":1528},[2267],{"type":45,"value":2268},"  const",{"type":39,"tag":112,"props":2270,"children":2271},{"style":1266},[2272],{"type":45,"value":2273}," html",{"type":39,"tag":112,"props":2275,"children":2276},{"style":136},[2277],{"type":45,"value":2278}," =",{"type":39,"tag":112,"props":2280,"children":2281},{"style":1255},[2282],{"type":45,"value":2283}," await",{"type":39,"tag":112,"props":2285,"children":2286},{"style":1266},[2287],{"type":45,"value":2288}," fs",{"type":39,"tag":112,"props":2290,"children":2291},{"style":136},[2292],{"type":45,"value":1787},{"type":39,"tag":112,"props":2294,"children":2295},{"style":1549},[2296],{"type":45,"value":2297},"readFile",{"type":39,"tag":112,"props":2299,"children":2300},{"style":1564},[2301],{"type":45,"value":2302},"(\n",{"type":39,"tag":112,"props":2304,"children":2306},{"class":114,"line":2305},34,[2307,2312,2316,2321,2325,2329,2333,2338,2342,2347,2351,2355,2360,2364,2368,2372,2376,2380,2384],{"type":39,"tag":112,"props":2308,"children":2309},{"style":1266},[2310],{"type":45,"value":2311},"    path",{"type":39,"tag":112,"props":2313,"children":2314},{"style":136},[2315],{"type":45,"value":1787},{"type":39,"tag":112,"props":2317,"children":2318},{"style":1549},[2319],{"type":45,"value":2320},"resolve",{"type":39,"tag":112,"props":2322,"children":2323},{"style":1564},[2324],{"type":45,"value":1556},{"type":39,"tag":112,"props":2326,"children":2327},{"style":1255},[2328],{"type":45,"value":1258},{"type":39,"tag":112,"props":2330,"children":2331},{"style":136},[2332],{"type":45,"value":1787},{"type":39,"tag":112,"props":2334,"children":2335},{"style":1266},[2336],{"type":45,"value":2337},"meta",{"type":39,"tag":112,"props":2339,"children":2340},{"style":136},[2341],{"type":45,"value":1787},{"type":39,"tag":112,"props":2343,"children":2344},{"style":1266},[2345],{"type":45,"value":2346},"dirname",{"type":39,"tag":112,"props":2348,"children":2349},{"style":136},[2350],{"type":45,"value":1361},{"type":39,"tag":112,"props":2352,"children":2353},{"style":136},[2354],{"type":45,"value":139},{"type":39,"tag":112,"props":2356,"children":2357},{"style":125},[2358],{"type":45,"value":2359},"dist",{"type":39,"tag":112,"props":2361,"children":2362},{"style":136},[2363],{"type":45,"value":1293},{"type":39,"tag":112,"props":2365,"children":2366},{"style":136},[2367],{"type":45,"value":1361},{"type":39,"tag":112,"props":2369,"children":2370},{"style":136},[2371],{"type":45,"value":139},{"type":39,"tag":112,"props":2373,"children":2374},{"style":125},[2375],{"type":45,"value":511},{"type":39,"tag":112,"props":2377,"children":2378},{"style":136},[2379],{"type":45,"value":1293},{"type":39,"tag":112,"props":2381,"children":2382},{"style":1564},[2383],{"type":45,"value":713},{"type":39,"tag":112,"props":2385,"children":2386},{"style":136},[2387],{"type":45,"value":1752},{"type":39,"tag":112,"props":2389,"children":2391},{"class":114,"line":2390},35,[2392,2397,2402,2406],{"type":39,"tag":112,"props":2393,"children":2394},{"style":136},[2395],{"type":45,"value":2396},"    \"",{"type":39,"tag":112,"props":2398,"children":2399},{"style":125},[2400],{"type":45,"value":2401},"utf-8",{"type":39,"tag":112,"props":2403,"children":2404},{"style":136},[2405],{"type":45,"value":1293},{"type":39,"tag":112,"props":2407,"children":2408},{"style":136},[2409],{"type":45,"value":1752},{"type":39,"tag":112,"props":2411,"children":2413},{"class":114,"line":2412},36,[2414,2419],{"type":39,"tag":112,"props":2415,"children":2416},{"style":1564},[2417],{"type":45,"value":2418},"  )",{"type":39,"tag":112,"props":2420,"children":2421},{"style":136},[2422],{"type":45,"value":1298},{"type":39,"tag":112,"props":2424,"children":2426},{"class":114,"line":2425},37,[2427,2431,2435,2440,2444,2448,2452,2457,2461,2465,2469,2474,2478,2482,2486,2490,2494,2498,2502,2507],{"type":39,"tag":112,"props":2428,"children":2429},{"style":1255},[2430],{"type":45,"value":1933},{"type":39,"tag":112,"props":2432,"children":2433},{"style":136},[2434],{"type":45,"value":1263},{"type":39,"tag":112,"props":2436,"children":2437},{"style":1564},[2438],{"type":45,"value":2439}," contents",{"type":39,"tag":112,"props":2441,"children":2442},{"style":136},[2443],{"type":45,"value":205},{"type":39,"tag":112,"props":2445,"children":2446},{"style":1564},[2447],{"type":45,"value":1955},{"type":39,"tag":112,"props":2449,"children":2450},{"style":136},[2451],{"type":45,"value":1561},{"type":39,"tag":112,"props":2453,"children":2454},{"style":1564},[2455],{"type":45,"value":2456}," uri",{"type":39,"tag":112,"props":2458,"children":2459},{"style":136},[2460],{"type":45,"value":205},{"type":39,"tag":112,"props":2462,"children":2463},{"style":1266},[2464],{"type":45,"value":2161},{"type":39,"tag":112,"props":2466,"children":2467},{"style":136},[2468],{"type":45,"value":1361},{"type":39,"tag":112,"props":2470,"children":2471},{"style":1564},[2472],{"type":45,"value":2473}," mimeType",{"type":39,"tag":112,"props":2475,"children":2476},{"style":136},[2477],{"type":45,"value":205},{"type":39,"tag":112,"props":2479,"children":2480},{"style":1266},[2481],{"type":45,"value":1375},{"type":39,"tag":112,"props":2483,"children":2484},{"style":136},[2485],{"type":45,"value":1361},{"type":39,"tag":112,"props":2487,"children":2488},{"style":1564},[2489],{"type":45,"value":1989},{"type":39,"tag":112,"props":2491,"children":2492},{"style":136},[2493],{"type":45,"value":205},{"type":39,"tag":112,"props":2495,"children":2496},{"style":1266},[2497],{"type":45,"value":2273},{"type":39,"tag":112,"props":2499,"children":2500},{"style":136},[2501],{"type":45,"value":1274},{"type":39,"tag":112,"props":2503,"children":2504},{"style":1564},[2505],{"type":45,"value":2506},"] ",{"type":39,"tag":112,"props":2508,"children":2509},{"style":136},[2510],{"type":45,"value":2511},"};\n",{"type":39,"tag":112,"props":2513,"children":2515},{"class":114,"line":2514},38,[2516,2520,2524],{"type":39,"tag":112,"props":2517,"children":2518},{"style":136},[2519],{"type":45,"value":1872},{"type":39,"tag":112,"props":2521,"children":2522},{"style":1266},[2523],{"type":45,"value":713},{"type":39,"tag":112,"props":2525,"children":2526},{"style":136},[2527],{"type":45,"value":1298},{"type":39,"tag":112,"props":2529,"children":2531},{"class":114,"line":2530},39,[2532],{"type":39,"tag":112,"props":2533,"children":2534},{"emptyLinePlaceholder":1518},[2535],{"type":45,"value":1521},{"type":39,"tag":112,"props":2537,"children":2539},{"class":114,"line":2538},40,[2540],{"type":39,"tag":112,"props":2541,"children":2542},{"style":1679},[2543],{"type":45,"value":2544},"\u002F\u002F Start the server\n",{"type":39,"tag":112,"props":2546,"children":2548},{"class":114,"line":2547},41,[2549,2553,2558,2562,2566,2570,2574],{"type":39,"tag":112,"props":2550,"children":2551},{"style":1528},[2552],{"type":45,"value":1531},{"type":39,"tag":112,"props":2554,"children":2555},{"style":1266},[2556],{"type":45,"value":2557}," transport ",{"type":39,"tag":112,"props":2559,"children":2560},{"style":136},[2561],{"type":45,"value":1541},{"type":39,"tag":112,"props":2563,"children":2564},{"style":136},[2565],{"type":45,"value":1546},{"type":39,"tag":112,"props":2567,"children":2568},{"style":1549},[2569],{"type":45,"value":1314},{"type":39,"tag":112,"props":2571,"children":2572},{"style":1266},[2573],{"type":45,"value":1797},{"type":39,"tag":112,"props":2575,"children":2576},{"style":136},[2577],{"type":45,"value":1298},{"type":39,"tag":112,"props":2579,"children":2581},{"class":114,"line":2580},42,[2582,2587,2592,2596,2601,2606],{"type":39,"tag":112,"props":2583,"children":2584},{"style":1255},[2585],{"type":45,"value":2586},"await",{"type":39,"tag":112,"props":2588,"children":2589},{"style":1266},[2590],{"type":45,"value":2591}," server",{"type":39,"tag":112,"props":2593,"children":2594},{"style":136},[2595],{"type":45,"value":1787},{"type":39,"tag":112,"props":2597,"children":2598},{"style":1549},[2599],{"type":45,"value":2600},"connect",{"type":39,"tag":112,"props":2602,"children":2603},{"style":1266},[2604],{"type":45,"value":2605},"(transport)",{"type":39,"tag":112,"props":2607,"children":2608},{"style":136},[2609],{"type":45,"value":1298},{"type":39,"tag":187,"props":2611,"children":2613},{"id":2612},"package-scripts",[2614],{"type":45,"value":2615},"Package Scripts",{"type":39,"tag":48,"props":2617,"children":2618},{},[2619,2621,2627],{"type":45,"value":2620},"Add to ",{"type":39,"tag":81,"props":2622,"children":2624},{"className":2623},[],[2625],{"type":45,"value":2626},"package.json",{"type":45,"value":205},{"type":39,"tag":74,"props":2629,"children":2633},{"className":2630,"code":2631,"language":2632,"meta":83,"style":83},"language-json shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","{\n  \"scripts\": {\n    \"build:ui\": \"vite build\",\n    \"build:server\": \"tsc\",\n    \"build\": \"npm run build:ui && npm run build:server\",\n    \"serve\": \"tsx server.ts\"\n  }\n}\n","json",[2634],{"type":39,"tag":81,"props":2635,"children":2636},{"__ignoreMap":83},[2637,2645,2670,2707,2744,2781,2815,2823],{"type":39,"tag":112,"props":2638,"children":2639},{"class":114,"line":115},[2640],{"type":39,"tag":112,"props":2641,"children":2642},{"style":136},[2643],{"type":45,"value":2644},"{\n",{"type":39,"tag":112,"props":2646,"children":2647},{"class":114,"line":1181},[2648,2653,2658,2662,2666],{"type":39,"tag":112,"props":2649,"children":2650},{"style":136},[2651],{"type":45,"value":2652},"  \"",{"type":39,"tag":112,"props":2654,"children":2655},{"style":1528},[2656],{"type":45,"value":2657},"scripts",{"type":39,"tag":112,"props":2659,"children":2660},{"style":136},[2661],{"type":45,"value":1293},{"type":39,"tag":112,"props":2663,"children":2664},{"style":136},[2665],{"type":45,"value":205},{"type":39,"tag":112,"props":2667,"children":2668},{"style":136},[2669],{"type":45,"value":1721},{"type":39,"tag":112,"props":2671,"children":2672},{"class":114,"line":1342},[2673,2677,2682,2686,2690,2694,2699,2703],{"type":39,"tag":112,"props":2674,"children":2675},{"style":136},[2676],{"type":45,"value":2396},{"type":39,"tag":112,"props":2678,"children":2679},{"style":119},[2680],{"type":45,"value":2681},"build:ui",{"type":39,"tag":112,"props":2683,"children":2684},{"style":136},[2685],{"type":45,"value":1293},{"type":39,"tag":112,"props":2687,"children":2688},{"style":136},[2689],{"type":45,"value":205},{"type":39,"tag":112,"props":2691,"children":2692},{"style":136},[2693],{"type":45,"value":139},{"type":39,"tag":112,"props":2695,"children":2696},{"style":125},[2697],{"type":45,"value":2698},"vite build",{"type":39,"tag":112,"props":2700,"children":2701},{"style":136},[2702],{"type":45,"value":1293},{"type":39,"tag":112,"props":2704,"children":2705},{"style":136},[2706],{"type":45,"value":1752},{"type":39,"tag":112,"props":2708,"children":2709},{"class":114,"line":1403},[2710,2714,2719,2723,2727,2731,2736,2740],{"type":39,"tag":112,"props":2711,"children":2712},{"style":136},[2713],{"type":45,"value":2396},{"type":39,"tag":112,"props":2715,"children":2716},{"style":119},[2717],{"type":45,"value":2718},"build:server",{"type":39,"tag":112,"props":2720,"children":2721},{"style":136},[2722],{"type":45,"value":1293},{"type":39,"tag":112,"props":2724,"children":2725},{"style":136},[2726],{"type":45,"value":205},{"type":39,"tag":112,"props":2728,"children":2729},{"style":136},[2730],{"type":45,"value":139},{"type":39,"tag":112,"props":2732,"children":2733},{"style":125},[2734],{"type":45,"value":2735},"tsc",{"type":39,"tag":112,"props":2737,"children":2738},{"style":136},[2739],{"type":45,"value":1293},{"type":39,"tag":112,"props":2741,"children":2742},{"style":136},[2743],{"type":45,"value":1752},{"type":39,"tag":112,"props":2745,"children":2746},{"class":114,"line":1438},[2747,2751,2756,2760,2764,2768,2773,2777],{"type":39,"tag":112,"props":2748,"children":2749},{"style":136},[2750],{"type":45,"value":2396},{"type":39,"tag":112,"props":2752,"children":2753},{"style":119},[2754],{"type":45,"value":2755},"build",{"type":39,"tag":112,"props":2757,"children":2758},{"style":136},[2759],{"type":45,"value":1293},{"type":39,"tag":112,"props":2761,"children":2762},{"style":136},[2763],{"type":45,"value":205},{"type":39,"tag":112,"props":2765,"children":2766},{"style":136},[2767],{"type":45,"value":139},{"type":39,"tag":112,"props":2769,"children":2770},{"style":125},[2771],{"type":45,"value":2772},"npm run build:ui && npm run build:server",{"type":39,"tag":112,"props":2774,"children":2775},{"style":136},[2776],{"type":45,"value":1293},{"type":39,"tag":112,"props":2778,"children":2779},{"style":136},[2780],{"type":45,"value":1752},{"type":39,"tag":112,"props":2782,"children":2783},{"class":114,"line":1472},[2784,2788,2793,2797,2801,2805,2810],{"type":39,"tag":112,"props":2785,"children":2786},{"style":136},[2787],{"type":45,"value":2396},{"type":39,"tag":112,"props":2789,"children":2790},{"style":119},[2791],{"type":45,"value":2792},"serve",{"type":39,"tag":112,"props":2794,"children":2795},{"style":136},[2796],{"type":45,"value":1293},{"type":39,"tag":112,"props":2798,"children":2799},{"style":136},[2800],{"type":45,"value":205},{"type":39,"tag":112,"props":2802,"children":2803},{"style":136},[2804],{"type":45,"value":139},{"type":39,"tag":112,"props":2806,"children":2807},{"style":125},[2808],{"type":45,"value":2809},"tsx server.ts",{"type":39,"tag":112,"props":2811,"children":2812},{"style":136},[2813],{"type":45,"value":2814},"\"\n",{"type":39,"tag":112,"props":2816,"children":2817},{"class":114,"line":1514},[2818],{"type":39,"tag":112,"props":2819,"children":2820},{"style":136},[2821],{"type":45,"value":2822},"  }\n",{"type":39,"tag":112,"props":2824,"children":2825},{"class":114,"line":1524},[2826],{"type":39,"tag":112,"props":2827,"children":2828},{"style":136},[2829],{"type":45,"value":2830},"}\n",{"type":39,"tag":62,"props":2832,"children":2834},{"id":2833},"step-4-adapt-the-build-pipeline",[2835],{"type":45,"value":2836},"Step 4: Adapt the Build Pipeline",{"type":39,"tag":48,"props":2838,"children":2839},{},[2840,2842,2848],{"type":45,"value":2841},"The MCP App build must produce a single HTML file using ",{"type":39,"tag":81,"props":2843,"children":2845},{"className":2844},[],[2846],{"type":45,"value":2847},"vite-plugin-singlefile",{"type":45,"value":2849},". The standalone web app build stays unchanged.",{"type":39,"tag":187,"props":2851,"children":2853},{"id":2852},"vite-configuration",[2854],{"type":45,"value":2855},"Vite Configuration",{"type":39,"tag":48,"props":2857,"children":2858},{},[2859,2861,2867,2869,2874],{"type":45,"value":2860},"Create or update ",{"type":39,"tag":81,"props":2862,"children":2864},{"className":2863},[],[2865],{"type":45,"value":2866},"vite.config.ts",{"type":45,"value":2868},". If the app already uses Vite, add ",{"type":39,"tag":81,"props":2870,"children":2872},{"className":2871},[],[2873],{"type":45,"value":2847},{"type":45,"value":2875}," and a separate entry point for the MCP App build. If it uses another bundler, add a Vite config alongside for the MCP App build only.",{"type":39,"tag":74,"props":2877,"children":2879},{"className":1243,"code":2878,"language":1245,"meta":83,"style":83},"import { defineConfig } from \"vite\";\nimport { viteSingleFile } from \"vite-plugin-singlefile\";\n\nexport default defineConfig({\n  plugins: [viteSingleFile()],\n  build: {\n    outDir: \"dist\",\n    rollupOptions: {\n      input: \"mcp-app.html\",\n    },\n  },\n});\n",[2880],{"type":39,"tag":81,"props":2881,"children":2882},{"__ignoreMap":83},[2883,2924,2964,2971,2996,3026,3042,3070,3086,3114,3122,3130],{"type":39,"tag":112,"props":2884,"children":2885},{"class":114,"line":115},[2886,2890,2894,2899,2903,2907,2911,2916,2920],{"type":39,"tag":112,"props":2887,"children":2888},{"style":1255},[2889],{"type":45,"value":1258},{"type":39,"tag":112,"props":2891,"children":2892},{"style":136},[2893],{"type":45,"value":1263},{"type":39,"tag":112,"props":2895,"children":2896},{"style":1266},[2897],{"type":45,"value":2898}," defineConfig",{"type":39,"tag":112,"props":2900,"children":2901},{"style":136},[2902],{"type":45,"value":1274},{"type":39,"tag":112,"props":2904,"children":2905},{"style":1255},[2906],{"type":45,"value":1279},{"type":39,"tag":112,"props":2908,"children":2909},{"style":136},[2910],{"type":45,"value":139},{"type":39,"tag":112,"props":2912,"children":2913},{"style":125},[2914],{"type":45,"value":2915},"vite",{"type":39,"tag":112,"props":2917,"children":2918},{"style":136},[2919],{"type":45,"value":1293},{"type":39,"tag":112,"props":2921,"children":2922},{"style":136},[2923],{"type":45,"value":1298},{"type":39,"tag":112,"props":2925,"children":2926},{"class":114,"line":1181},[2927,2931,2935,2940,2944,2948,2952,2956,2960],{"type":39,"tag":112,"props":2928,"children":2929},{"style":1255},[2930],{"type":45,"value":1258},{"type":39,"tag":112,"props":2932,"children":2933},{"style":136},[2934],{"type":45,"value":1263},{"type":39,"tag":112,"props":2936,"children":2937},{"style":1266},[2938],{"type":45,"value":2939}," viteSingleFile",{"type":39,"tag":112,"props":2941,"children":2942},{"style":136},[2943],{"type":45,"value":1274},{"type":39,"tag":112,"props":2945,"children":2946},{"style":1255},[2947],{"type":45,"value":1279},{"type":39,"tag":112,"props":2949,"children":2950},{"style":136},[2951],{"type":45,"value":139},{"type":39,"tag":112,"props":2953,"children":2954},{"style":125},[2955],{"type":45,"value":2847},{"type":39,"tag":112,"props":2957,"children":2958},{"style":136},[2959],{"type":45,"value":1293},{"type":39,"tag":112,"props":2961,"children":2962},{"style":136},[2963],{"type":45,"value":1298},{"type":39,"tag":112,"props":2965,"children":2966},{"class":114,"line":1342},[2967],{"type":39,"tag":112,"props":2968,"children":2969},{"emptyLinePlaceholder":1518},[2970],{"type":45,"value":1521},{"type":39,"tag":112,"props":2972,"children":2973},{"class":114,"line":1403},[2974,2979,2984,2988,2992],{"type":39,"tag":112,"props":2975,"children":2976},{"style":1255},[2977],{"type":45,"value":2978},"export",{"type":39,"tag":112,"props":2980,"children":2981},{"style":1255},[2982],{"type":45,"value":2983}," default",{"type":39,"tag":112,"props":2985,"children":2986},{"style":1549},[2987],{"type":45,"value":2898},{"type":39,"tag":112,"props":2989,"children":2990},{"style":1266},[2991],{"type":45,"value":1556},{"type":39,"tag":112,"props":2993,"children":2994},{"style":136},[2995],{"type":45,"value":2644},{"type":39,"tag":112,"props":2997,"children":2998},{"class":114,"line":1438},[2999,3004,3008,3012,3017,3022],{"type":39,"tag":112,"props":3000,"children":3001},{"style":1564},[3002],{"type":45,"value":3003},"  plugins",{"type":39,"tag":112,"props":3005,"children":3006},{"style":136},[3007],{"type":45,"value":205},{"type":39,"tag":112,"props":3009,"children":3010},{"style":1266},[3011],{"type":45,"value":1955},{"type":39,"tag":112,"props":3013,"children":3014},{"style":1549},[3015],{"type":45,"value":3016},"viteSingleFile",{"type":39,"tag":112,"props":3018,"children":3019},{"style":1266},[3020],{"type":45,"value":3021},"()]",{"type":39,"tag":112,"props":3023,"children":3024},{"style":136},[3025],{"type":45,"value":1752},{"type":39,"tag":112,"props":3027,"children":3028},{"class":114,"line":1472},[3029,3034,3038],{"type":39,"tag":112,"props":3030,"children":3031},{"style":1564},[3032],{"type":45,"value":3033},"  build",{"type":39,"tag":112,"props":3035,"children":3036},{"style":136},[3037],{"type":45,"value":205},{"type":39,"tag":112,"props":3039,"children":3040},{"style":136},[3041],{"type":45,"value":1721},{"type":39,"tag":112,"props":3043,"children":3044},{"class":114,"line":1514},[3045,3050,3054,3058,3062,3066],{"type":39,"tag":112,"props":3046,"children":3047},{"style":1564},[3048],{"type":45,"value":3049},"    outDir",{"type":39,"tag":112,"props":3051,"children":3052},{"style":136},[3053],{"type":45,"value":205},{"type":39,"tag":112,"props":3055,"children":3056},{"style":136},[3057],{"type":45,"value":139},{"type":39,"tag":112,"props":3059,"children":3060},{"style":125},[3061],{"type":45,"value":2359},{"type":39,"tag":112,"props":3063,"children":3064},{"style":136},[3065],{"type":45,"value":1293},{"type":39,"tag":112,"props":3067,"children":3068},{"style":136},[3069],{"type":45,"value":1752},{"type":39,"tag":112,"props":3071,"children":3072},{"class":114,"line":1524},[3073,3078,3082],{"type":39,"tag":112,"props":3074,"children":3075},{"style":1564},[3076],{"type":45,"value":3077},"    rollupOptions",{"type":39,"tag":112,"props":3079,"children":3080},{"style":136},[3081],{"type":45,"value":205},{"type":39,"tag":112,"props":3083,"children":3084},{"style":136},[3085],{"type":45,"value":1721},{"type":39,"tag":112,"props":3087,"children":3088},{"class":114,"line":1625},[3089,3094,3098,3102,3106,3110],{"type":39,"tag":112,"props":3090,"children":3091},{"style":1564},[3092],{"type":45,"value":3093},"      input",{"type":39,"tag":112,"props":3095,"children":3096},{"style":136},[3097],{"type":45,"value":205},{"type":39,"tag":112,"props":3099,"children":3100},{"style":136},[3101],{"type":45,"value":139},{"type":39,"tag":112,"props":3103,"children":3104},{"style":125},[3105],{"type":45,"value":511},{"type":39,"tag":112,"props":3107,"children":3108},{"style":136},[3109],{"type":45,"value":1293},{"type":39,"tag":112,"props":3111,"children":3112},{"style":136},[3113],{"type":45,"value":1752},{"type":39,"tag":112,"props":3115,"children":3116},{"class":114,"line":1633},[3117],{"type":39,"tag":112,"props":3118,"children":3119},{"style":136},[3120],{"type":45,"value":3121},"    },\n",{"type":39,"tag":112,"props":3123,"children":3124},{"class":114,"line":1667},[3125],{"type":39,"tag":112,"props":3126,"children":3127},{"style":136},[3128],{"type":45,"value":3129},"  },\n",{"type":39,"tag":112,"props":3131,"children":3132},{"class":114,"line":1675},[3133,3137,3141],{"type":39,"tag":112,"props":3134,"children":3135},{"style":136},[3136],{"type":45,"value":1872},{"type":39,"tag":112,"props":3138,"children":3139},{"style":1266},[3140],{"type":45,"value":713},{"type":39,"tag":112,"props":3142,"children":3143},{"style":136},[3144],{"type":45,"value":1298},{"type":39,"tag":48,"props":3146,"children":3147},{},[3148,3150,3156,3158,3164],{"type":45,"value":3149},"Add framework-specific Vite plugins as needed (e.g., ",{"type":39,"tag":81,"props":3151,"children":3153},{"className":3152},[],[3154],{"type":45,"value":3155},"@vitejs\u002Fplugin-react",{"type":45,"value":3157}," for React, ",{"type":39,"tag":81,"props":3159,"children":3161},{"className":3160},[],[3162],{"type":45,"value":3163},"@vitejs\u002Fplugin-vue",{"type":45,"value":3165}," for Vue).",{"type":39,"tag":187,"props":3167,"children":3169},{"id":3168},"html-entry-point",[3170],{"type":45,"value":3171},"HTML Entry Point",{"type":39,"tag":48,"props":3173,"children":3174},{},[3175,3176,3181],{"type":45,"value":1234},{"type":39,"tag":81,"props":3177,"children":3179},{"className":3178},[],[3180],{"type":45,"value":511},{"type":45,"value":3182}," as a separate entry point for the MCP App build. This can point to the same app code — the runtime detection handles the rest:",{"type":39,"tag":74,"props":3184,"children":3188},{"className":3185,"code":3186,"language":3187,"meta":83,"style":83},"language-html shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003C!doctype html>\n\u003Chtml lang=\"en\">\n  \u003Chead>\n    \u003Cmeta charset=\"UTF-8\" \u002F>\n    \u003Cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" \u002F>\n    \u003Ctitle>MCP App\u003C\u002Ftitle>\n  \u003C\u002Fhead>\n  \u003Cbody>\n    \u003Cdiv id=\"root\">\u003C\u002Fdiv>\n    \u003Cscript type=\"module\" src=\".\u002Fsrc\u002Fmain.ts\">\u003C\u002Fscript>\n  \u003C\u002Fbody>\n\u003C\u002Fhtml>\n","html",[3189],{"type":39,"tag":81,"props":3190,"children":3191},{"__ignoreMap":83},[3192,3214,3252,3269,3308,3366,3401,3417,3433,3479,3546,3561],{"type":39,"tag":112,"props":3193,"children":3194},{"class":114,"line":115},[3195,3200,3205,3209],{"type":39,"tag":112,"props":3196,"children":3197},{"style":136},[3198],{"type":45,"value":3199},"\u003C!",{"type":39,"tag":112,"props":3201,"children":3202},{"style":1564},[3203],{"type":45,"value":3204},"doctype",{"type":39,"tag":112,"props":3206,"children":3207},{"style":1528},[3208],{"type":45,"value":2273},{"type":39,"tag":112,"props":3210,"children":3211},{"style":136},[3212],{"type":45,"value":3213},">\n",{"type":39,"tag":112,"props":3215,"children":3216},{"class":114,"line":1181},[3217,3222,3226,3231,3235,3239,3244,3248],{"type":39,"tag":112,"props":3218,"children":3219},{"style":136},[3220],{"type":45,"value":3221},"\u003C",{"type":39,"tag":112,"props":3223,"children":3224},{"style":1564},[3225],{"type":45,"value":3187},{"type":39,"tag":112,"props":3227,"children":3228},{"style":1528},[3229],{"type":45,"value":3230}," lang",{"type":39,"tag":112,"props":3232,"children":3233},{"style":136},[3234],{"type":45,"value":1541},{"type":39,"tag":112,"props":3236,"children":3237},{"style":136},[3238],{"type":45,"value":1293},{"type":39,"tag":112,"props":3240,"children":3241},{"style":125},[3242],{"type":45,"value":3243},"en",{"type":39,"tag":112,"props":3245,"children":3246},{"style":136},[3247],{"type":45,"value":1293},{"type":39,"tag":112,"props":3249,"children":3250},{"style":136},[3251],{"type":45,"value":3213},{"type":39,"tag":112,"props":3253,"children":3254},{"class":114,"line":1342},[3255,3260,3265],{"type":39,"tag":112,"props":3256,"children":3257},{"style":136},[3258],{"type":45,"value":3259},"  \u003C",{"type":39,"tag":112,"props":3261,"children":3262},{"style":1564},[3263],{"type":45,"value":3264},"head",{"type":39,"tag":112,"props":3266,"children":3267},{"style":136},[3268],{"type":45,"value":3213},{"type":39,"tag":112,"props":3270,"children":3271},{"class":114,"line":1403},[3272,3277,3281,3286,3290,3294,3299,3303],{"type":39,"tag":112,"props":3273,"children":3274},{"style":136},[3275],{"type":45,"value":3276},"    \u003C",{"type":39,"tag":112,"props":3278,"children":3279},{"style":1564},[3280],{"type":45,"value":2337},{"type":39,"tag":112,"props":3282,"children":3283},{"style":1528},[3284],{"type":45,"value":3285}," charset",{"type":39,"tag":112,"props":3287,"children":3288},{"style":136},[3289],{"type":45,"value":1541},{"type":39,"tag":112,"props":3291,"children":3292},{"style":136},[3293],{"type":45,"value":1293},{"type":39,"tag":112,"props":3295,"children":3296},{"style":125},[3297],{"type":45,"value":3298},"UTF-8",{"type":39,"tag":112,"props":3300,"children":3301},{"style":136},[3302],{"type":45,"value":1293},{"type":39,"tag":112,"props":3304,"children":3305},{"style":136},[3306],{"type":45,"value":3307}," \u002F>\n",{"type":39,"tag":112,"props":3309,"children":3310},{"class":114,"line":1438},[3311,3315,3319,3323,3327,3331,3336,3340,3345,3349,3353,3358,3362],{"type":39,"tag":112,"props":3312,"children":3313},{"style":136},[3314],{"type":45,"value":3276},{"type":39,"tag":112,"props":3316,"children":3317},{"style":1564},[3318],{"type":45,"value":2337},{"type":39,"tag":112,"props":3320,"children":3321},{"style":1528},[3322],{"type":45,"value":1567},{"type":39,"tag":112,"props":3324,"children":3325},{"style":136},[3326],{"type":45,"value":1541},{"type":39,"tag":112,"props":3328,"children":3329},{"style":136},[3330],{"type":45,"value":1293},{"type":39,"tag":112,"props":3332,"children":3333},{"style":125},[3334],{"type":45,"value":3335},"viewport",{"type":39,"tag":112,"props":3337,"children":3338},{"style":136},[3339],{"type":45,"value":1293},{"type":39,"tag":112,"props":3341,"children":3342},{"style":1528},[3343],{"type":45,"value":3344}," content",{"type":39,"tag":112,"props":3346,"children":3347},{"style":136},[3348],{"type":45,"value":1541},{"type":39,"tag":112,"props":3350,"children":3351},{"style":136},[3352],{"type":45,"value":1293},{"type":39,"tag":112,"props":3354,"children":3355},{"style":125},[3356],{"type":45,"value":3357},"width=device-width, initial-scale=1.0",{"type":39,"tag":112,"props":3359,"children":3360},{"style":136},[3361],{"type":45,"value":1293},{"type":39,"tag":112,"props":3363,"children":3364},{"style":136},[3365],{"type":45,"value":3307},{"type":39,"tag":112,"props":3367,"children":3368},{"class":114,"line":1472},[3369,3373,3378,3383,3388,3393,3397],{"type":39,"tag":112,"props":3370,"children":3371},{"style":136},[3372],{"type":45,"value":3276},{"type":39,"tag":112,"props":3374,"children":3375},{"style":1564},[3376],{"type":45,"value":3377},"title",{"type":39,"tag":112,"props":3379,"children":3380},{"style":136},[3381],{"type":45,"value":3382},">",{"type":39,"tag":112,"props":3384,"children":3385},{"style":1266},[3386],{"type":45,"value":3387},"MCP App",{"type":39,"tag":112,"props":3389,"children":3390},{"style":136},[3391],{"type":45,"value":3392},"\u003C\u002F",{"type":39,"tag":112,"props":3394,"children":3395},{"style":1564},[3396],{"type":45,"value":3377},{"type":39,"tag":112,"props":3398,"children":3399},{"style":136},[3400],{"type":45,"value":3213},{"type":39,"tag":112,"props":3402,"children":3403},{"class":114,"line":1514},[3404,3409,3413],{"type":39,"tag":112,"props":3405,"children":3406},{"style":136},[3407],{"type":45,"value":3408},"  \u003C\u002F",{"type":39,"tag":112,"props":3410,"children":3411},{"style":1564},[3412],{"type":45,"value":3264},{"type":39,"tag":112,"props":3414,"children":3415},{"style":136},[3416],{"type":45,"value":3213},{"type":39,"tag":112,"props":3418,"children":3419},{"class":114,"line":1524},[3420,3424,3429],{"type":39,"tag":112,"props":3421,"children":3422},{"style":136},[3423],{"type":45,"value":3259},{"type":39,"tag":112,"props":3425,"children":3426},{"style":1564},[3427],{"type":45,"value":3428},"body",{"type":39,"tag":112,"props":3430,"children":3431},{"style":136},[3432],{"type":45,"value":3213},{"type":39,"tag":112,"props":3434,"children":3435},{"class":114,"line":1625},[3436,3440,3445,3450,3454,3458,3462,3466,3471,3475],{"type":39,"tag":112,"props":3437,"children":3438},{"style":136},[3439],{"type":45,"value":3276},{"type":39,"tag":112,"props":3441,"children":3442},{"style":1564},[3443],{"type":45,"value":3444},"div",{"type":39,"tag":112,"props":3446,"children":3447},{"style":1528},[3448],{"type":45,"value":3449}," id",{"type":39,"tag":112,"props":3451,"children":3452},{"style":136},[3453],{"type":45,"value":1541},{"type":39,"tag":112,"props":3455,"children":3456},{"style":136},[3457],{"type":45,"value":1293},{"type":39,"tag":112,"props":3459,"children":3460},{"style":125},[3461],{"type":45,"value":36},{"type":39,"tag":112,"props":3463,"children":3464},{"style":136},[3465],{"type":45,"value":1293},{"type":39,"tag":112,"props":3467,"children":3468},{"style":136},[3469],{"type":45,"value":3470},">\u003C\u002F",{"type":39,"tag":112,"props":3472,"children":3473},{"style":1564},[3474],{"type":45,"value":3444},{"type":39,"tag":112,"props":3476,"children":3477},{"style":136},[3478],{"type":45,"value":3213},{"type":39,"tag":112,"props":3480,"children":3481},{"class":114,"line":1633},[3482,3486,3491,3495,3499,3503,3508,3512,3517,3521,3525,3530,3534,3538,3542],{"type":39,"tag":112,"props":3483,"children":3484},{"style":136},[3485],{"type":45,"value":3276},{"type":39,"tag":112,"props":3487,"children":3488},{"style":1564},[3489],{"type":45,"value":3490},"script",{"type":39,"tag":112,"props":3492,"children":3493},{"style":1528},[3494],{"type":45,"value":1964},{"type":39,"tag":112,"props":3496,"children":3497},{"style":136},[3498],{"type":45,"value":1541},{"type":39,"tag":112,"props":3500,"children":3501},{"style":136},[3502],{"type":45,"value":1293},{"type":39,"tag":112,"props":3504,"children":3505},{"style":125},[3506],{"type":45,"value":3507},"module",{"type":39,"tag":112,"props":3509,"children":3510},{"style":136},[3511],{"type":45,"value":1293},{"type":39,"tag":112,"props":3513,"children":3514},{"style":1528},[3515],{"type":45,"value":3516}," src",{"type":39,"tag":112,"props":3518,"children":3519},{"style":136},[3520],{"type":45,"value":1541},{"type":39,"tag":112,"props":3522,"children":3523},{"style":136},[3524],{"type":45,"value":1293},{"type":39,"tag":112,"props":3526,"children":3527},{"style":125},[3528],{"type":45,"value":3529},".\u002Fsrc\u002Fmain.ts",{"type":39,"tag":112,"props":3531,"children":3532},{"style":136},[3533],{"type":45,"value":1293},{"type":39,"tag":112,"props":3535,"children":3536},{"style":136},[3537],{"type":45,"value":3470},{"type":39,"tag":112,"props":3539,"children":3540},{"style":1564},[3541],{"type":45,"value":3490},{"type":39,"tag":112,"props":3543,"children":3544},{"style":136},[3545],{"type":45,"value":3213},{"type":39,"tag":112,"props":3547,"children":3548},{"class":114,"line":1667},[3549,3553,3557],{"type":39,"tag":112,"props":3550,"children":3551},{"style":136},[3552],{"type":45,"value":3408},{"type":39,"tag":112,"props":3554,"children":3555},{"style":1564},[3556],{"type":45,"value":3428},{"type":39,"tag":112,"props":3558,"children":3559},{"style":136},[3560],{"type":45,"value":3213},{"type":39,"tag":112,"props":3562,"children":3563},{"class":114,"line":1675},[3564,3568,3572],{"type":39,"tag":112,"props":3565,"children":3566},{"style":136},[3567],{"type":45,"value":3392},{"type":39,"tag":112,"props":3569,"children":3570},{"style":1564},[3571],{"type":45,"value":3187},{"type":39,"tag":112,"props":3573,"children":3574},{"style":136},[3575],{"type":45,"value":3213},{"type":39,"tag":187,"props":3577,"children":3579},{"id":3578},"two-phase-build",[3580],{"type":45,"value":3581},"Two-Phase Build",{"type":39,"tag":766,"props":3583,"children":3584},{},[3585,3598],{"type":39,"tag":770,"props":3586,"children":3587},{},[3588,3590,3596],{"type":45,"value":3589},"Vite bundles the UI → ",{"type":39,"tag":81,"props":3591,"children":3593},{"className":3592},[],[3594],{"type":45,"value":3595},"dist\u002Fmcp-app.html",{"type":45,"value":3597}," (single file with all assets inlined)",{"type":39,"tag":770,"props":3599,"children":3600},{},[3601],{"type":45,"value":3602},"Server is compiled separately (TypeScript → JavaScript)",{"type":39,"tag":48,"props":3604,"children":3605},{},[3606],{"type":45,"value":3607},"The standalone web app continues to build and deploy as before.",{"type":39,"tag":62,"props":3609,"children":3611},{"id":3610},"step-5-add-mcp-app-initialization-alongside-existing-logic",[3612],{"type":45,"value":3613},"Step 5: Add MCP App Initialization Alongside Existing Logic",{"type":39,"tag":48,"props":3615,"children":3616},{},[3617],{"type":45,"value":3618},"This is the core step. Instead of replacing the app's data sources, add an alternative initialization path for MCP mode. The app detects its environment at startup and reads parameters from the right source.",{"type":39,"tag":187,"props":3620,"children":3622},{"id":3621},"the-hybrid-pattern",[3623],{"type":45,"value":3624},"The Hybrid Pattern",{"type":39,"tag":74,"props":3626,"children":3628},{"className":1243,"code":3627,"language":1245,"meta":83,"style":83},"import { App, PostMessageTransport } from \"@modelcontextprotocol\u002Fext-apps\";\n\n\u002F\u002F Detect whether we're running inside an MCP host.\n\u002F\u002F Choose a detection method that fits the app:\n\u002F\u002F   - Origin check: window.location.origin !== 'https:\u002F\u002Fmyhost.com'\n\u002F\u002F   - Null origin (sandboxed iframe): window.location.origin === 'null'\n\u002F\u002F   - Query param: new URL(location.href).searchParams.has('mcp')\nconst isMcpApp = window.location.origin === \"null\";\n\nasync function getParameters(): Promise\u003CRecord\u003Cstring, string>> {\n  if (isMcpApp) {\n    \u002F\u002F Running as MCP App — get params from tool lifecycle\n    const app = new App({ name: \"My App\", version: \"1.0.0\" });\n\n    \u002F\u002F Register handlers BEFORE connect()\n    const params = await new Promise\u003CRecord\u003Cstring, string>>((resolve) => {\n      app.ontoolresult = (result) => resolve(result.structuredContent ?? {});\n    });\n\n    await app.connect(new PostMessageTransport());\n    return params;\n  } else {\n    \u002F\u002F Running as standalone web app — get params from URL\n    return Object.fromEntries(new URL(location.href).searchParams);\n  }\n}\n\nasync function main() {\n  const params = await getParameters();\n  renderApp(params); \u002F\u002F Same rendering logic for both modes\n}\n\nmain().catch(console.error);\n",[3629],{"type":39,"tag":81,"props":3630,"children":3631},{"__ignoreMap":83},[3632,3682,3689,3697,3705,3713,3721,3729,3790,3797,3860,3885,3893,3983,3990,3998,4078,4154,4170,4177,4219,4235,4252,4260,4332,4339,4346,4353,4377,4408,4439,4446,4453],{"type":39,"tag":112,"props":3633,"children":3634},{"class":114,"line":115},[3635,3639,3643,3648,3652,3657,3661,3665,3669,3674,3678],{"type":39,"tag":112,"props":3636,"children":3637},{"style":1255},[3638],{"type":45,"value":1258},{"type":39,"tag":112,"props":3640,"children":3641},{"style":136},[3642],{"type":45,"value":1263},{"type":39,"tag":112,"props":3644,"children":3645},{"style":1266},[3646],{"type":45,"value":3647}," App",{"type":39,"tag":112,"props":3649,"children":3650},{"style":136},[3651],{"type":45,"value":1361},{"type":39,"tag":112,"props":3653,"children":3654},{"style":1266},[3655],{"type":45,"value":3656}," PostMessageTransport",{"type":39,"tag":112,"props":3658,"children":3659},{"style":136},[3660],{"type":45,"value":1274},{"type":39,"tag":112,"props":3662,"children":3663},{"style":1255},[3664],{"type":45,"value":1279},{"type":39,"tag":112,"props":3666,"children":3667},{"style":136},[3668],{"type":45,"value":139},{"type":39,"tag":112,"props":3670,"children":3671},{"style":125},[3672],{"type":45,"value":3673},"@modelcontextprotocol\u002Fext-apps",{"type":39,"tag":112,"props":3675,"children":3676},{"style":136},[3677],{"type":45,"value":1293},{"type":39,"tag":112,"props":3679,"children":3680},{"style":136},[3681],{"type":45,"value":1298},{"type":39,"tag":112,"props":3683,"children":3684},{"class":114,"line":1181},[3685],{"type":39,"tag":112,"props":3686,"children":3687},{"emptyLinePlaceholder":1518},[3688],{"type":45,"value":1521},{"type":39,"tag":112,"props":3690,"children":3691},{"class":114,"line":1342},[3692],{"type":39,"tag":112,"props":3693,"children":3694},{"style":1679},[3695],{"type":45,"value":3696},"\u002F\u002F Detect whether we're running inside an MCP host.\n",{"type":39,"tag":112,"props":3698,"children":3699},{"class":114,"line":1403},[3700],{"type":39,"tag":112,"props":3701,"children":3702},{"style":1679},[3703],{"type":45,"value":3704},"\u002F\u002F Choose a detection method that fits the app:\n",{"type":39,"tag":112,"props":3706,"children":3707},{"class":114,"line":1438},[3708],{"type":39,"tag":112,"props":3709,"children":3710},{"style":1679},[3711],{"type":45,"value":3712},"\u002F\u002F   - Origin check: window.location.origin !== 'https:\u002F\u002Fmyhost.com'\n",{"type":39,"tag":112,"props":3714,"children":3715},{"class":114,"line":1472},[3716],{"type":39,"tag":112,"props":3717,"children":3718},{"style":1679},[3719],{"type":45,"value":3720},"\u002F\u002F   - Null origin (sandboxed iframe): window.location.origin === 'null'\n",{"type":39,"tag":112,"props":3722,"children":3723},{"class":114,"line":1514},[3724],{"type":39,"tag":112,"props":3725,"children":3726},{"style":1679},[3727],{"type":45,"value":3728},"\u002F\u002F   - Query param: new URL(location.href).searchParams.has('mcp')\n",{"type":39,"tag":112,"props":3730,"children":3731},{"class":114,"line":1524},[3732,3736,3741,3745,3750,3754,3759,3763,3768,3773,3777,3782,3786],{"type":39,"tag":112,"props":3733,"children":3734},{"style":1528},[3735],{"type":45,"value":1531},{"type":39,"tag":112,"props":3737,"children":3738},{"style":1266},[3739],{"type":45,"value":3740}," isMcpApp ",{"type":39,"tag":112,"props":3742,"children":3743},{"style":136},[3744],{"type":45,"value":1541},{"type":39,"tag":112,"props":3746,"children":3747},{"style":1266},[3748],{"type":45,"value":3749}," window",{"type":39,"tag":112,"props":3751,"children":3752},{"style":136},[3753],{"type":45,"value":1787},{"type":39,"tag":112,"props":3755,"children":3756},{"style":1266},[3757],{"type":45,"value":3758},"location",{"type":39,"tag":112,"props":3760,"children":3761},{"style":136},[3762],{"type":45,"value":1787},{"type":39,"tag":112,"props":3764,"children":3765},{"style":1266},[3766],{"type":45,"value":3767},"origin ",{"type":39,"tag":112,"props":3769,"children":3770},{"style":136},[3771],{"type":45,"value":3772},"===",{"type":39,"tag":112,"props":3774,"children":3775},{"style":136},[3776],{"type":45,"value":139},{"type":39,"tag":112,"props":3778,"children":3779},{"style":125},[3780],{"type":45,"value":3781},"null",{"type":39,"tag":112,"props":3783,"children":3784},{"style":136},[3785],{"type":45,"value":1293},{"type":39,"tag":112,"props":3787,"children":3788},{"style":136},[3789],{"type":45,"value":1298},{"type":39,"tag":112,"props":3791,"children":3792},{"class":114,"line":1625},[3793],{"type":39,"tag":112,"props":3794,"children":3795},{"emptyLinePlaceholder":1518},[3796],{"type":45,"value":1521},{"type":39,"tag":112,"props":3798,"children":3799},{"class":114,"line":1633},[3800,3805,3810,3815,3820,3825,3829,3834,3838,3842,3846,3851,3856],{"type":39,"tag":112,"props":3801,"children":3802},{"style":1528},[3803],{"type":45,"value":3804},"async",{"type":39,"tag":112,"props":3806,"children":3807},{"style":1528},[3808],{"type":45,"value":3809}," function",{"type":39,"tag":112,"props":3811,"children":3812},{"style":1549},[3813],{"type":45,"value":3814}," getParameters",{"type":39,"tag":112,"props":3816,"children":3817},{"style":136},[3818],{"type":45,"value":3819},"():",{"type":39,"tag":112,"props":3821,"children":3822},{"style":119},[3823],{"type":45,"value":3824}," Promise",{"type":39,"tag":112,"props":3826,"children":3827},{"style":136},[3828],{"type":45,"value":3221},{"type":39,"tag":112,"props":3830,"children":3831},{"style":119},[3832],{"type":45,"value":3833},"Record",{"type":39,"tag":112,"props":3835,"children":3836},{"style":136},[3837],{"type":45,"value":3221},{"type":39,"tag":112,"props":3839,"children":3840},{"style":119},[3841],{"type":45,"value":1792},{"type":39,"tag":112,"props":3843,"children":3844},{"style":136},[3845],{"type":45,"value":1361},{"type":39,"tag":112,"props":3847,"children":3848},{"style":119},[3849],{"type":45,"value":3850}," string",{"type":39,"tag":112,"props":3852,"children":3853},{"style":136},[3854],{"type":45,"value":3855},">>",{"type":39,"tag":112,"props":3857,"children":3858},{"style":136},[3859],{"type":45,"value":1721},{"type":39,"tag":112,"props":3861,"children":3862},{"class":114,"line":1667},[3863,3868,3872,3877,3881],{"type":39,"tag":112,"props":3864,"children":3865},{"style":1255},[3866],{"type":45,"value":3867},"  if",{"type":39,"tag":112,"props":3869,"children":3870},{"style":1564},[3871],{"type":45,"value":1896},{"type":39,"tag":112,"props":3873,"children":3874},{"style":1266},[3875],{"type":45,"value":3876},"isMcpApp",{"type":39,"tag":112,"props":3878,"children":3879},{"style":1564},[3880],{"type":45,"value":1828},{"type":39,"tag":112,"props":3882,"children":3883},{"style":136},[3884],{"type":45,"value":2644},{"type":39,"tag":112,"props":3886,"children":3887},{"class":114,"line":1675},[3888],{"type":39,"tag":112,"props":3889,"children":3890},{"style":1679},[3891],{"type":45,"value":3892},"    \u002F\u002F Running as MCP App — get params from tool lifecycle\n",{"type":39,"tag":112,"props":3894,"children":3895},{"class":114,"line":1685},[3896,3901,3906,3910,3914,3918,3922,3926,3930,3934,3938,3943,3947,3951,3955,3959,3963,3967,3971,3975,3979],{"type":39,"tag":112,"props":3897,"children":3898},{"style":1528},[3899],{"type":45,"value":3900},"    const",{"type":39,"tag":112,"props":3902,"children":3903},{"style":1266},[3904],{"type":45,"value":3905}," app",{"type":39,"tag":112,"props":3907,"children":3908},{"style":136},[3909],{"type":45,"value":2278},{"type":39,"tag":112,"props":3911,"children":3912},{"style":136},[3913],{"type":45,"value":1546},{"type":39,"tag":112,"props":3915,"children":3916},{"style":1549},[3917],{"type":45,"value":3647},{"type":39,"tag":112,"props":3919,"children":3920},{"style":1564},[3921],{"type":45,"value":1556},{"type":39,"tag":112,"props":3923,"children":3924},{"style":136},[3925],{"type":45,"value":1561},{"type":39,"tag":112,"props":3927,"children":3928},{"style":1564},[3929],{"type":45,"value":1567},{"type":39,"tag":112,"props":3931,"children":3932},{"style":136},[3933],{"type":45,"value":205},{"type":39,"tag":112,"props":3935,"children":3936},{"style":136},[3937],{"type":45,"value":139},{"type":39,"tag":112,"props":3939,"children":3940},{"style":125},[3941],{"type":45,"value":3942},"My App",{"type":39,"tag":112,"props":3944,"children":3945},{"style":136},[3946],{"type":45,"value":1293},{"type":39,"tag":112,"props":3948,"children":3949},{"style":136},[3950],{"type":45,"value":1361},{"type":39,"tag":112,"props":3952,"children":3953},{"style":1564},[3954],{"type":45,"value":1593},{"type":39,"tag":112,"props":3956,"children":3957},{"style":136},[3958],{"type":45,"value":205},{"type":39,"tag":112,"props":3960,"children":3961},{"style":136},[3962],{"type":45,"value":139},{"type":39,"tag":112,"props":3964,"children":3965},{"style":125},[3966],{"type":45,"value":1606},{"type":39,"tag":112,"props":3968,"children":3969},{"style":136},[3970],{"type":45,"value":1293},{"type":39,"tag":112,"props":3972,"children":3973},{"style":136},[3974],{"type":45,"value":1274},{"type":39,"tag":112,"props":3976,"children":3977},{"style":1564},[3978],{"type":45,"value":713},{"type":39,"tag":112,"props":3980,"children":3981},{"style":136},[3982],{"type":45,"value":1298},{"type":39,"tag":112,"props":3984,"children":3985},{"class":114,"line":1724},[3986],{"type":39,"tag":112,"props":3987,"children":3988},{"emptyLinePlaceholder":1518},[3989],{"type":45,"value":1521},{"type":39,"tag":112,"props":3991,"children":3992},{"class":114,"line":1755},[3993],{"type":39,"tag":112,"props":3994,"children":3995},{"style":1679},[3996],{"type":45,"value":3997},"    \u002F\u002F Register handlers BEFORE connect()\n",{"type":39,"tag":112,"props":3999,"children":4000},{"class":114,"line":1836},[4001,4005,4010,4014,4018,4022,4026,4030,4034,4038,4042,4046,4050,4054,4058,4062,4066,4070,4074],{"type":39,"tag":112,"props":4002,"children":4003},{"style":1528},[4004],{"type":45,"value":3900},{"type":39,"tag":112,"props":4006,"children":4007},{"style":1266},[4008],{"type":45,"value":4009}," params",{"type":39,"tag":112,"props":4011,"children":4012},{"style":136},[4013],{"type":45,"value":2278},{"type":39,"tag":112,"props":4015,"children":4016},{"style":1255},[4017],{"type":45,"value":2283},{"type":39,"tag":112,"props":4019,"children":4020},{"style":136},[4021],{"type":45,"value":1546},{"type":39,"tag":112,"props":4023,"children":4024},{"style":119},[4025],{"type":45,"value":3824},{"type":39,"tag":112,"props":4027,"children":4028},{"style":136},[4029],{"type":45,"value":3221},{"type":39,"tag":112,"props":4031,"children":4032},{"style":119},[4033],{"type":45,"value":3833},{"type":39,"tag":112,"props":4035,"children":4036},{"style":136},[4037],{"type":45,"value":3221},{"type":39,"tag":112,"props":4039,"children":4040},{"style":119},[4041],{"type":45,"value":1792},{"type":39,"tag":112,"props":4043,"children":4044},{"style":136},[4045],{"type":45,"value":1361},{"type":39,"tag":112,"props":4047,"children":4048},{"style":119},[4049],{"type":45,"value":3850},{"type":39,"tag":112,"props":4051,"children":4052},{"style":136},[4053],{"type":45,"value":3855},{"type":39,"tag":112,"props":4055,"children":4056},{"style":1564},[4057],{"type":45,"value":1556},{"type":39,"tag":112,"props":4059,"children":4060},{"style":136},[4061],{"type":45,"value":1556},{"type":39,"tag":112,"props":4063,"children":4064},{"style":1899},[4065],{"type":45,"value":2320},{"type":39,"tag":112,"props":4067,"children":4068},{"style":136},[4069],{"type":45,"value":713},{"type":39,"tag":112,"props":4071,"children":4072},{"style":1528},[4073],{"type":45,"value":1911},{"type":39,"tag":112,"props":4075,"children":4076},{"style":136},[4077],{"type":45,"value":1721},{"type":39,"tag":112,"props":4079,"children":4080},{"class":114,"line":1880},[4081,4086,4090,4094,4098,4102,4107,4111,4115,4120,4124,4128,4132,4136,4141,4146,4150],{"type":39,"tag":112,"props":4082,"children":4083},{"style":1266},[4084],{"type":45,"value":4085},"      app",{"type":39,"tag":112,"props":4087,"children":4088},{"style":136},[4089],{"type":45,"value":1787},{"type":39,"tag":112,"props":4091,"children":4092},{"style":1549},[4093],{"type":45,"value":270},{"type":39,"tag":112,"props":4095,"children":4096},{"style":136},[4097],{"type":45,"value":2278},{"type":39,"tag":112,"props":4099,"children":4100},{"style":136},[4101],{"type":45,"value":1896},{"type":39,"tag":112,"props":4103,"children":4104},{"style":1899},[4105],{"type":45,"value":4106},"result",{"type":39,"tag":112,"props":4108,"children":4109},{"style":136},[4110],{"type":45,"value":713},{"type":39,"tag":112,"props":4112,"children":4113},{"style":1528},[4114],{"type":45,"value":1911},{"type":39,"tag":112,"props":4116,"children":4117},{"style":1549},[4118],{"type":45,"value":4119}," resolve",{"type":39,"tag":112,"props":4121,"children":4122},{"style":1564},[4123],{"type":45,"value":1556},{"type":39,"tag":112,"props":4125,"children":4126},{"style":1266},[4127],{"type":45,"value":4106},{"type":39,"tag":112,"props":4129,"children":4130},{"style":136},[4131],{"type":45,"value":1787},{"type":39,"tag":112,"props":4133,"children":4134},{"style":1266},[4135],{"type":45,"value":903},{"type":39,"tag":112,"props":4137,"children":4138},{"style":136},[4139],{"type":45,"value":4140}," ??",{"type":39,"tag":112,"props":4142,"children":4143},{"style":136},[4144],{"type":45,"value":4145}," {}",{"type":39,"tag":112,"props":4147,"children":4148},{"style":1564},[4149],{"type":45,"value":713},{"type":39,"tag":112,"props":4151,"children":4152},{"style":136},[4153],{"type":45,"value":1298},{"type":39,"tag":112,"props":4155,"children":4156},{"class":114,"line":1918},[4157,4162,4166],{"type":39,"tag":112,"props":4158,"children":4159},{"style":136},[4160],{"type":45,"value":4161},"    }",{"type":39,"tag":112,"props":4163,"children":4164},{"style":1564},[4165],{"type":45,"value":713},{"type":39,"tag":112,"props":4167,"children":4168},{"style":136},[4169],{"type":45,"value":1298},{"type":39,"tag":112,"props":4171,"children":4172},{"class":114,"line":1927},[4173],{"type":39,"tag":112,"props":4174,"children":4175},{"emptyLinePlaceholder":1518},[4176],{"type":45,"value":1521},{"type":39,"tag":112,"props":4178,"children":4179},{"class":114,"line":1940},[4180,4185,4189,4193,4197,4201,4206,4210,4215],{"type":39,"tag":112,"props":4181,"children":4182},{"style":1255},[4183],{"type":45,"value":4184},"    await",{"type":39,"tag":112,"props":4186,"children":4187},{"style":1266},[4188],{"type":45,"value":3905},{"type":39,"tag":112,"props":4190,"children":4191},{"style":136},[4192],{"type":45,"value":1787},{"type":39,"tag":112,"props":4194,"children":4195},{"style":1549},[4196],{"type":45,"value":2600},{"type":39,"tag":112,"props":4198,"children":4199},{"style":1564},[4200],{"type":45,"value":1556},{"type":39,"tag":112,"props":4202,"children":4203},{"style":136},[4204],{"type":45,"value":4205},"new",{"type":39,"tag":112,"props":4207,"children":4208},{"style":1549},[4209],{"type":45,"value":3656},{"type":39,"tag":112,"props":4211,"children":4212},{"style":1564},[4213],{"type":45,"value":4214},"())",{"type":39,"tag":112,"props":4216,"children":4217},{"style":136},[4218],{"type":45,"value":1298},{"type":39,"tag":112,"props":4220,"children":4221},{"class":114,"line":2042},[4222,4227,4231],{"type":39,"tag":112,"props":4223,"children":4224},{"style":1255},[4225],{"type":45,"value":4226},"    return",{"type":39,"tag":112,"props":4228,"children":4229},{"style":1266},[4230],{"type":45,"value":4009},{"type":39,"tag":112,"props":4232,"children":4233},{"style":136},[4234],{"type":45,"value":1298},{"type":39,"tag":112,"props":4236,"children":4237},{"class":114,"line":2084},[4238,4243,4248],{"type":39,"tag":112,"props":4239,"children":4240},{"style":136},[4241],{"type":45,"value":4242},"  }",{"type":39,"tag":112,"props":4244,"children":4245},{"style":1255},[4246],{"type":45,"value":4247}," else",{"type":39,"tag":112,"props":4249,"children":4250},{"style":136},[4251],{"type":45,"value":1721},{"type":39,"tag":112,"props":4253,"children":4254},{"class":114,"line":2093},[4255],{"type":39,"tag":112,"props":4256,"children":4257},{"style":1679},[4258],{"type":45,"value":4259},"    \u002F\u002F Running as standalone web app — get params from URL\n",{"type":39,"tag":112,"props":4261,"children":4262},{"class":114,"line":2109},[4263,4267,4272,4276,4281,4285,4289,4294,4298,4302,4306,4311,4315,4319,4324,4328],{"type":39,"tag":112,"props":4264,"children":4265},{"style":1255},[4266],{"type":45,"value":4226},{"type":39,"tag":112,"props":4268,"children":4269},{"style":1266},[4270],{"type":45,"value":4271}," Object",{"type":39,"tag":112,"props":4273,"children":4274},{"style":136},[4275],{"type":45,"value":1787},{"type":39,"tag":112,"props":4277,"children":4278},{"style":1549},[4279],{"type":45,"value":4280},"fromEntries",{"type":39,"tag":112,"props":4282,"children":4283},{"style":1564},[4284],{"type":45,"value":1556},{"type":39,"tag":112,"props":4286,"children":4287},{"style":136},[4288],{"type":45,"value":4205},{"type":39,"tag":112,"props":4290,"children":4291},{"style":1549},[4292],{"type":45,"value":4293}," URL",{"type":39,"tag":112,"props":4295,"children":4296},{"style":1564},[4297],{"type":45,"value":1556},{"type":39,"tag":112,"props":4299,"children":4300},{"style":1266},[4301],{"type":45,"value":3758},{"type":39,"tag":112,"props":4303,"children":4304},{"style":136},[4305],{"type":45,"value":1787},{"type":39,"tag":112,"props":4307,"children":4308},{"style":1266},[4309],{"type":45,"value":4310},"href",{"type":39,"tag":112,"props":4312,"children":4313},{"style":1564},[4314],{"type":45,"value":713},{"type":39,"tag":112,"props":4316,"children":4317},{"style":136},[4318],{"type":45,"value":1787},{"type":39,"tag":112,"props":4320,"children":4321},{"style":1266},[4322],{"type":45,"value":4323},"searchParams",{"type":39,"tag":112,"props":4325,"children":4326},{"style":1564},[4327],{"type":45,"value":713},{"type":39,"tag":112,"props":4329,"children":4330},{"style":136},[4331],{"type":45,"value":1298},{"type":39,"tag":112,"props":4333,"children":4334},{"class":114,"line":2117},[4335],{"type":39,"tag":112,"props":4336,"children":4337},{"style":136},[4338],{"type":45,"value":2822},{"type":39,"tag":112,"props":4340,"children":4341},{"class":114,"line":2126},[4342],{"type":39,"tag":112,"props":4343,"children":4344},{"style":136},[4345],{"type":45,"value":2830},{"type":39,"tag":112,"props":4347,"children":4348},{"class":114,"line":2146},[4349],{"type":39,"tag":112,"props":4350,"children":4351},{"emptyLinePlaceholder":1518},[4352],{"type":45,"value":1521},{"type":39,"tag":112,"props":4354,"children":4355},{"class":114,"line":2168},[4356,4360,4364,4369,4373],{"type":39,"tag":112,"props":4357,"children":4358},{"style":1528},[4359],{"type":45,"value":3804},{"type":39,"tag":112,"props":4361,"children":4362},{"style":1528},[4363],{"type":45,"value":3809},{"type":39,"tag":112,"props":4365,"children":4366},{"style":1549},[4367],{"type":45,"value":4368}," main",{"type":39,"tag":112,"props":4370,"children":4371},{"style":136},[4372],{"type":45,"value":1797},{"type":39,"tag":112,"props":4374,"children":4375},{"style":136},[4376],{"type":45,"value":1721},{"type":39,"tag":112,"props":4378,"children":4379},{"class":114,"line":2198},[4380,4384,4388,4392,4396,4400,4404],{"type":39,"tag":112,"props":4381,"children":4382},{"style":1528},[4383],{"type":45,"value":2268},{"type":39,"tag":112,"props":4385,"children":4386},{"style":1266},[4387],{"type":45,"value":4009},{"type":39,"tag":112,"props":4389,"children":4390},{"style":136},[4391],{"type":45,"value":2278},{"type":39,"tag":112,"props":4393,"children":4394},{"style":1255},[4395],{"type":45,"value":2283},{"type":39,"tag":112,"props":4397,"children":4398},{"style":1549},[4399],{"type":45,"value":3814},{"type":39,"tag":112,"props":4401,"children":4402},{"style":1564},[4403],{"type":45,"value":1797},{"type":39,"tag":112,"props":4405,"children":4406},{"style":136},[4407],{"type":45,"value":1298},{"type":39,"tag":112,"props":4409,"children":4410},{"class":114,"line":2219},[4411,4416,4420,4425,4429,4434],{"type":39,"tag":112,"props":4412,"children":4413},{"style":1549},[4414],{"type":45,"value":4415},"  renderApp",{"type":39,"tag":112,"props":4417,"children":4418},{"style":1564},[4419],{"type":45,"value":1556},{"type":39,"tag":112,"props":4421,"children":4422},{"style":1266},[4423],{"type":45,"value":4424},"params",{"type":39,"tag":112,"props":4426,"children":4427},{"style":1564},[4428],{"type":45,"value":713},{"type":39,"tag":112,"props":4430,"children":4431},{"style":136},[4432],{"type":45,"value":4433},";",{"type":39,"tag":112,"props":4435,"children":4436},{"style":1679},[4437],{"type":45,"value":4438}," \u002F\u002F Same rendering logic for both modes\n",{"type":39,"tag":112,"props":4440,"children":4441},{"class":114,"line":2228},[4442],{"type":39,"tag":112,"props":4443,"children":4444},{"style":136},[4445],{"type":45,"value":2830},{"type":39,"tag":112,"props":4447,"children":4448},{"class":114,"line":2237},[4449],{"type":39,"tag":112,"props":4450,"children":4451},{"emptyLinePlaceholder":1518},[4452],{"type":45,"value":1521},{"type":39,"tag":112,"props":4454,"children":4455},{"class":114,"line":2262},[4456,4461,4465,4469,4474,4479,4483,4488],{"type":39,"tag":112,"props":4457,"children":4458},{"style":1549},[4459],{"type":45,"value":4460},"main",{"type":39,"tag":112,"props":4462,"children":4463},{"style":1266},[4464],{"type":45,"value":1797},{"type":39,"tag":112,"props":4466,"children":4467},{"style":136},[4468],{"type":45,"value":1787},{"type":39,"tag":112,"props":4470,"children":4471},{"style":1549},[4472],{"type":45,"value":4473},"catch",{"type":39,"tag":112,"props":4475,"children":4476},{"style":1266},[4477],{"type":45,"value":4478},"(console",{"type":39,"tag":112,"props":4480,"children":4481},{"style":136},[4482],{"type":45,"value":1787},{"type":39,"tag":112,"props":4484,"children":4485},{"style":1266},[4486],{"type":45,"value":4487},"error)",{"type":39,"tag":112,"props":4489,"children":4490},{"style":136},[4491],{"type":45,"value":1298},{"type":39,"tag":187,"props":4493,"children":4495},{"id":4494},"url-parameters-hybrid",[4496],{"type":45,"value":4497},"URL Parameters (Hybrid)",{"type":39,"tag":74,"props":4499,"children":4501},{"className":1243,"code":4500,"language":1245,"meta":83,"style":83},"\u002F\u002F Before (standalone only):\nconst query = new URL(location.href).searchParams.get(\"q\");\nrenderApp(query);\n\n\u002F\u002F After (hybrid):\nasync function getQuery(): Promise\u003Cstring> {\n  if (isMcpApp) {\n    const app = new App({ name: \"My App\", version: \"1.0.0\" });\n    return new Promise((resolve) => {\n      app.ontoolinput = (params) => resolve(params.arguments?.q ?? \"\");\n      app.connect(new PostMessageTransport());\n    });\n  }\n  return new URL(location.href).searchParams.get(\"q\") ?? \"\";\n}\n\nconst query = await getQuery();\nrenderApp(query); \u002F\u002F Unchanged rendering logic\n",[4502],{"type":39,"tag":81,"props":4503,"children":4504},{"__ignoreMap":83},[4505,4513,4593,4610,4617,4625,4665,4688,4775,4814,4895,4930,4945,4952,5036,5043,5050,5081],{"type":39,"tag":112,"props":4506,"children":4507},{"class":114,"line":115},[4508],{"type":39,"tag":112,"props":4509,"children":4510},{"style":1679},[4511],{"type":45,"value":4512},"\u002F\u002F Before (standalone only):\n",{"type":39,"tag":112,"props":4514,"children":4515},{"class":114,"line":1181},[4516,4520,4525,4529,4533,4537,4542,4546,4551,4555,4559,4563,4568,4572,4576,4581,4585,4589],{"type":39,"tag":112,"props":4517,"children":4518},{"style":1528},[4519],{"type":45,"value":1531},{"type":39,"tag":112,"props":4521,"children":4522},{"style":1266},[4523],{"type":45,"value":4524}," query ",{"type":39,"tag":112,"props":4526,"children":4527},{"style":136},[4528],{"type":45,"value":1541},{"type":39,"tag":112,"props":4530,"children":4531},{"style":136},[4532],{"type":45,"value":1546},{"type":39,"tag":112,"props":4534,"children":4535},{"style":1549},[4536],{"type":45,"value":4293},{"type":39,"tag":112,"props":4538,"children":4539},{"style":1266},[4540],{"type":45,"value":4541},"(location",{"type":39,"tag":112,"props":4543,"children":4544},{"style":136},[4545],{"type":45,"value":1787},{"type":39,"tag":112,"props":4547,"children":4548},{"style":1266},[4549],{"type":45,"value":4550},"href)",{"type":39,"tag":112,"props":4552,"children":4553},{"style":136},[4554],{"type":45,"value":1787},{"type":39,"tag":112,"props":4556,"children":4557},{"style":1266},[4558],{"type":45,"value":4323},{"type":39,"tag":112,"props":4560,"children":4561},{"style":136},[4562],{"type":45,"value":1787},{"type":39,"tag":112,"props":4564,"children":4565},{"style":1549},[4566],{"type":45,"value":4567},"get",{"type":39,"tag":112,"props":4569,"children":4570},{"style":1266},[4571],{"type":45,"value":1556},{"type":39,"tag":112,"props":4573,"children":4574},{"style":136},[4575],{"type":45,"value":1293},{"type":39,"tag":112,"props":4577,"children":4578},{"style":125},[4579],{"type":45,"value":4580},"q",{"type":39,"tag":112,"props":4582,"children":4583},{"style":136},[4584],{"type":45,"value":1293},{"type":39,"tag":112,"props":4586,"children":4587},{"style":1266},[4588],{"type":45,"value":713},{"type":39,"tag":112,"props":4590,"children":4591},{"style":136},[4592],{"type":45,"value":1298},{"type":39,"tag":112,"props":4594,"children":4595},{"class":114,"line":1342},[4596,4601,4606],{"type":39,"tag":112,"props":4597,"children":4598},{"style":1549},[4599],{"type":45,"value":4600},"renderApp",{"type":39,"tag":112,"props":4602,"children":4603},{"style":1266},[4604],{"type":45,"value":4605},"(query)",{"type":39,"tag":112,"props":4607,"children":4608},{"style":136},[4609],{"type":45,"value":1298},{"type":39,"tag":112,"props":4611,"children":4612},{"class":114,"line":1403},[4613],{"type":39,"tag":112,"props":4614,"children":4615},{"emptyLinePlaceholder":1518},[4616],{"type":45,"value":1521},{"type":39,"tag":112,"props":4618,"children":4619},{"class":114,"line":1438},[4620],{"type":39,"tag":112,"props":4621,"children":4622},{"style":1679},[4623],{"type":45,"value":4624},"\u002F\u002F After (hybrid):\n",{"type":39,"tag":112,"props":4626,"children":4627},{"class":114,"line":1472},[4628,4632,4636,4641,4645,4649,4653,4657,4661],{"type":39,"tag":112,"props":4629,"children":4630},{"style":1528},[4631],{"type":45,"value":3804},{"type":39,"tag":112,"props":4633,"children":4634},{"style":1528},[4635],{"type":45,"value":3809},{"type":39,"tag":112,"props":4637,"children":4638},{"style":1549},[4639],{"type":45,"value":4640}," getQuery",{"type":39,"tag":112,"props":4642,"children":4643},{"style":136},[4644],{"type":45,"value":3819},{"type":39,"tag":112,"props":4646,"children":4647},{"style":119},[4648],{"type":45,"value":3824},{"type":39,"tag":112,"props":4650,"children":4651},{"style":136},[4652],{"type":45,"value":3221},{"type":39,"tag":112,"props":4654,"children":4655},{"style":119},[4656],{"type":45,"value":1792},{"type":39,"tag":112,"props":4658,"children":4659},{"style":136},[4660],{"type":45,"value":3382},{"type":39,"tag":112,"props":4662,"children":4663},{"style":136},[4664],{"type":45,"value":1721},{"type":39,"tag":112,"props":4666,"children":4667},{"class":114,"line":1514},[4668,4672,4676,4680,4684],{"type":39,"tag":112,"props":4669,"children":4670},{"style":1255},[4671],{"type":45,"value":3867},{"type":39,"tag":112,"props":4673,"children":4674},{"style":1564},[4675],{"type":45,"value":1896},{"type":39,"tag":112,"props":4677,"children":4678},{"style":1266},[4679],{"type":45,"value":3876},{"type":39,"tag":112,"props":4681,"children":4682},{"style":1564},[4683],{"type":45,"value":1828},{"type":39,"tag":112,"props":4685,"children":4686},{"style":136},[4687],{"type":45,"value":2644},{"type":39,"tag":112,"props":4689,"children":4690},{"class":114,"line":1524},[4691,4695,4699,4703,4707,4711,4715,4719,4723,4727,4731,4735,4739,4743,4747,4751,4755,4759,4763,4767,4771],{"type":39,"tag":112,"props":4692,"children":4693},{"style":1528},[4694],{"type":45,"value":3900},{"type":39,"tag":112,"props":4696,"children":4697},{"style":1266},[4698],{"type":45,"value":3905},{"type":39,"tag":112,"props":4700,"children":4701},{"style":136},[4702],{"type":45,"value":2278},{"type":39,"tag":112,"props":4704,"children":4705},{"style":136},[4706],{"type":45,"value":1546},{"type":39,"tag":112,"props":4708,"children":4709},{"style":1549},[4710],{"type":45,"value":3647},{"type":39,"tag":112,"props":4712,"children":4713},{"style":1564},[4714],{"type":45,"value":1556},{"type":39,"tag":112,"props":4716,"children":4717},{"style":136},[4718],{"type":45,"value":1561},{"type":39,"tag":112,"props":4720,"children":4721},{"style":1564},[4722],{"type":45,"value":1567},{"type":39,"tag":112,"props":4724,"children":4725},{"style":136},[4726],{"type":45,"value":205},{"type":39,"tag":112,"props":4728,"children":4729},{"style":136},[4730],{"type":45,"value":139},{"type":39,"tag":112,"props":4732,"children":4733},{"style":125},[4734],{"type":45,"value":3942},{"type":39,"tag":112,"props":4736,"children":4737},{"style":136},[4738],{"type":45,"value":1293},{"type":39,"tag":112,"props":4740,"children":4741},{"style":136},[4742],{"type":45,"value":1361},{"type":39,"tag":112,"props":4744,"children":4745},{"style":1564},[4746],{"type":45,"value":1593},{"type":39,"tag":112,"props":4748,"children":4749},{"style":136},[4750],{"type":45,"value":205},{"type":39,"tag":112,"props":4752,"children":4753},{"style":136},[4754],{"type":45,"value":139},{"type":39,"tag":112,"props":4756,"children":4757},{"style":125},[4758],{"type":45,"value":1606},{"type":39,"tag":112,"props":4760,"children":4761},{"style":136},[4762],{"type":45,"value":1293},{"type":39,"tag":112,"props":4764,"children":4765},{"style":136},[4766],{"type":45,"value":1274},{"type":39,"tag":112,"props":4768,"children":4769},{"style":1564},[4770],{"type":45,"value":713},{"type":39,"tag":112,"props":4772,"children":4773},{"style":136},[4774],{"type":45,"value":1298},{"type":39,"tag":112,"props":4776,"children":4777},{"class":114,"line":1625},[4778,4782,4786,4790,4794,4798,4802,4806,4810],{"type":39,"tag":112,"props":4779,"children":4780},{"style":1255},[4781],{"type":45,"value":4226},{"type":39,"tag":112,"props":4783,"children":4784},{"style":136},[4785],{"type":45,"value":1546},{"type":39,"tag":112,"props":4787,"children":4788},{"style":119},[4789],{"type":45,"value":3824},{"type":39,"tag":112,"props":4791,"children":4792},{"style":1564},[4793],{"type":45,"value":1556},{"type":39,"tag":112,"props":4795,"children":4796},{"style":136},[4797],{"type":45,"value":1556},{"type":39,"tag":112,"props":4799,"children":4800},{"style":1899},[4801],{"type":45,"value":2320},{"type":39,"tag":112,"props":4803,"children":4804},{"style":136},[4805],{"type":45,"value":713},{"type":39,"tag":112,"props":4807,"children":4808},{"style":1528},[4809],{"type":45,"value":1911},{"type":39,"tag":112,"props":4811,"children":4812},{"style":136},[4813],{"type":45,"value":1721},{"type":39,"tag":112,"props":4815,"children":4816},{"class":114,"line":1633},[4817,4821,4825,4829,4833,4837,4841,4845,4849,4853,4857,4861,4865,4869,4874,4878,4882,4887,4891],{"type":39,"tag":112,"props":4818,"children":4819},{"style":1266},[4820],{"type":45,"value":4085},{"type":39,"tag":112,"props":4822,"children":4823},{"style":136},[4824],{"type":45,"value":1787},{"type":39,"tag":112,"props":4826,"children":4827},{"style":1549},[4828],{"type":45,"value":262},{"type":39,"tag":112,"props":4830,"children":4831},{"style":136},[4832],{"type":45,"value":2278},{"type":39,"tag":112,"props":4834,"children":4835},{"style":136},[4836],{"type":45,"value":1896},{"type":39,"tag":112,"props":4838,"children":4839},{"style":1899},[4840],{"type":45,"value":4424},{"type":39,"tag":112,"props":4842,"children":4843},{"style":136},[4844],{"type":45,"value":713},{"type":39,"tag":112,"props":4846,"children":4847},{"style":1528},[4848],{"type":45,"value":1911},{"type":39,"tag":112,"props":4850,"children":4851},{"style":1549},[4852],{"type":45,"value":4119},{"type":39,"tag":112,"props":4854,"children":4855},{"style":1564},[4856],{"type":45,"value":1556},{"type":39,"tag":112,"props":4858,"children":4859},{"style":1266},[4860],{"type":45,"value":4424},{"type":39,"tag":112,"props":4862,"children":4863},{"style":136},[4864],{"type":45,"value":1787},{"type":39,"tag":112,"props":4866,"children":4867},{"style":1266},[4868],{"type":45,"value":895},{"type":39,"tag":112,"props":4870,"children":4871},{"style":136},[4872],{"type":45,"value":4873},"?.",{"type":39,"tag":112,"props":4875,"children":4876},{"style":1266},[4877],{"type":45,"value":4580},{"type":39,"tag":112,"props":4879,"children":4880},{"style":136},[4881],{"type":45,"value":4140},{"type":39,"tag":112,"props":4883,"children":4884},{"style":136},[4885],{"type":45,"value":4886}," \"\"",{"type":39,"tag":112,"props":4888,"children":4889},{"style":1564},[4890],{"type":45,"value":713},{"type":39,"tag":112,"props":4892,"children":4893},{"style":136},[4894],{"type":45,"value":1298},{"type":39,"tag":112,"props":4896,"children":4897},{"class":114,"line":1667},[4898,4902,4906,4910,4914,4918,4922,4926],{"type":39,"tag":112,"props":4899,"children":4900},{"style":1266},[4901],{"type":45,"value":4085},{"type":39,"tag":112,"props":4903,"children":4904},{"style":136},[4905],{"type":45,"value":1787},{"type":39,"tag":112,"props":4907,"children":4908},{"style":1549},[4909],{"type":45,"value":2600},{"type":39,"tag":112,"props":4911,"children":4912},{"style":1564},[4913],{"type":45,"value":1556},{"type":39,"tag":112,"props":4915,"children":4916},{"style":136},[4917],{"type":45,"value":4205},{"type":39,"tag":112,"props":4919,"children":4920},{"style":1549},[4921],{"type":45,"value":3656},{"type":39,"tag":112,"props":4923,"children":4924},{"style":1564},[4925],{"type":45,"value":4214},{"type":39,"tag":112,"props":4927,"children":4928},{"style":136},[4929],{"type":45,"value":1298},{"type":39,"tag":112,"props":4931,"children":4932},{"class":114,"line":1675},[4933,4937,4941],{"type":39,"tag":112,"props":4934,"children":4935},{"style":136},[4936],{"type":45,"value":4161},{"type":39,"tag":112,"props":4938,"children":4939},{"style":1564},[4940],{"type":45,"value":713},{"type":39,"tag":112,"props":4942,"children":4943},{"style":136},[4944],{"type":45,"value":1298},{"type":39,"tag":112,"props":4946,"children":4947},{"class":114,"line":1685},[4948],{"type":39,"tag":112,"props":4949,"children":4950},{"style":136},[4951],{"type":45,"value":2822},{"type":39,"tag":112,"props":4953,"children":4954},{"class":114,"line":1724},[4955,4959,4963,4967,4971,4975,4979,4983,4987,4991,4995,4999,5003,5007,5011,5015,5019,5023,5028,5032],{"type":39,"tag":112,"props":4956,"children":4957},{"style":1255},[4958],{"type":45,"value":1933},{"type":39,"tag":112,"props":4960,"children":4961},{"style":136},[4962],{"type":45,"value":1546},{"type":39,"tag":112,"props":4964,"children":4965},{"style":1549},[4966],{"type":45,"value":4293},{"type":39,"tag":112,"props":4968,"children":4969},{"style":1564},[4970],{"type":45,"value":1556},{"type":39,"tag":112,"props":4972,"children":4973},{"style":1266},[4974],{"type":45,"value":3758},{"type":39,"tag":112,"props":4976,"children":4977},{"style":136},[4978],{"type":45,"value":1787},{"type":39,"tag":112,"props":4980,"children":4981},{"style":1266},[4982],{"type":45,"value":4310},{"type":39,"tag":112,"props":4984,"children":4985},{"style":1564},[4986],{"type":45,"value":713},{"type":39,"tag":112,"props":4988,"children":4989},{"style":136},[4990],{"type":45,"value":1787},{"type":39,"tag":112,"props":4992,"children":4993},{"style":1266},[4994],{"type":45,"value":4323},{"type":39,"tag":112,"props":4996,"children":4997},{"style":136},[4998],{"type":45,"value":1787},{"type":39,"tag":112,"props":5000,"children":5001},{"style":1549},[5002],{"type":45,"value":4567},{"type":39,"tag":112,"props":5004,"children":5005},{"style":1564},[5006],{"type":45,"value":1556},{"type":39,"tag":112,"props":5008,"children":5009},{"style":136},[5010],{"type":45,"value":1293},{"type":39,"tag":112,"props":5012,"children":5013},{"style":125},[5014],{"type":45,"value":4580},{"type":39,"tag":112,"props":5016,"children":5017},{"style":136},[5018],{"type":45,"value":1293},{"type":39,"tag":112,"props":5020,"children":5021},{"style":1564},[5022],{"type":45,"value":1828},{"type":39,"tag":112,"props":5024,"children":5025},{"style":136},[5026],{"type":45,"value":5027},"??",{"type":39,"tag":112,"props":5029,"children":5030},{"style":136},[5031],{"type":45,"value":4886},{"type":39,"tag":112,"props":5033,"children":5034},{"style":136},[5035],{"type":45,"value":1298},{"type":39,"tag":112,"props":5037,"children":5038},{"class":114,"line":1755},[5039],{"type":39,"tag":112,"props":5040,"children":5041},{"style":136},[5042],{"type":45,"value":2830},{"type":39,"tag":112,"props":5044,"children":5045},{"class":114,"line":1836},[5046],{"type":39,"tag":112,"props":5047,"children":5048},{"emptyLinePlaceholder":1518},[5049],{"type":45,"value":1521},{"type":39,"tag":112,"props":5051,"children":5052},{"class":114,"line":1880},[5053,5057,5061,5065,5069,5073,5077],{"type":39,"tag":112,"props":5054,"children":5055},{"style":1528},[5056],{"type":45,"value":1531},{"type":39,"tag":112,"props":5058,"children":5059},{"style":1266},[5060],{"type":45,"value":4524},{"type":39,"tag":112,"props":5062,"children":5063},{"style":136},[5064],{"type":45,"value":1541},{"type":39,"tag":112,"props":5066,"children":5067},{"style":1255},[5068],{"type":45,"value":2283},{"type":39,"tag":112,"props":5070,"children":5071},{"style":1549},[5072],{"type":45,"value":4640},{"type":39,"tag":112,"props":5074,"children":5075},{"style":1266},[5076],{"type":45,"value":1797},{"type":39,"tag":112,"props":5078,"children":5079},{"style":136},[5080],{"type":45,"value":1298},{"type":39,"tag":112,"props":5082,"children":5083},{"class":114,"line":1918},[5084,5088,5092,5096],{"type":39,"tag":112,"props":5085,"children":5086},{"style":1549},[5087],{"type":45,"value":4600},{"type":39,"tag":112,"props":5089,"children":5090},{"style":1266},[5091],{"type":45,"value":4605},{"type":39,"tag":112,"props":5093,"children":5094},{"style":136},[5095],{"type":45,"value":4433},{"type":39,"tag":112,"props":5097,"children":5098},{"style":1679},[5099],{"type":45,"value":5100}," \u002F\u002F Unchanged rendering logic\n",{"type":39,"tag":187,"props":5102,"children":5104},{"id":5103},"api-calls-hybrid",[5105],{"type":45,"value":5106},"API Calls (Hybrid)",{"type":39,"tag":74,"props":5108,"children":5110},{"className":1243,"code":5109,"language":1245,"meta":83,"style":83},"\u002F\u002F Before (standalone only):\nconst data = await fetch(\"\u002Fapi\u002Fdata\").then(r => r.json());\n\n\u002F\u002F After (hybrid):\nasync function fetchData(): Promise\u003Cany> {\n  if (isMcpApp) {\n    const result = await app.callServerTool(\"fetch-data\", {});\n    return result.structuredContent;\n  }\n  return fetch(\"\u002Fapi\u002Fdata\").then(r => r.json());\n}\n",[5111],{"type":39,"tag":81,"props":5112,"children":5113},{"__ignoreMap":83},[5114,5121,5210,5217,5224,5265,5288,5354,5377,5384,5455],{"type":39,"tag":112,"props":5115,"children":5116},{"class":114,"line":115},[5117],{"type":39,"tag":112,"props":5118,"children":5119},{"style":1679},[5120],{"type":45,"value":4512},{"type":39,"tag":112,"props":5122,"children":5123},{"class":114,"line":1181},[5124,5128,5133,5137,5141,5146,5150,5154,5159,5163,5167,5171,5176,5180,5185,5189,5194,5198,5202,5206],{"type":39,"tag":112,"props":5125,"children":5126},{"style":1528},[5127],{"type":45,"value":1531},{"type":39,"tag":112,"props":5129,"children":5130},{"style":1266},[5131],{"type":45,"value":5132}," data ",{"type":39,"tag":112,"props":5134,"children":5135},{"style":136},[5136],{"type":45,"value":1541},{"type":39,"tag":112,"props":5138,"children":5139},{"style":1255},[5140],{"type":45,"value":2283},{"type":39,"tag":112,"props":5142,"children":5143},{"style":1549},[5144],{"type":45,"value":5145}," fetch",{"type":39,"tag":112,"props":5147,"children":5148},{"style":1266},[5149],{"type":45,"value":1556},{"type":39,"tag":112,"props":5151,"children":5152},{"style":136},[5153],{"type":45,"value":1293},{"type":39,"tag":112,"props":5155,"children":5156},{"style":125},[5157],{"type":45,"value":5158},"\u002Fapi\u002Fdata",{"type":39,"tag":112,"props":5160,"children":5161},{"style":136},[5162],{"type":45,"value":1293},{"type":39,"tag":112,"props":5164,"children":5165},{"style":1266},[5166],{"type":45,"value":713},{"type":39,"tag":112,"props":5168,"children":5169},{"style":136},[5170],{"type":45,"value":1787},{"type":39,"tag":112,"props":5172,"children":5173},{"style":1549},[5174],{"type":45,"value":5175},"then",{"type":39,"tag":112,"props":5177,"children":5178},{"style":1266},[5179],{"type":45,"value":1556},{"type":39,"tag":112,"props":5181,"children":5182},{"style":1899},[5183],{"type":45,"value":5184},"r",{"type":39,"tag":112,"props":5186,"children":5187},{"style":1528},[5188],{"type":45,"value":1911},{"type":39,"tag":112,"props":5190,"children":5191},{"style":1266},[5192],{"type":45,"value":5193}," r",{"type":39,"tag":112,"props":5195,"children":5196},{"style":136},[5197],{"type":45,"value":1787},{"type":39,"tag":112,"props":5199,"children":5200},{"style":1549},[5201],{"type":45,"value":2632},{"type":39,"tag":112,"props":5203,"children":5204},{"style":1266},[5205],{"type":45,"value":4214},{"type":39,"tag":112,"props":5207,"children":5208},{"style":136},[5209],{"type":45,"value":1298},{"type":39,"tag":112,"props":5211,"children":5212},{"class":114,"line":1342},[5213],{"type":39,"tag":112,"props":5214,"children":5215},{"emptyLinePlaceholder":1518},[5216],{"type":45,"value":1521},{"type":39,"tag":112,"props":5218,"children":5219},{"class":114,"line":1403},[5220],{"type":39,"tag":112,"props":5221,"children":5222},{"style":1679},[5223],{"type":45,"value":4624},{"type":39,"tag":112,"props":5225,"children":5226},{"class":114,"line":1438},[5227,5231,5235,5240,5244,5248,5252,5257,5261],{"type":39,"tag":112,"props":5228,"children":5229},{"style":1528},[5230],{"type":45,"value":3804},{"type":39,"tag":112,"props":5232,"children":5233},{"style":1528},[5234],{"type":45,"value":3809},{"type":39,"tag":112,"props":5236,"children":5237},{"style":1549},[5238],{"type":45,"value":5239}," fetchData",{"type":39,"tag":112,"props":5241,"children":5242},{"style":136},[5243],{"type":45,"value":3819},{"type":39,"tag":112,"props":5245,"children":5246},{"style":119},[5247],{"type":45,"value":3824},{"type":39,"tag":112,"props":5249,"children":5250},{"style":136},[5251],{"type":45,"value":3221},{"type":39,"tag":112,"props":5253,"children":5254},{"style":119},[5255],{"type":45,"value":5256},"any",{"type":39,"tag":112,"props":5258,"children":5259},{"style":136},[5260],{"type":45,"value":3382},{"type":39,"tag":112,"props":5262,"children":5263},{"style":136},[5264],{"type":45,"value":1721},{"type":39,"tag":112,"props":5266,"children":5267},{"class":114,"line":1472},[5268,5272,5276,5280,5284],{"type":39,"tag":112,"props":5269,"children":5270},{"style":1255},[5271],{"type":45,"value":3867},{"type":39,"tag":112,"props":5273,"children":5274},{"style":1564},[5275],{"type":45,"value":1896},{"type":39,"tag":112,"props":5277,"children":5278},{"style":1266},[5279],{"type":45,"value":3876},{"type":39,"tag":112,"props":5281,"children":5282},{"style":1564},[5283],{"type":45,"value":1828},{"type":39,"tag":112,"props":5285,"children":5286},{"style":136},[5287],{"type":45,"value":2644},{"type":39,"tag":112,"props":5289,"children":5290},{"class":114,"line":1514},[5291,5295,5300,5304,5308,5312,5316,5321,5325,5329,5334,5338,5342,5346,5350],{"type":39,"tag":112,"props":5292,"children":5293},{"style":1528},[5294],{"type":45,"value":3900},{"type":39,"tag":112,"props":5296,"children":5297},{"style":1266},[5298],{"type":45,"value":5299}," result",{"type":39,"tag":112,"props":5301,"children":5302},{"style":136},[5303],{"type":45,"value":2278},{"type":39,"tag":112,"props":5305,"children":5306},{"style":1255},[5307],{"type":45,"value":2283},{"type":39,"tag":112,"props":5309,"children":5310},{"style":1266},[5311],{"type":45,"value":3905},{"type":39,"tag":112,"props":5313,"children":5314},{"style":136},[5315],{"type":45,"value":1787},{"type":39,"tag":112,"props":5317,"children":5318},{"style":1549},[5319],{"type":45,"value":5320},"callServerTool",{"type":39,"tag":112,"props":5322,"children":5323},{"style":1564},[5324],{"type":45,"value":1556},{"type":39,"tag":112,"props":5326,"children":5327},{"style":136},[5328],{"type":45,"value":1293},{"type":39,"tag":112,"props":5330,"children":5331},{"style":125},[5332],{"type":45,"value":5333},"fetch-data",{"type":39,"tag":112,"props":5335,"children":5336},{"style":136},[5337],{"type":45,"value":1293},{"type":39,"tag":112,"props":5339,"children":5340},{"style":136},[5341],{"type":45,"value":1361},{"type":39,"tag":112,"props":5343,"children":5344},{"style":136},[5345],{"type":45,"value":4145},{"type":39,"tag":112,"props":5347,"children":5348},{"style":1564},[5349],{"type":45,"value":713},{"type":39,"tag":112,"props":5351,"children":5352},{"style":136},[5353],{"type":45,"value":1298},{"type":39,"tag":112,"props":5355,"children":5356},{"class":114,"line":1524},[5357,5361,5365,5369,5373],{"type":39,"tag":112,"props":5358,"children":5359},{"style":1255},[5360],{"type":45,"value":4226},{"type":39,"tag":112,"props":5362,"children":5363},{"style":1266},[5364],{"type":45,"value":5299},{"type":39,"tag":112,"props":5366,"children":5367},{"style":136},[5368],{"type":45,"value":1787},{"type":39,"tag":112,"props":5370,"children":5371},{"style":1266},[5372],{"type":45,"value":903},{"type":39,"tag":112,"props":5374,"children":5375},{"style":136},[5376],{"type":45,"value":1298},{"type":39,"tag":112,"props":5378,"children":5379},{"class":114,"line":1625},[5380],{"type":39,"tag":112,"props":5381,"children":5382},{"style":136},[5383],{"type":45,"value":2822},{"type":39,"tag":112,"props":5385,"children":5386},{"class":114,"line":1633},[5387,5391,5395,5399,5403,5407,5411,5415,5419,5423,5427,5431,5435,5439,5443,5447,5451],{"type":39,"tag":112,"props":5388,"children":5389},{"style":1255},[5390],{"type":45,"value":1933},{"type":39,"tag":112,"props":5392,"children":5393},{"style":1549},[5394],{"type":45,"value":5145},{"type":39,"tag":112,"props":5396,"children":5397},{"style":1564},[5398],{"type":45,"value":1556},{"type":39,"tag":112,"props":5400,"children":5401},{"style":136},[5402],{"type":45,"value":1293},{"type":39,"tag":112,"props":5404,"children":5405},{"style":125},[5406],{"type":45,"value":5158},{"type":39,"tag":112,"props":5408,"children":5409},{"style":136},[5410],{"type":45,"value":1293},{"type":39,"tag":112,"props":5412,"children":5413},{"style":1564},[5414],{"type":45,"value":713},{"type":39,"tag":112,"props":5416,"children":5417},{"style":136},[5418],{"type":45,"value":1787},{"type":39,"tag":112,"props":5420,"children":5421},{"style":1549},[5422],{"type":45,"value":5175},{"type":39,"tag":112,"props":5424,"children":5425},{"style":1564},[5426],{"type":45,"value":1556},{"type":39,"tag":112,"props":5428,"children":5429},{"style":1899},[5430],{"type":45,"value":5184},{"type":39,"tag":112,"props":5432,"children":5433},{"style":1528},[5434],{"type":45,"value":1911},{"type":39,"tag":112,"props":5436,"children":5437},{"style":1266},[5438],{"type":45,"value":5193},{"type":39,"tag":112,"props":5440,"children":5441},{"style":136},[5442],{"type":45,"value":1787},{"type":39,"tag":112,"props":5444,"children":5445},{"style":1549},[5446],{"type":45,"value":2632},{"type":39,"tag":112,"props":5448,"children":5449},{"style":1564},[5450],{"type":45,"value":4214},{"type":39,"tag":112,"props":5452,"children":5453},{"style":136},[5454],{"type":45,"value":1298},{"type":39,"tag":112,"props":5456,"children":5457},{"class":114,"line":1667},[5458],{"type":39,"tag":112,"props":5459,"children":5460},{"style":136},[5461],{"type":45,"value":2830},{"type":39,"tag":48,"props":5463,"children":5464},{},[5465,5467,5472],{"type":45,"value":5466},"Or keep direct API calls in both modes with CSP ",{"type":39,"tag":81,"props":5468,"children":5470},{"className":5469},[],[5471],{"type":45,"value":704},{"type":45,"value":205},{"type":39,"tag":74,"props":5474,"children":5476},{"className":1243,"code":5475,"language":1245,"meta":83,"style":83},"\u002F\u002F API calls can stay unchanged if the API is external and the CSP declares the domain\n\u002F\u002F Declare connectDomains: [\"api.example.com\"] in the resource registration\n",[5477],{"type":39,"tag":81,"props":5478,"children":5479},{"__ignoreMap":83},[5480,5488],{"type":39,"tag":112,"props":5481,"children":5482},{"class":114,"line":115},[5483],{"type":39,"tag":112,"props":5484,"children":5485},{"style":1679},[5486],{"type":45,"value":5487},"\u002F\u002F API calls can stay unchanged if the API is external and the CSP declares the domain\n",{"type":39,"tag":112,"props":5489,"children":5490},{"class":114,"line":1181},[5491],{"type":39,"tag":112,"props":5492,"children":5493},{"style":1679},[5494],{"type":45,"value":5495},"\u002F\u002F Declare connectDomains: [\"api.example.com\"] in the resource registration\n",{"type":39,"tag":187,"props":5497,"children":5499},{"id":5498},"localstorage-sessionstorage-hybrid",[5500],{"type":45,"value":5501},"localStorage \u002F sessionStorage (Hybrid)",{"type":39,"tag":74,"props":5503,"children":5505},{"className":1243,"code":5504,"language":1245,"meta":83,"style":83},"\u002F\u002F Before (standalone only):\nconst saved = localStorage.getItem(\"settings\");\n\n\u002F\u002F After (hybrid) — localStorage isn't available in sandboxed iframes:\nfunction getSettings(): any {\n  if (isMcpApp) {\n    \u002F\u002F Will be provided via tool result\n    return null; \u002F\u002F or a default\n  }\n  return JSON.parse(localStorage.getItem(\"settings\") ?? \"null\");\n}\n",[5506],{"type":39,"tag":81,"props":5507,"children":5508},{"__ignoreMap":83},[5509,5516,5571,5578,5586,5612,5635,5643,5660,5667,5749],{"type":39,"tag":112,"props":5510,"children":5511},{"class":114,"line":115},[5512],{"type":39,"tag":112,"props":5513,"children":5514},{"style":1679},[5515],{"type":45,"value":4512},{"type":39,"tag":112,"props":5517,"children":5518},{"class":114,"line":1181},[5519,5523,5528,5532,5537,5541,5546,5550,5554,5559,5563,5567],{"type":39,"tag":112,"props":5520,"children":5521},{"style":1528},[5522],{"type":45,"value":1531},{"type":39,"tag":112,"props":5524,"children":5525},{"style":1266},[5526],{"type":45,"value":5527}," saved ",{"type":39,"tag":112,"props":5529,"children":5530},{"style":136},[5531],{"type":45,"value":1541},{"type":39,"tag":112,"props":5533,"children":5534},{"style":1266},[5535],{"type":45,"value":5536}," localStorage",{"type":39,"tag":112,"props":5538,"children":5539},{"style":136},[5540],{"type":45,"value":1787},{"type":39,"tag":112,"props":5542,"children":5543},{"style":1549},[5544],{"type":45,"value":5545},"getItem",{"type":39,"tag":112,"props":5547,"children":5548},{"style":1266},[5549],{"type":45,"value":1556},{"type":39,"tag":112,"props":5551,"children":5552},{"style":136},[5553],{"type":45,"value":1293},{"type":39,"tag":112,"props":5555,"children":5556},{"style":125},[5557],{"type":45,"value":5558},"settings",{"type":39,"tag":112,"props":5560,"children":5561},{"style":136},[5562],{"type":45,"value":1293},{"type":39,"tag":112,"props":5564,"children":5565},{"style":1266},[5566],{"type":45,"value":713},{"type":39,"tag":112,"props":5568,"children":5569},{"style":136},[5570],{"type":45,"value":1298},{"type":39,"tag":112,"props":5572,"children":5573},{"class":114,"line":1342},[5574],{"type":39,"tag":112,"props":5575,"children":5576},{"emptyLinePlaceholder":1518},[5577],{"type":45,"value":1521},{"type":39,"tag":112,"props":5579,"children":5580},{"class":114,"line":1403},[5581],{"type":39,"tag":112,"props":5582,"children":5583},{"style":1679},[5584],{"type":45,"value":5585},"\u002F\u002F After (hybrid) — localStorage isn't available in sandboxed iframes:\n",{"type":39,"tag":112,"props":5587,"children":5588},{"class":114,"line":1438},[5589,5594,5599,5603,5608],{"type":39,"tag":112,"props":5590,"children":5591},{"style":1528},[5592],{"type":45,"value":5593},"function",{"type":39,"tag":112,"props":5595,"children":5596},{"style":1549},[5597],{"type":45,"value":5598}," getSettings",{"type":39,"tag":112,"props":5600,"children":5601},{"style":136},[5602],{"type":45,"value":3819},{"type":39,"tag":112,"props":5604,"children":5605},{"style":119},[5606],{"type":45,"value":5607}," any",{"type":39,"tag":112,"props":5609,"children":5610},{"style":136},[5611],{"type":45,"value":1721},{"type":39,"tag":112,"props":5613,"children":5614},{"class":114,"line":1472},[5615,5619,5623,5627,5631],{"type":39,"tag":112,"props":5616,"children":5617},{"style":1255},[5618],{"type":45,"value":3867},{"type":39,"tag":112,"props":5620,"children":5621},{"style":1564},[5622],{"type":45,"value":1896},{"type":39,"tag":112,"props":5624,"children":5625},{"style":1266},[5626],{"type":45,"value":3876},{"type":39,"tag":112,"props":5628,"children":5629},{"style":1564},[5630],{"type":45,"value":1828},{"type":39,"tag":112,"props":5632,"children":5633},{"style":136},[5634],{"type":45,"value":2644},{"type":39,"tag":112,"props":5636,"children":5637},{"class":114,"line":1514},[5638],{"type":39,"tag":112,"props":5639,"children":5640},{"style":1679},[5641],{"type":45,"value":5642},"    \u002F\u002F Will be provided via tool result\n",{"type":39,"tag":112,"props":5644,"children":5645},{"class":114,"line":1524},[5646,5650,5655],{"type":39,"tag":112,"props":5647,"children":5648},{"style":1255},[5649],{"type":45,"value":4226},{"type":39,"tag":112,"props":5651,"children":5652},{"style":136},[5653],{"type":45,"value":5654}," null;",{"type":39,"tag":112,"props":5656,"children":5657},{"style":1679},[5658],{"type":45,"value":5659}," \u002F\u002F or a default\n",{"type":39,"tag":112,"props":5661,"children":5662},{"class":114,"line":1625},[5663],{"type":39,"tag":112,"props":5664,"children":5665},{"style":136},[5666],{"type":45,"value":2822},{"type":39,"tag":112,"props":5668,"children":5669},{"class":114,"line":1633},[5670,5674,5679,5683,5688,5692,5697,5701,5705,5709,5713,5717,5721,5725,5729,5733,5737,5741,5745],{"type":39,"tag":112,"props":5671,"children":5672},{"style":1255},[5673],{"type":45,"value":1933},{"type":39,"tag":112,"props":5675,"children":5676},{"style":1266},[5677],{"type":45,"value":5678}," JSON",{"type":39,"tag":112,"props":5680,"children":5681},{"style":136},[5682],{"type":45,"value":1787},{"type":39,"tag":112,"props":5684,"children":5685},{"style":1549},[5686],{"type":45,"value":5687},"parse",{"type":39,"tag":112,"props":5689,"children":5690},{"style":1564},[5691],{"type":45,"value":1556},{"type":39,"tag":112,"props":5693,"children":5694},{"style":1266},[5695],{"type":45,"value":5696},"localStorage",{"type":39,"tag":112,"props":5698,"children":5699},{"style":136},[5700],{"type":45,"value":1787},{"type":39,"tag":112,"props":5702,"children":5703},{"style":1549},[5704],{"type":45,"value":5545},{"type":39,"tag":112,"props":5706,"children":5707},{"style":1564},[5708],{"type":45,"value":1556},{"type":39,"tag":112,"props":5710,"children":5711},{"style":136},[5712],{"type":45,"value":1293},{"type":39,"tag":112,"props":5714,"children":5715},{"style":125},[5716],{"type":45,"value":5558},{"type":39,"tag":112,"props":5718,"children":5719},{"style":136},[5720],{"type":45,"value":1293},{"type":39,"tag":112,"props":5722,"children":5723},{"style":1564},[5724],{"type":45,"value":1828},{"type":39,"tag":112,"props":5726,"children":5727},{"style":136},[5728],{"type":45,"value":5027},{"type":39,"tag":112,"props":5730,"children":5731},{"style":136},[5732],{"type":45,"value":139},{"type":39,"tag":112,"props":5734,"children":5735},{"style":125},[5736],{"type":45,"value":3781},{"type":39,"tag":112,"props":5738,"children":5739},{"style":136},[5740],{"type":45,"value":1293},{"type":39,"tag":112,"props":5742,"children":5743},{"style":1564},[5744],{"type":45,"value":713},{"type":39,"tag":112,"props":5746,"children":5747},{"style":136},[5748],{"type":45,"value":1298},{"type":39,"tag":112,"props":5750,"children":5751},{"class":114,"line":1667},[5752],{"type":39,"tag":112,"props":5753,"children":5754},{"style":136},[5755],{"type":45,"value":2830},{"type":39,"tag":187,"props":5757,"children":5759},{"id":5758},"complete-hybrid-example",[5760],{"type":45,"value":5761},"Complete Hybrid Example",{"type":39,"tag":74,"props":5763,"children":5765},{"className":1243,"code":5764,"language":1245,"meta":83,"style":83},"import { App, PostMessageTransport, applyDocumentTheme, applyHostStyleVariables, applyHostFonts } from \"@modelcontextprotocol\u002Fext-apps\";\n\nconst isMcpApp = window.location.origin === \"null\";\n\nasync function initMcpApp(): Promise\u003CRecord\u003Cstring, any>> {\n  const app = new App({ name: \"My App\", version: \"1.0.0\" });\n\n  \u002F\u002F Register ALL handlers BEFORE connect()\n  const params = await new Promise\u003CRecord\u003Cstring, any>>((resolve) => {\n    app.ontoolinput = (input) => resolve(input.arguments ?? {});\n  });\n\n  app.onhostcontextchanged = (ctx) => {\n    if (ctx.theme) applyDocumentTheme(ctx.theme);\n    if (ctx.styles?.variables) applyHostStyleVariables(ctx.styles.variables);\n    if (ctx.styles?.css?.fonts) applyHostFonts(ctx.styles.css.fonts);\n    if (ctx.safeAreaInsets) {\n      const { top, right, bottom, left } = ctx.safeAreaInsets;\n      document.body.style.padding = `${top}px ${right}px ${bottom}px ${left}px`;\n    }\n  };\n\n  app.onteardown = async () => {\n    return {};\n  };\n\n  await app.connect(new PostMessageTransport());\n  return params;\n}\n\nasync function initStandaloneApp(): Promise\u003CRecord\u003Cstring, any>> {\n  return Object.fromEntries(new URL(location.href).searchParams);\n}\n\nasync function main() {\n  const params = isMcpApp ? await initMcpApp() : await initStandaloneApp();\n  renderApp(params); \u002F\u002F Same rendering logic — no fork needed\n}\n\nmain().catch(console.error);\n",[5766],{"type":39,"tag":81,"props":5767,"children":5768},{"__ignoreMap":83},[5769,5843,5850,5905,5912,5968,6055,6062,6070,6149,6222,6237,6244,6285,6342,6415,6504,6536,6605,6723,6731,6738,6745,6780,6792,6799,6806,6846,6861,6868,6875,6931,6998,7005,7012,7035,7093,7121,7128,7135],{"type":39,"tag":112,"props":5770,"children":5771},{"class":114,"line":115},[5772,5776,5780,5784,5788,5792,5796,5801,5805,5810,5814,5819,5823,5827,5831,5835,5839],{"type":39,"tag":112,"props":5773,"children":5774},{"style":1255},[5775],{"type":45,"value":1258},{"type":39,"tag":112,"props":5777,"children":5778},{"style":136},[5779],{"type":45,"value":1263},{"type":39,"tag":112,"props":5781,"children":5782},{"style":1266},[5783],{"type":45,"value":3647},{"type":39,"tag":112,"props":5785,"children":5786},{"style":136},[5787],{"type":45,"value":1361},{"type":39,"tag":112,"props":5789,"children":5790},{"style":1266},[5791],{"type":45,"value":3656},{"type":39,"tag":112,"props":5793,"children":5794},{"style":136},[5795],{"type":45,"value":1361},{"type":39,"tag":112,"props":5797,"children":5798},{"style":1266},[5799],{"type":45,"value":5800}," applyDocumentTheme",{"type":39,"tag":112,"props":5802,"children":5803},{"style":136},[5804],{"type":45,"value":1361},{"type":39,"tag":112,"props":5806,"children":5807},{"style":1266},[5808],{"type":45,"value":5809}," applyHostStyleVariables",{"type":39,"tag":112,"props":5811,"children":5812},{"style":136},[5813],{"type":45,"value":1361},{"type":39,"tag":112,"props":5815,"children":5816},{"style":1266},[5817],{"type":45,"value":5818}," applyHostFonts",{"type":39,"tag":112,"props":5820,"children":5821},{"style":136},[5822],{"type":45,"value":1274},{"type":39,"tag":112,"props":5824,"children":5825},{"style":1255},[5826],{"type":45,"value":1279},{"type":39,"tag":112,"props":5828,"children":5829},{"style":136},[5830],{"type":45,"value":139},{"type":39,"tag":112,"props":5832,"children":5833},{"style":125},[5834],{"type":45,"value":3673},{"type":39,"tag":112,"props":5836,"children":5837},{"style":136},[5838],{"type":45,"value":1293},{"type":39,"tag":112,"props":5840,"children":5841},{"style":136},[5842],{"type":45,"value":1298},{"type":39,"tag":112,"props":5844,"children":5845},{"class":114,"line":1181},[5846],{"type":39,"tag":112,"props":5847,"children":5848},{"emptyLinePlaceholder":1518},[5849],{"type":45,"value":1521},{"type":39,"tag":112,"props":5851,"children":5852},{"class":114,"line":1342},[5853,5857,5861,5865,5869,5873,5877,5881,5885,5889,5893,5897,5901],{"type":39,"tag":112,"props":5854,"children":5855},{"style":1528},[5856],{"type":45,"value":1531},{"type":39,"tag":112,"props":5858,"children":5859},{"style":1266},[5860],{"type":45,"value":3740},{"type":39,"tag":112,"props":5862,"children":5863},{"style":136},[5864],{"type":45,"value":1541},{"type":39,"tag":112,"props":5866,"children":5867},{"style":1266},[5868],{"type":45,"value":3749},{"type":39,"tag":112,"props":5870,"children":5871},{"style":136},[5872],{"type":45,"value":1787},{"type":39,"tag":112,"props":5874,"children":5875},{"style":1266},[5876],{"type":45,"value":3758},{"type":39,"tag":112,"props":5878,"children":5879},{"style":136},[5880],{"type":45,"value":1787},{"type":39,"tag":112,"props":5882,"children":5883},{"style":1266},[5884],{"type":45,"value":3767},{"type":39,"tag":112,"props":5886,"children":5887},{"style":136},[5888],{"type":45,"value":3772},{"type":39,"tag":112,"props":5890,"children":5891},{"style":136},[5892],{"type":45,"value":139},{"type":39,"tag":112,"props":5894,"children":5895},{"style":125},[5896],{"type":45,"value":3781},{"type":39,"tag":112,"props":5898,"children":5899},{"style":136},[5900],{"type":45,"value":1293},{"type":39,"tag":112,"props":5902,"children":5903},{"style":136},[5904],{"type":45,"value":1298},{"type":39,"tag":112,"props":5906,"children":5907},{"class":114,"line":1403},[5908],{"type":39,"tag":112,"props":5909,"children":5910},{"emptyLinePlaceholder":1518},[5911],{"type":45,"value":1521},{"type":39,"tag":112,"props":5913,"children":5914},{"class":114,"line":1438},[5915,5919,5923,5928,5932,5936,5940,5944,5948,5952,5956,5960,5964],{"type":39,"tag":112,"props":5916,"children":5917},{"style":1528},[5918],{"type":45,"value":3804},{"type":39,"tag":112,"props":5920,"children":5921},{"style":1528},[5922],{"type":45,"value":3809},{"type":39,"tag":112,"props":5924,"children":5925},{"style":1549},[5926],{"type":45,"value":5927}," initMcpApp",{"type":39,"tag":112,"props":5929,"children":5930},{"style":136},[5931],{"type":45,"value":3819},{"type":39,"tag":112,"props":5933,"children":5934},{"style":119},[5935],{"type":45,"value":3824},{"type":39,"tag":112,"props":5937,"children":5938},{"style":136},[5939],{"type":45,"value":3221},{"type":39,"tag":112,"props":5941,"children":5942},{"style":119},[5943],{"type":45,"value":3833},{"type":39,"tag":112,"props":5945,"children":5946},{"style":136},[5947],{"type":45,"value":3221},{"type":39,"tag":112,"props":5949,"children":5950},{"style":119},[5951],{"type":45,"value":1792},{"type":39,"tag":112,"props":5953,"children":5954},{"style":136},[5955],{"type":45,"value":1361},{"type":39,"tag":112,"props":5957,"children":5958},{"style":119},[5959],{"type":45,"value":5607},{"type":39,"tag":112,"props":5961,"children":5962},{"style":136},[5963],{"type":45,"value":3855},{"type":39,"tag":112,"props":5965,"children":5966},{"style":136},[5967],{"type":45,"value":1721},{"type":39,"tag":112,"props":5969,"children":5970},{"class":114,"line":1472},[5971,5975,5979,5983,5987,5991,5995,5999,6003,6007,6011,6015,6019,6023,6027,6031,6035,6039,6043,6047,6051],{"type":39,"tag":112,"props":5972,"children":5973},{"style":1528},[5974],{"type":45,"value":2268},{"type":39,"tag":112,"props":5976,"children":5977},{"style":1266},[5978],{"type":45,"value":3905},{"type":39,"tag":112,"props":5980,"children":5981},{"style":136},[5982],{"type":45,"value":2278},{"type":39,"tag":112,"props":5984,"children":5985},{"style":136},[5986],{"type":45,"value":1546},{"type":39,"tag":112,"props":5988,"children":5989},{"style":1549},[5990],{"type":45,"value":3647},{"type":39,"tag":112,"props":5992,"children":5993},{"style":1564},[5994],{"type":45,"value":1556},{"type":39,"tag":112,"props":5996,"children":5997},{"style":136},[5998],{"type":45,"value":1561},{"type":39,"tag":112,"props":6000,"children":6001},{"style":1564},[6002],{"type":45,"value":1567},{"type":39,"tag":112,"props":6004,"children":6005},{"style":136},[6006],{"type":45,"value":205},{"type":39,"tag":112,"props":6008,"children":6009},{"style":136},[6010],{"type":45,"value":139},{"type":39,"tag":112,"props":6012,"children":6013},{"style":125},[6014],{"type":45,"value":3942},{"type":39,"tag":112,"props":6016,"children":6017},{"style":136},[6018],{"type":45,"value":1293},{"type":39,"tag":112,"props":6020,"children":6021},{"style":136},[6022],{"type":45,"value":1361},{"type":39,"tag":112,"props":6024,"children":6025},{"style":1564},[6026],{"type":45,"value":1593},{"type":39,"tag":112,"props":6028,"children":6029},{"style":136},[6030],{"type":45,"value":205},{"type":39,"tag":112,"props":6032,"children":6033},{"style":136},[6034],{"type":45,"value":139},{"type":39,"tag":112,"props":6036,"children":6037},{"style":125},[6038],{"type":45,"value":1606},{"type":39,"tag":112,"props":6040,"children":6041},{"style":136},[6042],{"type":45,"value":1293},{"type":39,"tag":112,"props":6044,"children":6045},{"style":136},[6046],{"type":45,"value":1274},{"type":39,"tag":112,"props":6048,"children":6049},{"style":1564},[6050],{"type":45,"value":713},{"type":39,"tag":112,"props":6052,"children":6053},{"style":136},[6054],{"type":45,"value":1298},{"type":39,"tag":112,"props":6056,"children":6057},{"class":114,"line":1514},[6058],{"type":39,"tag":112,"props":6059,"children":6060},{"emptyLinePlaceholder":1518},[6061],{"type":45,"value":1521},{"type":39,"tag":112,"props":6063,"children":6064},{"class":114,"line":1524},[6065],{"type":39,"tag":112,"props":6066,"children":6067},{"style":1679},[6068],{"type":45,"value":6069},"  \u002F\u002F Register ALL handlers BEFORE connect()\n",{"type":39,"tag":112,"props":6071,"children":6072},{"class":114,"line":1625},[6073,6077,6081,6085,6089,6093,6097,6101,6105,6109,6113,6117,6121,6125,6129,6133,6137,6141,6145],{"type":39,"tag":112,"props":6074,"children":6075},{"style":1528},[6076],{"type":45,"value":2268},{"type":39,"tag":112,"props":6078,"children":6079},{"style":1266},[6080],{"type":45,"value":4009},{"type":39,"tag":112,"props":6082,"children":6083},{"style":136},[6084],{"type":45,"value":2278},{"type":39,"tag":112,"props":6086,"children":6087},{"style":1255},[6088],{"type":45,"value":2283},{"type":39,"tag":112,"props":6090,"children":6091},{"style":136},[6092],{"type":45,"value":1546},{"type":39,"tag":112,"props":6094,"children":6095},{"style":119},[6096],{"type":45,"value":3824},{"type":39,"tag":112,"props":6098,"children":6099},{"style":136},[6100],{"type":45,"value":3221},{"type":39,"tag":112,"props":6102,"children":6103},{"style":119},[6104],{"type":45,"value":3833},{"type":39,"tag":112,"props":6106,"children":6107},{"style":136},[6108],{"type":45,"value":3221},{"type":39,"tag":112,"props":6110,"children":6111},{"style":119},[6112],{"type":45,"value":1792},{"type":39,"tag":112,"props":6114,"children":6115},{"style":136},[6116],{"type":45,"value":1361},{"type":39,"tag":112,"props":6118,"children":6119},{"style":119},[6120],{"type":45,"value":5607},{"type":39,"tag":112,"props":6122,"children":6123},{"style":136},[6124],{"type":45,"value":3855},{"type":39,"tag":112,"props":6126,"children":6127},{"style":1564},[6128],{"type":45,"value":1556},{"type":39,"tag":112,"props":6130,"children":6131},{"style":136},[6132],{"type":45,"value":1556},{"type":39,"tag":112,"props":6134,"children":6135},{"style":1899},[6136],{"type":45,"value":2320},{"type":39,"tag":112,"props":6138,"children":6139},{"style":136},[6140],{"type":45,"value":713},{"type":39,"tag":112,"props":6142,"children":6143},{"style":1528},[6144],{"type":45,"value":1911},{"type":39,"tag":112,"props":6146,"children":6147},{"style":136},[6148],{"type":45,"value":1721},{"type":39,"tag":112,"props":6150,"children":6151},{"class":114,"line":1633},[6152,6157,6161,6165,6169,6173,6178,6182,6186,6190,6194,6198,6202,6206,6210,6214,6218],{"type":39,"tag":112,"props":6153,"children":6154},{"style":1266},[6155],{"type":45,"value":6156},"    app",{"type":39,"tag":112,"props":6158,"children":6159},{"style":136},[6160],{"type":45,"value":1787},{"type":39,"tag":112,"props":6162,"children":6163},{"style":1549},[6164],{"type":45,"value":262},{"type":39,"tag":112,"props":6166,"children":6167},{"style":136},[6168],{"type":45,"value":2278},{"type":39,"tag":112,"props":6170,"children":6171},{"style":136},[6172],{"type":45,"value":1896},{"type":39,"tag":112,"props":6174,"children":6175},{"style":1899},[6176],{"type":45,"value":6177},"input",{"type":39,"tag":112,"props":6179,"children":6180},{"style":136},[6181],{"type":45,"value":713},{"type":39,"tag":112,"props":6183,"children":6184},{"style":1528},[6185],{"type":45,"value":1911},{"type":39,"tag":112,"props":6187,"children":6188},{"style":1549},[6189],{"type":45,"value":4119},{"type":39,"tag":112,"props":6191,"children":6192},{"style":1564},[6193],{"type":45,"value":1556},{"type":39,"tag":112,"props":6195,"children":6196},{"style":1266},[6197],{"type":45,"value":6177},{"type":39,"tag":112,"props":6199,"children":6200},{"style":136},[6201],{"type":45,"value":1787},{"type":39,"tag":112,"props":6203,"children":6204},{"style":1266},[6205],{"type":45,"value":895},{"type":39,"tag":112,"props":6207,"children":6208},{"style":136},[6209],{"type":45,"value":4140},{"type":39,"tag":112,"props":6211,"children":6212},{"style":136},[6213],{"type":45,"value":4145},{"type":39,"tag":112,"props":6215,"children":6216},{"style":1564},[6217],{"type":45,"value":713},{"type":39,"tag":112,"props":6219,"children":6220},{"style":136},[6221],{"type":45,"value":1298},{"type":39,"tag":112,"props":6223,"children":6224},{"class":114,"line":1667},[6225,6229,6233],{"type":39,"tag":112,"props":6226,"children":6227},{"style":136},[6228],{"type":45,"value":4242},{"type":39,"tag":112,"props":6230,"children":6231},{"style":1564},[6232],{"type":45,"value":713},{"type":39,"tag":112,"props":6234,"children":6235},{"style":136},[6236],{"type":45,"value":1298},{"type":39,"tag":112,"props":6238,"children":6239},{"class":114,"line":1675},[6240],{"type":39,"tag":112,"props":6241,"children":6242},{"emptyLinePlaceholder":1518},[6243],{"type":45,"value":1521},{"type":39,"tag":112,"props":6245,"children":6246},{"class":114,"line":1685},[6247,6252,6256,6260,6264,6268,6273,6277,6281],{"type":39,"tag":112,"props":6248,"children":6249},{"style":1266},[6250],{"type":45,"value":6251},"  app",{"type":39,"tag":112,"props":6253,"children":6254},{"style":136},[6255],{"type":45,"value":1787},{"type":39,"tag":112,"props":6257,"children":6258},{"style":1549},[6259],{"type":45,"value":277},{"type":39,"tag":112,"props":6261,"children":6262},{"style":136},[6263],{"type":45,"value":2278},{"type":39,"tag":112,"props":6265,"children":6266},{"style":136},[6267],{"type":45,"value":1896},{"type":39,"tag":112,"props":6269,"children":6270},{"style":1899},[6271],{"type":45,"value":6272},"ctx",{"type":39,"tag":112,"props":6274,"children":6275},{"style":136},[6276],{"type":45,"value":713},{"type":39,"tag":112,"props":6278,"children":6279},{"style":1528},[6280],{"type":45,"value":1911},{"type":39,"tag":112,"props":6282,"children":6283},{"style":136},[6284],{"type":45,"value":1721},{"type":39,"tag":112,"props":6286,"children":6287},{"class":114,"line":1724},[6288,6293,6297,6301,6305,6310,6314,6318,6322,6326,6330,6334,6338],{"type":39,"tag":112,"props":6289,"children":6290},{"style":1255},[6291],{"type":45,"value":6292},"    if",{"type":39,"tag":112,"props":6294,"children":6295},{"style":1564},[6296],{"type":45,"value":1896},{"type":39,"tag":112,"props":6298,"children":6299},{"style":1266},[6300],{"type":45,"value":6272},{"type":39,"tag":112,"props":6302,"children":6303},{"style":136},[6304],{"type":45,"value":1787},{"type":39,"tag":112,"props":6306,"children":6307},{"style":1266},[6308],{"type":45,"value":6309},"theme",{"type":39,"tag":112,"props":6311,"children":6312},{"style":1564},[6313],{"type":45,"value":1828},{"type":39,"tag":112,"props":6315,"children":6316},{"style":1549},[6317],{"type":45,"value":362},{"type":39,"tag":112,"props":6319,"children":6320},{"style":1564},[6321],{"type":45,"value":1556},{"type":39,"tag":112,"props":6323,"children":6324},{"style":1266},[6325],{"type":45,"value":6272},{"type":39,"tag":112,"props":6327,"children":6328},{"style":136},[6329],{"type":45,"value":1787},{"type":39,"tag":112,"props":6331,"children":6332},{"style":1266},[6333],{"type":45,"value":6309},{"type":39,"tag":112,"props":6335,"children":6336},{"style":1564},[6337],{"type":45,"value":713},{"type":39,"tag":112,"props":6339,"children":6340},{"style":136},[6341],{"type":45,"value":1298},{"type":39,"tag":112,"props":6343,"children":6344},{"class":114,"line":1755},[6345,6349,6353,6357,6361,6366,6370,6375,6379,6383,6387,6391,6395,6399,6403,6407,6411],{"type":39,"tag":112,"props":6346,"children":6347},{"style":1255},[6348],{"type":45,"value":6292},{"type":39,"tag":112,"props":6350,"children":6351},{"style":1564},[6352],{"type":45,"value":1896},{"type":39,"tag":112,"props":6354,"children":6355},{"style":1266},[6356],{"type":45,"value":6272},{"type":39,"tag":112,"props":6358,"children":6359},{"style":136},[6360],{"type":45,"value":1787},{"type":39,"tag":112,"props":6362,"children":6363},{"style":1266},[6364],{"type":45,"value":6365},"styles",{"type":39,"tag":112,"props":6367,"children":6368},{"style":136},[6369],{"type":45,"value":4873},{"type":39,"tag":112,"props":6371,"children":6372},{"style":1266},[6373],{"type":45,"value":6374},"variables",{"type":39,"tag":112,"props":6376,"children":6377},{"style":1564},[6378],{"type":45,"value":1828},{"type":39,"tag":112,"props":6380,"children":6381},{"style":1549},[6382],{"type":45,"value":369},{"type":39,"tag":112,"props":6384,"children":6385},{"style":1564},[6386],{"type":45,"value":1556},{"type":39,"tag":112,"props":6388,"children":6389},{"style":1266},[6390],{"type":45,"value":6272},{"type":39,"tag":112,"props":6392,"children":6393},{"style":136},[6394],{"type":45,"value":1787},{"type":39,"tag":112,"props":6396,"children":6397},{"style":1266},[6398],{"type":45,"value":6365},{"type":39,"tag":112,"props":6400,"children":6401},{"style":136},[6402],{"type":45,"value":1787},{"type":39,"tag":112,"props":6404,"children":6405},{"style":1266},[6406],{"type":45,"value":6374},{"type":39,"tag":112,"props":6408,"children":6409},{"style":1564},[6410],{"type":45,"value":713},{"type":39,"tag":112,"props":6412,"children":6413},{"style":136},[6414],{"type":45,"value":1298},{"type":39,"tag":112,"props":6416,"children":6417},{"class":114,"line":1836},[6418,6422,6426,6430,6434,6438,6442,6447,6451,6456,6460,6464,6468,6472,6476,6480,6484,6488,6492,6496,6500],{"type":39,"tag":112,"props":6419,"children":6420},{"style":1255},[6421],{"type":45,"value":6292},{"type":39,"tag":112,"props":6423,"children":6424},{"style":1564},[6425],{"type":45,"value":1896},{"type":39,"tag":112,"props":6427,"children":6428},{"style":1266},[6429],{"type":45,"value":6272},{"type":39,"tag":112,"props":6431,"children":6432},{"style":136},[6433],{"type":45,"value":1787},{"type":39,"tag":112,"props":6435,"children":6436},{"style":1266},[6437],{"type":45,"value":6365},{"type":39,"tag":112,"props":6439,"children":6440},{"style":136},[6441],{"type":45,"value":4873},{"type":39,"tag":112,"props":6443,"children":6444},{"style":1266},[6445],{"type":45,"value":6446},"css",{"type":39,"tag":112,"props":6448,"children":6449},{"style":136},[6450],{"type":45,"value":4873},{"type":39,"tag":112,"props":6452,"children":6453},{"style":1266},[6454],{"type":45,"value":6455},"fonts",{"type":39,"tag":112,"props":6457,"children":6458},{"style":1564},[6459],{"type":45,"value":1828},{"type":39,"tag":112,"props":6461,"children":6462},{"style":1549},[6463],{"type":45,"value":376},{"type":39,"tag":112,"props":6465,"children":6466},{"style":1564},[6467],{"type":45,"value":1556},{"type":39,"tag":112,"props":6469,"children":6470},{"style":1266},[6471],{"type":45,"value":6272},{"type":39,"tag":112,"props":6473,"children":6474},{"style":136},[6475],{"type":45,"value":1787},{"type":39,"tag":112,"props":6477,"children":6478},{"style":1266},[6479],{"type":45,"value":6365},{"type":39,"tag":112,"props":6481,"children":6482},{"style":136},[6483],{"type":45,"value":1787},{"type":39,"tag":112,"props":6485,"children":6486},{"style":1266},[6487],{"type":45,"value":6446},{"type":39,"tag":112,"props":6489,"children":6490},{"style":136},[6491],{"type":45,"value":1787},{"type":39,"tag":112,"props":6493,"children":6494},{"style":1266},[6495],{"type":45,"value":6455},{"type":39,"tag":112,"props":6497,"children":6498},{"style":1564},[6499],{"type":45,"value":713},{"type":39,"tag":112,"props":6501,"children":6502},{"style":136},[6503],{"type":45,"value":1298},{"type":39,"tag":112,"props":6505,"children":6506},{"class":114,"line":1880},[6507,6511,6515,6519,6523,6528,6532],{"type":39,"tag":112,"props":6508,"children":6509},{"style":1255},[6510],{"type":45,"value":6292},{"type":39,"tag":112,"props":6512,"children":6513},{"style":1564},[6514],{"type":45,"value":1896},{"type":39,"tag":112,"props":6516,"children":6517},{"style":1266},[6518],{"type":45,"value":6272},{"type":39,"tag":112,"props":6520,"children":6521},{"style":136},[6522],{"type":45,"value":1787},{"type":39,"tag":112,"props":6524,"children":6525},{"style":1266},[6526],{"type":45,"value":6527},"safeAreaInsets",{"type":39,"tag":112,"props":6529,"children":6530},{"style":1564},[6531],{"type":45,"value":1828},{"type":39,"tag":112,"props":6533,"children":6534},{"style":136},[6535],{"type":45,"value":2644},{"type":39,"tag":112,"props":6537,"children":6538},{"class":114,"line":1918},[6539,6544,6548,6553,6557,6562,6566,6571,6575,6580,6584,6588,6593,6597,6601],{"type":39,"tag":112,"props":6540,"children":6541},{"style":1528},[6542],{"type":45,"value":6543},"      const",{"type":39,"tag":112,"props":6545,"children":6546},{"style":136},[6547],{"type":45,"value":1263},{"type":39,"tag":112,"props":6549,"children":6550},{"style":1266},[6551],{"type":45,"value":6552}," top",{"type":39,"tag":112,"props":6554,"children":6555},{"style":136},[6556],{"type":45,"value":1361},{"type":39,"tag":112,"props":6558,"children":6559},{"style":1266},[6560],{"type":45,"value":6561}," right",{"type":39,"tag":112,"props":6563,"children":6564},{"style":136},[6565],{"type":45,"value":1361},{"type":39,"tag":112,"props":6567,"children":6568},{"style":1266},[6569],{"type":45,"value":6570}," bottom",{"type":39,"tag":112,"props":6572,"children":6573},{"style":136},[6574],{"type":45,"value":1361},{"type":39,"tag":112,"props":6576,"children":6577},{"style":1266},[6578],{"type":45,"value":6579}," left",{"type":39,"tag":112,"props":6581,"children":6582},{"style":136},[6583],{"type":45,"value":1274},{"type":39,"tag":112,"props":6585,"children":6586},{"style":136},[6587],{"type":45,"value":2278},{"type":39,"tag":112,"props":6589,"children":6590},{"style":1266},[6591],{"type":45,"value":6592}," ctx",{"type":39,"tag":112,"props":6594,"children":6595},{"style":136},[6596],{"type":45,"value":1787},{"type":39,"tag":112,"props":6598,"children":6599},{"style":1266},[6600],{"type":45,"value":6527},{"type":39,"tag":112,"props":6602,"children":6603},{"style":136},[6604],{"type":45,"value":1298},{"type":39,"tag":112,"props":6606,"children":6607},{"class":114,"line":1927},[6608,6613,6617,6621,6625,6630,6634,6639,6643,6648,6653,6657,6662,6666,6671,6675,6679,6683,6688,6692,6696,6700,6705,6709,6714,6719],{"type":39,"tag":112,"props":6609,"children":6610},{"style":1266},[6611],{"type":45,"value":6612},"      document",{"type":39,"tag":112,"props":6614,"children":6615},{"style":136},[6616],{"type":45,"value":1787},{"type":39,"tag":112,"props":6618,"children":6619},{"style":1266},[6620],{"type":45,"value":3428},{"type":39,"tag":112,"props":6622,"children":6623},{"style":136},[6624],{"type":45,"value":1787},{"type":39,"tag":112,"props":6626,"children":6627},{"style":1266},[6628],{"type":45,"value":6629},"style",{"type":39,"tag":112,"props":6631,"children":6632},{"style":136},[6633],{"type":45,"value":1787},{"type":39,"tag":112,"props":6635,"children":6636},{"style":1266},[6637],{"type":45,"value":6638},"padding",{"type":39,"tag":112,"props":6640,"children":6641},{"style":136},[6642],{"type":45,"value":2278},{"type":39,"tag":112,"props":6644,"children":6645},{"style":136},[6646],{"type":45,"value":6647}," `${",{"type":39,"tag":112,"props":6649,"children":6650},{"style":1266},[6651],{"type":45,"value":6652},"top",{"type":39,"tag":112,"props":6654,"children":6655},{"style":136},[6656],{"type":45,"value":1872},{"type":39,"tag":112,"props":6658,"children":6659},{"style":125},[6660],{"type":45,"value":6661},"px ",{"type":39,"tag":112,"props":6663,"children":6664},{"style":136},[6665],{"type":45,"value":2008},{"type":39,"tag":112,"props":6667,"children":6668},{"style":1266},[6669],{"type":45,"value":6670},"right",{"type":39,"tag":112,"props":6672,"children":6673},{"style":136},[6674],{"type":45,"value":1872},{"type":39,"tag":112,"props":6676,"children":6677},{"style":125},[6678],{"type":45,"value":6661},{"type":39,"tag":112,"props":6680,"children":6681},{"style":136},[6682],{"type":45,"value":2008},{"type":39,"tag":112,"props":6684,"children":6685},{"style":1266},[6686],{"type":45,"value":6687},"bottom",{"type":39,"tag":112,"props":6689,"children":6690},{"style":136},[6691],{"type":45,"value":1872},{"type":39,"tag":112,"props":6693,"children":6694},{"style":125},[6695],{"type":45,"value":6661},{"type":39,"tag":112,"props":6697,"children":6698},{"style":136},[6699],{"type":45,"value":2008},{"type":39,"tag":112,"props":6701,"children":6702},{"style":1266},[6703],{"type":45,"value":6704},"left",{"type":39,"tag":112,"props":6706,"children":6707},{"style":136},[6708],{"type":45,"value":1872},{"type":39,"tag":112,"props":6710,"children":6711},{"style":125},[6712],{"type":45,"value":6713},"px",{"type":39,"tag":112,"props":6715,"children":6716},{"style":136},[6717],{"type":45,"value":6718},"`",{"type":39,"tag":112,"props":6720,"children":6721},{"style":136},[6722],{"type":45,"value":1298},{"type":39,"tag":112,"props":6724,"children":6725},{"class":114,"line":1940},[6726],{"type":39,"tag":112,"props":6727,"children":6728},{"style":136},[6729],{"type":45,"value":6730},"    }\n",{"type":39,"tag":112,"props":6732,"children":6733},{"class":114,"line":2042},[6734],{"type":39,"tag":112,"props":6735,"children":6736},{"style":136},[6737],{"type":45,"value":2090},{"type":39,"tag":112,"props":6739,"children":6740},{"class":114,"line":2084},[6741],{"type":39,"tag":112,"props":6742,"children":6743},{"emptyLinePlaceholder":1518},[6744],{"type":45,"value":1521},{"type":39,"tag":112,"props":6746,"children":6747},{"class":114,"line":2093},[6748,6752,6756,6760,6764,6768,6772,6776],{"type":39,"tag":112,"props":6749,"children":6750},{"style":1266},[6751],{"type":45,"value":6251},{"type":39,"tag":112,"props":6753,"children":6754},{"style":136},[6755],{"type":45,"value":1787},{"type":39,"tag":112,"props":6757,"children":6758},{"style":1549},[6759],{"type":45,"value":284},{"type":39,"tag":112,"props":6761,"children":6762},{"style":136},[6763],{"type":45,"value":2278},{"type":39,"tag":112,"props":6765,"children":6766},{"style":1528},[6767],{"type":45,"value":1891},{"type":39,"tag":112,"props":6769,"children":6770},{"style":136},[6771],{"type":45,"value":2251},{"type":39,"tag":112,"props":6773,"children":6774},{"style":1528},[6775],{"type":45,"value":1911},{"type":39,"tag":112,"props":6777,"children":6778},{"style":136},[6779],{"type":45,"value":1721},{"type":39,"tag":112,"props":6781,"children":6782},{"class":114,"line":2109},[6783,6787],{"type":39,"tag":112,"props":6784,"children":6785},{"style":1255},[6786],{"type":45,"value":4226},{"type":39,"tag":112,"props":6788,"children":6789},{"style":136},[6790],{"type":45,"value":6791}," {};\n",{"type":39,"tag":112,"props":6793,"children":6794},{"class":114,"line":2117},[6795],{"type":39,"tag":112,"props":6796,"children":6797},{"style":136},[6798],{"type":45,"value":2090},{"type":39,"tag":112,"props":6800,"children":6801},{"class":114,"line":2126},[6802],{"type":39,"tag":112,"props":6803,"children":6804},{"emptyLinePlaceholder":1518},[6805],{"type":45,"value":1521},{"type":39,"tag":112,"props":6807,"children":6808},{"class":114,"line":2146},[6809,6814,6818,6822,6826,6830,6834,6838,6842],{"type":39,"tag":112,"props":6810,"children":6811},{"style":1255},[6812],{"type":45,"value":6813},"  await",{"type":39,"tag":112,"props":6815,"children":6816},{"style":1266},[6817],{"type":45,"value":3905},{"type":39,"tag":112,"props":6819,"children":6820},{"style":136},[6821],{"type":45,"value":1787},{"type":39,"tag":112,"props":6823,"children":6824},{"style":1549},[6825],{"type":45,"value":2600},{"type":39,"tag":112,"props":6827,"children":6828},{"style":1564},[6829],{"type":45,"value":1556},{"type":39,"tag":112,"props":6831,"children":6832},{"style":136},[6833],{"type":45,"value":4205},{"type":39,"tag":112,"props":6835,"children":6836},{"style":1549},[6837],{"type":45,"value":3656},{"type":39,"tag":112,"props":6839,"children":6840},{"style":1564},[6841],{"type":45,"value":4214},{"type":39,"tag":112,"props":6843,"children":6844},{"style":136},[6845],{"type":45,"value":1298},{"type":39,"tag":112,"props":6847,"children":6848},{"class":114,"line":2168},[6849,6853,6857],{"type":39,"tag":112,"props":6850,"children":6851},{"style":1255},[6852],{"type":45,"value":1933},{"type":39,"tag":112,"props":6854,"children":6855},{"style":1266},[6856],{"type":45,"value":4009},{"type":39,"tag":112,"props":6858,"children":6859},{"style":136},[6860],{"type":45,"value":1298},{"type":39,"tag":112,"props":6862,"children":6863},{"class":114,"line":2198},[6864],{"type":39,"tag":112,"props":6865,"children":6866},{"style":136},[6867],{"type":45,"value":2830},{"type":39,"tag":112,"props":6869,"children":6870},{"class":114,"line":2219},[6871],{"type":39,"tag":112,"props":6872,"children":6873},{"emptyLinePlaceholder":1518},[6874],{"type":45,"value":1521},{"type":39,"tag":112,"props":6876,"children":6877},{"class":114,"line":2228},[6878,6882,6886,6891,6895,6899,6903,6907,6911,6915,6919,6923,6927],{"type":39,"tag":112,"props":6879,"children":6880},{"style":1528},[6881],{"type":45,"value":3804},{"type":39,"tag":112,"props":6883,"children":6884},{"style":1528},[6885],{"type":45,"value":3809},{"type":39,"tag":112,"props":6887,"children":6888},{"style":1549},[6889],{"type":45,"value":6890}," initStandaloneApp",{"type":39,"tag":112,"props":6892,"children":6893},{"style":136},[6894],{"type":45,"value":3819},{"type":39,"tag":112,"props":6896,"children":6897},{"style":119},[6898],{"type":45,"value":3824},{"type":39,"tag":112,"props":6900,"children":6901},{"style":136},[6902],{"type":45,"value":3221},{"type":39,"tag":112,"props":6904,"children":6905},{"style":119},[6906],{"type":45,"value":3833},{"type":39,"tag":112,"props":6908,"children":6909},{"style":136},[6910],{"type":45,"value":3221},{"type":39,"tag":112,"props":6912,"children":6913},{"style":119},[6914],{"type":45,"value":1792},{"type":39,"tag":112,"props":6916,"children":6917},{"style":136},[6918],{"type":45,"value":1361},{"type":39,"tag":112,"props":6920,"children":6921},{"style":119},[6922],{"type":45,"value":5607},{"type":39,"tag":112,"props":6924,"children":6925},{"style":136},[6926],{"type":45,"value":3855},{"type":39,"tag":112,"props":6928,"children":6929},{"style":136},[6930],{"type":45,"value":1721},{"type":39,"tag":112,"props":6932,"children":6933},{"class":114,"line":2237},[6934,6938,6942,6946,6950,6954,6958,6962,6966,6970,6974,6978,6982,6986,6990,6994],{"type":39,"tag":112,"props":6935,"children":6936},{"style":1255},[6937],{"type":45,"value":1933},{"type":39,"tag":112,"props":6939,"children":6940},{"style":1266},[6941],{"type":45,"value":4271},{"type":39,"tag":112,"props":6943,"children":6944},{"style":136},[6945],{"type":45,"value":1787},{"type":39,"tag":112,"props":6947,"children":6948},{"style":1549},[6949],{"type":45,"value":4280},{"type":39,"tag":112,"props":6951,"children":6952},{"style":1564},[6953],{"type":45,"value":1556},{"type":39,"tag":112,"props":6955,"children":6956},{"style":136},[6957],{"type":45,"value":4205},{"type":39,"tag":112,"props":6959,"children":6960},{"style":1549},[6961],{"type":45,"value":4293},{"type":39,"tag":112,"props":6963,"children":6964},{"style":1564},[6965],{"type":45,"value":1556},{"type":39,"tag":112,"props":6967,"children":6968},{"style":1266},[6969],{"type":45,"value":3758},{"type":39,"tag":112,"props":6971,"children":6972},{"style":136},[6973],{"type":45,"value":1787},{"type":39,"tag":112,"props":6975,"children":6976},{"style":1266},[6977],{"type":45,"value":4310},{"type":39,"tag":112,"props":6979,"children":6980},{"style":1564},[6981],{"type":45,"value":713},{"type":39,"tag":112,"props":6983,"children":6984},{"style":136},[6985],{"type":45,"value":1787},{"type":39,"tag":112,"props":6987,"children":6988},{"style":1266},[6989],{"type":45,"value":4323},{"type":39,"tag":112,"props":6991,"children":6992},{"style":1564},[6993],{"type":45,"value":713},{"type":39,"tag":112,"props":6995,"children":6996},{"style":136},[6997],{"type":45,"value":1298},{"type":39,"tag":112,"props":6999,"children":7000},{"class":114,"line":2262},[7001],{"type":39,"tag":112,"props":7002,"children":7003},{"style":136},[7004],{"type":45,"value":2830},{"type":39,"tag":112,"props":7006,"children":7007},{"class":114,"line":2305},[7008],{"type":39,"tag":112,"props":7009,"children":7010},{"emptyLinePlaceholder":1518},[7011],{"type":45,"value":1521},{"type":39,"tag":112,"props":7013,"children":7014},{"class":114,"line":2390},[7015,7019,7023,7027,7031],{"type":39,"tag":112,"props":7016,"children":7017},{"style":1528},[7018],{"type":45,"value":3804},{"type":39,"tag":112,"props":7020,"children":7021},{"style":1528},[7022],{"type":45,"value":3809},{"type":39,"tag":112,"props":7024,"children":7025},{"style":1549},[7026],{"type":45,"value":4368},{"type":39,"tag":112,"props":7028,"children":7029},{"style":136},[7030],{"type":45,"value":1797},{"type":39,"tag":112,"props":7032,"children":7033},{"style":136},[7034],{"type":45,"value":1721},{"type":39,"tag":112,"props":7036,"children":7037},{"class":114,"line":2412},[7038,7042,7046,7050,7055,7060,7064,7068,7073,7077,7081,7085,7089],{"type":39,"tag":112,"props":7039,"children":7040},{"style":1528},[7041],{"type":45,"value":2268},{"type":39,"tag":112,"props":7043,"children":7044},{"style":1266},[7045],{"type":45,"value":4009},{"type":39,"tag":112,"props":7047,"children":7048},{"style":136},[7049],{"type":45,"value":2278},{"type":39,"tag":112,"props":7051,"children":7052},{"style":1266},[7053],{"type":45,"value":7054}," isMcpApp",{"type":39,"tag":112,"props":7056,"children":7057},{"style":136},[7058],{"type":45,"value":7059}," ?",{"type":39,"tag":112,"props":7061,"children":7062},{"style":1255},[7063],{"type":45,"value":2283},{"type":39,"tag":112,"props":7065,"children":7066},{"style":1549},[7067],{"type":45,"value":5927},{"type":39,"tag":112,"props":7069,"children":7070},{"style":1564},[7071],{"type":45,"value":7072},"() ",{"type":39,"tag":112,"props":7074,"children":7075},{"style":136},[7076],{"type":45,"value":205},{"type":39,"tag":112,"props":7078,"children":7079},{"style":1255},[7080],{"type":45,"value":2283},{"type":39,"tag":112,"props":7082,"children":7083},{"style":1549},[7084],{"type":45,"value":6890},{"type":39,"tag":112,"props":7086,"children":7087},{"style":1564},[7088],{"type":45,"value":1797},{"type":39,"tag":112,"props":7090,"children":7091},{"style":136},[7092],{"type":45,"value":1298},{"type":39,"tag":112,"props":7094,"children":7095},{"class":114,"line":2425},[7096,7100,7104,7108,7112,7116],{"type":39,"tag":112,"props":7097,"children":7098},{"style":1549},[7099],{"type":45,"value":4415},{"type":39,"tag":112,"props":7101,"children":7102},{"style":1564},[7103],{"type":45,"value":1556},{"type":39,"tag":112,"props":7105,"children":7106},{"style":1266},[7107],{"type":45,"value":4424},{"type":39,"tag":112,"props":7109,"children":7110},{"style":1564},[7111],{"type":45,"value":713},{"type":39,"tag":112,"props":7113,"children":7114},{"style":136},[7115],{"type":45,"value":4433},{"type":39,"tag":112,"props":7117,"children":7118},{"style":1679},[7119],{"type":45,"value":7120}," \u002F\u002F Same rendering logic — no fork needed\n",{"type":39,"tag":112,"props":7122,"children":7123},{"class":114,"line":2514},[7124],{"type":39,"tag":112,"props":7125,"children":7126},{"style":136},[7127],{"type":45,"value":2830},{"type":39,"tag":112,"props":7129,"children":7130},{"class":114,"line":2530},[7131],{"type":39,"tag":112,"props":7132,"children":7133},{"emptyLinePlaceholder":1518},[7134],{"type":45,"value":1521},{"type":39,"tag":112,"props":7136,"children":7137},{"class":114,"line":2538},[7138,7142,7146,7150,7154,7158,7162,7166],{"type":39,"tag":112,"props":7139,"children":7140},{"style":1549},[7141],{"type":45,"value":4460},{"type":39,"tag":112,"props":7143,"children":7144},{"style":1266},[7145],{"type":45,"value":1797},{"type":39,"tag":112,"props":7147,"children":7148},{"style":136},[7149],{"type":45,"value":1787},{"type":39,"tag":112,"props":7151,"children":7152},{"style":1549},[7153],{"type":45,"value":4473},{"type":39,"tag":112,"props":7155,"children":7156},{"style":1266},[7157],{"type":45,"value":4478},{"type":39,"tag":112,"props":7159,"children":7160},{"style":136},[7161],{"type":45,"value":1787},{"type":39,"tag":112,"props":7163,"children":7164},{"style":1266},[7165],{"type":45,"value":4487},{"type":39,"tag":112,"props":7167,"children":7168},{"style":136},[7169],{"type":45,"value":1298},{"type":39,"tag":62,"props":7171,"children":7173},{"id":7172},"step-6-add-host-styling-integration-mcp-mode-only",[7174],{"type":45,"value":7175},"Step 6: Add Host Styling Integration (MCP Mode Only)",{"type":39,"tag":48,"props":7177,"children":7178},{},[7179],{"type":45,"value":7180},"When running as an MCP App, integrate with host styling for theme consistency. Use CSS variable fallbacks so the app looks correct in both modes.",{"type":39,"tag":48,"props":7182,"children":7183},{},[7184,7189],{"type":39,"tag":54,"props":7185,"children":7186},{},[7187],{"type":45,"value":7188},"Vanilla JS",{"type":45,"value":7190}," — use helper functions:",{"type":39,"tag":74,"props":7192,"children":7194},{"className":1243,"code":7193,"language":1245,"meta":83,"style":83},"import { applyDocumentTheme, applyHostStyleVariables, applyHostFonts } from \"@modelcontextprotocol\u002Fext-apps\";\n\napp.onhostcontextchanged = (ctx) => {\n  if (ctx.theme) applyDocumentTheme(ctx.theme);\n  if (ctx.styles?.variables) applyHostStyleVariables(ctx.styles.variables);\n  if (ctx.styles?.css?.fonts) applyHostFonts(ctx.styles.css.fonts);\n};\n",[7195],{"type":39,"tag":81,"props":7196,"children":7197},{"__ignoreMap":83},[7198,7253,7260,7300,7355,7426,7513],{"type":39,"tag":112,"props":7199,"children":7200},{"class":114,"line":115},[7201,7205,7209,7213,7217,7221,7225,7229,7233,7237,7241,7245,7249],{"type":39,"tag":112,"props":7202,"children":7203},{"style":1255},[7204],{"type":45,"value":1258},{"type":39,"tag":112,"props":7206,"children":7207},{"style":136},[7208],{"type":45,"value":1263},{"type":39,"tag":112,"props":7210,"children":7211},{"style":1266},[7212],{"type":45,"value":5800},{"type":39,"tag":112,"props":7214,"children":7215},{"style":136},[7216],{"type":45,"value":1361},{"type":39,"tag":112,"props":7218,"children":7219},{"style":1266},[7220],{"type":45,"value":5809},{"type":39,"tag":112,"props":7222,"children":7223},{"style":136},[7224],{"type":45,"value":1361},{"type":39,"tag":112,"props":7226,"children":7227},{"style":1266},[7228],{"type":45,"value":5818},{"type":39,"tag":112,"props":7230,"children":7231},{"style":136},[7232],{"type":45,"value":1274},{"type":39,"tag":112,"props":7234,"children":7235},{"style":1255},[7236],{"type":45,"value":1279},{"type":39,"tag":112,"props":7238,"children":7239},{"style":136},[7240],{"type":45,"value":139},{"type":39,"tag":112,"props":7242,"children":7243},{"style":125},[7244],{"type":45,"value":3673},{"type":39,"tag":112,"props":7246,"children":7247},{"style":136},[7248],{"type":45,"value":1293},{"type":39,"tag":112,"props":7250,"children":7251},{"style":136},[7252],{"type":45,"value":1298},{"type":39,"tag":112,"props":7254,"children":7255},{"class":114,"line":1181},[7256],{"type":39,"tag":112,"props":7257,"children":7258},{"emptyLinePlaceholder":1518},[7259],{"type":45,"value":1521},{"type":39,"tag":112,"props":7261,"children":7262},{"class":114,"line":1342},[7263,7268,7272,7276,7280,7284,7288,7292,7296],{"type":39,"tag":112,"props":7264,"children":7265},{"style":1266},[7266],{"type":45,"value":7267},"app",{"type":39,"tag":112,"props":7269,"children":7270},{"style":136},[7271],{"type":45,"value":1787},{"type":39,"tag":112,"props":7273,"children":7274},{"style":1549},[7275],{"type":45,"value":277},{"type":39,"tag":112,"props":7277,"children":7278},{"style":136},[7279],{"type":45,"value":2278},{"type":39,"tag":112,"props":7281,"children":7282},{"style":136},[7283],{"type":45,"value":1896},{"type":39,"tag":112,"props":7285,"children":7286},{"style":1899},[7287],{"type":45,"value":6272},{"type":39,"tag":112,"props":7289,"children":7290},{"style":136},[7291],{"type":45,"value":713},{"type":39,"tag":112,"props":7293,"children":7294},{"style":1528},[7295],{"type":45,"value":1911},{"type":39,"tag":112,"props":7297,"children":7298},{"style":136},[7299],{"type":45,"value":1721},{"type":39,"tag":112,"props":7301,"children":7302},{"class":114,"line":1403},[7303,7307,7311,7315,7319,7323,7327,7331,7335,7339,7343,7347,7351],{"type":39,"tag":112,"props":7304,"children":7305},{"style":1255},[7306],{"type":45,"value":3867},{"type":39,"tag":112,"props":7308,"children":7309},{"style":1564},[7310],{"type":45,"value":1896},{"type":39,"tag":112,"props":7312,"children":7313},{"style":1266},[7314],{"type":45,"value":6272},{"type":39,"tag":112,"props":7316,"children":7317},{"style":136},[7318],{"type":45,"value":1787},{"type":39,"tag":112,"props":7320,"children":7321},{"style":1266},[7322],{"type":45,"value":6309},{"type":39,"tag":112,"props":7324,"children":7325},{"style":1564},[7326],{"type":45,"value":1828},{"type":39,"tag":112,"props":7328,"children":7329},{"style":1549},[7330],{"type":45,"value":362},{"type":39,"tag":112,"props":7332,"children":7333},{"style":1564},[7334],{"type":45,"value":1556},{"type":39,"tag":112,"props":7336,"children":7337},{"style":1266},[7338],{"type":45,"value":6272},{"type":39,"tag":112,"props":7340,"children":7341},{"style":136},[7342],{"type":45,"value":1787},{"type":39,"tag":112,"props":7344,"children":7345},{"style":1266},[7346],{"type":45,"value":6309},{"type":39,"tag":112,"props":7348,"children":7349},{"style":1564},[7350],{"type":45,"value":713},{"type":39,"tag":112,"props":7352,"children":7353},{"style":136},[7354],{"type":45,"value":1298},{"type":39,"tag":112,"props":7356,"children":7357},{"class":114,"line":1438},[7358,7362,7366,7370,7374,7378,7382,7386,7390,7394,7398,7402,7406,7410,7414,7418,7422],{"type":39,"tag":112,"props":7359,"children":7360},{"style":1255},[7361],{"type":45,"value":3867},{"type":39,"tag":112,"props":7363,"children":7364},{"style":1564},[7365],{"type":45,"value":1896},{"type":39,"tag":112,"props":7367,"children":7368},{"style":1266},[7369],{"type":45,"value":6272},{"type":39,"tag":112,"props":7371,"children":7372},{"style":136},[7373],{"type":45,"value":1787},{"type":39,"tag":112,"props":7375,"children":7376},{"style":1266},[7377],{"type":45,"value":6365},{"type":39,"tag":112,"props":7379,"children":7380},{"style":136},[7381],{"type":45,"value":4873},{"type":39,"tag":112,"props":7383,"children":7384},{"style":1266},[7385],{"type":45,"value":6374},{"type":39,"tag":112,"props":7387,"children":7388},{"style":1564},[7389],{"type":45,"value":1828},{"type":39,"tag":112,"props":7391,"children":7392},{"style":1549},[7393],{"type":45,"value":369},{"type":39,"tag":112,"props":7395,"children":7396},{"style":1564},[7397],{"type":45,"value":1556},{"type":39,"tag":112,"props":7399,"children":7400},{"style":1266},[7401],{"type":45,"value":6272},{"type":39,"tag":112,"props":7403,"children":7404},{"style":136},[7405],{"type":45,"value":1787},{"type":39,"tag":112,"props":7407,"children":7408},{"style":1266},[7409],{"type":45,"value":6365},{"type":39,"tag":112,"props":7411,"children":7412},{"style":136},[7413],{"type":45,"value":1787},{"type":39,"tag":112,"props":7415,"children":7416},{"style":1266},[7417],{"type":45,"value":6374},{"type":39,"tag":112,"props":7419,"children":7420},{"style":1564},[7421],{"type":45,"value":713},{"type":39,"tag":112,"props":7423,"children":7424},{"style":136},[7425],{"type":45,"value":1298},{"type":39,"tag":112,"props":7427,"children":7428},{"class":114,"line":1472},[7429,7433,7437,7441,7445,7449,7453,7457,7461,7465,7469,7473,7477,7481,7485,7489,7493,7497,7501,7505,7509],{"type":39,"tag":112,"props":7430,"children":7431},{"style":1255},[7432],{"type":45,"value":3867},{"type":39,"tag":112,"props":7434,"children":7435},{"style":1564},[7436],{"type":45,"value":1896},{"type":39,"tag":112,"props":7438,"children":7439},{"style":1266},[7440],{"type":45,"value":6272},{"type":39,"tag":112,"props":7442,"children":7443},{"style":136},[7444],{"type":45,"value":1787},{"type":39,"tag":112,"props":7446,"children":7447},{"style":1266},[7448],{"type":45,"value":6365},{"type":39,"tag":112,"props":7450,"children":7451},{"style":136},[7452],{"type":45,"value":4873},{"type":39,"tag":112,"props":7454,"children":7455},{"style":1266},[7456],{"type":45,"value":6446},{"type":39,"tag":112,"props":7458,"children":7459},{"style":136},[7460],{"type":45,"value":4873},{"type":39,"tag":112,"props":7462,"children":7463},{"style":1266},[7464],{"type":45,"value":6455},{"type":39,"tag":112,"props":7466,"children":7467},{"style":1564},[7468],{"type":45,"value":1828},{"type":39,"tag":112,"props":7470,"children":7471},{"style":1549},[7472],{"type":45,"value":376},{"type":39,"tag":112,"props":7474,"children":7475},{"style":1564},[7476],{"type":45,"value":1556},{"type":39,"tag":112,"props":7478,"children":7479},{"style":1266},[7480],{"type":45,"value":6272},{"type":39,"tag":112,"props":7482,"children":7483},{"style":136},[7484],{"type":45,"value":1787},{"type":39,"tag":112,"props":7486,"children":7487},{"style":1266},[7488],{"type":45,"value":6365},{"type":39,"tag":112,"props":7490,"children":7491},{"style":136},[7492],{"type":45,"value":1787},{"type":39,"tag":112,"props":7494,"children":7495},{"style":1266},[7496],{"type":45,"value":6446},{"type":39,"tag":112,"props":7498,"children":7499},{"style":136},[7500],{"type":45,"value":1787},{"type":39,"tag":112,"props":7502,"children":7503},{"style":1266},[7504],{"type":45,"value":6455},{"type":39,"tag":112,"props":7506,"children":7507},{"style":1564},[7508],{"type":45,"value":713},{"type":39,"tag":112,"props":7510,"children":7511},{"style":136},[7512],{"type":45,"value":1298},{"type":39,"tag":112,"props":7514,"children":7515},{"class":114,"line":1514},[7516],{"type":39,"tag":112,"props":7517,"children":7518},{"style":136},[7519],{"type":45,"value":2511},{"type":39,"tag":48,"props":7521,"children":7522},{},[7523,7528],{"type":39,"tag":54,"props":7524,"children":7525},{},[7526],{"type":45,"value":7527},"React",{"type":45,"value":7529}," — use hooks:",{"type":39,"tag":74,"props":7531,"children":7533},{"className":1243,"code":7532,"language":1245,"meta":83,"style":83},"import { useApp, useHostStyles } from \"@modelcontextprotocol\u002Fext-apps\u002Freact\";\n\nconst { app } = useApp({ appInfo, capabilities, onAppCreated });\nuseHostStyles(app);\n",[7534],{"type":39,"tag":81,"props":7535,"children":7536},{"__ignoreMap":83},[7537,7587,7594,7665],{"type":39,"tag":112,"props":7538,"children":7539},{"class":114,"line":115},[7540,7544,7548,7553,7557,7562,7566,7570,7574,7579,7583],{"type":39,"tag":112,"props":7541,"children":7542},{"style":1255},[7543],{"type":45,"value":1258},{"type":39,"tag":112,"props":7545,"children":7546},{"style":136},[7547],{"type":45,"value":1263},{"type":39,"tag":112,"props":7549,"children":7550},{"style":1266},[7551],{"type":45,"value":7552}," useApp",{"type":39,"tag":112,"props":7554,"children":7555},{"style":136},[7556],{"type":45,"value":1361},{"type":39,"tag":112,"props":7558,"children":7559},{"style":1266},[7560],{"type":45,"value":7561}," useHostStyles",{"type":39,"tag":112,"props":7563,"children":7564},{"style":136},[7565],{"type":45,"value":1274},{"type":39,"tag":112,"props":7567,"children":7568},{"style":1255},[7569],{"type":45,"value":1279},{"type":39,"tag":112,"props":7571,"children":7572},{"style":136},[7573],{"type":45,"value":139},{"type":39,"tag":112,"props":7575,"children":7576},{"style":125},[7577],{"type":45,"value":7578},"@modelcontextprotocol\u002Fext-apps\u002Freact",{"type":39,"tag":112,"props":7580,"children":7581},{"style":136},[7582],{"type":45,"value":1293},{"type":39,"tag":112,"props":7584,"children":7585},{"style":136},[7586],{"type":45,"value":1298},{"type":39,"tag":112,"props":7588,"children":7589},{"class":114,"line":1181},[7590],{"type":39,"tag":112,"props":7591,"children":7592},{"emptyLinePlaceholder":1518},[7593],{"type":45,"value":1521},{"type":39,"tag":112,"props":7595,"children":7596},{"class":114,"line":1342},[7597,7601,7605,7610,7614,7618,7622,7626,7630,7635,7639,7644,7648,7653,7657,7661],{"type":39,"tag":112,"props":7598,"children":7599},{"style":1528},[7600],{"type":45,"value":1531},{"type":39,"tag":112,"props":7602,"children":7603},{"style":136},[7604],{"type":45,"value":1263},{"type":39,"tag":112,"props":7606,"children":7607},{"style":1266},[7608],{"type":45,"value":7609}," app ",{"type":39,"tag":112,"props":7611,"children":7612},{"style":136},[7613],{"type":45,"value":1872},{"type":39,"tag":112,"props":7615,"children":7616},{"style":136},[7617],{"type":45,"value":2278},{"type":39,"tag":112,"props":7619,"children":7620},{"style":1549},[7621],{"type":45,"value":7552},{"type":39,"tag":112,"props":7623,"children":7624},{"style":1266},[7625],{"type":45,"value":1556},{"type":39,"tag":112,"props":7627,"children":7628},{"style":136},[7629],{"type":45,"value":1561},{"type":39,"tag":112,"props":7631,"children":7632},{"style":1266},[7633],{"type":45,"value":7634}," appInfo",{"type":39,"tag":112,"props":7636,"children":7637},{"style":136},[7638],{"type":45,"value":1361},{"type":39,"tag":112,"props":7640,"children":7641},{"style":1266},[7642],{"type":45,"value":7643}," capabilities",{"type":39,"tag":112,"props":7645,"children":7646},{"style":136},[7647],{"type":45,"value":1361},{"type":39,"tag":112,"props":7649,"children":7650},{"style":1266},[7651],{"type":45,"value":7652}," onAppCreated ",{"type":39,"tag":112,"props":7654,"children":7655},{"style":136},[7656],{"type":45,"value":1872},{"type":39,"tag":112,"props":7658,"children":7659},{"style":1266},[7660],{"type":45,"value":713},{"type":39,"tag":112,"props":7662,"children":7663},{"style":136},[7664],{"type":45,"value":1298},{"type":39,"tag":112,"props":7666,"children":7667},{"class":114,"line":1403},[7668,7672,7677],{"type":39,"tag":112,"props":7669,"children":7670},{"style":1549},[7671],{"type":45,"value":420},{"type":39,"tag":112,"props":7673,"children":7674},{"style":1266},[7675],{"type":45,"value":7676},"(app)",{"type":39,"tag":112,"props":7678,"children":7679},{"style":136},[7680],{"type":45,"value":1298},{"type":39,"tag":48,"props":7682,"children":7683},{},[7684,7689,7691,7697],{"type":39,"tag":54,"props":7685,"children":7686},{},[7687],{"type":45,"value":7688},"Using variables in CSS",{"type":45,"value":7690}," — use ",{"type":39,"tag":81,"props":7692,"children":7694},{"className":7693},[],[7695],{"type":45,"value":7696},"var()",{"type":45,"value":7698}," with fallbacks so standalone mode still looks right:",{"type":39,"tag":74,"props":7700,"children":7703},{"className":7701,"code":7702,"language":6446,"meta":83,"style":83},"language-css shiki shiki-themes material-theme-lighter material-theme material-theme-palenight",".container {\n  background: var(--color-background-secondary, #f5f5f5);\n  color: var(--color-text-primary, #333);\n  font-family: var(--font-sans, system-ui);\n  border-radius: var(--border-radius-md, 8px);\n}\n",[7704],{"type":39,"tag":81,"props":7705,"children":7706},{"__ignoreMap":83},[7707,7723,7769,7811,7849,7887],{"type":39,"tag":112,"props":7708,"children":7709},{"class":114,"line":115},[7710,7714,7719],{"type":39,"tag":112,"props":7711,"children":7712},{"style":136},[7713],{"type":45,"value":1787},{"type":39,"tag":112,"props":7715,"children":7716},{"style":119},[7717],{"type":45,"value":7718},"container",{"type":39,"tag":112,"props":7720,"children":7721},{"style":136},[7722],{"type":45,"value":1721},{"type":39,"tag":112,"props":7724,"children":7725},{"class":114,"line":1181},[7726,7732,7736,7741,7745,7750,7754,7759,7764],{"type":39,"tag":112,"props":7727,"children":7729},{"style":7728},"--shiki-light:#8796B0;--shiki-default:#B2CCD6;--shiki-dark:#B2CCD6",[7730],{"type":45,"value":7731},"  background",{"type":39,"tag":112,"props":7733,"children":7734},{"style":136},[7735],{"type":45,"value":205},{"type":39,"tag":112,"props":7737,"children":7738},{"style":1549},[7739],{"type":45,"value":7740}," var",{"type":39,"tag":112,"props":7742,"children":7743},{"style":136},[7744],{"type":45,"value":1556},{"type":39,"tag":112,"props":7746,"children":7747},{"style":1266},[7748],{"type":45,"value":7749},"--color-background-secondary",{"type":39,"tag":112,"props":7751,"children":7752},{"style":136},[7753],{"type":45,"value":1361},{"type":39,"tag":112,"props":7755,"children":7756},{"style":136},[7757],{"type":45,"value":7758}," #",{"type":39,"tag":112,"props":7760,"children":7761},{"style":1266},[7762],{"type":45,"value":7763},"f5f5f5",{"type":39,"tag":112,"props":7765,"children":7766},{"style":136},[7767],{"type":45,"value":7768},");\n",{"type":39,"tag":112,"props":7770,"children":7771},{"class":114,"line":1342},[7772,7777,7781,7785,7789,7794,7798,7802,7807],{"type":39,"tag":112,"props":7773,"children":7774},{"style":7728},[7775],{"type":45,"value":7776},"  color",{"type":39,"tag":112,"props":7778,"children":7779},{"style":136},[7780],{"type":45,"value":205},{"type":39,"tag":112,"props":7782,"children":7783},{"style":1549},[7784],{"type":45,"value":7740},{"type":39,"tag":112,"props":7786,"children":7787},{"style":136},[7788],{"type":45,"value":1556},{"type":39,"tag":112,"props":7790,"children":7791},{"style":1266},[7792],{"type":45,"value":7793},"--color-text-primary",{"type":39,"tag":112,"props":7795,"children":7796},{"style":136},[7797],{"type":45,"value":1361},{"type":39,"tag":112,"props":7799,"children":7800},{"style":136},[7801],{"type":45,"value":7758},{"type":39,"tag":112,"props":7803,"children":7804},{"style":1266},[7805],{"type":45,"value":7806},"333",{"type":39,"tag":112,"props":7808,"children":7809},{"style":136},[7810],{"type":45,"value":7768},{"type":39,"tag":112,"props":7812,"children":7813},{"class":114,"line":1403},[7814,7819,7823,7827,7831,7836,7840,7845],{"type":39,"tag":112,"props":7815,"children":7816},{"style":7728},[7817],{"type":45,"value":7818},"  font-family",{"type":39,"tag":112,"props":7820,"children":7821},{"style":136},[7822],{"type":45,"value":205},{"type":39,"tag":112,"props":7824,"children":7825},{"style":1549},[7826],{"type":45,"value":7740},{"type":39,"tag":112,"props":7828,"children":7829},{"style":136},[7830],{"type":45,"value":1556},{"type":39,"tag":112,"props":7832,"children":7833},{"style":1266},[7834],{"type":45,"value":7835},"--font-sans",{"type":39,"tag":112,"props":7837,"children":7838},{"style":136},[7839],{"type":45,"value":1361},{"type":39,"tag":112,"props":7841,"children":7842},{"style":1266},[7843],{"type":45,"value":7844}," system-ui",{"type":39,"tag":112,"props":7846,"children":7847},{"style":136},[7848],{"type":45,"value":7768},{"type":39,"tag":112,"props":7850,"children":7851},{"class":114,"line":1438},[7852,7857,7861,7865,7869,7874,7878,7883],{"type":39,"tag":112,"props":7853,"children":7854},{"style":7728},[7855],{"type":45,"value":7856},"  border-radius",{"type":39,"tag":112,"props":7858,"children":7859},{"style":136},[7860],{"type":45,"value":205},{"type":39,"tag":112,"props":7862,"children":7863},{"style":1549},[7864],{"type":45,"value":7740},{"type":39,"tag":112,"props":7866,"children":7867},{"style":136},[7868],{"type":45,"value":1556},{"type":39,"tag":112,"props":7870,"children":7871},{"style":1266},[7872],{"type":45,"value":7873},"--border-radius-md",{"type":39,"tag":112,"props":7875,"children":7876},{"style":136},[7877],{"type":45,"value":1361},{"type":39,"tag":112,"props":7879,"children":7880},{"style":172},[7881],{"type":45,"value":7882}," 8px",{"type":39,"tag":112,"props":7884,"children":7885},{"style":136},[7886],{"type":45,"value":7768},{"type":39,"tag":112,"props":7888,"children":7889},{"class":114,"line":1472},[7890],{"type":39,"tag":112,"props":7891,"children":7892},{"style":136},[7893],{"type":45,"value":2830},{"type":39,"tag":48,"props":7895,"children":7896},{},[7897,7899,7905,7906,7912,7913,7919,7920,7925,7926,7932,7933,7939,7940,7946,7947,7953,7955,7960],{"type":45,"value":7898},"Key variable groups: ",{"type":39,"tag":81,"props":7900,"children":7902},{"className":7901},[],[7903],{"type":45,"value":7904},"--color-background-*",{"type":45,"value":264},{"type":39,"tag":81,"props":7907,"children":7909},{"className":7908},[],[7910],{"type":45,"value":7911},"--color-text-*",{"type":45,"value":264},{"type":39,"tag":81,"props":7914,"children":7916},{"className":7915},[],[7917],{"type":45,"value":7918},"--color-border-*",{"type":45,"value":264},{"type":39,"tag":81,"props":7921,"children":7923},{"className":7922},[],[7924],{"type":45,"value":7835},{"type":45,"value":264},{"type":39,"tag":81,"props":7927,"children":7929},{"className":7928},[],[7930],{"type":45,"value":7931},"--font-mono",{"type":45,"value":264},{"type":39,"tag":81,"props":7934,"children":7936},{"className":7935},[],[7937],{"type":45,"value":7938},"--font-text-*-size",{"type":45,"value":264},{"type":39,"tag":81,"props":7941,"children":7943},{"className":7942},[],[7944],{"type":45,"value":7945},"--font-heading-*-size",{"type":45,"value":264},{"type":39,"tag":81,"props":7948,"children":7950},{"className":7949},[],[7951],{"type":45,"value":7952},"--border-radius-*",{"type":45,"value":7954},". See ",{"type":39,"tag":81,"props":7956,"children":7958},{"className":7957},[],[7959],{"type":45,"value":328},{"type":45,"value":7961}," for the full list.",{"type":39,"tag":62,"props":7963,"children":7965},{"id":7964},"optional-enhancements",[7966],{"type":45,"value":7967},"Optional Enhancements",{"type":39,"tag":187,"props":7969,"children":7971},{"id":7970},"app-only-helper-tools",[7972],{"type":45,"value":7973},"App-Only Helper Tools",{"type":39,"tag":48,"props":7975,"children":7976},{},[7977],{"type":45,"value":7978},"For data the UI needs to poll or fetch that the model doesn't need to call directly:",{"type":39,"tag":74,"props":7980,"children":7982},{"className":1243,"code":7981,"language":1245,"meta":83,"style":83},"registerAppTool(server, \"refresh-data\", {\n  description: \"Fetches latest data for the UI\",\n  _meta: { ui: { resourceUri, visibility: [\"app\"] } },\n}, async () => {\n  const data = await getLatestData();\n  return { content: [{ type: \"text\", text: JSON.stringify(data) }] };\n});\n",[7983],{"type":39,"tag":81,"props":7984,"children":7985},{"__ignoreMap":83},[7986,8022,8050,8122,8145,8178,8275],{"type":39,"tag":112,"props":7987,"children":7988},{"class":114,"line":115},[7989,7993,7997,8001,8005,8010,8014,8018],{"type":39,"tag":112,"props":7990,"children":7991},{"style":1549},[7992],{"type":45,"value":307},{"type":39,"tag":112,"props":7994,"children":7995},{"style":1266},[7996],{"type":45,"value":1695},{"type":39,"tag":112,"props":7998,"children":7999},{"style":136},[8000],{"type":45,"value":1361},{"type":39,"tag":112,"props":8002,"children":8003},{"style":136},[8004],{"type":45,"value":139},{"type":39,"tag":112,"props":8006,"children":8007},{"style":125},[8008],{"type":45,"value":8009},"refresh-data",{"type":39,"tag":112,"props":8011,"children":8012},{"style":136},[8013],{"type":45,"value":1293},{"type":39,"tag":112,"props":8015,"children":8016},{"style":136},[8017],{"type":45,"value":1361},{"type":39,"tag":112,"props":8019,"children":8020},{"style":136},[8021],{"type":45,"value":1721},{"type":39,"tag":112,"props":8023,"children":8024},{"class":114,"line":1181},[8025,8029,8033,8037,8042,8046],{"type":39,"tag":112,"props":8026,"children":8027},{"style":1564},[8028],{"type":45,"value":1730},{"type":39,"tag":112,"props":8030,"children":8031},{"style":136},[8032],{"type":45,"value":205},{"type":39,"tag":112,"props":8034,"children":8035},{"style":136},[8036],{"type":45,"value":139},{"type":39,"tag":112,"props":8038,"children":8039},{"style":125},[8040],{"type":45,"value":8041},"Fetches latest data for the UI",{"type":39,"tag":112,"props":8043,"children":8044},{"style":136},[8045],{"type":45,"value":1293},{"type":39,"tag":112,"props":8047,"children":8048},{"style":136},[8049],{"type":45,"value":1752},{"type":39,"tag":112,"props":8051,"children":8052},{"class":114,"line":1342},[8053,8057,8061,8065,8069,8073,8077,8081,8085,8090,8094,8098,8102,8106,8110,8114,8118],{"type":39,"tag":112,"props":8054,"children":8055},{"style":1564},[8056],{"type":45,"value":1842},{"type":39,"tag":112,"props":8058,"children":8059},{"style":136},[8060],{"type":45,"value":205},{"type":39,"tag":112,"props":8062,"children":8063},{"style":136},[8064],{"type":45,"value":1263},{"type":39,"tag":112,"props":8066,"children":8067},{"style":1564},[8068],{"type":45,"value":1855},{"type":39,"tag":112,"props":8070,"children":8071},{"style":136},[8072],{"type":45,"value":205},{"type":39,"tag":112,"props":8074,"children":8075},{"style":136},[8076],{"type":45,"value":1263},{"type":39,"tag":112,"props":8078,"children":8079},{"style":1266},[8080],{"type":45,"value":2161},{"type":39,"tag":112,"props":8082,"children":8083},{"style":136},[8084],{"type":45,"value":1361},{"type":39,"tag":112,"props":8086,"children":8087},{"style":1564},[8088],{"type":45,"value":8089}," visibility",{"type":39,"tag":112,"props":8091,"children":8092},{"style":136},[8093],{"type":45,"value":205},{"type":39,"tag":112,"props":8095,"children":8096},{"style":1266},[8097],{"type":45,"value":1955},{"type":39,"tag":112,"props":8099,"children":8100},{"style":136},[8101],{"type":45,"value":1293},{"type":39,"tag":112,"props":8103,"children":8104},{"style":125},[8105],{"type":45,"value":7267},{"type":39,"tag":112,"props":8107,"children":8108},{"style":136},[8109],{"type":45,"value":1293},{"type":39,"tag":112,"props":8111,"children":8112},{"style":1266},[8113],{"type":45,"value":2506},{"type":39,"tag":112,"props":8115,"children":8116},{"style":136},[8117],{"type":45,"value":1872},{"type":39,"tag":112,"props":8119,"children":8120},{"style":136},[8121],{"type":45,"value":1877},{"type":39,"tag":112,"props":8123,"children":8124},{"class":114,"line":1403},[8125,8129,8133,8137,8141],{"type":39,"tag":112,"props":8126,"children":8127},{"style":136},[8128],{"type":45,"value":1886},{"type":39,"tag":112,"props":8130,"children":8131},{"style":1528},[8132],{"type":45,"value":1891},{"type":39,"tag":112,"props":8134,"children":8135},{"style":136},[8136],{"type":45,"value":2251},{"type":39,"tag":112,"props":8138,"children":8139},{"style":1528},[8140],{"type":45,"value":1911},{"type":39,"tag":112,"props":8142,"children":8143},{"style":136},[8144],{"type":45,"value":1721},{"type":39,"tag":112,"props":8146,"children":8147},{"class":114,"line":1438},[8148,8152,8157,8161,8165,8170,8174],{"type":39,"tag":112,"props":8149,"children":8150},{"style":1528},[8151],{"type":45,"value":2268},{"type":39,"tag":112,"props":8153,"children":8154},{"style":1266},[8155],{"type":45,"value":8156}," data",{"type":39,"tag":112,"props":8158,"children":8159},{"style":136},[8160],{"type":45,"value":2278},{"type":39,"tag":112,"props":8162,"children":8163},{"style":1255},[8164],{"type":45,"value":2283},{"type":39,"tag":112,"props":8166,"children":8167},{"style":1549},[8168],{"type":45,"value":8169}," getLatestData",{"type":39,"tag":112,"props":8171,"children":8172},{"style":1564},[8173],{"type":45,"value":1797},{"type":39,"tag":112,"props":8175,"children":8176},{"style":136},[8177],{"type":45,"value":1298},{"type":39,"tag":112,"props":8179,"children":8180},{"class":114,"line":1472},[8181,8185,8189,8193,8197,8201,8205,8209,8213,8217,8221,8225,8229,8233,8237,8241,8245,8250,8254,8259,8263,8267,8271],{"type":39,"tag":112,"props":8182,"children":8183},{"style":1255},[8184],{"type":45,"value":1933},{"type":39,"tag":112,"props":8186,"children":8187},{"style":136},[8188],{"type":45,"value":1263},{"type":39,"tag":112,"props":8190,"children":8191},{"style":1564},[8192],{"type":45,"value":3344},{"type":39,"tag":112,"props":8194,"children":8195},{"style":136},[8196],{"type":45,"value":205},{"type":39,"tag":112,"props":8198,"children":8199},{"style":1564},[8200],{"type":45,"value":1955},{"type":39,"tag":112,"props":8202,"children":8203},{"style":136},[8204],{"type":45,"value":1561},{"type":39,"tag":112,"props":8206,"children":8207},{"style":1564},[8208],{"type":45,"value":1964},{"type":39,"tag":112,"props":8210,"children":8211},{"style":136},[8212],{"type":45,"value":205},{"type":39,"tag":112,"props":8214,"children":8215},{"style":136},[8216],{"type":45,"value":139},{"type":39,"tag":112,"props":8218,"children":8219},{"style":125},[8220],{"type":45,"value":45},{"type":39,"tag":112,"props":8222,"children":8223},{"style":136},[8224],{"type":45,"value":1293},{"type":39,"tag":112,"props":8226,"children":8227},{"style":136},[8228],{"type":45,"value":1361},{"type":39,"tag":112,"props":8230,"children":8231},{"style":1564},[8232],{"type":45,"value":1989},{"type":39,"tag":112,"props":8234,"children":8235},{"style":136},[8236],{"type":45,"value":205},{"type":39,"tag":112,"props":8238,"children":8239},{"style":1266},[8240],{"type":45,"value":5678},{"type":39,"tag":112,"props":8242,"children":8243},{"style":136},[8244],{"type":45,"value":1787},{"type":39,"tag":112,"props":8246,"children":8247},{"style":1549},[8248],{"type":45,"value":8249},"stringify",{"type":39,"tag":112,"props":8251,"children":8252},{"style":1564},[8253],{"type":45,"value":1556},{"type":39,"tag":112,"props":8255,"children":8256},{"style":1266},[8257],{"type":45,"value":8258},"data",{"type":39,"tag":112,"props":8260,"children":8261},{"style":1564},[8262],{"type":45,"value":1828},{"type":39,"tag":112,"props":8264,"children":8265},{"style":136},[8266],{"type":45,"value":1872},{"type":39,"tag":112,"props":8268,"children":8269},{"style":1564},[8270],{"type":45,"value":2506},{"type":39,"tag":112,"props":8272,"children":8273},{"style":136},[8274],{"type":45,"value":2511},{"type":39,"tag":112,"props":8276,"children":8277},{"class":114,"line":1514},[8278,8282,8286],{"type":39,"tag":112,"props":8279,"children":8280},{"style":136},[8281],{"type":45,"value":1872},{"type":39,"tag":112,"props":8283,"children":8284},{"style":1266},[8285],{"type":45,"value":713},{"type":39,"tag":112,"props":8287,"children":8288},{"style":136},[8289],{"type":45,"value":1298},{"type":39,"tag":48,"props":8291,"children":8292},{},[8293,8295,8301],{"type":45,"value":8294},"The UI calls these via ",{"type":39,"tag":81,"props":8296,"children":8298},{"className":8297},[],[8299],{"type":45,"value":8300},"app.callServerTool(\"refresh-data\", {})",{"type":45,"value":1787},{"type":39,"tag":187,"props":8303,"children":8305},{"id":8304},"streaming-partial-input",[8306],{"type":45,"value":8307},"Streaming Partial Input",{"type":39,"tag":48,"props":8309,"children":8310},{},[8311,8313,8319],{"type":45,"value":8312},"For large tool inputs, use ",{"type":39,"tag":81,"props":8314,"children":8316},{"className":8315},[],[8317],{"type":45,"value":8318},"ontoolinputpartial",{"type":45,"value":8320}," to show progress during LLM generation:",{"type":39,"tag":74,"props":8322,"children":8324},{"className":1243,"code":8323,"language":1245,"meta":83,"style":83},"app.ontoolinputpartial = (params) => {\n  const args = params.arguments; \u002F\u002F Healed partial JSON - always valid\n  renderPreview(args);\n};\n\napp.ontoolinput = (params) => {\n  renderFull(params.arguments);\n};\n",[8325],{"type":39,"tag":81,"props":8326,"children":8327},{"__ignoreMap":83},[8328,8367,8403,8427,8434,8441,8480,8512],{"type":39,"tag":112,"props":8329,"children":8330},{"class":114,"line":115},[8331,8335,8339,8343,8347,8351,8355,8359,8363],{"type":39,"tag":112,"props":8332,"children":8333},{"style":1266},[8334],{"type":45,"value":7267},{"type":39,"tag":112,"props":8336,"children":8337},{"style":136},[8338],{"type":45,"value":1787},{"type":39,"tag":112,"props":8340,"children":8341},{"style":1549},[8342],{"type":45,"value":8318},{"type":39,"tag":112,"props":8344,"children":8345},{"style":136},[8346],{"type":45,"value":2278},{"type":39,"tag":112,"props":8348,"children":8349},{"style":136},[8350],{"type":45,"value":1896},{"type":39,"tag":112,"props":8352,"children":8353},{"style":1899},[8354],{"type":45,"value":4424},{"type":39,"tag":112,"props":8356,"children":8357},{"style":136},[8358],{"type":45,"value":713},{"type":39,"tag":112,"props":8360,"children":8361},{"style":1528},[8362],{"type":45,"value":1911},{"type":39,"tag":112,"props":8364,"children":8365},{"style":136},[8366],{"type":45,"value":1721},{"type":39,"tag":112,"props":8368,"children":8369},{"class":114,"line":1181},[8370,8374,8378,8382,8386,8390,8394,8398],{"type":39,"tag":112,"props":8371,"children":8372},{"style":1528},[8373],{"type":45,"value":2268},{"type":39,"tag":112,"props":8375,"children":8376},{"style":1266},[8377],{"type":45,"value":2069},{"type":39,"tag":112,"props":8379,"children":8380},{"style":136},[8381],{"type":45,"value":2278},{"type":39,"tag":112,"props":8383,"children":8384},{"style":1266},[8385],{"type":45,"value":4009},{"type":39,"tag":112,"props":8387,"children":8388},{"style":136},[8389],{"type":45,"value":1787},{"type":39,"tag":112,"props":8391,"children":8392},{"style":1266},[8393],{"type":45,"value":895},{"type":39,"tag":112,"props":8395,"children":8396},{"style":136},[8397],{"type":45,"value":4433},{"type":39,"tag":112,"props":8399,"children":8400},{"style":1679},[8401],{"type":45,"value":8402}," \u002F\u002F Healed partial JSON - always valid\n",{"type":39,"tag":112,"props":8404,"children":8405},{"class":114,"line":1342},[8406,8411,8415,8419,8423],{"type":39,"tag":112,"props":8407,"children":8408},{"style":1549},[8409],{"type":45,"value":8410},"  renderPreview",{"type":39,"tag":112,"props":8412,"children":8413},{"style":1564},[8414],{"type":45,"value":1556},{"type":39,"tag":112,"props":8416,"children":8417},{"style":1266},[8418],{"type":45,"value":1902},{"type":39,"tag":112,"props":8420,"children":8421},{"style":1564},[8422],{"type":45,"value":713},{"type":39,"tag":112,"props":8424,"children":8425},{"style":136},[8426],{"type":45,"value":1298},{"type":39,"tag":112,"props":8428,"children":8429},{"class":114,"line":1403},[8430],{"type":39,"tag":112,"props":8431,"children":8432},{"style":136},[8433],{"type":45,"value":2511},{"type":39,"tag":112,"props":8435,"children":8436},{"class":114,"line":1438},[8437],{"type":39,"tag":112,"props":8438,"children":8439},{"emptyLinePlaceholder":1518},[8440],{"type":45,"value":1521},{"type":39,"tag":112,"props":8442,"children":8443},{"class":114,"line":1472},[8444,8448,8452,8456,8460,8464,8468,8472,8476],{"type":39,"tag":112,"props":8445,"children":8446},{"style":1266},[8447],{"type":45,"value":7267},{"type":39,"tag":112,"props":8449,"children":8450},{"style":136},[8451],{"type":45,"value":1787},{"type":39,"tag":112,"props":8453,"children":8454},{"style":1549},[8455],{"type":45,"value":262},{"type":39,"tag":112,"props":8457,"children":8458},{"style":136},[8459],{"type":45,"value":2278},{"type":39,"tag":112,"props":8461,"children":8462},{"style":136},[8463],{"type":45,"value":1896},{"type":39,"tag":112,"props":8465,"children":8466},{"style":1899},[8467],{"type":45,"value":4424},{"type":39,"tag":112,"props":8469,"children":8470},{"style":136},[8471],{"type":45,"value":713},{"type":39,"tag":112,"props":8473,"children":8474},{"style":1528},[8475],{"type":45,"value":1911},{"type":39,"tag":112,"props":8477,"children":8478},{"style":136},[8479],{"type":45,"value":1721},{"type":39,"tag":112,"props":8481,"children":8482},{"class":114,"line":1514},[8483,8488,8492,8496,8500,8504,8508],{"type":39,"tag":112,"props":8484,"children":8485},{"style":1549},[8486],{"type":45,"value":8487},"  renderFull",{"type":39,"tag":112,"props":8489,"children":8490},{"style":1564},[8491],{"type":45,"value":1556},{"type":39,"tag":112,"props":8493,"children":8494},{"style":1266},[8495],{"type":45,"value":4424},{"type":39,"tag":112,"props":8497,"children":8498},{"style":136},[8499],{"type":45,"value":1787},{"type":39,"tag":112,"props":8501,"children":8502},{"style":1266},[8503],{"type":45,"value":895},{"type":39,"tag":112,"props":8505,"children":8506},{"style":1564},[8507],{"type":45,"value":713},{"type":39,"tag":112,"props":8509,"children":8510},{"style":136},[8511],{"type":45,"value":1298},{"type":39,"tag":112,"props":8513,"children":8514},{"class":114,"line":1524},[8515],{"type":39,"tag":112,"props":8516,"children":8517},{"style":136},[8518],{"type":45,"value":2511},{"type":39,"tag":187,"props":8520,"children":8522},{"id":8521},"fullscreen-mode",[8523],{"type":45,"value":8524},"Fullscreen Mode",{"type":39,"tag":74,"props":8526,"children":8528},{"className":1243,"code":8527,"language":1245,"meta":83,"style":83},"app.onhostcontextchanged = (ctx) => {\n  if (ctx.availableDisplayModes?.includes(\"fullscreen\")) {\n    fullscreenBtn.style.display = \"block\";\n  }\n  if (ctx.displayMode) {\n    container.classList.toggle(\"fullscreen\", ctx.displayMode === \"fullscreen\");\n  }\n};\n\nasync function toggleFullscreen() {\n  const newMode = currentMode === \"fullscreen\" ? \"inline\" : \"fullscreen\";\n  const result = await app.requestDisplayMode({ mode: newMode });\n  currentMode = result.mode;\n}\n",[8529],{"type":39,"tag":81,"props":8530,"children":8531},{"__ignoreMap":83},[8532,8571,8630,8676,8683,8715,8798,8805,8812,8819,8843,8918,8983,9012],{"type":39,"tag":112,"props":8533,"children":8534},{"class":114,"line":115},[8535,8539,8543,8547,8551,8555,8559,8563,8567],{"type":39,"tag":112,"props":8536,"children":8537},{"style":1266},[8538],{"type":45,"value":7267},{"type":39,"tag":112,"props":8540,"children":8541},{"style":136},[8542],{"type":45,"value":1787},{"type":39,"tag":112,"props":8544,"children":8545},{"style":1549},[8546],{"type":45,"value":277},{"type":39,"tag":112,"props":8548,"children":8549},{"style":136},[8550],{"type":45,"value":2278},{"type":39,"tag":112,"props":8552,"children":8553},{"style":136},[8554],{"type":45,"value":1896},{"type":39,"tag":112,"props":8556,"children":8557},{"style":1899},[8558],{"type":45,"value":6272},{"type":39,"tag":112,"props":8560,"children":8561},{"style":136},[8562],{"type":45,"value":713},{"type":39,"tag":112,"props":8564,"children":8565},{"style":1528},[8566],{"type":45,"value":1911},{"type":39,"tag":112,"props":8568,"children":8569},{"style":136},[8570],{"type":45,"value":1721},{"type":39,"tag":112,"props":8572,"children":8573},{"class":114,"line":1181},[8574,8578,8582,8586,8590,8595,8599,8604,8608,8612,8617,8621,8626],{"type":39,"tag":112,"props":8575,"children":8576},{"style":1255},[8577],{"type":45,"value":3867},{"type":39,"tag":112,"props":8579,"children":8580},{"style":1564},[8581],{"type":45,"value":1896},{"type":39,"tag":112,"props":8583,"children":8584},{"style":1266},[8585],{"type":45,"value":6272},{"type":39,"tag":112,"props":8587,"children":8588},{"style":136},[8589],{"type":45,"value":1787},{"type":39,"tag":112,"props":8591,"children":8592},{"style":1266},[8593],{"type":45,"value":8594},"availableDisplayModes",{"type":39,"tag":112,"props":8596,"children":8597},{"style":136},[8598],{"type":45,"value":4873},{"type":39,"tag":112,"props":8600,"children":8601},{"style":1549},[8602],{"type":45,"value":8603},"includes",{"type":39,"tag":112,"props":8605,"children":8606},{"style":1564},[8607],{"type":45,"value":1556},{"type":39,"tag":112,"props":8609,"children":8610},{"style":136},[8611],{"type":45,"value":1293},{"type":39,"tag":112,"props":8613,"children":8614},{"style":125},[8615],{"type":45,"value":8616},"fullscreen",{"type":39,"tag":112,"props":8618,"children":8619},{"style":136},[8620],{"type":45,"value":1293},{"type":39,"tag":112,"props":8622,"children":8623},{"style":1564},[8624],{"type":45,"value":8625},")) ",{"type":39,"tag":112,"props":8627,"children":8628},{"style":136},[8629],{"type":45,"value":2644},{"type":39,"tag":112,"props":8631,"children":8632},{"class":114,"line":1342},[8633,8638,8642,8646,8650,8655,8659,8663,8668,8672],{"type":39,"tag":112,"props":8634,"children":8635},{"style":1266},[8636],{"type":45,"value":8637},"    fullscreenBtn",{"type":39,"tag":112,"props":8639,"children":8640},{"style":136},[8641],{"type":45,"value":1787},{"type":39,"tag":112,"props":8643,"children":8644},{"style":1266},[8645],{"type":45,"value":6629},{"type":39,"tag":112,"props":8647,"children":8648},{"style":136},[8649],{"type":45,"value":1787},{"type":39,"tag":112,"props":8651,"children":8652},{"style":1266},[8653],{"type":45,"value":8654},"display",{"type":39,"tag":112,"props":8656,"children":8657},{"style":136},[8658],{"type":45,"value":2278},{"type":39,"tag":112,"props":8660,"children":8661},{"style":136},[8662],{"type":45,"value":139},{"type":39,"tag":112,"props":8664,"children":8665},{"style":125},[8666],{"type":45,"value":8667},"block",{"type":39,"tag":112,"props":8669,"children":8670},{"style":136},[8671],{"type":45,"value":1293},{"type":39,"tag":112,"props":8673,"children":8674},{"style":136},[8675],{"type":45,"value":1298},{"type":39,"tag":112,"props":8677,"children":8678},{"class":114,"line":1403},[8679],{"type":39,"tag":112,"props":8680,"children":8681},{"style":136},[8682],{"type":45,"value":2822},{"type":39,"tag":112,"props":8684,"children":8685},{"class":114,"line":1438},[8686,8690,8694,8698,8702,8707,8711],{"type":39,"tag":112,"props":8687,"children":8688},{"style":1255},[8689],{"type":45,"value":3867},{"type":39,"tag":112,"props":8691,"children":8692},{"style":1564},[8693],{"type":45,"value":1896},{"type":39,"tag":112,"props":8695,"children":8696},{"style":1266},[8697],{"type":45,"value":6272},{"type":39,"tag":112,"props":8699,"children":8700},{"style":136},[8701],{"type":45,"value":1787},{"type":39,"tag":112,"props":8703,"children":8704},{"style":1266},[8705],{"type":45,"value":8706},"displayMode",{"type":39,"tag":112,"props":8708,"children":8709},{"style":1564},[8710],{"type":45,"value":1828},{"type":39,"tag":112,"props":8712,"children":8713},{"style":136},[8714],{"type":45,"value":2644},{"type":39,"tag":112,"props":8716,"children":8717},{"class":114,"line":1472},[8718,8723,8727,8732,8736,8741,8745,8749,8753,8757,8761,8765,8769,8773,8778,8782,8786,8790,8794],{"type":39,"tag":112,"props":8719,"children":8720},{"style":1266},[8721],{"type":45,"value":8722},"    container",{"type":39,"tag":112,"props":8724,"children":8725},{"style":136},[8726],{"type":45,"value":1787},{"type":39,"tag":112,"props":8728,"children":8729},{"style":1266},[8730],{"type":45,"value":8731},"classList",{"type":39,"tag":112,"props":8733,"children":8734},{"style":136},[8735],{"type":45,"value":1787},{"type":39,"tag":112,"props":8737,"children":8738},{"style":1549},[8739],{"type":45,"value":8740},"toggle",{"type":39,"tag":112,"props":8742,"children":8743},{"style":1564},[8744],{"type":45,"value":1556},{"type":39,"tag":112,"props":8746,"children":8747},{"style":136},[8748],{"type":45,"value":1293},{"type":39,"tag":112,"props":8750,"children":8751},{"style":125},[8752],{"type":45,"value":8616},{"type":39,"tag":112,"props":8754,"children":8755},{"style":136},[8756],{"type":45,"value":1293},{"type":39,"tag":112,"props":8758,"children":8759},{"style":136},[8760],{"type":45,"value":1361},{"type":39,"tag":112,"props":8762,"children":8763},{"style":1266},[8764],{"type":45,"value":6592},{"type":39,"tag":112,"props":8766,"children":8767},{"style":136},[8768],{"type":45,"value":1787},{"type":39,"tag":112,"props":8770,"children":8771},{"style":1266},[8772],{"type":45,"value":8706},{"type":39,"tag":112,"props":8774,"children":8775},{"style":136},[8776],{"type":45,"value":8777}," ===",{"type":39,"tag":112,"props":8779,"children":8780},{"style":136},[8781],{"type":45,"value":139},{"type":39,"tag":112,"props":8783,"children":8784},{"style":125},[8785],{"type":45,"value":8616},{"type":39,"tag":112,"props":8787,"children":8788},{"style":136},[8789],{"type":45,"value":1293},{"type":39,"tag":112,"props":8791,"children":8792},{"style":1564},[8793],{"type":45,"value":713},{"type":39,"tag":112,"props":8795,"children":8796},{"style":136},[8797],{"type":45,"value":1298},{"type":39,"tag":112,"props":8799,"children":8800},{"class":114,"line":1514},[8801],{"type":39,"tag":112,"props":8802,"children":8803},{"style":136},[8804],{"type":45,"value":2822},{"type":39,"tag":112,"props":8806,"children":8807},{"class":114,"line":1524},[8808],{"type":39,"tag":112,"props":8809,"children":8810},{"style":136},[8811],{"type":45,"value":2511},{"type":39,"tag":112,"props":8813,"children":8814},{"class":114,"line":1625},[8815],{"type":39,"tag":112,"props":8816,"children":8817},{"emptyLinePlaceholder":1518},[8818],{"type":45,"value":1521},{"type":39,"tag":112,"props":8820,"children":8821},{"class":114,"line":1633},[8822,8826,8830,8835,8839],{"type":39,"tag":112,"props":8823,"children":8824},{"style":1528},[8825],{"type":45,"value":3804},{"type":39,"tag":112,"props":8827,"children":8828},{"style":1528},[8829],{"type":45,"value":3809},{"type":39,"tag":112,"props":8831,"children":8832},{"style":1549},[8833],{"type":45,"value":8834}," toggleFullscreen",{"type":39,"tag":112,"props":8836,"children":8837},{"style":136},[8838],{"type":45,"value":1797},{"type":39,"tag":112,"props":8840,"children":8841},{"style":136},[8842],{"type":45,"value":1721},{"type":39,"tag":112,"props":8844,"children":8845},{"class":114,"line":1667},[8846,8850,8855,8859,8864,8868,8872,8876,8880,8884,8888,8893,8897,8902,8906,8910,8914],{"type":39,"tag":112,"props":8847,"children":8848},{"style":1528},[8849],{"type":45,"value":2268},{"type":39,"tag":112,"props":8851,"children":8852},{"style":1266},[8853],{"type":45,"value":8854}," newMode",{"type":39,"tag":112,"props":8856,"children":8857},{"style":136},[8858],{"type":45,"value":2278},{"type":39,"tag":112,"props":8860,"children":8861},{"style":1266},[8862],{"type":45,"value":8863}," currentMode",{"type":39,"tag":112,"props":8865,"children":8866},{"style":136},[8867],{"type":45,"value":8777},{"type":39,"tag":112,"props":8869,"children":8870},{"style":136},[8871],{"type":45,"value":139},{"type":39,"tag":112,"props":8873,"children":8874},{"style":125},[8875],{"type":45,"value":8616},{"type":39,"tag":112,"props":8877,"children":8878},{"style":136},[8879],{"type":45,"value":1293},{"type":39,"tag":112,"props":8881,"children":8882},{"style":136},[8883],{"type":45,"value":7059},{"type":39,"tag":112,"props":8885,"children":8886},{"style":136},[8887],{"type":45,"value":139},{"type":39,"tag":112,"props":8889,"children":8890},{"style":125},[8891],{"type":45,"value":8892},"inline",{"type":39,"tag":112,"props":8894,"children":8895},{"style":136},[8896],{"type":45,"value":1293},{"type":39,"tag":112,"props":8898,"children":8899},{"style":136},[8900],{"type":45,"value":8901}," :",{"type":39,"tag":112,"props":8903,"children":8904},{"style":136},[8905],{"type":45,"value":139},{"type":39,"tag":112,"props":8907,"children":8908},{"style":125},[8909],{"type":45,"value":8616},{"type":39,"tag":112,"props":8911,"children":8912},{"style":136},[8913],{"type":45,"value":1293},{"type":39,"tag":112,"props":8915,"children":8916},{"style":136},[8917],{"type":45,"value":1298},{"type":39,"tag":112,"props":8919,"children":8920},{"class":114,"line":1675},[8921,8925,8929,8933,8937,8941,8945,8950,8954,8958,8963,8967,8971,8975,8979],{"type":39,"tag":112,"props":8922,"children":8923},{"style":1528},[8924],{"type":45,"value":2268},{"type":39,"tag":112,"props":8926,"children":8927},{"style":1266},[8928],{"type":45,"value":5299},{"type":39,"tag":112,"props":8930,"children":8931},{"style":136},[8932],{"type":45,"value":2278},{"type":39,"tag":112,"props":8934,"children":8935},{"style":1255},[8936],{"type":45,"value":2283},{"type":39,"tag":112,"props":8938,"children":8939},{"style":1266},[8940],{"type":45,"value":3905},{"type":39,"tag":112,"props":8942,"children":8943},{"style":136},[8944],{"type":45,"value":1787},{"type":39,"tag":112,"props":8946,"children":8947},{"style":1549},[8948],{"type":45,"value":8949},"requestDisplayMode",{"type":39,"tag":112,"props":8951,"children":8952},{"style":1564},[8953],{"type":45,"value":1556},{"type":39,"tag":112,"props":8955,"children":8956},{"style":136},[8957],{"type":45,"value":1561},{"type":39,"tag":112,"props":8959,"children":8960},{"style":1564},[8961],{"type":45,"value":8962}," mode",{"type":39,"tag":112,"props":8964,"children":8965},{"style":136},[8966],{"type":45,"value":205},{"type":39,"tag":112,"props":8968,"children":8969},{"style":1266},[8970],{"type":45,"value":8854},{"type":39,"tag":112,"props":8972,"children":8973},{"style":136},[8974],{"type":45,"value":1274},{"type":39,"tag":112,"props":8976,"children":8977},{"style":1564},[8978],{"type":45,"value":713},{"type":39,"tag":112,"props":8980,"children":8981},{"style":136},[8982],{"type":45,"value":1298},{"type":39,"tag":112,"props":8984,"children":8985},{"class":114,"line":1685},[8986,8991,8995,8999,9003,9008],{"type":39,"tag":112,"props":8987,"children":8988},{"style":1266},[8989],{"type":45,"value":8990},"  currentMode",{"type":39,"tag":112,"props":8992,"children":8993},{"style":136},[8994],{"type":45,"value":2278},{"type":39,"tag":112,"props":8996,"children":8997},{"style":1266},[8998],{"type":45,"value":5299},{"type":39,"tag":112,"props":9000,"children":9001},{"style":136},[9002],{"type":45,"value":1787},{"type":39,"tag":112,"props":9004,"children":9005},{"style":1266},[9006],{"type":45,"value":9007},"mode",{"type":39,"tag":112,"props":9009,"children":9010},{"style":136},[9011],{"type":45,"value":1298},{"type":39,"tag":112,"props":9013,"children":9014},{"class":114,"line":1724},[9015],{"type":39,"tag":112,"props":9016,"children":9017},{"style":136},[9018],{"type":45,"value":2830},{"type":39,"tag":187,"props":9020,"children":9022},{"id":9021},"text-fallback",[9023],{"type":45,"value":9024},"Text Fallback",{"type":39,"tag":48,"props":9026,"children":9027},{},[9028,9030,9036],{"type":45,"value":9029},"Always provide a ",{"type":39,"tag":81,"props":9031,"children":9033},{"className":9032},[],[9034],{"type":45,"value":9035},"content",{"type":45,"value":9037}," array for non-UI hosts:",{"type":39,"tag":74,"props":9039,"children":9041},{"className":1243,"code":9040,"language":1245,"meta":83,"style":83},"return {\n  content: [{ type: \"text\", text: \"Fallback description of the result\" }],\n  structuredContent: { \u002F* data for the UI *\u002F },\n};\n",[9042],{"type":39,"tag":81,"props":9043,"children":9044},{"__ignoreMap":83},[9045,9057,9134,9159],{"type":39,"tag":112,"props":9046,"children":9047},{"class":114,"line":115},[9048,9053],{"type":39,"tag":112,"props":9049,"children":9050},{"style":1255},[9051],{"type":45,"value":9052},"return",{"type":39,"tag":112,"props":9054,"children":9055},{"style":136},[9056],{"type":45,"value":1721},{"type":39,"tag":112,"props":9058,"children":9059},{"class":114,"line":1181},[9060,9065,9069,9073,9077,9081,9085,9089,9093,9097,9101,9105,9109,9113,9118,9122,9126,9130],{"type":39,"tag":112,"props":9061,"children":9062},{"style":1564},[9063],{"type":45,"value":9064},"  content",{"type":39,"tag":112,"props":9066,"children":9067},{"style":136},[9068],{"type":45,"value":205},{"type":39,"tag":112,"props":9070,"children":9071},{"style":1266},[9072],{"type":45,"value":1955},{"type":39,"tag":112,"props":9074,"children":9075},{"style":136},[9076],{"type":45,"value":1561},{"type":39,"tag":112,"props":9078,"children":9079},{"style":1564},[9080],{"type":45,"value":1964},{"type":39,"tag":112,"props":9082,"children":9083},{"style":136},[9084],{"type":45,"value":205},{"type":39,"tag":112,"props":9086,"children":9087},{"style":136},[9088],{"type":45,"value":139},{"type":39,"tag":112,"props":9090,"children":9091},{"style":125},[9092],{"type":45,"value":45},{"type":39,"tag":112,"props":9094,"children":9095},{"style":136},[9096],{"type":45,"value":1293},{"type":39,"tag":112,"props":9098,"children":9099},{"style":136},[9100],{"type":45,"value":1361},{"type":39,"tag":112,"props":9102,"children":9103},{"style":1564},[9104],{"type":45,"value":1989},{"type":39,"tag":112,"props":9106,"children":9107},{"style":136},[9108],{"type":45,"value":205},{"type":39,"tag":112,"props":9110,"children":9111},{"style":136},[9112],{"type":45,"value":139},{"type":39,"tag":112,"props":9114,"children":9115},{"style":125},[9116],{"type":45,"value":9117},"Fallback description of the result",{"type":39,"tag":112,"props":9119,"children":9120},{"style":136},[9121],{"type":45,"value":1293},{"type":39,"tag":112,"props":9123,"children":9124},{"style":136},[9125],{"type":45,"value":1274},{"type":39,"tag":112,"props":9127,"children":9128},{"style":1266},[9129],{"type":45,"value":2035},{"type":39,"tag":112,"props":9131,"children":9132},{"style":136},[9133],{"type":45,"value":1752},{"type":39,"tag":112,"props":9135,"children":9136},{"class":114,"line":1342},[9137,9142,9146,9150,9155],{"type":39,"tag":112,"props":9138,"children":9139},{"style":1564},[9140],{"type":45,"value":9141},"  structuredContent",{"type":39,"tag":112,"props":9143,"children":9144},{"style":136},[9145],{"type":45,"value":205},{"type":39,"tag":112,"props":9147,"children":9148},{"style":136},[9149],{"type":45,"value":1263},{"type":39,"tag":112,"props":9151,"children":9152},{"style":1679},[9153],{"type":45,"value":9154}," \u002F* data for the UI *\u002F",{"type":39,"tag":112,"props":9156,"children":9157},{"style":136},[9158],{"type":45,"value":1877},{"type":39,"tag":112,"props":9160,"children":9161},{"class":114,"line":1403},[9162],{"type":39,"tag":112,"props":9163,"children":9164},{"style":136},[9165],{"type":45,"value":2511},{"type":39,"tag":62,"props":9167,"children":9169},{"id":9168},"common-mistakes-to-avoid",[9170],{"type":45,"value":9171},"Common Mistakes to Avoid",{"type":39,"tag":766,"props":9173,"children":9174},{},[9175,9185,9214,9229,9251,9269,9292,9316,9334],{"type":39,"tag":770,"props":9176,"children":9177},{},[9178,9183],{"type":39,"tag":54,"props":9179,"children":9180},{},[9181],{"type":45,"value":9182},"Forgetting CSP declarations for external origins",{"type":45,"value":9184}," — fails silently in the sandboxed iframe",{"type":39,"tag":770,"props":9186,"children":9187},{},[9188,9207,9209],{"type":39,"tag":54,"props":9189,"children":9190},{},[9191,9193,9198,9199,9205],{"type":45,"value":9192},"Using ",{"type":39,"tag":81,"props":9194,"children":9196},{"className":9195},[],[9197],{"type":45,"value":5696},{"type":45,"value":882},{"type":39,"tag":81,"props":9200,"children":9202},{"className":9201},[],[9203],{"type":45,"value":9204},"sessionStorage",{"type":45,"value":9206}," in MCP mode",{"type":45,"value":9208}," — not available in sandboxed iframe; use fallbacks or pass via ",{"type":39,"tag":81,"props":9210,"children":9212},{"className":9211},[],[9213],{"type":45,"value":903},{"type":39,"tag":770,"props":9215,"children":9216},{},[9217,9227],{"type":39,"tag":54,"props":9218,"children":9219},{},[9220,9222],{"type":45,"value":9221},"Missing ",{"type":39,"tag":81,"props":9223,"children":9225},{"className":9224},[],[9226],{"type":45,"value":2847},{"type":45,"value":9228}," — external assets won't load in the iframe",{"type":39,"tag":770,"props":9230,"children":9231},{},[9232,9243,9245],{"type":39,"tag":54,"props":9233,"children":9234},{},[9235,9237],{"type":45,"value":9236},"Registering handlers after ",{"type":39,"tag":81,"props":9238,"children":9240},{"className":9239},[],[9241],{"type":45,"value":9242},"connect()",{"type":45,"value":9244}," — register ALL handlers BEFORE calling ",{"type":39,"tag":81,"props":9246,"children":9248},{"className":9247},[],[9249],{"type":45,"value":9250},"app.connect()",{"type":39,"tag":770,"props":9252,"children":9253},{},[9254,9259,9261,9267],{"type":39,"tag":54,"props":9255,"children":9256},{},[9257],{"type":45,"value":9258},"Hardcoding styles without fallbacks",{"type":45,"value":9260}," — use host CSS variables with ",{"type":39,"tag":81,"props":9262,"children":9264},{"className":9263},[],[9265],{"type":45,"value":9266},"var(..., fallback)",{"type":45,"value":9268}," so both modes look correct",{"type":39,"tag":770,"props":9270,"children":9271},{},[9272,9277,9279,9285,9287],{"type":39,"tag":54,"props":9273,"children":9274},{},[9275],{"type":45,"value":9276},"Not handling safe area insets",{"type":45,"value":9278}," — always apply ",{"type":39,"tag":81,"props":9280,"children":9282},{"className":9281},[],[9283],{"type":45,"value":9284},"ctx.safeAreaInsets",{"type":45,"value":9286}," in ",{"type":39,"tag":81,"props":9288,"children":9290},{"className":9289},[],[9291],{"type":45,"value":277},{"type":39,"tag":770,"props":9293,"children":9294},{},[9295,9307,9309,9314],{"type":39,"tag":54,"props":9296,"children":9297},{},[9298,9300,9305],{"type":45,"value":9299},"Forgetting text ",{"type":39,"tag":81,"props":9301,"children":9303},{"className":9302},[],[9304],{"type":45,"value":9035},{"type":45,"value":9306}," fallback",{"type":45,"value":9308}," — always provide ",{"type":39,"tag":81,"props":9310,"children":9312},{"className":9311},[],[9313],{"type":45,"value":9035},{"type":45,"value":9315}," array for non-UI hosts",{"type":39,"tag":770,"props":9317,"children":9318},{},[9319,9324,9326,9332],{"type":39,"tag":54,"props":9320,"children":9321},{},[9322],{"type":45,"value":9323},"Forgetting resource registration",{"type":45,"value":9325}," — the tool references a ",{"type":39,"tag":81,"props":9327,"children":9329},{"className":9328},[],[9330],{"type":45,"value":9331},"resourceUri",{"type":45,"value":9333}," that must have a matching resource",{"type":39,"tag":770,"props":9335,"children":9336},{},[9337,9342],{"type":39,"tag":54,"props":9338,"children":9339},{},[9340],{"type":45,"value":9341},"Replacing standalone logic instead of branching",{"type":45,"value":9343}," — keep the original data sources intact; add the MCP path alongside them",{"type":39,"tag":62,"props":9345,"children":9347},{"id":9346},"testing",[9348],{"type":45,"value":9349},"Testing",{"type":39,"tag":187,"props":9351,"children":9353},{"id":9352},"using-basic-host",[9354],{"type":45,"value":9355},"Using basic-host",{"type":39,"tag":48,"props":9357,"children":9358},{},[9359],{"type":45,"value":9360},"Test the MCP App mode with the basic-host example:",{"type":39,"tag":74,"props":9362,"children":9364},{"className":104,"code":9363,"language":106,"meta":83,"style":83},"# 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",[9365],{"type":39,"tag":81,"props":9366,"children":9367},{"__ignoreMap":83},[9368,9376,9412,9419,9427,9440,9452,9491],{"type":39,"tag":112,"props":9369,"children":9370},{"class":114,"line":115},[9371],{"type":39,"tag":112,"props":9372,"children":9373},{"style":1679},[9374],{"type":45,"value":9375},"# Terminal 1: Build and run your server\n",{"type":39,"tag":112,"props":9377,"children":9378},{"class":114,"line":1181},[9379,9383,9388,9393,9398,9403,9407],{"type":39,"tag":112,"props":9380,"children":9381},{"style":119},[9382],{"type":45,"value":154},{"type":39,"tag":112,"props":9384,"children":9385},{"style":125},[9386],{"type":45,"value":9387}," run",{"type":39,"tag":112,"props":9389,"children":9390},{"style":125},[9391],{"type":45,"value":9392}," build",{"type":39,"tag":112,"props":9394,"children":9395},{"style":136},[9396],{"type":45,"value":9397}," &&",{"type":39,"tag":112,"props":9399,"children":9400},{"style":119},[9401],{"type":45,"value":9402}," npm",{"type":39,"tag":112,"props":9404,"children":9405},{"style":125},[9406],{"type":45,"value":9387},{"type":39,"tag":112,"props":9408,"children":9409},{"style":125},[9410],{"type":45,"value":9411}," serve\n",{"type":39,"tag":112,"props":9413,"children":9414},{"class":114,"line":1342},[9415],{"type":39,"tag":112,"props":9416,"children":9417},{"emptyLinePlaceholder":1518},[9418],{"type":45,"value":1521},{"type":39,"tag":112,"props":9420,"children":9421},{"class":114,"line":1403},[9422],{"type":39,"tag":112,"props":9423,"children":9424},{"style":1679},[9425],{"type":45,"value":9426},"# Terminal 2: Run basic-host (from cloned repo)\n",{"type":39,"tag":112,"props":9428,"children":9429},{"class":114,"line":1438},[9430,9435],{"type":39,"tag":112,"props":9431,"children":9432},{"style":1549},[9433],{"type":45,"value":9434},"cd",{"type":39,"tag":112,"props":9436,"children":9437},{"style":125},[9438],{"type":45,"value":9439}," \u002Ftmp\u002Fmcp-ext-apps\u002Fexamples\u002Fbasic-host\n",{"type":39,"tag":112,"props":9441,"children":9442},{"class":114,"line":1472},[9443,9447],{"type":39,"tag":112,"props":9444,"children":9445},{"style":119},[9446],{"type":45,"value":154},{"type":39,"tag":112,"props":9448,"children":9449},{"style":125},[9450],{"type":45,"value":9451}," install\n",{"type":39,"tag":112,"props":9453,"children":9454},{"class":114,"line":1514},[9455,9460,9464,9469,9474,9478,9482,9486],{"type":39,"tag":112,"props":9456,"children":9457},{"style":1266},[9458],{"type":45,"value":9459},"SERVERS",{"type":39,"tag":112,"props":9461,"children":9462},{"style":136},[9463],{"type":45,"value":1541},{"type":39,"tag":112,"props":9465,"children":9466},{"style":136},[9467],{"type":45,"value":9468},"'",{"type":39,"tag":112,"props":9470,"children":9471},{"style":125},[9472],{"type":45,"value":9473},"[\"http:\u002F\u002Flocalhost:3001\u002Fmcp\"]",{"type":39,"tag":112,"props":9475,"children":9476},{"style":136},[9477],{"type":45,"value":9468},{"type":39,"tag":112,"props":9479,"children":9480},{"style":119},[9481],{"type":45,"value":9402},{"type":39,"tag":112,"props":9483,"children":9484},{"style":125},[9485],{"type":45,"value":9387},{"type":39,"tag":112,"props":9487,"children":9488},{"style":125},[9489],{"type":45,"value":9490}," start\n",{"type":39,"tag":112,"props":9492,"children":9493},{"class":114,"line":1524},[9494],{"type":39,"tag":112,"props":9495,"children":9496},{"style":1679},[9497],{"type":45,"value":9498},"# Open http:\u002F\u002Flocalhost:8080\n",{"type":39,"tag":48,"props":9500,"children":9501},{},[9502,9504,9509,9511,9517],{"type":45,"value":9503},"Configure ",{"type":39,"tag":81,"props":9505,"children":9507},{"className":9506},[],[9508],{"type":45,"value":9459},{"type":45,"value":9510}," with a JSON array of your server URLs (default: ",{"type":39,"tag":81,"props":9512,"children":9514},{"className":9513},[],[9515],{"type":45,"value":9516},"http:\u002F\u002Flocalhost:3001\u002Fmcp",{"type":45,"value":9518},").",{"type":39,"tag":187,"props":9520,"children":9522},{"id":9521},"verify",[9523],{"type":45,"value":9524},"Verify",{"type":39,"tag":766,"props":9526,"children":9527},{},[9528,9538,9548,9558,9563,9568],{"type":39,"tag":770,"props":9529,"children":9530},{},[9531,9536],{"type":39,"tag":54,"props":9532,"children":9533},{},[9534],{"type":45,"value":9535},"MCP mode",{"type":45,"value":9537},": App loads in basic-host without console errors",{"type":39,"tag":770,"props":9539,"children":9540},{},[9541,9546],{"type":39,"tag":81,"props":9542,"children":9544},{"className":9543},[],[9545],{"type":45,"value":262},{"type":45,"value":9547}," handler fires with tool arguments",{"type":39,"tag":770,"props":9549,"children":9550},{},[9551,9556],{"type":39,"tag":81,"props":9552,"children":9554},{"className":9553},[],[9555],{"type":45,"value":270},{"type":45,"value":9557}," handler fires with tool result",{"type":39,"tag":770,"props":9559,"children":9560},{},[9561],{"type":45,"value":9562},"Host styling (theme, fonts, colors) applies correctly",{"type":39,"tag":770,"props":9564,"children":9565},{},[9566],{"type":45,"value":9567},"External resources load (if CSP domains are configured)",{"type":39,"tag":770,"props":9569,"children":9570},{},[9571,9576],{"type":39,"tag":54,"props":9572,"children":9573},{},[9574],{"type":45,"value":9575},"Standalone mode",{"type":45,"value":9577},": App still works when opened directly in a browser",{"type":39,"tag":6629,"props":9579,"children":9580},{},[9581],{"type":45,"value":9582},"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":9584,"total":1836},[9585,9602,9617,9631,9647,9660,9674],{"slug":9586,"name":9586,"fn":9587,"description":9588,"org":9589,"tags":9590,"stars":23,"repoUrl":24,"updatedAt":9601},"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},[9591,9594,9595,9598],{"name":9592,"slug":9593,"type":16},"Frontend","frontend",{"name":14,"slug":15,"type":16},{"name":9596,"slug":9597,"type":16},"Plugin Development","plugin-development",{"name":9599,"slug":9600,"type":16},"UI Components","ui-components","2026-07-12T08:41:40.4008",{"slug":9603,"name":9603,"fn":9604,"description":9605,"org":9606,"tags":9607,"stars":23,"repoUrl":24,"updatedAt":9616},"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},[9608,9611,9614,9615],{"name":9609,"slug":9610,"type":16},"Agents","agents",{"name":9612,"slug":9613,"type":16},"Dashboards","dashboards",{"name":14,"slug":15,"type":16},{"name":9599,"slug":9600,"type":16},"2026-07-22T05:35:50.851108",{"slug":9618,"name":9618,"fn":9619,"description":9620,"org":9621,"tags":9622,"stars":23,"repoUrl":24,"updatedAt":9630},"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},[9623,9624,9627],{"name":9609,"slug":9610,"type":16},{"name":9625,"slug":9626,"type":16},"AWS","aws",{"name":9628,"slug":9629,"type":16},"Orchestration","orchestration","2026-07-25T05:56:34.255071",{"slug":9632,"name":9632,"fn":9633,"description":9634,"org":9635,"tags":9636,"stars":23,"repoUrl":24,"updatedAt":9646},"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},[9637,9640,9643],{"name":9638,"slug":9639,"type":16},"Best Practices","best-practices",{"name":9641,"slug":9642,"type":16},"Engineering","engineering",{"name":9644,"slug":9645,"type":16},"Operations","operations","2026-07-29T06:00:28.147989",{"slug":9648,"name":9648,"fn":9649,"description":9650,"org":9651,"tags":9652,"stars":23,"repoUrl":24,"updatedAt":9659},"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},[9653,9654,9657,9658],{"name":9609,"slug":9610,"type":16},{"name":9655,"slug":9656,"type":16},"CLI","cli",{"name":14,"slug":15,"type":16},{"name":9599,"slug":9600,"type":16},"2026-07-22T05:35:52.952289",{"slug":9661,"name":9661,"fn":9662,"description":9663,"org":9664,"tags":9665,"stars":23,"repoUrl":24,"updatedAt":9673},"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},[9666,9667,9670],{"name":9609,"slug":9610,"type":16},{"name":9668,"slug":9669,"type":16},"Memory","memory",{"name":9671,"slug":9672,"type":16},"Productivity","productivity","2026-07-12T08:37:03.180421",{"slug":9675,"name":9675,"fn":9676,"description":9677,"org":9678,"tags":9679,"stars":23,"repoUrl":24,"updatedAt":9686},"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},[9680,9681,9684,9685],{"name":9609,"slug":9610,"type":16},{"name":9682,"slug":9683,"type":16},"Automation","automation",{"name":9655,"slug":9656,"type":16},{"name":9596,"slug":9597,"type":16},"2026-07-12T08:36:49.784639",{"items":9688,"total":9864},[9689,9708,9729,9739,9752,9765,9775,9785,9806,9821,9836,9849],{"slug":9690,"name":9690,"fn":9691,"description":9692,"org":9693,"tags":9694,"stars":9705,"repoUrl":9706,"updatedAt":9707},"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},[9695,9696,9699,9702],{"name":9625,"slug":9626,"type":16},{"name":9697,"slug":9698,"type":16},"Debugging","debugging",{"name":9700,"slug":9701,"type":16},"Logs","logs",{"name":9703,"slug":9704,"type":16},"Observability","observability",9427,"https:\u002F\u002Fgithub.com\u002Fawslabs\u002Fmcp","2026-07-12T08:37:22.601527",{"slug":9709,"name":9710,"fn":9711,"description":9712,"org":9713,"tags":9714,"stars":9705,"repoUrl":9706,"updatedAt":9728},"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},[9715,9718,9719,9722,9725],{"name":9716,"slug":9717,"type":16},"Aurora","aurora",{"name":9625,"slug":9626,"type":16},{"name":9720,"slug":9721,"type":16},"Database","database",{"name":9723,"slug":9724,"type":16},"Serverless","serverless",{"name":9726,"slug":9727,"type":16},"SQL","sql","2026-07-12T08:36:45.053393",{"slug":9730,"name":9731,"fn":9711,"description":9712,"org":9732,"tags":9733,"stars":9705,"repoUrl":9706,"updatedAt":9738},"aurora-dsql","aurora dsql",{"slug":8,"name":9,"logoUrl":10,"githubOrg":11},[9734,9735,9736,9737],{"name":9625,"slug":9626,"type":16},{"name":9720,"slug":9721,"type":16},{"name":9723,"slug":9724,"type":16},{"name":9726,"slug":9727,"type":16},"2026-07-12T08:36:42.694299",{"slug":9740,"name":9741,"fn":9711,"description":9712,"org":9742,"tags":9743,"stars":9705,"repoUrl":9706,"updatedAt":9751},"aws-dsql","aws dsql",{"slug":8,"name":9,"logoUrl":10,"githubOrg":11},[9744,9745,9746,9749,9750],{"name":9625,"slug":9626,"type":16},{"name":9720,"slug":9721,"type":16},{"name":9747,"slug":9748,"type":16},"Migration","migration",{"name":9723,"slug":9724,"type":16},{"name":9726,"slug":9727,"type":16},"2026-07-12T08:36:38.584057",{"slug":9753,"name":9754,"fn":9711,"description":9712,"org":9755,"tags":9756,"stars":9705,"repoUrl":9706,"updatedAt":9764},"distributed-postgres","distributed postgres",{"slug":8,"name":9,"logoUrl":10,"githubOrg":11},[9757,9758,9759,9762,9763],{"name":9625,"slug":9626,"type":16},{"name":9720,"slug":9721,"type":16},{"name":9760,"slug":9761,"type":16},"PostgreSQL","postgresql",{"name":9723,"slug":9724,"type":16},{"name":9726,"slug":9727,"type":16},"2026-07-12T08:36:46.530743",{"slug":9766,"name":9767,"fn":9711,"description":9712,"org":9768,"tags":9769,"stars":9705,"repoUrl":9706,"updatedAt":9774},"distributed-sql","distributed sql",{"slug":8,"name":9,"logoUrl":10,"githubOrg":11},[9770,9771,9772,9773],{"name":9625,"slug":9626,"type":16},{"name":9720,"slug":9721,"type":16},{"name":9723,"slug":9724,"type":16},{"name":9726,"slug":9727,"type":16},"2026-07-12T08:36:48.104182",{"slug":9776,"name":9776,"fn":9711,"description":9712,"org":9777,"tags":9778,"stars":9705,"repoUrl":9706,"updatedAt":9784},"dsql",{"slug":8,"name":9,"logoUrl":10,"githubOrg":11},[9779,9780,9781,9782,9783],{"name":9625,"slug":9626,"type":16},{"name":9720,"slug":9721,"type":16},{"name":9747,"slug":9748,"type":16},{"name":9723,"slug":9724,"type":16},{"name":9726,"slug":9727,"type":16},"2026-07-12T08:36:36.374512",{"slug":9786,"name":9786,"fn":9787,"description":9788,"org":9789,"tags":9790,"stars":9803,"repoUrl":9804,"updatedAt":9805},"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},[9791,9794,9797,9800],{"name":9792,"slug":9793,"type":16},"Accounting","accounting",{"name":9795,"slug":9796,"type":16},"Analytics","analytics",{"name":9798,"slug":9799,"type":16},"Cost Optimization","cost-optimization",{"name":9801,"slug":9802,"type":16},"Finance","finance",3176,"https:\u002F\u002Fgithub.com\u002Fawslabs\u002Fagentcore-samples","2026-07-12T08:40:03.29555",{"slug":9807,"name":9807,"fn":9808,"description":9809,"org":9810,"tags":9811,"stars":9803,"repoUrl":9804,"updatedAt":9820},"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},[9812,9813,9814,9817],{"name":9625,"slug":9626,"type":16},{"name":9801,"slug":9802,"type":16},{"name":9815,"slug":9816,"type":16},"Management","management",{"name":9818,"slug":9819,"type":16},"Reporting","reporting","2026-07-12T08:40:02.066471",{"slug":9822,"name":9822,"fn":9823,"description":9824,"org":9825,"tags":9826,"stars":9803,"repoUrl":9804,"updatedAt":9835},"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},[9827,9828,9829,9832],{"name":9795,"slug":9796,"type":16},{"name":9801,"slug":9802,"type":16},{"name":9830,"slug":9831,"type":16},"Financial Statements","financial-statements",{"name":9833,"slug":9834,"type":16},"Variance Analysis","variance-analysis","2026-07-12T08:40:00.79141",{"slug":9837,"name":9837,"fn":9838,"description":9839,"org":9840,"tags":9841,"stars":9803,"repoUrl":9804,"updatedAt":9848},"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},[9842,9843,9846],{"name":9682,"slug":9683,"type":16},{"name":9844,"slug":9845,"type":16},"Documents","documents",{"name":9847,"slug":9837,"type":16},"PDF","2026-07-12T08:41:44.135656",{"slug":9850,"name":9850,"fn":9851,"description":9852,"org":9853,"tags":9854,"stars":9803,"repoUrl":9804,"updatedAt":9863},"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},[9855,9856,9859,9860],{"name":9792,"slug":9793,"type":16},{"name":9857,"slug":9858,"type":16},"Data Analysis","data-analysis",{"name":9801,"slug":9802,"type":16},{"name":9861,"slug":9862,"type":16},"KPI","kpi","2026-07-12T08:39:59.54971",150]