[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill-aws-labs-add-app-to-server":3,"mdc--35gnit-key":36,"related-org-aws-labs-add-app-to-server":6852,"related-repo-aws-labs-add-app-to-server":7034},{"slug":4,"name":4,"fn":5,"description":6,"org":7,"tags":12,"stars":26,"repoUrl":27,"updatedAt":28,"license":29,"forks":30,"topics":31,"repo":32,"sourceUrl":34,"mdContent":35},"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},"aws-labs","AWS Labs","https:\u002F\u002Fpexgzepcugksgbtrxkhf.supabase.co\u002Fstorage\u002Fv1\u002Fobject\u002Fpublic\u002Forg-logos\u002Faws-labs.png","awslabs",[13,17,20,23],{"name":14,"slug":15,"type":16},"MCP","mcp","tag",{"name":18,"slug":19,"type":16},"Plugin Development","plugin-development",{"name":21,"slug":22,"type":16},"UI Components","ui-components",{"name":24,"slug":25,"type":16},"Frontend","frontend",871,"https:\u002F\u002Fgithub.com\u002Fawslabs\u002Fcli-agent-orchestrator","2026-07-12T08:41:40.4008",null,164,[],{"repoUrl":27,"stars":26,"forks":30,"topics":33,"description":29},[],"https:\u002F\u002Fgithub.com\u002Fawslabs\u002Fcli-agent-orchestrator\u002Ftree\u002FHEAD\u002Fskills\u002Fvendor\u002Fext-apps\u002Fadd-app-to-server","---\nname: add-app-to-server\ndescription: 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.\n---\n\n# Add UI to MCP Server\n\nEnrich an existing MCP server's tools with interactive UIs using the MCP Apps SDK (`@modelcontextprotocol\u002Fext-apps`).\n\n## How It Works\n\nExisting tools get paired with HTML resources that render inline in the host's conversation. The tool continues to work for text-only clients — UI is an enhancement, not a replacement. Each tool that benefits from UI gets linked to a resource via `_meta.ui.resourceUri`, and the host renders that resource in a sandboxed iframe when the tool is called.\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`, `getUiCapability`, 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### Key Examples (Mixed Tool Patterns)\n\nThese examples demonstrate servers with both App-enhanced and plain tools — the exact pattern you're adding:\n\n| Example | Pattern |\n|---------|---------|\n| `examples\u002Fmap-server\u002F` | `show-map` (App tool) + `geocode` (plain tool) |\n| `examples\u002Fpdf-server\u002F` | `display_pdf` (App tool) + `list_pdfs` (plain tool) + `read_pdf_bytes` (app-only tool) |\n| `examples\u002Fsystem-monitor-server\u002F` | `get-system-info` (App tool) + `poll-system-stats` (app-only polling tool) |\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## Step 1: Analyze Existing Tools\n\nBefore writing any code, analyze the server's existing tools and determine which ones benefit from UI.\n\n1. Read the server source and list all registered tools\n2. For each tool, assess whether it would benefit from UI (returns data that could be visualized, involves user interaction, etc.) vs. is fine as text-only (simple lookups, utility functions)\n3. Identify tools that could become **app-only helpers** (data the UI needs to poll\u002Ffetch but the model doesn't need to call directly)\n4. Present the analysis to the user and confirm which tools to enhance\n\n### Decision Framework\n\n| Tool output type | UI benefit | Example |\n|---|---|---|\n| Structured data \u002F lists \u002F tables | High — interactive table, search, filtering | List of items, search results |\n| Metrics \u002F numbers over time | High — charts, gauges, dashboards | System stats, analytics |\n| Media \u002F rich content | High — viewer, player, renderer | Maps, PDFs, images, video |\n| Simple text \u002F confirmations | Low — text is fine | \"File created\", \"Setting updated\" |\n| Data for other tools | Consider app-only | Polling endpoints, chunk loaders |\n\n## Step 2: Add Dependencies\n\n```bash\nnpm install @modelcontextprotocol\u002Fext-apps\nnpm install -D vite vite-plugin-singlefile\n```\n\nPlus framework-specific dependencies if needed (e.g., `react`, `react-dom`, `@vitejs\u002Fplugin-react` for React).\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## Step 3: Set Up the Build Pipeline\n\n### Vite Configuration\n\nCreate `vite.config.ts` with `vite-plugin-singlefile` to bundle the UI into a single HTML file:\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\", \u002F\u002F one per UI, or one shared entry\n    },\n  },\n});\n```\n\n### HTML Entry Point\n\nCreate `mcp-app.html` (or one per distinct UI if tools need different views):\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\u002Fmcp-app.ts\">\u003C\u002Fscript>\n  \u003C\u002Fbody>\n\u003C\u002Fhtml>\n```\n\n### Build Scripts\n\nAdd build scripts to `package.json`. The UI must be built before the server code bundles it:\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: Convert Tools to App Tools\n\nTransform plain MCP tools into App tools with UI.\n\n**Before** (plain MCP tool):\n```typescript\nserver.tool(\"my-tool\", { param: z.string() }, async (args) => {\n  const data = await fetchData(args.param);\n  return { content: [{ type: \"text\", text: JSON.stringify(data) }] };\n});\n```\n\n**After** (App tool with UI):\n```typescript\nimport { registerAppTool, registerAppResource, RESOURCE_MIME_TYPE } from \"@modelcontextprotocol\u002Fext-apps\u002Fserver\";\n\nconst resourceUri = \"ui:\u002F\u002Fmy-tool\u002Fmcp-app.html\";\n\nregisterAppTool(server, \"my-tool\", {\n  description: \"Shows data with an interactive UI\",\n  inputSchema: { param: z.string() },\n  _meta: { ui: { resourceUri } },\n}, async (args) => {\n  const data = await fetchData(args.param);\n  return {\n    content: [{ type: \"text\", text: JSON.stringify(data) }],   \u002F\u002F text fallback for non-UI hosts\n    structuredContent: { data },                                 \u002F\u002F structured data for the UI\n  };\n});\n```\n\nKey guidance:\n- **Always keep the `content` array** with a text fallback for text-only clients\n- Add `structuredContent` for data the UI needs to render\n- Link the tool to its resource via `_meta.ui.resourceUri`\n- Leave tools that don't benefit from UI unchanged — they stay as plain tools\n\n## Step 5: Register Resources\n\nRegister the HTML resource so the host can fetch it:\n\n```typescript\nimport fs from \"node:fs\u002Fpromises\";\nimport path from \"node:path\";\n\nconst resourceUri = \"ui:\u002F\u002Fmy-tool\u002Fmcp-app.html\";\n\nregisterAppResource(server, {\n  uri: resourceUri,\n  name: \"My Tool UI\",\n  mimeType: RESOURCE_MIME_TYPE,\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\nIf multiple tools share the same UI, they can reference the same `resourceUri` and the same resource registration.\n\n## Step 6: Build the UI\n\n### Handler Registration\n\nRegister ALL handlers BEFORE calling `app.connect()`:\n\n```typescript\nimport { App, PostMessageTransport, applyDocumentTheme, applyHostStyleVariables, applyHostFonts } from \"@modelcontextprotocol\u002Fext-apps\";\n\nconst app = new App({ name: \"My App\", version: \"1.0.0\" });\n\napp.ontoolinput = (params) => {\n  \u002F\u002F Render the UI using params.arguments and\u002For params.structuredContent\n};\n\napp.ontoolresult = (result) => {\n  \u002F\u002F Update UI with final tool result\n};\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  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\napp.onteardown = async () => {\n  return {};\n};\n\nawait app.connect(new PostMessageTransport());\n```\n\n### Host Styling\n\nUse host CSS variables for theme integration:\n\n```css\n.container {\n  background: var(--color-background-secondary);\n  color: var(--color-text-primary);\n  font-family: var(--font-sans);\n  border-radius: var(--border-radius-md);\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\nFor React apps, use the `useApp` and `useHostStyles` hooks instead — see `basic-server-react\u002F` for the pattern.\n\n## Optional Enhancements\n\n### App-Only Helper Tools\n\nTools the UI calls but the model doesn't need to invoke directly (polling, pagination, chunk loading):\n\n```typescript\nregisterAppTool(server, \"poll-data\", {\n  description: \"Polls 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(\"poll-data\", {})`.\n\n### CSP Configuration\n\nIf the UI needs to load external resources (fonts, APIs, CDNs), declare the domains:\n\n```typescript\nregisterAppResource(server, {\n  uri: resourceUri,\n  name: \"My Tool UI\",\n  mimeType: RESOURCE_MIME_TYPE,\n  _meta: {\n    ui: {\n      connectDomains: [\"api.example.com\"],      \u002F\u002F fetch\u002FXHR targets\n      resourceDomains: [\"cdn.example.com\"],      \u002F\u002F scripts, styles, images\n      frameDomains: [\"embed.example.com\"],        \u002F\u002F nested iframes\n    },\n  },\n}, async () => { \u002F* ... *\u002F });\n```\n\n### Streaming Partial Input\n\nFor large tool inputs, show progress during LLM generation:\n\n```typescript\napp.ontoolinputpartial = (params) => {\n  const args = params.arguments; \u002F\u002F Healed partial JSON - always valid\n  \u002F\u002F Render preview with partial data\n};\n\napp.ontoolinput = (params) => {\n  \u002F\u002F Final complete input - switch to full render\n};\n```\n\n### Graceful Degradation with `getUiCapability()`\n\nConditionally register App tools only when the client supports UI, falling back to text-only tools:\n\n```typescript\nimport { getUiCapability, registerAppTool, RESOURCE_MIME_TYPE } from \"@modelcontextprotocol\u002Fext-apps\u002Fserver\";\n\nserver.server.oninitialized = () => {\n  const clientCapabilities = server.server.getClientCapabilities();\n  const uiCap = getUiCapability(clientCapabilities);\n\n  if (uiCap?.mimeTypes?.includes(RESOURCE_MIME_TYPE)) {\n    \u002F\u002F Client supports UI — register App tool\n    registerAppTool(server, \"my-tool\", {\n      description: \"Shows data with interactive UI\",\n      _meta: { ui: { resourceUri } },\n    }, appToolHandler);\n  } else {\n    \u002F\u002F Text-only client — register plain tool\n    server.tool(\"my-tool\", \"Shows data\", { param: z.string() }, plainToolHandler);\n  }\n};\n```\n\n### Fullscreen Mode\n\nAllow the UI to expand to fullscreen:\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## Common Mistakes to Avoid\n\n1. **Forgetting text `content` fallback** — Always include `content` array with text for non-UI hosts\n2. **Registering handlers after `connect()`** — Register ALL handlers BEFORE calling `app.connect()`\n3. **Missing `vite-plugin-singlefile`** — Without it, assets won't load in the sandboxed iframe\n4. **Forgetting resource registration** — The tool references a `resourceUri` that must have a matching resource\n5. **Hardcoding styles** — Use host CSS variables (`var(--color-*)`) for theme integration\n6. **Not handling safe area insets** — Always apply `ctx.safeAreaInsets` in `onhostcontextchanged`\n\n## Testing\n\n### Using basic-host\n\nTest the enhanced server 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. Plain tools still work and return text output\n2. App tools render their UI in the iframe\n3. `ontoolinput` handler fires with tool arguments\n4. `ontoolresult` handler fires with tool result\n5. Host styling (theme, fonts, colors) applies correctly\n",{"data":37,"body":38},{"name":4,"description":6},{"type":39,"children":40},"root",[41,50,65,72,85,91,96,182,189,202,440,446,451,572,578,590,789,795,800,833,839,955,961,1012,1039,1052,1058,1064,1085,1393,1399,1410,1809,1815,1828,2031,2037,2042,2052,2336,2346,2851,2856,2906,2912,2917,3403,3416,3422,3428,3440,4371,4377,4382,4532,4600,4626,4632,4638,4643,4952,4964,4970,4975,5277,5283,5288,5451,5463,5468,5995,6001,6006,6502,6508,6629,6635,6641,6646,6784,6803,6809,6847],{"type":42,"tag":43,"props":44,"children":46},"element","h1",{"id":45},"add-ui-to-mcp-server",[47],{"type":48,"value":49},"text","Add UI to MCP Server",{"type":42,"tag":51,"props":52,"children":53},"p",{},[54,56,63],{"type":48,"value":55},"Enrich an existing MCP server's tools with interactive UIs using the MCP Apps SDK (",{"type":42,"tag":57,"props":58,"children":60},"code",{"className":59},[],[61],{"type":48,"value":62},"@modelcontextprotocol\u002Fext-apps",{"type":48,"value":64},").",{"type":42,"tag":66,"props":67,"children":69},"h2",{"id":68},"how-it-works",[70],{"type":48,"value":71},"How It Works",{"type":42,"tag":51,"props":73,"children":74},{},[75,77,83],{"type":48,"value":76},"Existing tools get paired with HTML resources that render inline in the host's conversation. The tool continues to work for text-only clients — UI is an enhancement, not a replacement. Each tool that benefits from UI gets linked to a resource via ",{"type":42,"tag":57,"props":78,"children":80},{"className":79},[],[81],{"type":48,"value":82},"_meta.ui.resourceUri",{"type":48,"value":84},", and the host renders that resource in a sandboxed iframe when the tool is called.",{"type":42,"tag":66,"props":86,"children":88},{"id":87},"getting-reference-code",[89],{"type":48,"value":90},"Getting Reference Code",{"type":42,"tag":51,"props":92,"children":93},{},[94],{"type":48,"value":95},"Clone the SDK repository for working examples and API documentation:",{"type":42,"tag":97,"props":98,"children":103},"pre",{"className":99,"code":100,"language":101,"meta":102,"style":102},"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","",[104],{"type":42,"tag":57,"props":105,"children":106},{"__ignoreMap":102},[107],{"type":42,"tag":108,"props":109,"children":112},"span",{"class":110,"line":111},"line",1,[113,119,125,130,136,141,146,151,156,161,166,172,177],{"type":42,"tag":108,"props":114,"children":116},{"style":115},"--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B",[117],{"type":48,"value":118},"git",{"type":42,"tag":108,"props":120,"children":122},{"style":121},"--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D",[123],{"type":48,"value":124}," clone",{"type":42,"tag":108,"props":126,"children":127},{"style":121},[128],{"type":48,"value":129}," --branch",{"type":42,"tag":108,"props":131,"children":133},{"style":132},"--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF",[134],{"type":48,"value":135}," \"",{"type":42,"tag":108,"props":137,"children":138},{"style":121},[139],{"type":48,"value":140},"v",{"type":42,"tag":108,"props":142,"children":143},{"style":132},[144],{"type":48,"value":145},"$(",{"type":42,"tag":108,"props":147,"children":148},{"style":115},[149],{"type":48,"value":150},"npm",{"type":42,"tag":108,"props":152,"children":153},{"style":121},[154],{"type":48,"value":155}," view @modelcontextprotocol\u002Fext-apps version",{"type":42,"tag":108,"props":157,"children":158},{"style":132},[159],{"type":48,"value":160},")\"",{"type":42,"tag":108,"props":162,"children":163},{"style":121},[164],{"type":48,"value":165}," --depth",{"type":42,"tag":108,"props":167,"children":169},{"style":168},"--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C",[170],{"type":48,"value":171}," 1",{"type":42,"tag":108,"props":173,"children":174},{"style":121},[175],{"type":48,"value":176}," https:\u002F\u002Fgithub.com\u002Fmodelcontextprotocol\u002Fext-apps.git",{"type":42,"tag":108,"props":178,"children":179},{"style":121},[180],{"type":48,"value":181}," \u002Ftmp\u002Fmcp-ext-apps\n",{"type":42,"tag":183,"props":184,"children":186},"h3",{"id":185},"api-reference-source-files",[187],{"type":48,"value":188},"API Reference (Source Files)",{"type":42,"tag":51,"props":190,"children":191},{},[192,194,200],{"type":48,"value":193},"Read JSDoc documentation directly from ",{"type":42,"tag":57,"props":195,"children":197},{"className":196},[],[198],{"type":48,"value":199},"\u002Ftmp\u002Fmcp-ext-apps\u002Fsrc\u002F",{"type":48,"value":201},":",{"type":42,"tag":203,"props":204,"children":205},"table",{},[206,225],{"type":42,"tag":207,"props":208,"children":209},"thead",{},[210],{"type":42,"tag":211,"props":212,"children":213},"tr",{},[214,220],{"type":42,"tag":215,"props":216,"children":217},"th",{},[218],{"type":48,"value":219},"File",{"type":42,"tag":215,"props":221,"children":222},{},[223],{"type":48,"value":224},"Contents",{"type":42,"tag":226,"props":227,"children":228},"tbody",{},[229,283,320,345,380,403],{"type":42,"tag":211,"props":230,"children":231},{},[232,242],{"type":42,"tag":233,"props":234,"children":235},"td",{},[236],{"type":42,"tag":57,"props":237,"children":239},{"className":238},[],[240],{"type":48,"value":241},"src\u002Fapp.ts",{"type":42,"tag":233,"props":243,"children":244},{},[245,251,253,259,261,267,268,274,275,281],{"type":42,"tag":57,"props":246,"children":248},{"className":247},[],[249],{"type":48,"value":250},"App",{"type":48,"value":252}," class, handlers (",{"type":42,"tag":57,"props":254,"children":256},{"className":255},[],[257],{"type":48,"value":258},"ontoolinput",{"type":48,"value":260},", ",{"type":42,"tag":57,"props":262,"children":264},{"className":263},[],[265],{"type":48,"value":266},"ontoolresult",{"type":48,"value":260},{"type":42,"tag":57,"props":269,"children":271},{"className":270},[],[272],{"type":48,"value":273},"onhostcontextchanged",{"type":48,"value":260},{"type":42,"tag":57,"props":276,"children":278},{"className":277},[],[279],{"type":48,"value":280},"onteardown",{"type":48,"value":282},"), lifecycle",{"type":42,"tag":211,"props":284,"children":285},{},[286,295],{"type":42,"tag":233,"props":287,"children":288},{},[289],{"type":42,"tag":57,"props":290,"children":292},{"className":291},[],[293],{"type":48,"value":294},"src\u002Fserver\u002Findex.ts",{"type":42,"tag":233,"props":296,"children":297},{},[298,304,305,311,312,318],{"type":42,"tag":57,"props":299,"children":301},{"className":300},[],[302],{"type":48,"value":303},"registerAppTool",{"type":48,"value":260},{"type":42,"tag":57,"props":306,"children":308},{"className":307},[],[309],{"type":48,"value":310},"registerAppResource",{"type":48,"value":260},{"type":42,"tag":57,"props":313,"children":315},{"className":314},[],[316],{"type":48,"value":317},"getUiCapability",{"type":48,"value":319},", tool visibility options",{"type":42,"tag":211,"props":321,"children":322},{},[323,332],{"type":42,"tag":233,"props":324,"children":325},{},[326],{"type":42,"tag":57,"props":327,"children":329},{"className":328},[],[330],{"type":48,"value":331},"src\u002Fspec.types.ts",{"type":42,"tag":233,"props":333,"children":334},{},[335,337,343],{"type":48,"value":336},"All type definitions: ",{"type":42,"tag":57,"props":338,"children":340},{"className":339},[],[341],{"type":48,"value":342},"McpUiHostContext",{"type":48,"value":344},", CSS variable keys, display modes",{"type":42,"tag":211,"props":346,"children":347},{},[348,357],{"type":42,"tag":233,"props":349,"children":350},{},[351],{"type":42,"tag":57,"props":352,"children":354},{"className":353},[],[355],{"type":48,"value":356},"src\u002Fstyles.ts",{"type":42,"tag":233,"props":358,"children":359},{},[360,366,367,373,374],{"type":42,"tag":57,"props":361,"children":363},{"className":362},[],[364],{"type":48,"value":365},"applyDocumentTheme",{"type":48,"value":260},{"type":42,"tag":57,"props":368,"children":370},{"className":369},[],[371],{"type":48,"value":372},"applyHostStyleVariables",{"type":48,"value":260},{"type":42,"tag":57,"props":375,"children":377},{"className":376},[],[378],{"type":48,"value":379},"applyHostFonts",{"type":42,"tag":211,"props":381,"children":382},{},[383,392],{"type":42,"tag":233,"props":384,"children":385},{},[386],{"type":42,"tag":57,"props":387,"children":389},{"className":388},[],[390],{"type":48,"value":391},"src\u002Freact\u002FuseApp.tsx",{"type":42,"tag":233,"props":393,"children":394},{},[395,401],{"type":42,"tag":57,"props":396,"children":398},{"className":397},[],[399],{"type":48,"value":400},"useApp",{"type":48,"value":402}," hook for React apps",{"type":42,"tag":211,"props":404,"children":405},{},[406,415],{"type":42,"tag":233,"props":407,"children":408},{},[409],{"type":42,"tag":57,"props":410,"children":412},{"className":411},[],[413],{"type":48,"value":414},"src\u002Freact\u002FuseHostStyles.ts",{"type":42,"tag":233,"props":416,"children":417},{},[418,424,425,431,432,438],{"type":42,"tag":57,"props":419,"children":421},{"className":420},[],[422],{"type":48,"value":423},"useHostStyles",{"type":48,"value":260},{"type":42,"tag":57,"props":426,"children":428},{"className":427},[],[429],{"type":48,"value":430},"useHostStyleVariables",{"type":48,"value":260},{"type":42,"tag":57,"props":433,"children":435},{"className":434},[],[436],{"type":48,"value":437},"useHostFonts",{"type":48,"value":439}," hooks",{"type":42,"tag":183,"props":441,"children":443},{"id":442},"key-examples-mixed-tool-patterns",[444],{"type":48,"value":445},"Key Examples (Mixed Tool Patterns)",{"type":42,"tag":51,"props":447,"children":448},{},[449],{"type":48,"value":450},"These examples demonstrate servers with both App-enhanced and plain tools — the exact pattern you're adding:",{"type":42,"tag":203,"props":452,"children":453},{},[454,470],{"type":42,"tag":207,"props":455,"children":456},{},[457],{"type":42,"tag":211,"props":458,"children":459},{},[460,465],{"type":42,"tag":215,"props":461,"children":462},{},[463],{"type":48,"value":464},"Example",{"type":42,"tag":215,"props":466,"children":467},{},[468],{"type":48,"value":469},"Pattern",{"type":42,"tag":226,"props":471,"children":472},{},[473,504,542],{"type":42,"tag":211,"props":474,"children":475},{},[476,485],{"type":42,"tag":233,"props":477,"children":478},{},[479],{"type":42,"tag":57,"props":480,"children":482},{"className":481},[],[483],{"type":48,"value":484},"examples\u002Fmap-server\u002F",{"type":42,"tag":233,"props":486,"children":487},{},[488,494,496,502],{"type":42,"tag":57,"props":489,"children":491},{"className":490},[],[492],{"type":48,"value":493},"show-map",{"type":48,"value":495}," (App tool) + ",{"type":42,"tag":57,"props":497,"children":499},{"className":498},[],[500],{"type":48,"value":501},"geocode",{"type":48,"value":503}," (plain tool)",{"type":42,"tag":211,"props":505,"children":506},{},[507,516],{"type":42,"tag":233,"props":508,"children":509},{},[510],{"type":42,"tag":57,"props":511,"children":513},{"className":512},[],[514],{"type":48,"value":515},"examples\u002Fpdf-server\u002F",{"type":42,"tag":233,"props":517,"children":518},{},[519,525,526,532,534,540],{"type":42,"tag":57,"props":520,"children":522},{"className":521},[],[523],{"type":48,"value":524},"display_pdf",{"type":48,"value":495},{"type":42,"tag":57,"props":527,"children":529},{"className":528},[],[530],{"type":48,"value":531},"list_pdfs",{"type":48,"value":533}," (plain tool) + ",{"type":42,"tag":57,"props":535,"children":537},{"className":536},[],[538],{"type":48,"value":539},"read_pdf_bytes",{"type":48,"value":541}," (app-only tool)",{"type":42,"tag":211,"props":543,"children":544},{},[545,554],{"type":42,"tag":233,"props":546,"children":547},{},[548],{"type":42,"tag":57,"props":549,"children":551},{"className":550},[],[552],{"type":48,"value":553},"examples\u002Fsystem-monitor-server\u002F",{"type":42,"tag":233,"props":555,"children":556},{},[557,563,564,570],{"type":42,"tag":57,"props":558,"children":560},{"className":559},[],[561],{"type":48,"value":562},"get-system-info",{"type":48,"value":495},{"type":42,"tag":57,"props":565,"children":567},{"className":566},[],[568],{"type":48,"value":569},"poll-system-stats",{"type":48,"value":571}," (app-only polling tool)",{"type":42,"tag":183,"props":573,"children":575},{"id":574},"framework-templates",[576],{"type":48,"value":577},"Framework Templates",{"type":42,"tag":51,"props":579,"children":580},{},[581,583,589],{"type":48,"value":582},"Learn and adapt from ",{"type":42,"tag":57,"props":584,"children":586},{"className":585},[],[587],{"type":48,"value":588},"\u002Ftmp\u002Fmcp-ext-apps\u002Fexamples\u002Fbasic-server-{framework}\u002F",{"type":48,"value":201},{"type":42,"tag":203,"props":591,"children":592},{},[593,609],{"type":42,"tag":207,"props":594,"children":595},{},[596],{"type":42,"tag":211,"props":597,"children":598},{},[599,604],{"type":42,"tag":215,"props":600,"children":601},{},[602],{"type":48,"value":603},"Template",{"type":42,"tag":215,"props":605,"children":606},{},[607],{"type":48,"value":608},"Key Files",{"type":42,"tag":226,"props":610,"children":611},{},[612,647,683,710,737,763],{"type":42,"tag":211,"props":613,"children":614},{},[615,624],{"type":42,"tag":233,"props":616,"children":617},{},[618],{"type":42,"tag":57,"props":619,"children":621},{"className":620},[],[622],{"type":48,"value":623},"basic-server-vanillajs\u002F",{"type":42,"tag":233,"props":625,"children":626},{},[627,633,634,640,641],{"type":42,"tag":57,"props":628,"children":630},{"className":629},[],[631],{"type":48,"value":632},"server.ts",{"type":48,"value":260},{"type":42,"tag":57,"props":635,"children":637},{"className":636},[],[638],{"type":48,"value":639},"src\u002Fmcp-app.ts",{"type":48,"value":260},{"type":42,"tag":57,"props":642,"children":644},{"className":643},[],[645],{"type":48,"value":646},"mcp-app.html",{"type":42,"tag":211,"props":648,"children":649},{},[650,659],{"type":42,"tag":233,"props":651,"children":652},{},[653],{"type":42,"tag":57,"props":654,"children":656},{"className":655},[],[657],{"type":48,"value":658},"basic-server-react\u002F",{"type":42,"tag":233,"props":660,"children":661},{},[662,667,668,674,676,681],{"type":42,"tag":57,"props":663,"children":665},{"className":664},[],[666],{"type":48,"value":632},{"type":48,"value":260},{"type":42,"tag":57,"props":669,"children":671},{"className":670},[],[672],{"type":48,"value":673},"src\u002Fmcp-app.tsx",{"type":48,"value":675}," (uses ",{"type":42,"tag":57,"props":677,"children":679},{"className":678},[],[680],{"type":48,"value":400},{"type":48,"value":682}," hook)",{"type":42,"tag":211,"props":684,"children":685},{},[686,695],{"type":42,"tag":233,"props":687,"children":688},{},[689],{"type":42,"tag":57,"props":690,"children":692},{"className":691},[],[693],{"type":48,"value":694},"basic-server-vue\u002F",{"type":42,"tag":233,"props":696,"children":697},{},[698,703,704],{"type":42,"tag":57,"props":699,"children":701},{"className":700},[],[702],{"type":48,"value":632},{"type":48,"value":260},{"type":42,"tag":57,"props":705,"children":707},{"className":706},[],[708],{"type":48,"value":709},"src\u002FApp.vue",{"type":42,"tag":211,"props":711,"children":712},{},[713,722],{"type":42,"tag":233,"props":714,"children":715},{},[716],{"type":42,"tag":57,"props":717,"children":719},{"className":718},[],[720],{"type":48,"value":721},"basic-server-svelte\u002F",{"type":42,"tag":233,"props":723,"children":724},{},[725,730,731],{"type":42,"tag":57,"props":726,"children":728},{"className":727},[],[729],{"type":48,"value":632},{"type":48,"value":260},{"type":42,"tag":57,"props":732,"children":734},{"className":733},[],[735],{"type":48,"value":736},"src\u002FApp.svelte",{"type":42,"tag":211,"props":738,"children":739},{},[740,749],{"type":42,"tag":233,"props":741,"children":742},{},[743],{"type":42,"tag":57,"props":744,"children":746},{"className":745},[],[747],{"type":48,"value":748},"basic-server-preact\u002F",{"type":42,"tag":233,"props":750,"children":751},{},[752,757,758],{"type":42,"tag":57,"props":753,"children":755},{"className":754},[],[756],{"type":48,"value":632},{"type":48,"value":260},{"type":42,"tag":57,"props":759,"children":761},{"className":760},[],[762],{"type":48,"value":673},{"type":42,"tag":211,"props":764,"children":765},{},[766,775],{"type":42,"tag":233,"props":767,"children":768},{},[769],{"type":42,"tag":57,"props":770,"children":772},{"className":771},[],[773],{"type":48,"value":774},"basic-server-solid\u002F",{"type":42,"tag":233,"props":776,"children":777},{},[778,783,784],{"type":42,"tag":57,"props":779,"children":781},{"className":780},[],[782],{"type":48,"value":632},{"type":48,"value":260},{"type":42,"tag":57,"props":785,"children":787},{"className":786},[],[788],{"type":48,"value":673},{"type":42,"tag":66,"props":790,"children":792},{"id":791},"step-1-analyze-existing-tools",[793],{"type":48,"value":794},"Step 1: Analyze Existing Tools",{"type":42,"tag":51,"props":796,"children":797},{},[798],{"type":48,"value":799},"Before writing any code, analyze the server's existing tools and determine which ones benefit from UI.",{"type":42,"tag":801,"props":802,"children":803},"ol",{},[804,810,815,828],{"type":42,"tag":805,"props":806,"children":807},"li",{},[808],{"type":48,"value":809},"Read the server source and list all registered tools",{"type":42,"tag":805,"props":811,"children":812},{},[813],{"type":48,"value":814},"For each tool, assess whether it would benefit from UI (returns data that could be visualized, involves user interaction, etc.) vs. is fine as text-only (simple lookups, utility functions)",{"type":42,"tag":805,"props":816,"children":817},{},[818,820,826],{"type":48,"value":819},"Identify tools that could become ",{"type":42,"tag":821,"props":822,"children":823},"strong",{},[824],{"type":48,"value":825},"app-only helpers",{"type":48,"value":827}," (data the UI needs to poll\u002Ffetch but the model doesn't need to call directly)",{"type":42,"tag":805,"props":829,"children":830},{},[831],{"type":48,"value":832},"Present the analysis to the user and confirm which tools to enhance",{"type":42,"tag":183,"props":834,"children":836},{"id":835},"decision-framework",[837],{"type":48,"value":838},"Decision Framework",{"type":42,"tag":203,"props":840,"children":841},{},[842,862],{"type":42,"tag":207,"props":843,"children":844},{},[845],{"type":42,"tag":211,"props":846,"children":847},{},[848,853,858],{"type":42,"tag":215,"props":849,"children":850},{},[851],{"type":48,"value":852},"Tool output type",{"type":42,"tag":215,"props":854,"children":855},{},[856],{"type":48,"value":857},"UI benefit",{"type":42,"tag":215,"props":859,"children":860},{},[861],{"type":48,"value":464},{"type":42,"tag":226,"props":863,"children":864},{},[865,883,901,919,937],{"type":42,"tag":211,"props":866,"children":867},{},[868,873,878],{"type":42,"tag":233,"props":869,"children":870},{},[871],{"type":48,"value":872},"Structured data \u002F lists \u002F tables",{"type":42,"tag":233,"props":874,"children":875},{},[876],{"type":48,"value":877},"High — interactive table, search, filtering",{"type":42,"tag":233,"props":879,"children":880},{},[881],{"type":48,"value":882},"List of items, search results",{"type":42,"tag":211,"props":884,"children":885},{},[886,891,896],{"type":42,"tag":233,"props":887,"children":888},{},[889],{"type":48,"value":890},"Metrics \u002F numbers over time",{"type":42,"tag":233,"props":892,"children":893},{},[894],{"type":48,"value":895},"High — charts, gauges, dashboards",{"type":42,"tag":233,"props":897,"children":898},{},[899],{"type":48,"value":900},"System stats, analytics",{"type":42,"tag":211,"props":902,"children":903},{},[904,909,914],{"type":42,"tag":233,"props":905,"children":906},{},[907],{"type":48,"value":908},"Media \u002F rich content",{"type":42,"tag":233,"props":910,"children":911},{},[912],{"type":48,"value":913},"High — viewer, player, renderer",{"type":42,"tag":233,"props":915,"children":916},{},[917],{"type":48,"value":918},"Maps, PDFs, images, video",{"type":42,"tag":211,"props":920,"children":921},{},[922,927,932],{"type":42,"tag":233,"props":923,"children":924},{},[925],{"type":48,"value":926},"Simple text \u002F confirmations",{"type":42,"tag":233,"props":928,"children":929},{},[930],{"type":48,"value":931},"Low — text is fine",{"type":42,"tag":233,"props":933,"children":934},{},[935],{"type":48,"value":936},"\"File created\", \"Setting updated\"",{"type":42,"tag":211,"props":938,"children":939},{},[940,945,950],{"type":42,"tag":233,"props":941,"children":942},{},[943],{"type":48,"value":944},"Data for other tools",{"type":42,"tag":233,"props":946,"children":947},{},[948],{"type":48,"value":949},"Consider app-only",{"type":42,"tag":233,"props":951,"children":952},{},[953],{"type":48,"value":954},"Polling endpoints, chunk loaders",{"type":42,"tag":66,"props":956,"children":958},{"id":957},"step-2-add-dependencies",[959],{"type":48,"value":960},"Step 2: Add Dependencies",{"type":42,"tag":97,"props":962,"children":964},{"className":99,"code":963,"language":101,"meta":102,"style":102},"npm install @modelcontextprotocol\u002Fext-apps\nnpm install -D vite vite-plugin-singlefile\n",[965],{"type":42,"tag":57,"props":966,"children":967},{"__ignoreMap":102},[968,985],{"type":42,"tag":108,"props":969,"children":970},{"class":110,"line":111},[971,975,980],{"type":42,"tag":108,"props":972,"children":973},{"style":115},[974],{"type":48,"value":150},{"type":42,"tag":108,"props":976,"children":977},{"style":121},[978],{"type":48,"value":979}," install",{"type":42,"tag":108,"props":981,"children":982},{"style":121},[983],{"type":48,"value":984}," @modelcontextprotocol\u002Fext-apps\n",{"type":42,"tag":108,"props":986,"children":988},{"class":110,"line":987},2,[989,993,997,1002,1007],{"type":42,"tag":108,"props":990,"children":991},{"style":115},[992],{"type":48,"value":150},{"type":42,"tag":108,"props":994,"children":995},{"style":121},[996],{"type":48,"value":979},{"type":42,"tag":108,"props":998,"children":999},{"style":121},[1000],{"type":48,"value":1001}," -D",{"type":42,"tag":108,"props":1003,"children":1004},{"style":121},[1005],{"type":48,"value":1006}," vite",{"type":42,"tag":108,"props":1008,"children":1009},{"style":121},[1010],{"type":48,"value":1011}," vite-plugin-singlefile\n",{"type":42,"tag":51,"props":1013,"children":1014},{},[1015,1017,1023,1024,1030,1031,1037],{"type":48,"value":1016},"Plus framework-specific dependencies if needed (e.g., ",{"type":42,"tag":57,"props":1018,"children":1020},{"className":1019},[],[1021],{"type":48,"value":1022},"react",{"type":48,"value":260},{"type":42,"tag":57,"props":1025,"children":1027},{"className":1026},[],[1028],{"type":48,"value":1029},"react-dom",{"type":48,"value":260},{"type":42,"tag":57,"props":1032,"children":1034},{"className":1033},[],[1035],{"type":48,"value":1036},"@vitejs\u002Fplugin-react",{"type":48,"value":1038}," for React).",{"type":42,"tag":51,"props":1040,"children":1041},{},[1042,1044,1050],{"type":48,"value":1043},"Use ",{"type":42,"tag":57,"props":1045,"children":1047},{"className":1046},[],[1048],{"type":48,"value":1049},"npm install",{"type":48,"value":1051}," to add dependencies rather than manually writing version numbers. This lets npm resolve the latest compatible versions. Never specify version numbers from memory.",{"type":42,"tag":66,"props":1053,"children":1055},{"id":1054},"step-3-set-up-the-build-pipeline",[1056],{"type":48,"value":1057},"Step 3: Set Up the Build Pipeline",{"type":42,"tag":183,"props":1059,"children":1061},{"id":1060},"vite-configuration",[1062],{"type":48,"value":1063},"Vite Configuration",{"type":42,"tag":51,"props":1065,"children":1066},{},[1067,1069,1075,1077,1083],{"type":48,"value":1068},"Create ",{"type":42,"tag":57,"props":1070,"children":1072},{"className":1071},[],[1073],{"type":48,"value":1074},"vite.config.ts",{"type":48,"value":1076}," with ",{"type":42,"tag":57,"props":1078,"children":1080},{"className":1079},[],[1081],{"type":48,"value":1082},"vite-plugin-singlefile",{"type":48,"value":1084}," to bundle the UI into a single HTML file:",{"type":42,"tag":97,"props":1086,"children":1090},{"className":1087,"code":1088,"language":1089,"meta":102,"style":102},"language-typescript shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","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\", \u002F\u002F one per UI, or one shared entry\n    },\n  },\n});\n","typescript",[1091],{"type":42,"tag":57,"props":1092,"children":1093},{"__ignoreMap":102},[1094,1143,1183,1193,1222,1256,1274,1304,1321,1357,1366,1375],{"type":42,"tag":108,"props":1095,"children":1096},{"class":110,"line":111},[1097,1103,1108,1114,1119,1124,1128,1133,1138],{"type":42,"tag":108,"props":1098,"children":1100},{"style":1099},"--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic",[1101],{"type":48,"value":1102},"import",{"type":42,"tag":108,"props":1104,"children":1105},{"style":132},[1106],{"type":48,"value":1107}," {",{"type":42,"tag":108,"props":1109,"children":1111},{"style":1110},"--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8",[1112],{"type":48,"value":1113}," defineConfig",{"type":42,"tag":108,"props":1115,"children":1116},{"style":132},[1117],{"type":48,"value":1118}," }",{"type":42,"tag":108,"props":1120,"children":1121},{"style":1099},[1122],{"type":48,"value":1123}," from",{"type":42,"tag":108,"props":1125,"children":1126},{"style":132},[1127],{"type":48,"value":135},{"type":42,"tag":108,"props":1129,"children":1130},{"style":121},[1131],{"type":48,"value":1132},"vite",{"type":42,"tag":108,"props":1134,"children":1135},{"style":132},[1136],{"type":48,"value":1137},"\"",{"type":42,"tag":108,"props":1139,"children":1140},{"style":132},[1141],{"type":48,"value":1142},";\n",{"type":42,"tag":108,"props":1144,"children":1145},{"class":110,"line":987},[1146,1150,1154,1159,1163,1167,1171,1175,1179],{"type":42,"tag":108,"props":1147,"children":1148},{"style":1099},[1149],{"type":48,"value":1102},{"type":42,"tag":108,"props":1151,"children":1152},{"style":132},[1153],{"type":48,"value":1107},{"type":42,"tag":108,"props":1155,"children":1156},{"style":1110},[1157],{"type":48,"value":1158}," viteSingleFile",{"type":42,"tag":108,"props":1160,"children":1161},{"style":132},[1162],{"type":48,"value":1118},{"type":42,"tag":108,"props":1164,"children":1165},{"style":1099},[1166],{"type":48,"value":1123},{"type":42,"tag":108,"props":1168,"children":1169},{"style":132},[1170],{"type":48,"value":135},{"type":42,"tag":108,"props":1172,"children":1173},{"style":121},[1174],{"type":48,"value":1082},{"type":42,"tag":108,"props":1176,"children":1177},{"style":132},[1178],{"type":48,"value":1137},{"type":42,"tag":108,"props":1180,"children":1181},{"style":132},[1182],{"type":48,"value":1142},{"type":42,"tag":108,"props":1184,"children":1186},{"class":110,"line":1185},3,[1187],{"type":42,"tag":108,"props":1188,"children":1190},{"emptyLinePlaceholder":1189},true,[1191],{"type":48,"value":1192},"\n",{"type":42,"tag":108,"props":1194,"children":1196},{"class":110,"line":1195},4,[1197,1202,1207,1212,1217],{"type":42,"tag":108,"props":1198,"children":1199},{"style":1099},[1200],{"type":48,"value":1201},"export",{"type":42,"tag":108,"props":1203,"children":1204},{"style":1099},[1205],{"type":48,"value":1206}," default",{"type":42,"tag":108,"props":1208,"children":1210},{"style":1209},"--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF",[1211],{"type":48,"value":1113},{"type":42,"tag":108,"props":1213,"children":1214},{"style":1110},[1215],{"type":48,"value":1216},"(",{"type":42,"tag":108,"props":1218,"children":1219},{"style":132},[1220],{"type":48,"value":1221},"{\n",{"type":42,"tag":108,"props":1223,"children":1225},{"class":110,"line":1224},5,[1226,1232,1236,1241,1246,1251],{"type":42,"tag":108,"props":1227,"children":1229},{"style":1228},"--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178",[1230],{"type":48,"value":1231},"  plugins",{"type":42,"tag":108,"props":1233,"children":1234},{"style":132},[1235],{"type":48,"value":201},{"type":42,"tag":108,"props":1237,"children":1238},{"style":1110},[1239],{"type":48,"value":1240}," [",{"type":42,"tag":108,"props":1242,"children":1243},{"style":1209},[1244],{"type":48,"value":1245},"viteSingleFile",{"type":42,"tag":108,"props":1247,"children":1248},{"style":1110},[1249],{"type":48,"value":1250},"()]",{"type":42,"tag":108,"props":1252,"children":1253},{"style":132},[1254],{"type":48,"value":1255},",\n",{"type":42,"tag":108,"props":1257,"children":1259},{"class":110,"line":1258},6,[1260,1265,1269],{"type":42,"tag":108,"props":1261,"children":1262},{"style":1228},[1263],{"type":48,"value":1264},"  build",{"type":42,"tag":108,"props":1266,"children":1267},{"style":132},[1268],{"type":48,"value":201},{"type":42,"tag":108,"props":1270,"children":1271},{"style":132},[1272],{"type":48,"value":1273}," {\n",{"type":42,"tag":108,"props":1275,"children":1277},{"class":110,"line":1276},7,[1278,1283,1287,1291,1296,1300],{"type":42,"tag":108,"props":1279,"children":1280},{"style":1228},[1281],{"type":48,"value":1282},"    outDir",{"type":42,"tag":108,"props":1284,"children":1285},{"style":132},[1286],{"type":48,"value":201},{"type":42,"tag":108,"props":1288,"children":1289},{"style":132},[1290],{"type":48,"value":135},{"type":42,"tag":108,"props":1292,"children":1293},{"style":121},[1294],{"type":48,"value":1295},"dist",{"type":42,"tag":108,"props":1297,"children":1298},{"style":132},[1299],{"type":48,"value":1137},{"type":42,"tag":108,"props":1301,"children":1302},{"style":132},[1303],{"type":48,"value":1255},{"type":42,"tag":108,"props":1305,"children":1307},{"class":110,"line":1306},8,[1308,1313,1317],{"type":42,"tag":108,"props":1309,"children":1310},{"style":1228},[1311],{"type":48,"value":1312},"    rollupOptions",{"type":42,"tag":108,"props":1314,"children":1315},{"style":132},[1316],{"type":48,"value":201},{"type":42,"tag":108,"props":1318,"children":1319},{"style":132},[1320],{"type":48,"value":1273},{"type":42,"tag":108,"props":1322,"children":1324},{"class":110,"line":1323},9,[1325,1330,1334,1338,1342,1346,1351],{"type":42,"tag":108,"props":1326,"children":1327},{"style":1228},[1328],{"type":48,"value":1329},"      input",{"type":42,"tag":108,"props":1331,"children":1332},{"style":132},[1333],{"type":48,"value":201},{"type":42,"tag":108,"props":1335,"children":1336},{"style":132},[1337],{"type":48,"value":135},{"type":42,"tag":108,"props":1339,"children":1340},{"style":121},[1341],{"type":48,"value":646},{"type":42,"tag":108,"props":1343,"children":1344},{"style":132},[1345],{"type":48,"value":1137},{"type":42,"tag":108,"props":1347,"children":1348},{"style":132},[1349],{"type":48,"value":1350},",",{"type":42,"tag":108,"props":1352,"children":1354},{"style":1353},"--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#546E7A;--shiki-default-font-style:italic;--shiki-dark:#676E95;--shiki-dark-font-style:italic",[1355],{"type":48,"value":1356}," \u002F\u002F one per UI, or one shared entry\n",{"type":42,"tag":108,"props":1358,"children":1360},{"class":110,"line":1359},10,[1361],{"type":42,"tag":108,"props":1362,"children":1363},{"style":132},[1364],{"type":48,"value":1365},"    },\n",{"type":42,"tag":108,"props":1367,"children":1369},{"class":110,"line":1368},11,[1370],{"type":42,"tag":108,"props":1371,"children":1372},{"style":132},[1373],{"type":48,"value":1374},"  },\n",{"type":42,"tag":108,"props":1376,"children":1378},{"class":110,"line":1377},12,[1379,1384,1389],{"type":42,"tag":108,"props":1380,"children":1381},{"style":132},[1382],{"type":48,"value":1383},"}",{"type":42,"tag":108,"props":1385,"children":1386},{"style":1110},[1387],{"type":48,"value":1388},")",{"type":42,"tag":108,"props":1390,"children":1391},{"style":132},[1392],{"type":48,"value":1142},{"type":42,"tag":183,"props":1394,"children":1396},{"id":1395},"html-entry-point",[1397],{"type":48,"value":1398},"HTML Entry Point",{"type":42,"tag":51,"props":1400,"children":1401},{},[1402,1403,1408],{"type":48,"value":1068},{"type":42,"tag":57,"props":1404,"children":1406},{"className":1405},[],[1407],{"type":48,"value":646},{"type":48,"value":1409}," (or one per distinct UI if tools need different views):",{"type":42,"tag":97,"props":1411,"children":1415},{"className":1412,"code":1413,"language":1414,"meta":102,"style":102},"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\u002Fmcp-app.ts\">\u003C\u002Fscript>\n  \u003C\u002Fbody>\n\u003C\u002Fhtml>\n","html",[1416],{"type":42,"tag":57,"props":1417,"children":1418},{"__ignoreMap":102},[1419,1443,1482,1499,1539,1598,1633,1649,1665,1711,1779,1794],{"type":42,"tag":108,"props":1420,"children":1421},{"class":110,"line":111},[1422,1427,1432,1438],{"type":42,"tag":108,"props":1423,"children":1424},{"style":132},[1425],{"type":48,"value":1426},"\u003C!",{"type":42,"tag":108,"props":1428,"children":1429},{"style":1228},[1430],{"type":48,"value":1431},"doctype",{"type":42,"tag":108,"props":1433,"children":1435},{"style":1434},"--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA",[1436],{"type":48,"value":1437}," html",{"type":42,"tag":108,"props":1439,"children":1440},{"style":132},[1441],{"type":48,"value":1442},">\n",{"type":42,"tag":108,"props":1444,"children":1445},{"class":110,"line":987},[1446,1451,1455,1460,1465,1469,1474,1478],{"type":42,"tag":108,"props":1447,"children":1448},{"style":132},[1449],{"type":48,"value":1450},"\u003C",{"type":42,"tag":108,"props":1452,"children":1453},{"style":1228},[1454],{"type":48,"value":1414},{"type":42,"tag":108,"props":1456,"children":1457},{"style":1434},[1458],{"type":48,"value":1459}," lang",{"type":42,"tag":108,"props":1461,"children":1462},{"style":132},[1463],{"type":48,"value":1464},"=",{"type":42,"tag":108,"props":1466,"children":1467},{"style":132},[1468],{"type":48,"value":1137},{"type":42,"tag":108,"props":1470,"children":1471},{"style":121},[1472],{"type":48,"value":1473},"en",{"type":42,"tag":108,"props":1475,"children":1476},{"style":132},[1477],{"type":48,"value":1137},{"type":42,"tag":108,"props":1479,"children":1480},{"style":132},[1481],{"type":48,"value":1442},{"type":42,"tag":108,"props":1483,"children":1484},{"class":110,"line":1185},[1485,1490,1495],{"type":42,"tag":108,"props":1486,"children":1487},{"style":132},[1488],{"type":48,"value":1489},"  \u003C",{"type":42,"tag":108,"props":1491,"children":1492},{"style":1228},[1493],{"type":48,"value":1494},"head",{"type":42,"tag":108,"props":1496,"children":1497},{"style":132},[1498],{"type":48,"value":1442},{"type":42,"tag":108,"props":1500,"children":1501},{"class":110,"line":1195},[1502,1507,1512,1517,1521,1525,1530,1534],{"type":42,"tag":108,"props":1503,"children":1504},{"style":132},[1505],{"type":48,"value":1506},"    \u003C",{"type":42,"tag":108,"props":1508,"children":1509},{"style":1228},[1510],{"type":48,"value":1511},"meta",{"type":42,"tag":108,"props":1513,"children":1514},{"style":1434},[1515],{"type":48,"value":1516}," charset",{"type":42,"tag":108,"props":1518,"children":1519},{"style":132},[1520],{"type":48,"value":1464},{"type":42,"tag":108,"props":1522,"children":1523},{"style":132},[1524],{"type":48,"value":1137},{"type":42,"tag":108,"props":1526,"children":1527},{"style":121},[1528],{"type":48,"value":1529},"UTF-8",{"type":42,"tag":108,"props":1531,"children":1532},{"style":132},[1533],{"type":48,"value":1137},{"type":42,"tag":108,"props":1535,"children":1536},{"style":132},[1537],{"type":48,"value":1538}," \u002F>\n",{"type":42,"tag":108,"props":1540,"children":1541},{"class":110,"line":1224},[1542,1546,1550,1555,1559,1563,1568,1572,1577,1581,1585,1590,1594],{"type":42,"tag":108,"props":1543,"children":1544},{"style":132},[1545],{"type":48,"value":1506},{"type":42,"tag":108,"props":1547,"children":1548},{"style":1228},[1549],{"type":48,"value":1511},{"type":42,"tag":108,"props":1551,"children":1552},{"style":1434},[1553],{"type":48,"value":1554}," name",{"type":42,"tag":108,"props":1556,"children":1557},{"style":132},[1558],{"type":48,"value":1464},{"type":42,"tag":108,"props":1560,"children":1561},{"style":132},[1562],{"type":48,"value":1137},{"type":42,"tag":108,"props":1564,"children":1565},{"style":121},[1566],{"type":48,"value":1567},"viewport",{"type":42,"tag":108,"props":1569,"children":1570},{"style":132},[1571],{"type":48,"value":1137},{"type":42,"tag":108,"props":1573,"children":1574},{"style":1434},[1575],{"type":48,"value":1576}," content",{"type":42,"tag":108,"props":1578,"children":1579},{"style":132},[1580],{"type":48,"value":1464},{"type":42,"tag":108,"props":1582,"children":1583},{"style":132},[1584],{"type":48,"value":1137},{"type":42,"tag":108,"props":1586,"children":1587},{"style":121},[1588],{"type":48,"value":1589},"width=device-width, initial-scale=1.0",{"type":42,"tag":108,"props":1591,"children":1592},{"style":132},[1593],{"type":48,"value":1137},{"type":42,"tag":108,"props":1595,"children":1596},{"style":132},[1597],{"type":48,"value":1538},{"type":42,"tag":108,"props":1599,"children":1600},{"class":110,"line":1258},[1601,1605,1610,1615,1620,1625,1629],{"type":42,"tag":108,"props":1602,"children":1603},{"style":132},[1604],{"type":48,"value":1506},{"type":42,"tag":108,"props":1606,"children":1607},{"style":1228},[1608],{"type":48,"value":1609},"title",{"type":42,"tag":108,"props":1611,"children":1612},{"style":132},[1613],{"type":48,"value":1614},">",{"type":42,"tag":108,"props":1616,"children":1617},{"style":1110},[1618],{"type":48,"value":1619},"MCP App",{"type":42,"tag":108,"props":1621,"children":1622},{"style":132},[1623],{"type":48,"value":1624},"\u003C\u002F",{"type":42,"tag":108,"props":1626,"children":1627},{"style":1228},[1628],{"type":48,"value":1609},{"type":42,"tag":108,"props":1630,"children":1631},{"style":132},[1632],{"type":48,"value":1442},{"type":42,"tag":108,"props":1634,"children":1635},{"class":110,"line":1276},[1636,1641,1645],{"type":42,"tag":108,"props":1637,"children":1638},{"style":132},[1639],{"type":48,"value":1640},"  \u003C\u002F",{"type":42,"tag":108,"props":1642,"children":1643},{"style":1228},[1644],{"type":48,"value":1494},{"type":42,"tag":108,"props":1646,"children":1647},{"style":132},[1648],{"type":48,"value":1442},{"type":42,"tag":108,"props":1650,"children":1651},{"class":110,"line":1306},[1652,1656,1661],{"type":42,"tag":108,"props":1653,"children":1654},{"style":132},[1655],{"type":48,"value":1489},{"type":42,"tag":108,"props":1657,"children":1658},{"style":1228},[1659],{"type":48,"value":1660},"body",{"type":42,"tag":108,"props":1662,"children":1663},{"style":132},[1664],{"type":48,"value":1442},{"type":42,"tag":108,"props":1666,"children":1667},{"class":110,"line":1323},[1668,1672,1677,1682,1686,1690,1694,1698,1703,1707],{"type":42,"tag":108,"props":1669,"children":1670},{"style":132},[1671],{"type":48,"value":1506},{"type":42,"tag":108,"props":1673,"children":1674},{"style":1228},[1675],{"type":48,"value":1676},"div",{"type":42,"tag":108,"props":1678,"children":1679},{"style":1434},[1680],{"type":48,"value":1681}," id",{"type":42,"tag":108,"props":1683,"children":1684},{"style":132},[1685],{"type":48,"value":1464},{"type":42,"tag":108,"props":1687,"children":1688},{"style":132},[1689],{"type":48,"value":1137},{"type":42,"tag":108,"props":1691,"children":1692},{"style":121},[1693],{"type":48,"value":39},{"type":42,"tag":108,"props":1695,"children":1696},{"style":132},[1697],{"type":48,"value":1137},{"type":42,"tag":108,"props":1699,"children":1700},{"style":132},[1701],{"type":48,"value":1702},">\u003C\u002F",{"type":42,"tag":108,"props":1704,"children":1705},{"style":1228},[1706],{"type":48,"value":1676},{"type":42,"tag":108,"props":1708,"children":1709},{"style":132},[1710],{"type":48,"value":1442},{"type":42,"tag":108,"props":1712,"children":1713},{"class":110,"line":1359},[1714,1718,1723,1728,1732,1736,1741,1745,1750,1754,1758,1763,1767,1771,1775],{"type":42,"tag":108,"props":1715,"children":1716},{"style":132},[1717],{"type":48,"value":1506},{"type":42,"tag":108,"props":1719,"children":1720},{"style":1228},[1721],{"type":48,"value":1722},"script",{"type":42,"tag":108,"props":1724,"children":1725},{"style":1434},[1726],{"type":48,"value":1727}," type",{"type":42,"tag":108,"props":1729,"children":1730},{"style":132},[1731],{"type":48,"value":1464},{"type":42,"tag":108,"props":1733,"children":1734},{"style":132},[1735],{"type":48,"value":1137},{"type":42,"tag":108,"props":1737,"children":1738},{"style":121},[1739],{"type":48,"value":1740},"module",{"type":42,"tag":108,"props":1742,"children":1743},{"style":132},[1744],{"type":48,"value":1137},{"type":42,"tag":108,"props":1746,"children":1747},{"style":1434},[1748],{"type":48,"value":1749}," src",{"type":42,"tag":108,"props":1751,"children":1752},{"style":132},[1753],{"type":48,"value":1464},{"type":42,"tag":108,"props":1755,"children":1756},{"style":132},[1757],{"type":48,"value":1137},{"type":42,"tag":108,"props":1759,"children":1760},{"style":121},[1761],{"type":48,"value":1762},".\u002Fsrc\u002Fmcp-app.ts",{"type":42,"tag":108,"props":1764,"children":1765},{"style":132},[1766],{"type":48,"value":1137},{"type":42,"tag":108,"props":1768,"children":1769},{"style":132},[1770],{"type":48,"value":1702},{"type":42,"tag":108,"props":1772,"children":1773},{"style":1228},[1774],{"type":48,"value":1722},{"type":42,"tag":108,"props":1776,"children":1777},{"style":132},[1778],{"type":48,"value":1442},{"type":42,"tag":108,"props":1780,"children":1781},{"class":110,"line":1368},[1782,1786,1790],{"type":42,"tag":108,"props":1783,"children":1784},{"style":132},[1785],{"type":48,"value":1640},{"type":42,"tag":108,"props":1787,"children":1788},{"style":1228},[1789],{"type":48,"value":1660},{"type":42,"tag":108,"props":1791,"children":1792},{"style":132},[1793],{"type":48,"value":1442},{"type":42,"tag":108,"props":1795,"children":1796},{"class":110,"line":1377},[1797,1801,1805],{"type":42,"tag":108,"props":1798,"children":1799},{"style":132},[1800],{"type":48,"value":1624},{"type":42,"tag":108,"props":1802,"children":1803},{"style":1228},[1804],{"type":48,"value":1414},{"type":42,"tag":108,"props":1806,"children":1807},{"style":132},[1808],{"type":48,"value":1442},{"type":42,"tag":183,"props":1810,"children":1812},{"id":1811},"build-scripts",[1813],{"type":48,"value":1814},"Build Scripts",{"type":42,"tag":51,"props":1816,"children":1817},{},[1818,1820,1826],{"type":48,"value":1819},"Add build scripts to ",{"type":42,"tag":57,"props":1821,"children":1823},{"className":1822},[],[1824],{"type":48,"value":1825},"package.json",{"type":48,"value":1827},". The UI must be built before the server code bundles it:",{"type":42,"tag":97,"props":1829,"children":1833},{"className":1830,"code":1831,"language":1832,"meta":102,"style":102},"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",[1834],{"type":42,"tag":57,"props":1835,"children":1836},{"__ignoreMap":102},[1837,1844,1869,1907,1944,1981,2015,2023],{"type":42,"tag":108,"props":1838,"children":1839},{"class":110,"line":111},[1840],{"type":42,"tag":108,"props":1841,"children":1842},{"style":132},[1843],{"type":48,"value":1221},{"type":42,"tag":108,"props":1845,"children":1846},{"class":110,"line":987},[1847,1852,1857,1861,1865],{"type":42,"tag":108,"props":1848,"children":1849},{"style":132},[1850],{"type":48,"value":1851},"  \"",{"type":42,"tag":108,"props":1853,"children":1854},{"style":1434},[1855],{"type":48,"value":1856},"scripts",{"type":42,"tag":108,"props":1858,"children":1859},{"style":132},[1860],{"type":48,"value":1137},{"type":42,"tag":108,"props":1862,"children":1863},{"style":132},[1864],{"type":48,"value":201},{"type":42,"tag":108,"props":1866,"children":1867},{"style":132},[1868],{"type":48,"value":1273},{"type":42,"tag":108,"props":1870,"children":1871},{"class":110,"line":1185},[1872,1877,1882,1886,1890,1894,1899,1903],{"type":42,"tag":108,"props":1873,"children":1874},{"style":132},[1875],{"type":48,"value":1876},"    \"",{"type":42,"tag":108,"props":1878,"children":1879},{"style":115},[1880],{"type":48,"value":1881},"build:ui",{"type":42,"tag":108,"props":1883,"children":1884},{"style":132},[1885],{"type":48,"value":1137},{"type":42,"tag":108,"props":1887,"children":1888},{"style":132},[1889],{"type":48,"value":201},{"type":42,"tag":108,"props":1891,"children":1892},{"style":132},[1893],{"type":48,"value":135},{"type":42,"tag":108,"props":1895,"children":1896},{"style":121},[1897],{"type":48,"value":1898},"vite build",{"type":42,"tag":108,"props":1900,"children":1901},{"style":132},[1902],{"type":48,"value":1137},{"type":42,"tag":108,"props":1904,"children":1905},{"style":132},[1906],{"type":48,"value":1255},{"type":42,"tag":108,"props":1908,"children":1909},{"class":110,"line":1195},[1910,1914,1919,1923,1927,1931,1936,1940],{"type":42,"tag":108,"props":1911,"children":1912},{"style":132},[1913],{"type":48,"value":1876},{"type":42,"tag":108,"props":1915,"children":1916},{"style":115},[1917],{"type":48,"value":1918},"build:server",{"type":42,"tag":108,"props":1920,"children":1921},{"style":132},[1922],{"type":48,"value":1137},{"type":42,"tag":108,"props":1924,"children":1925},{"style":132},[1926],{"type":48,"value":201},{"type":42,"tag":108,"props":1928,"children":1929},{"style":132},[1930],{"type":48,"value":135},{"type":42,"tag":108,"props":1932,"children":1933},{"style":121},[1934],{"type":48,"value":1935},"tsc",{"type":42,"tag":108,"props":1937,"children":1938},{"style":132},[1939],{"type":48,"value":1137},{"type":42,"tag":108,"props":1941,"children":1942},{"style":132},[1943],{"type":48,"value":1255},{"type":42,"tag":108,"props":1945,"children":1946},{"class":110,"line":1224},[1947,1951,1956,1960,1964,1968,1973,1977],{"type":42,"tag":108,"props":1948,"children":1949},{"style":132},[1950],{"type":48,"value":1876},{"type":42,"tag":108,"props":1952,"children":1953},{"style":115},[1954],{"type":48,"value":1955},"build",{"type":42,"tag":108,"props":1957,"children":1958},{"style":132},[1959],{"type":48,"value":1137},{"type":42,"tag":108,"props":1961,"children":1962},{"style":132},[1963],{"type":48,"value":201},{"type":42,"tag":108,"props":1965,"children":1966},{"style":132},[1967],{"type":48,"value":135},{"type":42,"tag":108,"props":1969,"children":1970},{"style":121},[1971],{"type":48,"value":1972},"npm run build:ui && npm run build:server",{"type":42,"tag":108,"props":1974,"children":1975},{"style":132},[1976],{"type":48,"value":1137},{"type":42,"tag":108,"props":1978,"children":1979},{"style":132},[1980],{"type":48,"value":1255},{"type":42,"tag":108,"props":1982,"children":1983},{"class":110,"line":1258},[1984,1988,1993,1997,2001,2005,2010],{"type":42,"tag":108,"props":1985,"children":1986},{"style":132},[1987],{"type":48,"value":1876},{"type":42,"tag":108,"props":1989,"children":1990},{"style":115},[1991],{"type":48,"value":1992},"serve",{"type":42,"tag":108,"props":1994,"children":1995},{"style":132},[1996],{"type":48,"value":1137},{"type":42,"tag":108,"props":1998,"children":1999},{"style":132},[2000],{"type":48,"value":201},{"type":42,"tag":108,"props":2002,"children":2003},{"style":132},[2004],{"type":48,"value":135},{"type":42,"tag":108,"props":2006,"children":2007},{"style":121},[2008],{"type":48,"value":2009},"tsx server.ts",{"type":42,"tag":108,"props":2011,"children":2012},{"style":132},[2013],{"type":48,"value":2014},"\"\n",{"type":42,"tag":108,"props":2016,"children":2017},{"class":110,"line":1276},[2018],{"type":42,"tag":108,"props":2019,"children":2020},{"style":132},[2021],{"type":48,"value":2022},"  }\n",{"type":42,"tag":108,"props":2024,"children":2025},{"class":110,"line":1306},[2026],{"type":42,"tag":108,"props":2027,"children":2028},{"style":132},[2029],{"type":48,"value":2030},"}\n",{"type":42,"tag":66,"props":2032,"children":2034},{"id":2033},"step-4-convert-tools-to-app-tools",[2035],{"type":48,"value":2036},"Step 4: Convert Tools to App Tools",{"type":42,"tag":51,"props":2038,"children":2039},{},[2040],{"type":48,"value":2041},"Transform plain MCP tools into App tools with UI.",{"type":42,"tag":51,"props":2043,"children":2044},{},[2045,2050],{"type":42,"tag":821,"props":2046,"children":2047},{},[2048],{"type":48,"value":2049},"Before",{"type":48,"value":2051}," (plain MCP tool):",{"type":42,"tag":97,"props":2053,"children":2055},{"className":1087,"code":2054,"language":1089,"meta":102,"style":102},"server.tool(\"my-tool\", { param: z.string() }, async (args) => {\n  const data = await fetchData(args.param);\n  return { content: [{ type: \"text\", text: JSON.stringify(data) }] };\n});\n",[2056],{"type":42,"tag":57,"props":2057,"children":2058},{"__ignoreMap":102},[2059,2164,2217,2321],{"type":42,"tag":108,"props":2060,"children":2061},{"class":110,"line":111},[2062,2067,2072,2077,2081,2085,2090,2094,2098,2102,2107,2111,2116,2120,2125,2130,2135,2140,2145,2151,2155,2160],{"type":42,"tag":108,"props":2063,"children":2064},{"style":1110},[2065],{"type":48,"value":2066},"server",{"type":42,"tag":108,"props":2068,"children":2069},{"style":132},[2070],{"type":48,"value":2071},".",{"type":42,"tag":108,"props":2073,"children":2074},{"style":1209},[2075],{"type":48,"value":2076},"tool",{"type":42,"tag":108,"props":2078,"children":2079},{"style":1110},[2080],{"type":48,"value":1216},{"type":42,"tag":108,"props":2082,"children":2083},{"style":132},[2084],{"type":48,"value":1137},{"type":42,"tag":108,"props":2086,"children":2087},{"style":121},[2088],{"type":48,"value":2089},"my-tool",{"type":42,"tag":108,"props":2091,"children":2092},{"style":132},[2093],{"type":48,"value":1137},{"type":42,"tag":108,"props":2095,"children":2096},{"style":132},[2097],{"type":48,"value":1350},{"type":42,"tag":108,"props":2099,"children":2100},{"style":132},[2101],{"type":48,"value":1107},{"type":42,"tag":108,"props":2103,"children":2104},{"style":1228},[2105],{"type":48,"value":2106}," param",{"type":42,"tag":108,"props":2108,"children":2109},{"style":132},[2110],{"type":48,"value":201},{"type":42,"tag":108,"props":2112,"children":2113},{"style":1110},[2114],{"type":48,"value":2115}," z",{"type":42,"tag":108,"props":2117,"children":2118},{"style":132},[2119],{"type":48,"value":2071},{"type":42,"tag":108,"props":2121,"children":2122},{"style":1209},[2123],{"type":48,"value":2124},"string",{"type":42,"tag":108,"props":2126,"children":2127},{"style":1110},[2128],{"type":48,"value":2129},"() ",{"type":42,"tag":108,"props":2131,"children":2132},{"style":132},[2133],{"type":48,"value":2134},"},",{"type":42,"tag":108,"props":2136,"children":2137},{"style":1434},[2138],{"type":48,"value":2139}," async",{"type":42,"tag":108,"props":2141,"children":2142},{"style":132},[2143],{"type":48,"value":2144}," (",{"type":42,"tag":108,"props":2146,"children":2148},{"style":2147},"--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#EEFFFF;--shiki-default-font-style:italic;--shiki-dark:#BABED8;--shiki-dark-font-style:italic",[2149],{"type":48,"value":2150},"args",{"type":42,"tag":108,"props":2152,"children":2153},{"style":132},[2154],{"type":48,"value":1388},{"type":42,"tag":108,"props":2156,"children":2157},{"style":1434},[2158],{"type":48,"value":2159}," =>",{"type":42,"tag":108,"props":2161,"children":2162},{"style":132},[2163],{"type":48,"value":1273},{"type":42,"tag":108,"props":2165,"children":2166},{"class":110,"line":987},[2167,2172,2177,2182,2187,2192,2196,2200,2204,2209,2213],{"type":42,"tag":108,"props":2168,"children":2169},{"style":1434},[2170],{"type":48,"value":2171},"  const",{"type":42,"tag":108,"props":2173,"children":2174},{"style":1110},[2175],{"type":48,"value":2176}," data",{"type":42,"tag":108,"props":2178,"children":2179},{"style":132},[2180],{"type":48,"value":2181}," =",{"type":42,"tag":108,"props":2183,"children":2184},{"style":1099},[2185],{"type":48,"value":2186}," await",{"type":42,"tag":108,"props":2188,"children":2189},{"style":1209},[2190],{"type":48,"value":2191}," fetchData",{"type":42,"tag":108,"props":2193,"children":2194},{"style":1228},[2195],{"type":48,"value":1216},{"type":42,"tag":108,"props":2197,"children":2198},{"style":1110},[2199],{"type":48,"value":2150},{"type":42,"tag":108,"props":2201,"children":2202},{"style":132},[2203],{"type":48,"value":2071},{"type":42,"tag":108,"props":2205,"children":2206},{"style":1110},[2207],{"type":48,"value":2208},"param",{"type":42,"tag":108,"props":2210,"children":2211},{"style":1228},[2212],{"type":48,"value":1388},{"type":42,"tag":108,"props":2214,"children":2215},{"style":132},[2216],{"type":48,"value":1142},{"type":42,"tag":108,"props":2218,"children":2219},{"class":110,"line":1185},[2220,2225,2229,2233,2237,2241,2246,2250,2254,2258,2262,2266,2270,2275,2279,2284,2288,2293,2297,2302,2307,2311,2316],{"type":42,"tag":108,"props":2221,"children":2222},{"style":1099},[2223],{"type":48,"value":2224},"  return",{"type":42,"tag":108,"props":2226,"children":2227},{"style":132},[2228],{"type":48,"value":1107},{"type":42,"tag":108,"props":2230,"children":2231},{"style":1228},[2232],{"type":48,"value":1576},{"type":42,"tag":108,"props":2234,"children":2235},{"style":132},[2236],{"type":48,"value":201},{"type":42,"tag":108,"props":2238,"children":2239},{"style":1228},[2240],{"type":48,"value":1240},{"type":42,"tag":108,"props":2242,"children":2243},{"style":132},[2244],{"type":48,"value":2245},"{",{"type":42,"tag":108,"props":2247,"children":2248},{"style":1228},[2249],{"type":48,"value":1727},{"type":42,"tag":108,"props":2251,"children":2252},{"style":132},[2253],{"type":48,"value":201},{"type":42,"tag":108,"props":2255,"children":2256},{"style":132},[2257],{"type":48,"value":135},{"type":42,"tag":108,"props":2259,"children":2260},{"style":121},[2261],{"type":48,"value":48},{"type":42,"tag":108,"props":2263,"children":2264},{"style":132},[2265],{"type":48,"value":1137},{"type":42,"tag":108,"props":2267,"children":2268},{"style":132},[2269],{"type":48,"value":1350},{"type":42,"tag":108,"props":2271,"children":2272},{"style":1228},[2273],{"type":48,"value":2274}," text",{"type":42,"tag":108,"props":2276,"children":2277},{"style":132},[2278],{"type":48,"value":201},{"type":42,"tag":108,"props":2280,"children":2281},{"style":1110},[2282],{"type":48,"value":2283}," JSON",{"type":42,"tag":108,"props":2285,"children":2286},{"style":132},[2287],{"type":48,"value":2071},{"type":42,"tag":108,"props":2289,"children":2290},{"style":1209},[2291],{"type":48,"value":2292},"stringify",{"type":42,"tag":108,"props":2294,"children":2295},{"style":1228},[2296],{"type":48,"value":1216},{"type":42,"tag":108,"props":2298,"children":2299},{"style":1110},[2300],{"type":48,"value":2301},"data",{"type":42,"tag":108,"props":2303,"children":2304},{"style":1228},[2305],{"type":48,"value":2306},") ",{"type":42,"tag":108,"props":2308,"children":2309},{"style":132},[2310],{"type":48,"value":1383},{"type":42,"tag":108,"props":2312,"children":2313},{"style":1228},[2314],{"type":48,"value":2315},"] ",{"type":42,"tag":108,"props":2317,"children":2318},{"style":132},[2319],{"type":48,"value":2320},"};\n",{"type":42,"tag":108,"props":2322,"children":2323},{"class":110,"line":1195},[2324,2328,2332],{"type":42,"tag":108,"props":2325,"children":2326},{"style":132},[2327],{"type":48,"value":1383},{"type":42,"tag":108,"props":2329,"children":2330},{"style":1110},[2331],{"type":48,"value":1388},{"type":42,"tag":108,"props":2333,"children":2334},{"style":132},[2335],{"type":48,"value":1142},{"type":42,"tag":51,"props":2337,"children":2338},{},[2339,2344],{"type":42,"tag":821,"props":2340,"children":2341},{},[2342],{"type":48,"value":2343},"After",{"type":48,"value":2345}," (App tool with UI):",{"type":42,"tag":97,"props":2347,"children":2349},{"className":1087,"code":2348,"language":1089,"meta":102,"style":102},"import { registerAppTool, registerAppResource, RESOURCE_MIME_TYPE } from \"@modelcontextprotocol\u002Fext-apps\u002Fserver\";\n\nconst resourceUri = \"ui:\u002F\u002Fmy-tool\u002Fmcp-app.html\";\n\nregisterAppTool(server, \"my-tool\", {\n  description: \"Shows data with an interactive UI\",\n  inputSchema: { param: z.string() },\n  _meta: { ui: { resourceUri } },\n}, async (args) => {\n  const data = await fetchData(args.param);\n  return {\n    content: [{ type: \"text\", text: JSON.stringify(data) }],   \u002F\u002F text fallback for non-UI hosts\n    structuredContent: { data },                                 \u002F\u002F structured data for the UI\n  };\n});\n",[2350],{"type":42,"tag":57,"props":2351,"children":2352},{"__ignoreMap":102},[2353,2412,2419,2453,2460,2496,2525,2570,2612,2643,2690,2701,2795,2826,2835],{"type":42,"tag":108,"props":2354,"children":2355},{"class":110,"line":111},[2356,2360,2364,2369,2373,2378,2382,2387,2391,2395,2399,2404,2408],{"type":42,"tag":108,"props":2357,"children":2358},{"style":1099},[2359],{"type":48,"value":1102},{"type":42,"tag":108,"props":2361,"children":2362},{"style":132},[2363],{"type":48,"value":1107},{"type":42,"tag":108,"props":2365,"children":2366},{"style":1110},[2367],{"type":48,"value":2368}," registerAppTool",{"type":42,"tag":108,"props":2370,"children":2371},{"style":132},[2372],{"type":48,"value":1350},{"type":42,"tag":108,"props":2374,"children":2375},{"style":1110},[2376],{"type":48,"value":2377}," registerAppResource",{"type":42,"tag":108,"props":2379,"children":2380},{"style":132},[2381],{"type":48,"value":1350},{"type":42,"tag":108,"props":2383,"children":2384},{"style":1110},[2385],{"type":48,"value":2386}," RESOURCE_MIME_TYPE",{"type":42,"tag":108,"props":2388,"children":2389},{"style":132},[2390],{"type":48,"value":1118},{"type":42,"tag":108,"props":2392,"children":2393},{"style":1099},[2394],{"type":48,"value":1123},{"type":42,"tag":108,"props":2396,"children":2397},{"style":132},[2398],{"type":48,"value":135},{"type":42,"tag":108,"props":2400,"children":2401},{"style":121},[2402],{"type":48,"value":2403},"@modelcontextprotocol\u002Fext-apps\u002Fserver",{"type":42,"tag":108,"props":2405,"children":2406},{"style":132},[2407],{"type":48,"value":1137},{"type":42,"tag":108,"props":2409,"children":2410},{"style":132},[2411],{"type":48,"value":1142},{"type":42,"tag":108,"props":2413,"children":2414},{"class":110,"line":987},[2415],{"type":42,"tag":108,"props":2416,"children":2417},{"emptyLinePlaceholder":1189},[2418],{"type":48,"value":1192},{"type":42,"tag":108,"props":2420,"children":2421},{"class":110,"line":1185},[2422,2427,2432,2436,2440,2445,2449],{"type":42,"tag":108,"props":2423,"children":2424},{"style":1434},[2425],{"type":48,"value":2426},"const",{"type":42,"tag":108,"props":2428,"children":2429},{"style":1110},[2430],{"type":48,"value":2431}," resourceUri ",{"type":42,"tag":108,"props":2433,"children":2434},{"style":132},[2435],{"type":48,"value":1464},{"type":42,"tag":108,"props":2437,"children":2438},{"style":132},[2439],{"type":48,"value":135},{"type":42,"tag":108,"props":2441,"children":2442},{"style":121},[2443],{"type":48,"value":2444},"ui:\u002F\u002Fmy-tool\u002Fmcp-app.html",{"type":42,"tag":108,"props":2446,"children":2447},{"style":132},[2448],{"type":48,"value":1137},{"type":42,"tag":108,"props":2450,"children":2451},{"style":132},[2452],{"type":48,"value":1142},{"type":42,"tag":108,"props":2454,"children":2455},{"class":110,"line":1195},[2456],{"type":42,"tag":108,"props":2457,"children":2458},{"emptyLinePlaceholder":1189},[2459],{"type":48,"value":1192},{"type":42,"tag":108,"props":2461,"children":2462},{"class":110,"line":1224},[2463,2467,2472,2476,2480,2484,2488,2492],{"type":42,"tag":108,"props":2464,"children":2465},{"style":1209},[2466],{"type":48,"value":303},{"type":42,"tag":108,"props":2468,"children":2469},{"style":1110},[2470],{"type":48,"value":2471},"(server",{"type":42,"tag":108,"props":2473,"children":2474},{"style":132},[2475],{"type":48,"value":1350},{"type":42,"tag":108,"props":2477,"children":2478},{"style":132},[2479],{"type":48,"value":135},{"type":42,"tag":108,"props":2481,"children":2482},{"style":121},[2483],{"type":48,"value":2089},{"type":42,"tag":108,"props":2485,"children":2486},{"style":132},[2487],{"type":48,"value":1137},{"type":42,"tag":108,"props":2489,"children":2490},{"style":132},[2491],{"type":48,"value":1350},{"type":42,"tag":108,"props":2493,"children":2494},{"style":132},[2495],{"type":48,"value":1273},{"type":42,"tag":108,"props":2497,"children":2498},{"class":110,"line":1258},[2499,2504,2508,2512,2517,2521],{"type":42,"tag":108,"props":2500,"children":2501},{"style":1228},[2502],{"type":48,"value":2503},"  description",{"type":42,"tag":108,"props":2505,"children":2506},{"style":132},[2507],{"type":48,"value":201},{"type":42,"tag":108,"props":2509,"children":2510},{"style":132},[2511],{"type":48,"value":135},{"type":42,"tag":108,"props":2513,"children":2514},{"style":121},[2515],{"type":48,"value":2516},"Shows data with an interactive UI",{"type":42,"tag":108,"props":2518,"children":2519},{"style":132},[2520],{"type":48,"value":1137},{"type":42,"tag":108,"props":2522,"children":2523},{"style":132},[2524],{"type":48,"value":1255},{"type":42,"tag":108,"props":2526,"children":2527},{"class":110,"line":1276},[2528,2533,2537,2541,2545,2549,2553,2557,2561,2565],{"type":42,"tag":108,"props":2529,"children":2530},{"style":1228},[2531],{"type":48,"value":2532},"  inputSchema",{"type":42,"tag":108,"props":2534,"children":2535},{"style":132},[2536],{"type":48,"value":201},{"type":42,"tag":108,"props":2538,"children":2539},{"style":132},[2540],{"type":48,"value":1107},{"type":42,"tag":108,"props":2542,"children":2543},{"style":1228},[2544],{"type":48,"value":2106},{"type":42,"tag":108,"props":2546,"children":2547},{"style":132},[2548],{"type":48,"value":201},{"type":42,"tag":108,"props":2550,"children":2551},{"style":1110},[2552],{"type":48,"value":2115},{"type":42,"tag":108,"props":2554,"children":2555},{"style":132},[2556],{"type":48,"value":2071},{"type":42,"tag":108,"props":2558,"children":2559},{"style":1209},[2560],{"type":48,"value":2124},{"type":42,"tag":108,"props":2562,"children":2563},{"style":1110},[2564],{"type":48,"value":2129},{"type":42,"tag":108,"props":2566,"children":2567},{"style":132},[2568],{"type":48,"value":2569},"},\n",{"type":42,"tag":108,"props":2571,"children":2572},{"class":110,"line":1306},[2573,2578,2582,2586,2591,2595,2599,2603,2607],{"type":42,"tag":108,"props":2574,"children":2575},{"style":1228},[2576],{"type":48,"value":2577},"  _meta",{"type":42,"tag":108,"props":2579,"children":2580},{"style":132},[2581],{"type":48,"value":201},{"type":42,"tag":108,"props":2583,"children":2584},{"style":132},[2585],{"type":48,"value":1107},{"type":42,"tag":108,"props":2587,"children":2588},{"style":1228},[2589],{"type":48,"value":2590}," ui",{"type":42,"tag":108,"props":2592,"children":2593},{"style":132},[2594],{"type":48,"value":201},{"type":42,"tag":108,"props":2596,"children":2597},{"style":132},[2598],{"type":48,"value":1107},{"type":42,"tag":108,"props":2600,"children":2601},{"style":1110},[2602],{"type":48,"value":2431},{"type":42,"tag":108,"props":2604,"children":2605},{"style":132},[2606],{"type":48,"value":1383},{"type":42,"tag":108,"props":2608,"children":2609},{"style":132},[2610],{"type":48,"value":2611}," },\n",{"type":42,"tag":108,"props":2613,"children":2614},{"class":110,"line":1323},[2615,2619,2623,2627,2631,2635,2639],{"type":42,"tag":108,"props":2616,"children":2617},{"style":132},[2618],{"type":48,"value":2134},{"type":42,"tag":108,"props":2620,"children":2621},{"style":1434},[2622],{"type":48,"value":2139},{"type":42,"tag":108,"props":2624,"children":2625},{"style":132},[2626],{"type":48,"value":2144},{"type":42,"tag":108,"props":2628,"children":2629},{"style":2147},[2630],{"type":48,"value":2150},{"type":42,"tag":108,"props":2632,"children":2633},{"style":132},[2634],{"type":48,"value":1388},{"type":42,"tag":108,"props":2636,"children":2637},{"style":1434},[2638],{"type":48,"value":2159},{"type":42,"tag":108,"props":2640,"children":2641},{"style":132},[2642],{"type":48,"value":1273},{"type":42,"tag":108,"props":2644,"children":2645},{"class":110,"line":1359},[2646,2650,2654,2658,2662,2666,2670,2674,2678,2682,2686],{"type":42,"tag":108,"props":2647,"children":2648},{"style":1434},[2649],{"type":48,"value":2171},{"type":42,"tag":108,"props":2651,"children":2652},{"style":1110},[2653],{"type":48,"value":2176},{"type":42,"tag":108,"props":2655,"children":2656},{"style":132},[2657],{"type":48,"value":2181},{"type":42,"tag":108,"props":2659,"children":2660},{"style":1099},[2661],{"type":48,"value":2186},{"type":42,"tag":108,"props":2663,"children":2664},{"style":1209},[2665],{"type":48,"value":2191},{"type":42,"tag":108,"props":2667,"children":2668},{"style":1228},[2669],{"type":48,"value":1216},{"type":42,"tag":108,"props":2671,"children":2672},{"style":1110},[2673],{"type":48,"value":2150},{"type":42,"tag":108,"props":2675,"children":2676},{"style":132},[2677],{"type":48,"value":2071},{"type":42,"tag":108,"props":2679,"children":2680},{"style":1110},[2681],{"type":48,"value":2208},{"type":42,"tag":108,"props":2683,"children":2684},{"style":1228},[2685],{"type":48,"value":1388},{"type":42,"tag":108,"props":2687,"children":2688},{"style":132},[2689],{"type":48,"value":1142},{"type":42,"tag":108,"props":2691,"children":2692},{"class":110,"line":1368},[2693,2697],{"type":42,"tag":108,"props":2694,"children":2695},{"style":1099},[2696],{"type":48,"value":2224},{"type":42,"tag":108,"props":2698,"children":2699},{"style":132},[2700],{"type":48,"value":1273},{"type":42,"tag":108,"props":2702,"children":2703},{"class":110,"line":1377},[2704,2709,2713,2717,2721,2725,2729,2733,2737,2741,2745,2749,2753,2757,2761,2765,2769,2773,2777,2781,2786,2790],{"type":42,"tag":108,"props":2705,"children":2706},{"style":1228},[2707],{"type":48,"value":2708},"    content",{"type":42,"tag":108,"props":2710,"children":2711},{"style":132},[2712],{"type":48,"value":201},{"type":42,"tag":108,"props":2714,"children":2715},{"style":1228},[2716],{"type":48,"value":1240},{"type":42,"tag":108,"props":2718,"children":2719},{"style":132},[2720],{"type":48,"value":2245},{"type":42,"tag":108,"props":2722,"children":2723},{"style":1228},[2724],{"type":48,"value":1727},{"type":42,"tag":108,"props":2726,"children":2727},{"style":132},[2728],{"type":48,"value":201},{"type":42,"tag":108,"props":2730,"children":2731},{"style":132},[2732],{"type":48,"value":135},{"type":42,"tag":108,"props":2734,"children":2735},{"style":121},[2736],{"type":48,"value":48},{"type":42,"tag":108,"props":2738,"children":2739},{"style":132},[2740],{"type":48,"value":1137},{"type":42,"tag":108,"props":2742,"children":2743},{"style":132},[2744],{"type":48,"value":1350},{"type":42,"tag":108,"props":2746,"children":2747},{"style":1228},[2748],{"type":48,"value":2274},{"type":42,"tag":108,"props":2750,"children":2751},{"style":132},[2752],{"type":48,"value":201},{"type":42,"tag":108,"props":2754,"children":2755},{"style":1110},[2756],{"type":48,"value":2283},{"type":42,"tag":108,"props":2758,"children":2759},{"style":132},[2760],{"type":48,"value":2071},{"type":42,"tag":108,"props":2762,"children":2763},{"style":1209},[2764],{"type":48,"value":2292},{"type":42,"tag":108,"props":2766,"children":2767},{"style":1228},[2768],{"type":48,"value":1216},{"type":42,"tag":108,"props":2770,"children":2771},{"style":1110},[2772],{"type":48,"value":2301},{"type":42,"tag":108,"props":2774,"children":2775},{"style":1228},[2776],{"type":48,"value":2306},{"type":42,"tag":108,"props":2778,"children":2779},{"style":132},[2780],{"type":48,"value":1383},{"type":42,"tag":108,"props":2782,"children":2783},{"style":1228},[2784],{"type":48,"value":2785},"]",{"type":42,"tag":108,"props":2787,"children":2788},{"style":132},[2789],{"type":48,"value":1350},{"type":42,"tag":108,"props":2791,"children":2792},{"style":1353},[2793],{"type":48,"value":2794},"   \u002F\u002F text fallback for non-UI hosts\n",{"type":42,"tag":108,"props":2796,"children":2798},{"class":110,"line":2797},13,[2799,2804,2808,2812,2816,2821],{"type":42,"tag":108,"props":2800,"children":2801},{"style":1228},[2802],{"type":48,"value":2803},"    structuredContent",{"type":42,"tag":108,"props":2805,"children":2806},{"style":132},[2807],{"type":48,"value":201},{"type":42,"tag":108,"props":2809,"children":2810},{"style":132},[2811],{"type":48,"value":1107},{"type":42,"tag":108,"props":2813,"children":2814},{"style":1110},[2815],{"type":48,"value":2176},{"type":42,"tag":108,"props":2817,"children":2818},{"style":132},[2819],{"type":48,"value":2820}," },",{"type":42,"tag":108,"props":2822,"children":2823},{"style":1353},[2824],{"type":48,"value":2825},"                                 \u002F\u002F structured data for the UI\n",{"type":42,"tag":108,"props":2827,"children":2829},{"class":110,"line":2828},14,[2830],{"type":42,"tag":108,"props":2831,"children":2832},{"style":132},[2833],{"type":48,"value":2834},"  };\n",{"type":42,"tag":108,"props":2836,"children":2838},{"class":110,"line":2837},15,[2839,2843,2847],{"type":42,"tag":108,"props":2840,"children":2841},{"style":132},[2842],{"type":48,"value":1383},{"type":42,"tag":108,"props":2844,"children":2845},{"style":1110},[2846],{"type":48,"value":1388},{"type":42,"tag":108,"props":2848,"children":2849},{"style":132},[2850],{"type":48,"value":1142},{"type":42,"tag":51,"props":2852,"children":2853},{},[2854],{"type":48,"value":2855},"Key guidance:",{"type":42,"tag":2857,"props":2858,"children":2859},"ul",{},[2860,2878,2891,2901],{"type":42,"tag":805,"props":2861,"children":2862},{},[2863,2876],{"type":42,"tag":821,"props":2864,"children":2865},{},[2866,2868,2874],{"type":48,"value":2867},"Always keep the ",{"type":42,"tag":57,"props":2869,"children":2871},{"className":2870},[],[2872],{"type":48,"value":2873},"content",{"type":48,"value":2875}," array",{"type":48,"value":2877}," with a text fallback for text-only clients",{"type":42,"tag":805,"props":2879,"children":2880},{},[2881,2883,2889],{"type":48,"value":2882},"Add ",{"type":42,"tag":57,"props":2884,"children":2886},{"className":2885},[],[2887],{"type":48,"value":2888},"structuredContent",{"type":48,"value":2890}," for data the UI needs to render",{"type":42,"tag":805,"props":2892,"children":2893},{},[2894,2896],{"type":48,"value":2895},"Link the tool to its resource via ",{"type":42,"tag":57,"props":2897,"children":2899},{"className":2898},[],[2900],{"type":48,"value":82},{"type":42,"tag":805,"props":2902,"children":2903},{},[2904],{"type":48,"value":2905},"Leave tools that don't benefit from UI unchanged — they stay as plain tools",{"type":42,"tag":66,"props":2907,"children":2909},{"id":2908},"step-5-register-resources",[2910],{"type":48,"value":2911},"Step 5: Register Resources",{"type":42,"tag":51,"props":2913,"children":2914},{},[2915],{"type":48,"value":2916},"Register the HTML resource so the host can fetch it:",{"type":42,"tag":97,"props":2918,"children":2920},{"className":1087,"code":2919,"language":1089,"meta":102,"style":102},"import fs from \"node:fs\u002Fpromises\";\nimport path from \"node:path\";\n\nconst resourceUri = \"ui:\u002F\u002Fmy-tool\u002Fmcp-app.html\";\n\nregisterAppResource(server, {\n  uri: resourceUri,\n  name: \"My Tool UI\",\n  mimeType: RESOURCE_MIME_TYPE,\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",[2921],{"type":42,"tag":57,"props":2922,"children":2923},{"__ignoreMap":102},[2924,2958,2991,2998,3029,3036,3055,3076,3105,3125,3149,3187,3269,3289,3301,3387],{"type":42,"tag":108,"props":2925,"children":2926},{"class":110,"line":111},[2927,2931,2936,2941,2945,2950,2954],{"type":42,"tag":108,"props":2928,"children":2929},{"style":1099},[2930],{"type":48,"value":1102},{"type":42,"tag":108,"props":2932,"children":2933},{"style":1110},[2934],{"type":48,"value":2935}," fs ",{"type":42,"tag":108,"props":2937,"children":2938},{"style":1099},[2939],{"type":48,"value":2940},"from",{"type":42,"tag":108,"props":2942,"children":2943},{"style":132},[2944],{"type":48,"value":135},{"type":42,"tag":108,"props":2946,"children":2947},{"style":121},[2948],{"type":48,"value":2949},"node:fs\u002Fpromises",{"type":42,"tag":108,"props":2951,"children":2952},{"style":132},[2953],{"type":48,"value":1137},{"type":42,"tag":108,"props":2955,"children":2956},{"style":132},[2957],{"type":48,"value":1142},{"type":42,"tag":108,"props":2959,"children":2960},{"class":110,"line":987},[2961,2965,2970,2974,2978,2983,2987],{"type":42,"tag":108,"props":2962,"children":2963},{"style":1099},[2964],{"type":48,"value":1102},{"type":42,"tag":108,"props":2966,"children":2967},{"style":1110},[2968],{"type":48,"value":2969}," path ",{"type":42,"tag":108,"props":2971,"children":2972},{"style":1099},[2973],{"type":48,"value":2940},{"type":42,"tag":108,"props":2975,"children":2976},{"style":132},[2977],{"type":48,"value":135},{"type":42,"tag":108,"props":2979,"children":2980},{"style":121},[2981],{"type":48,"value":2982},"node:path",{"type":42,"tag":108,"props":2984,"children":2985},{"style":132},[2986],{"type":48,"value":1137},{"type":42,"tag":108,"props":2988,"children":2989},{"style":132},[2990],{"type":48,"value":1142},{"type":42,"tag":108,"props":2992,"children":2993},{"class":110,"line":1185},[2994],{"type":42,"tag":108,"props":2995,"children":2996},{"emptyLinePlaceholder":1189},[2997],{"type":48,"value":1192},{"type":42,"tag":108,"props":2999,"children":3000},{"class":110,"line":1195},[3001,3005,3009,3013,3017,3021,3025],{"type":42,"tag":108,"props":3002,"children":3003},{"style":1434},[3004],{"type":48,"value":2426},{"type":42,"tag":108,"props":3006,"children":3007},{"style":1110},[3008],{"type":48,"value":2431},{"type":42,"tag":108,"props":3010,"children":3011},{"style":132},[3012],{"type":48,"value":1464},{"type":42,"tag":108,"props":3014,"children":3015},{"style":132},[3016],{"type":48,"value":135},{"type":42,"tag":108,"props":3018,"children":3019},{"style":121},[3020],{"type":48,"value":2444},{"type":42,"tag":108,"props":3022,"children":3023},{"style":132},[3024],{"type":48,"value":1137},{"type":42,"tag":108,"props":3026,"children":3027},{"style":132},[3028],{"type":48,"value":1142},{"type":42,"tag":108,"props":3030,"children":3031},{"class":110,"line":1224},[3032],{"type":42,"tag":108,"props":3033,"children":3034},{"emptyLinePlaceholder":1189},[3035],{"type":48,"value":1192},{"type":42,"tag":108,"props":3037,"children":3038},{"class":110,"line":1258},[3039,3043,3047,3051],{"type":42,"tag":108,"props":3040,"children":3041},{"style":1209},[3042],{"type":48,"value":310},{"type":42,"tag":108,"props":3044,"children":3045},{"style":1110},[3046],{"type":48,"value":2471},{"type":42,"tag":108,"props":3048,"children":3049},{"style":132},[3050],{"type":48,"value":1350},{"type":42,"tag":108,"props":3052,"children":3053},{"style":132},[3054],{"type":48,"value":1273},{"type":42,"tag":108,"props":3056,"children":3057},{"class":110,"line":1276},[3058,3063,3067,3072],{"type":42,"tag":108,"props":3059,"children":3060},{"style":1228},[3061],{"type":48,"value":3062},"  uri",{"type":42,"tag":108,"props":3064,"children":3065},{"style":132},[3066],{"type":48,"value":201},{"type":42,"tag":108,"props":3068,"children":3069},{"style":1110},[3070],{"type":48,"value":3071}," resourceUri",{"type":42,"tag":108,"props":3073,"children":3074},{"style":132},[3075],{"type":48,"value":1255},{"type":42,"tag":108,"props":3077,"children":3078},{"class":110,"line":1306},[3079,3084,3088,3092,3097,3101],{"type":42,"tag":108,"props":3080,"children":3081},{"style":1228},[3082],{"type":48,"value":3083},"  name",{"type":42,"tag":108,"props":3085,"children":3086},{"style":132},[3087],{"type":48,"value":201},{"type":42,"tag":108,"props":3089,"children":3090},{"style":132},[3091],{"type":48,"value":135},{"type":42,"tag":108,"props":3093,"children":3094},{"style":121},[3095],{"type":48,"value":3096},"My Tool UI",{"type":42,"tag":108,"props":3098,"children":3099},{"style":132},[3100],{"type":48,"value":1137},{"type":42,"tag":108,"props":3102,"children":3103},{"style":132},[3104],{"type":48,"value":1255},{"type":42,"tag":108,"props":3106,"children":3107},{"class":110,"line":1323},[3108,3113,3117,3121],{"type":42,"tag":108,"props":3109,"children":3110},{"style":1228},[3111],{"type":48,"value":3112},"  mimeType",{"type":42,"tag":108,"props":3114,"children":3115},{"style":132},[3116],{"type":48,"value":201},{"type":42,"tag":108,"props":3118,"children":3119},{"style":1110},[3120],{"type":48,"value":2386},{"type":42,"tag":108,"props":3122,"children":3123},{"style":132},[3124],{"type":48,"value":1255},{"type":42,"tag":108,"props":3126,"children":3127},{"class":110,"line":1359},[3128,3132,3136,3141,3145],{"type":42,"tag":108,"props":3129,"children":3130},{"style":132},[3131],{"type":48,"value":2134},{"type":42,"tag":108,"props":3133,"children":3134},{"style":1434},[3135],{"type":48,"value":2139},{"type":42,"tag":108,"props":3137,"children":3138},{"style":132},[3139],{"type":48,"value":3140}," ()",{"type":42,"tag":108,"props":3142,"children":3143},{"style":1434},[3144],{"type":48,"value":2159},{"type":42,"tag":108,"props":3146,"children":3147},{"style":132},[3148],{"type":48,"value":1273},{"type":42,"tag":108,"props":3150,"children":3151},{"class":110,"line":1368},[3152,3156,3160,3164,3168,3173,3177,3182],{"type":42,"tag":108,"props":3153,"children":3154},{"style":1434},[3155],{"type":48,"value":2171},{"type":42,"tag":108,"props":3157,"children":3158},{"style":1110},[3159],{"type":48,"value":1437},{"type":42,"tag":108,"props":3161,"children":3162},{"style":132},[3163],{"type":48,"value":2181},{"type":42,"tag":108,"props":3165,"children":3166},{"style":1099},[3167],{"type":48,"value":2186},{"type":42,"tag":108,"props":3169,"children":3170},{"style":1110},[3171],{"type":48,"value":3172}," fs",{"type":42,"tag":108,"props":3174,"children":3175},{"style":132},[3176],{"type":48,"value":2071},{"type":42,"tag":108,"props":3178,"children":3179},{"style":1209},[3180],{"type":48,"value":3181},"readFile",{"type":42,"tag":108,"props":3183,"children":3184},{"style":1228},[3185],{"type":48,"value":3186},"(\n",{"type":42,"tag":108,"props":3188,"children":3189},{"class":110,"line":1377},[3190,3195,3199,3204,3208,3212,3216,3220,3224,3229,3233,3237,3241,3245,3249,3253,3257,3261,3265],{"type":42,"tag":108,"props":3191,"children":3192},{"style":1110},[3193],{"type":48,"value":3194},"    path",{"type":42,"tag":108,"props":3196,"children":3197},{"style":132},[3198],{"type":48,"value":2071},{"type":42,"tag":108,"props":3200,"children":3201},{"style":1209},[3202],{"type":48,"value":3203},"resolve",{"type":42,"tag":108,"props":3205,"children":3206},{"style":1228},[3207],{"type":48,"value":1216},{"type":42,"tag":108,"props":3209,"children":3210},{"style":1099},[3211],{"type":48,"value":1102},{"type":42,"tag":108,"props":3213,"children":3214},{"style":132},[3215],{"type":48,"value":2071},{"type":42,"tag":108,"props":3217,"children":3218},{"style":1110},[3219],{"type":48,"value":1511},{"type":42,"tag":108,"props":3221,"children":3222},{"style":132},[3223],{"type":48,"value":2071},{"type":42,"tag":108,"props":3225,"children":3226},{"style":1110},[3227],{"type":48,"value":3228},"dirname",{"type":42,"tag":108,"props":3230,"children":3231},{"style":132},[3232],{"type":48,"value":1350},{"type":42,"tag":108,"props":3234,"children":3235},{"style":132},[3236],{"type":48,"value":135},{"type":42,"tag":108,"props":3238,"children":3239},{"style":121},[3240],{"type":48,"value":1295},{"type":42,"tag":108,"props":3242,"children":3243},{"style":132},[3244],{"type":48,"value":1137},{"type":42,"tag":108,"props":3246,"children":3247},{"style":132},[3248],{"type":48,"value":1350},{"type":42,"tag":108,"props":3250,"children":3251},{"style":132},[3252],{"type":48,"value":135},{"type":42,"tag":108,"props":3254,"children":3255},{"style":121},[3256],{"type":48,"value":646},{"type":42,"tag":108,"props":3258,"children":3259},{"style":132},[3260],{"type":48,"value":1137},{"type":42,"tag":108,"props":3262,"children":3263},{"style":1228},[3264],{"type":48,"value":1388},{"type":42,"tag":108,"props":3266,"children":3267},{"style":132},[3268],{"type":48,"value":1255},{"type":42,"tag":108,"props":3270,"children":3271},{"class":110,"line":2797},[3272,3276,3281,3285],{"type":42,"tag":108,"props":3273,"children":3274},{"style":132},[3275],{"type":48,"value":1876},{"type":42,"tag":108,"props":3277,"children":3278},{"style":121},[3279],{"type":48,"value":3280},"utf-8",{"type":42,"tag":108,"props":3282,"children":3283},{"style":132},[3284],{"type":48,"value":1137},{"type":42,"tag":108,"props":3286,"children":3287},{"style":132},[3288],{"type":48,"value":1255},{"type":42,"tag":108,"props":3290,"children":3291},{"class":110,"line":2828},[3292,3297],{"type":42,"tag":108,"props":3293,"children":3294},{"style":1228},[3295],{"type":48,"value":3296},"  )",{"type":42,"tag":108,"props":3298,"children":3299},{"style":132},[3300],{"type":48,"value":1142},{"type":42,"tag":108,"props":3302,"children":3303},{"class":110,"line":2837},[3304,3308,3312,3317,3321,3325,3329,3334,3338,3342,3346,3351,3355,3359,3363,3367,3371,3375,3379,3383],{"type":42,"tag":108,"props":3305,"children":3306},{"style":1099},[3307],{"type":48,"value":2224},{"type":42,"tag":108,"props":3309,"children":3310},{"style":132},[3311],{"type":48,"value":1107},{"type":42,"tag":108,"props":3313,"children":3314},{"style":1228},[3315],{"type":48,"value":3316}," contents",{"type":42,"tag":108,"props":3318,"children":3319},{"style":132},[3320],{"type":48,"value":201},{"type":42,"tag":108,"props":3322,"children":3323},{"style":1228},[3324],{"type":48,"value":1240},{"type":42,"tag":108,"props":3326,"children":3327},{"style":132},[3328],{"type":48,"value":2245},{"type":42,"tag":108,"props":3330,"children":3331},{"style":1228},[3332],{"type":48,"value":3333}," uri",{"type":42,"tag":108,"props":3335,"children":3336},{"style":132},[3337],{"type":48,"value":201},{"type":42,"tag":108,"props":3339,"children":3340},{"style":1110},[3341],{"type":48,"value":3071},{"type":42,"tag":108,"props":3343,"children":3344},{"style":132},[3345],{"type":48,"value":1350},{"type":42,"tag":108,"props":3347,"children":3348},{"style":1228},[3349],{"type":48,"value":3350}," mimeType",{"type":42,"tag":108,"props":3352,"children":3353},{"style":132},[3354],{"type":48,"value":201},{"type":42,"tag":108,"props":3356,"children":3357},{"style":1110},[3358],{"type":48,"value":2386},{"type":42,"tag":108,"props":3360,"children":3361},{"style":132},[3362],{"type":48,"value":1350},{"type":42,"tag":108,"props":3364,"children":3365},{"style":1228},[3366],{"type":48,"value":2274},{"type":42,"tag":108,"props":3368,"children":3369},{"style":132},[3370],{"type":48,"value":201},{"type":42,"tag":108,"props":3372,"children":3373},{"style":1110},[3374],{"type":48,"value":1437},{"type":42,"tag":108,"props":3376,"children":3377},{"style":132},[3378],{"type":48,"value":1118},{"type":42,"tag":108,"props":3380,"children":3381},{"style":1228},[3382],{"type":48,"value":2315},{"type":42,"tag":108,"props":3384,"children":3385},{"style":132},[3386],{"type":48,"value":2320},{"type":42,"tag":108,"props":3388,"children":3390},{"class":110,"line":3389},16,[3391,3395,3399],{"type":42,"tag":108,"props":3392,"children":3393},{"style":132},[3394],{"type":48,"value":1383},{"type":42,"tag":108,"props":3396,"children":3397},{"style":1110},[3398],{"type":48,"value":1388},{"type":42,"tag":108,"props":3400,"children":3401},{"style":132},[3402],{"type":48,"value":1142},{"type":42,"tag":51,"props":3404,"children":3405},{},[3406,3408,3414],{"type":48,"value":3407},"If multiple tools share the same UI, they can reference the same ",{"type":42,"tag":57,"props":3409,"children":3411},{"className":3410},[],[3412],{"type":48,"value":3413},"resourceUri",{"type":48,"value":3415}," and the same resource registration.",{"type":42,"tag":66,"props":3417,"children":3419},{"id":3418},"step-6-build-the-ui",[3420],{"type":48,"value":3421},"Step 6: Build the UI",{"type":42,"tag":183,"props":3423,"children":3425},{"id":3424},"handler-registration",[3426],{"type":48,"value":3427},"Handler Registration",{"type":42,"tag":51,"props":3429,"children":3430},{},[3431,3433,3439],{"type":48,"value":3432},"Register ALL handlers BEFORE calling ",{"type":42,"tag":57,"props":3434,"children":3436},{"className":3435},[],[3437],{"type":48,"value":3438},"app.connect()",{"type":48,"value":201},{"type":42,"tag":97,"props":3441,"children":3443},{"className":1087,"code":3442,"language":1089,"meta":102,"style":102},"import { App, PostMessageTransport, applyDocumentTheme, applyHostStyleVariables, applyHostFonts } from \"@modelcontextprotocol\u002Fext-apps\";\n\nconst app = new App({ name: \"My App\", version: \"1.0.0\" });\n\napp.ontoolinput = (params) => {\n  \u002F\u002F Render the UI using params.arguments and\u002For params.structuredContent\n};\n\napp.ontoolresult = (result) => {\n  \u002F\u002F Update UI with final tool result\n};\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  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\napp.onteardown = async () => {\n  return {};\n};\n\nawait app.connect(new PostMessageTransport());\n",[3444],{"type":42,"tag":57,"props":3445,"children":3446},{"__ignoreMap":102},[3447,3523,3530,3622,3629,3670,3678,3685,3692,3732,3740,3747,3754,3794,3851,3925,4014,4047,4117,4237,4245,4253,4261,4297,4310,4318,4326],{"type":42,"tag":108,"props":3448,"children":3449},{"class":110,"line":111},[3450,3454,3458,3463,3467,3472,3476,3481,3485,3490,3494,3499,3503,3507,3511,3515,3519],{"type":42,"tag":108,"props":3451,"children":3452},{"style":1099},[3453],{"type":48,"value":1102},{"type":42,"tag":108,"props":3455,"children":3456},{"style":132},[3457],{"type":48,"value":1107},{"type":42,"tag":108,"props":3459,"children":3460},{"style":1110},[3461],{"type":48,"value":3462}," App",{"type":42,"tag":108,"props":3464,"children":3465},{"style":132},[3466],{"type":48,"value":1350},{"type":42,"tag":108,"props":3468,"children":3469},{"style":1110},[3470],{"type":48,"value":3471}," PostMessageTransport",{"type":42,"tag":108,"props":3473,"children":3474},{"style":132},[3475],{"type":48,"value":1350},{"type":42,"tag":108,"props":3477,"children":3478},{"style":1110},[3479],{"type":48,"value":3480}," applyDocumentTheme",{"type":42,"tag":108,"props":3482,"children":3483},{"style":132},[3484],{"type":48,"value":1350},{"type":42,"tag":108,"props":3486,"children":3487},{"style":1110},[3488],{"type":48,"value":3489}," applyHostStyleVariables",{"type":42,"tag":108,"props":3491,"children":3492},{"style":132},[3493],{"type":48,"value":1350},{"type":42,"tag":108,"props":3495,"children":3496},{"style":1110},[3497],{"type":48,"value":3498}," applyHostFonts",{"type":42,"tag":108,"props":3500,"children":3501},{"style":132},[3502],{"type":48,"value":1118},{"type":42,"tag":108,"props":3504,"children":3505},{"style":1099},[3506],{"type":48,"value":1123},{"type":42,"tag":108,"props":3508,"children":3509},{"style":132},[3510],{"type":48,"value":135},{"type":42,"tag":108,"props":3512,"children":3513},{"style":121},[3514],{"type":48,"value":62},{"type":42,"tag":108,"props":3516,"children":3517},{"style":132},[3518],{"type":48,"value":1137},{"type":42,"tag":108,"props":3520,"children":3521},{"style":132},[3522],{"type":48,"value":1142},{"type":42,"tag":108,"props":3524,"children":3525},{"class":110,"line":987},[3526],{"type":42,"tag":108,"props":3527,"children":3528},{"emptyLinePlaceholder":1189},[3529],{"type":48,"value":1192},{"type":42,"tag":108,"props":3531,"children":3532},{"class":110,"line":1185},[3533,3537,3542,3546,3551,3555,3559,3563,3567,3571,3575,3580,3584,3588,3593,3597,3601,3606,3610,3614,3618],{"type":42,"tag":108,"props":3534,"children":3535},{"style":1434},[3536],{"type":48,"value":2426},{"type":42,"tag":108,"props":3538,"children":3539},{"style":1110},[3540],{"type":48,"value":3541}," app ",{"type":42,"tag":108,"props":3543,"children":3544},{"style":132},[3545],{"type":48,"value":1464},{"type":42,"tag":108,"props":3547,"children":3548},{"style":132},[3549],{"type":48,"value":3550}," new",{"type":42,"tag":108,"props":3552,"children":3553},{"style":1209},[3554],{"type":48,"value":3462},{"type":42,"tag":108,"props":3556,"children":3557},{"style":1110},[3558],{"type":48,"value":1216},{"type":42,"tag":108,"props":3560,"children":3561},{"style":132},[3562],{"type":48,"value":2245},{"type":42,"tag":108,"props":3564,"children":3565},{"style":1228},[3566],{"type":48,"value":1554},{"type":42,"tag":108,"props":3568,"children":3569},{"style":132},[3570],{"type":48,"value":201},{"type":42,"tag":108,"props":3572,"children":3573},{"style":132},[3574],{"type":48,"value":135},{"type":42,"tag":108,"props":3576,"children":3577},{"style":121},[3578],{"type":48,"value":3579},"My App",{"type":42,"tag":108,"props":3581,"children":3582},{"style":132},[3583],{"type":48,"value":1137},{"type":42,"tag":108,"props":3585,"children":3586},{"style":132},[3587],{"type":48,"value":1350},{"type":42,"tag":108,"props":3589,"children":3590},{"style":1228},[3591],{"type":48,"value":3592}," version",{"type":42,"tag":108,"props":3594,"children":3595},{"style":132},[3596],{"type":48,"value":201},{"type":42,"tag":108,"props":3598,"children":3599},{"style":132},[3600],{"type":48,"value":135},{"type":42,"tag":108,"props":3602,"children":3603},{"style":121},[3604],{"type":48,"value":3605},"1.0.0",{"type":42,"tag":108,"props":3607,"children":3608},{"style":132},[3609],{"type":48,"value":1137},{"type":42,"tag":108,"props":3611,"children":3612},{"style":132},[3613],{"type":48,"value":1118},{"type":42,"tag":108,"props":3615,"children":3616},{"style":1110},[3617],{"type":48,"value":1388},{"type":42,"tag":108,"props":3619,"children":3620},{"style":132},[3621],{"type":48,"value":1142},{"type":42,"tag":108,"props":3623,"children":3624},{"class":110,"line":1195},[3625],{"type":42,"tag":108,"props":3626,"children":3627},{"emptyLinePlaceholder":1189},[3628],{"type":48,"value":1192},{"type":42,"tag":108,"props":3630,"children":3631},{"class":110,"line":1224},[3632,3637,3641,3645,3649,3653,3658,3662,3666],{"type":42,"tag":108,"props":3633,"children":3634},{"style":1110},[3635],{"type":48,"value":3636},"app",{"type":42,"tag":108,"props":3638,"children":3639},{"style":132},[3640],{"type":48,"value":2071},{"type":42,"tag":108,"props":3642,"children":3643},{"style":1209},[3644],{"type":48,"value":258},{"type":42,"tag":108,"props":3646,"children":3647},{"style":132},[3648],{"type":48,"value":2181},{"type":42,"tag":108,"props":3650,"children":3651},{"style":132},[3652],{"type":48,"value":2144},{"type":42,"tag":108,"props":3654,"children":3655},{"style":2147},[3656],{"type":48,"value":3657},"params",{"type":42,"tag":108,"props":3659,"children":3660},{"style":132},[3661],{"type":48,"value":1388},{"type":42,"tag":108,"props":3663,"children":3664},{"style":1434},[3665],{"type":48,"value":2159},{"type":42,"tag":108,"props":3667,"children":3668},{"style":132},[3669],{"type":48,"value":1273},{"type":42,"tag":108,"props":3671,"children":3672},{"class":110,"line":1258},[3673],{"type":42,"tag":108,"props":3674,"children":3675},{"style":1353},[3676],{"type":48,"value":3677},"  \u002F\u002F Render the UI using params.arguments and\u002For params.structuredContent\n",{"type":42,"tag":108,"props":3679,"children":3680},{"class":110,"line":1276},[3681],{"type":42,"tag":108,"props":3682,"children":3683},{"style":132},[3684],{"type":48,"value":2320},{"type":42,"tag":108,"props":3686,"children":3687},{"class":110,"line":1306},[3688],{"type":42,"tag":108,"props":3689,"children":3690},{"emptyLinePlaceholder":1189},[3691],{"type":48,"value":1192},{"type":42,"tag":108,"props":3693,"children":3694},{"class":110,"line":1323},[3695,3699,3703,3707,3711,3715,3720,3724,3728],{"type":42,"tag":108,"props":3696,"children":3697},{"style":1110},[3698],{"type":48,"value":3636},{"type":42,"tag":108,"props":3700,"children":3701},{"style":132},[3702],{"type":48,"value":2071},{"type":42,"tag":108,"props":3704,"children":3705},{"style":1209},[3706],{"type":48,"value":266},{"type":42,"tag":108,"props":3708,"children":3709},{"style":132},[3710],{"type":48,"value":2181},{"type":42,"tag":108,"props":3712,"children":3713},{"style":132},[3714],{"type":48,"value":2144},{"type":42,"tag":108,"props":3716,"children":3717},{"style":2147},[3718],{"type":48,"value":3719},"result",{"type":42,"tag":108,"props":3721,"children":3722},{"style":132},[3723],{"type":48,"value":1388},{"type":42,"tag":108,"props":3725,"children":3726},{"style":1434},[3727],{"type":48,"value":2159},{"type":42,"tag":108,"props":3729,"children":3730},{"style":132},[3731],{"type":48,"value":1273},{"type":42,"tag":108,"props":3733,"children":3734},{"class":110,"line":1359},[3735],{"type":42,"tag":108,"props":3736,"children":3737},{"style":1353},[3738],{"type":48,"value":3739},"  \u002F\u002F Update UI with final tool result\n",{"type":42,"tag":108,"props":3741,"children":3742},{"class":110,"line":1368},[3743],{"type":42,"tag":108,"props":3744,"children":3745},{"style":132},[3746],{"type":48,"value":2320},{"type":42,"tag":108,"props":3748,"children":3749},{"class":110,"line":1377},[3750],{"type":42,"tag":108,"props":3751,"children":3752},{"emptyLinePlaceholder":1189},[3753],{"type":48,"value":1192},{"type":42,"tag":108,"props":3755,"children":3756},{"class":110,"line":2797},[3757,3761,3765,3769,3773,3777,3782,3786,3790],{"type":42,"tag":108,"props":3758,"children":3759},{"style":1110},[3760],{"type":48,"value":3636},{"type":42,"tag":108,"props":3762,"children":3763},{"style":132},[3764],{"type":48,"value":2071},{"type":42,"tag":108,"props":3766,"children":3767},{"style":1209},[3768],{"type":48,"value":273},{"type":42,"tag":108,"props":3770,"children":3771},{"style":132},[3772],{"type":48,"value":2181},{"type":42,"tag":108,"props":3774,"children":3775},{"style":132},[3776],{"type":48,"value":2144},{"type":42,"tag":108,"props":3778,"children":3779},{"style":2147},[3780],{"type":48,"value":3781},"ctx",{"type":42,"tag":108,"props":3783,"children":3784},{"style":132},[3785],{"type":48,"value":1388},{"type":42,"tag":108,"props":3787,"children":3788},{"style":1434},[3789],{"type":48,"value":2159},{"type":42,"tag":108,"props":3791,"children":3792},{"style":132},[3793],{"type":48,"value":1273},{"type":42,"tag":108,"props":3795,"children":3796},{"class":110,"line":2828},[3797,3802,3806,3810,3814,3819,3823,3827,3831,3835,3839,3843,3847],{"type":42,"tag":108,"props":3798,"children":3799},{"style":1099},[3800],{"type":48,"value":3801},"  if",{"type":42,"tag":108,"props":3803,"children":3804},{"style":1228},[3805],{"type":48,"value":2144},{"type":42,"tag":108,"props":3807,"children":3808},{"style":1110},[3809],{"type":48,"value":3781},{"type":42,"tag":108,"props":3811,"children":3812},{"style":132},[3813],{"type":48,"value":2071},{"type":42,"tag":108,"props":3815,"children":3816},{"style":1110},[3817],{"type":48,"value":3818},"theme",{"type":42,"tag":108,"props":3820,"children":3821},{"style":1228},[3822],{"type":48,"value":2306},{"type":42,"tag":108,"props":3824,"children":3825},{"style":1209},[3826],{"type":48,"value":365},{"type":42,"tag":108,"props":3828,"children":3829},{"style":1228},[3830],{"type":48,"value":1216},{"type":42,"tag":108,"props":3832,"children":3833},{"style":1110},[3834],{"type":48,"value":3781},{"type":42,"tag":108,"props":3836,"children":3837},{"style":132},[3838],{"type":48,"value":2071},{"type":42,"tag":108,"props":3840,"children":3841},{"style":1110},[3842],{"type":48,"value":3818},{"type":42,"tag":108,"props":3844,"children":3845},{"style":1228},[3846],{"type":48,"value":1388},{"type":42,"tag":108,"props":3848,"children":3849},{"style":132},[3850],{"type":48,"value":1142},{"type":42,"tag":108,"props":3852,"children":3853},{"class":110,"line":2837},[3854,3858,3862,3866,3870,3875,3880,3885,3889,3893,3897,3901,3905,3909,3913,3917,3921],{"type":42,"tag":108,"props":3855,"children":3856},{"style":1099},[3857],{"type":48,"value":3801},{"type":42,"tag":108,"props":3859,"children":3860},{"style":1228},[3861],{"type":48,"value":2144},{"type":42,"tag":108,"props":3863,"children":3864},{"style":1110},[3865],{"type":48,"value":3781},{"type":42,"tag":108,"props":3867,"children":3868},{"style":132},[3869],{"type":48,"value":2071},{"type":42,"tag":108,"props":3871,"children":3872},{"style":1110},[3873],{"type":48,"value":3874},"styles",{"type":42,"tag":108,"props":3876,"children":3877},{"style":132},[3878],{"type":48,"value":3879},"?.",{"type":42,"tag":108,"props":3881,"children":3882},{"style":1110},[3883],{"type":48,"value":3884},"variables",{"type":42,"tag":108,"props":3886,"children":3887},{"style":1228},[3888],{"type":48,"value":2306},{"type":42,"tag":108,"props":3890,"children":3891},{"style":1209},[3892],{"type":48,"value":372},{"type":42,"tag":108,"props":3894,"children":3895},{"style":1228},[3896],{"type":48,"value":1216},{"type":42,"tag":108,"props":3898,"children":3899},{"style":1110},[3900],{"type":48,"value":3781},{"type":42,"tag":108,"props":3902,"children":3903},{"style":132},[3904],{"type":48,"value":2071},{"type":42,"tag":108,"props":3906,"children":3907},{"style":1110},[3908],{"type":48,"value":3874},{"type":42,"tag":108,"props":3910,"children":3911},{"style":132},[3912],{"type":48,"value":2071},{"type":42,"tag":108,"props":3914,"children":3915},{"style":1110},[3916],{"type":48,"value":3884},{"type":42,"tag":108,"props":3918,"children":3919},{"style":1228},[3920],{"type":48,"value":1388},{"type":42,"tag":108,"props":3922,"children":3923},{"style":132},[3924],{"type":48,"value":1142},{"type":42,"tag":108,"props":3926,"children":3927},{"class":110,"line":3389},[3928,3932,3936,3940,3944,3948,3952,3957,3961,3966,3970,3974,3978,3982,3986,3990,3994,3998,4002,4006,4010],{"type":42,"tag":108,"props":3929,"children":3930},{"style":1099},[3931],{"type":48,"value":3801},{"type":42,"tag":108,"props":3933,"children":3934},{"style":1228},[3935],{"type":48,"value":2144},{"type":42,"tag":108,"props":3937,"children":3938},{"style":1110},[3939],{"type":48,"value":3781},{"type":42,"tag":108,"props":3941,"children":3942},{"style":132},[3943],{"type":48,"value":2071},{"type":42,"tag":108,"props":3945,"children":3946},{"style":1110},[3947],{"type":48,"value":3874},{"type":42,"tag":108,"props":3949,"children":3950},{"style":132},[3951],{"type":48,"value":3879},{"type":42,"tag":108,"props":3953,"children":3954},{"style":1110},[3955],{"type":48,"value":3956},"css",{"type":42,"tag":108,"props":3958,"children":3959},{"style":132},[3960],{"type":48,"value":3879},{"type":42,"tag":108,"props":3962,"children":3963},{"style":1110},[3964],{"type":48,"value":3965},"fonts",{"type":42,"tag":108,"props":3967,"children":3968},{"style":1228},[3969],{"type":48,"value":2306},{"type":42,"tag":108,"props":3971,"children":3972},{"style":1209},[3973],{"type":48,"value":379},{"type":42,"tag":108,"props":3975,"children":3976},{"style":1228},[3977],{"type":48,"value":1216},{"type":42,"tag":108,"props":3979,"children":3980},{"style":1110},[3981],{"type":48,"value":3781},{"type":42,"tag":108,"props":3983,"children":3984},{"style":132},[3985],{"type":48,"value":2071},{"type":42,"tag":108,"props":3987,"children":3988},{"style":1110},[3989],{"type":48,"value":3874},{"type":42,"tag":108,"props":3991,"children":3992},{"style":132},[3993],{"type":48,"value":2071},{"type":42,"tag":108,"props":3995,"children":3996},{"style":1110},[3997],{"type":48,"value":3956},{"type":42,"tag":108,"props":3999,"children":4000},{"style":132},[4001],{"type":48,"value":2071},{"type":42,"tag":108,"props":4003,"children":4004},{"style":1110},[4005],{"type":48,"value":3965},{"type":42,"tag":108,"props":4007,"children":4008},{"style":1228},[4009],{"type":48,"value":1388},{"type":42,"tag":108,"props":4011,"children":4012},{"style":132},[4013],{"type":48,"value":1142},{"type":42,"tag":108,"props":4015,"children":4017},{"class":110,"line":4016},17,[4018,4022,4026,4030,4034,4039,4043],{"type":42,"tag":108,"props":4019,"children":4020},{"style":1099},[4021],{"type":48,"value":3801},{"type":42,"tag":108,"props":4023,"children":4024},{"style":1228},[4025],{"type":48,"value":2144},{"type":42,"tag":108,"props":4027,"children":4028},{"style":1110},[4029],{"type":48,"value":3781},{"type":42,"tag":108,"props":4031,"children":4032},{"style":132},[4033],{"type":48,"value":2071},{"type":42,"tag":108,"props":4035,"children":4036},{"style":1110},[4037],{"type":48,"value":4038},"safeAreaInsets",{"type":42,"tag":108,"props":4040,"children":4041},{"style":1228},[4042],{"type":48,"value":2306},{"type":42,"tag":108,"props":4044,"children":4045},{"style":132},[4046],{"type":48,"value":1221},{"type":42,"tag":108,"props":4048,"children":4050},{"class":110,"line":4049},18,[4051,4056,4060,4065,4069,4074,4078,4083,4087,4092,4096,4100,4105,4109,4113],{"type":42,"tag":108,"props":4052,"children":4053},{"style":1434},[4054],{"type":48,"value":4055},"    const",{"type":42,"tag":108,"props":4057,"children":4058},{"style":132},[4059],{"type":48,"value":1107},{"type":42,"tag":108,"props":4061,"children":4062},{"style":1110},[4063],{"type":48,"value":4064}," top",{"type":42,"tag":108,"props":4066,"children":4067},{"style":132},[4068],{"type":48,"value":1350},{"type":42,"tag":108,"props":4070,"children":4071},{"style":1110},[4072],{"type":48,"value":4073}," right",{"type":42,"tag":108,"props":4075,"children":4076},{"style":132},[4077],{"type":48,"value":1350},{"type":42,"tag":108,"props":4079,"children":4080},{"style":1110},[4081],{"type":48,"value":4082}," bottom",{"type":42,"tag":108,"props":4084,"children":4085},{"style":132},[4086],{"type":48,"value":1350},{"type":42,"tag":108,"props":4088,"children":4089},{"style":1110},[4090],{"type":48,"value":4091}," left",{"type":42,"tag":108,"props":4093,"children":4094},{"style":132},[4095],{"type":48,"value":1118},{"type":42,"tag":108,"props":4097,"children":4098},{"style":132},[4099],{"type":48,"value":2181},{"type":42,"tag":108,"props":4101,"children":4102},{"style":1110},[4103],{"type":48,"value":4104}," ctx",{"type":42,"tag":108,"props":4106,"children":4107},{"style":132},[4108],{"type":48,"value":2071},{"type":42,"tag":108,"props":4110,"children":4111},{"style":1110},[4112],{"type":48,"value":4038},{"type":42,"tag":108,"props":4114,"children":4115},{"style":132},[4116],{"type":48,"value":1142},{"type":42,"tag":108,"props":4118,"children":4120},{"class":110,"line":4119},19,[4121,4126,4130,4134,4138,4143,4147,4152,4156,4161,4166,4170,4175,4180,4185,4189,4193,4197,4202,4206,4210,4214,4219,4223,4228,4233],{"type":42,"tag":108,"props":4122,"children":4123},{"style":1110},[4124],{"type":48,"value":4125},"    document",{"type":42,"tag":108,"props":4127,"children":4128},{"style":132},[4129],{"type":48,"value":2071},{"type":42,"tag":108,"props":4131,"children":4132},{"style":1110},[4133],{"type":48,"value":1660},{"type":42,"tag":108,"props":4135,"children":4136},{"style":132},[4137],{"type":48,"value":2071},{"type":42,"tag":108,"props":4139,"children":4140},{"style":1110},[4141],{"type":48,"value":4142},"style",{"type":42,"tag":108,"props":4144,"children":4145},{"style":132},[4146],{"type":48,"value":2071},{"type":42,"tag":108,"props":4148,"children":4149},{"style":1110},[4150],{"type":48,"value":4151},"padding",{"type":42,"tag":108,"props":4153,"children":4154},{"style":132},[4155],{"type":48,"value":2181},{"type":42,"tag":108,"props":4157,"children":4158},{"style":132},[4159],{"type":48,"value":4160}," `${",{"type":42,"tag":108,"props":4162,"children":4163},{"style":1110},[4164],{"type":48,"value":4165},"top",{"type":42,"tag":108,"props":4167,"children":4168},{"style":132},[4169],{"type":48,"value":1383},{"type":42,"tag":108,"props":4171,"children":4172},{"style":121},[4173],{"type":48,"value":4174},"px ",{"type":42,"tag":108,"props":4176,"children":4177},{"style":132},[4178],{"type":48,"value":4179},"${",{"type":42,"tag":108,"props":4181,"children":4182},{"style":1110},[4183],{"type":48,"value":4184},"right",{"type":42,"tag":108,"props":4186,"children":4187},{"style":132},[4188],{"type":48,"value":1383},{"type":42,"tag":108,"props":4190,"children":4191},{"style":121},[4192],{"type":48,"value":4174},{"type":42,"tag":108,"props":4194,"children":4195},{"style":132},[4196],{"type":48,"value":4179},{"type":42,"tag":108,"props":4198,"children":4199},{"style":1110},[4200],{"type":48,"value":4201},"bottom",{"type":42,"tag":108,"props":4203,"children":4204},{"style":132},[4205],{"type":48,"value":1383},{"type":42,"tag":108,"props":4207,"children":4208},{"style":121},[4209],{"type":48,"value":4174},{"type":42,"tag":108,"props":4211,"children":4212},{"style":132},[4213],{"type":48,"value":4179},{"type":42,"tag":108,"props":4215,"children":4216},{"style":1110},[4217],{"type":48,"value":4218},"left",{"type":42,"tag":108,"props":4220,"children":4221},{"style":132},[4222],{"type":48,"value":1383},{"type":42,"tag":108,"props":4224,"children":4225},{"style":121},[4226],{"type":48,"value":4227},"px",{"type":42,"tag":108,"props":4229,"children":4230},{"style":132},[4231],{"type":48,"value":4232},"`",{"type":42,"tag":108,"props":4234,"children":4235},{"style":132},[4236],{"type":48,"value":1142},{"type":42,"tag":108,"props":4238,"children":4240},{"class":110,"line":4239},20,[4241],{"type":42,"tag":108,"props":4242,"children":4243},{"style":132},[4244],{"type":48,"value":2022},{"type":42,"tag":108,"props":4246,"children":4248},{"class":110,"line":4247},21,[4249],{"type":42,"tag":108,"props":4250,"children":4251},{"style":132},[4252],{"type":48,"value":2320},{"type":42,"tag":108,"props":4254,"children":4256},{"class":110,"line":4255},22,[4257],{"type":42,"tag":108,"props":4258,"children":4259},{"emptyLinePlaceholder":1189},[4260],{"type":48,"value":1192},{"type":42,"tag":108,"props":4262,"children":4264},{"class":110,"line":4263},23,[4265,4269,4273,4277,4281,4285,4289,4293],{"type":42,"tag":108,"props":4266,"children":4267},{"style":1110},[4268],{"type":48,"value":3636},{"type":42,"tag":108,"props":4270,"children":4271},{"style":132},[4272],{"type":48,"value":2071},{"type":42,"tag":108,"props":4274,"children":4275},{"style":1209},[4276],{"type":48,"value":280},{"type":42,"tag":108,"props":4278,"children":4279},{"style":132},[4280],{"type":48,"value":2181},{"type":42,"tag":108,"props":4282,"children":4283},{"style":1434},[4284],{"type":48,"value":2139},{"type":42,"tag":108,"props":4286,"children":4287},{"style":132},[4288],{"type":48,"value":3140},{"type":42,"tag":108,"props":4290,"children":4291},{"style":1434},[4292],{"type":48,"value":2159},{"type":42,"tag":108,"props":4294,"children":4295},{"style":132},[4296],{"type":48,"value":1273},{"type":42,"tag":108,"props":4298,"children":4300},{"class":110,"line":4299},24,[4301,4305],{"type":42,"tag":108,"props":4302,"children":4303},{"style":1099},[4304],{"type":48,"value":2224},{"type":42,"tag":108,"props":4306,"children":4307},{"style":132},[4308],{"type":48,"value":4309}," {};\n",{"type":42,"tag":108,"props":4311,"children":4313},{"class":110,"line":4312},25,[4314],{"type":42,"tag":108,"props":4315,"children":4316},{"style":132},[4317],{"type":48,"value":2320},{"type":42,"tag":108,"props":4319,"children":4321},{"class":110,"line":4320},26,[4322],{"type":42,"tag":108,"props":4323,"children":4324},{"emptyLinePlaceholder":1189},[4325],{"type":48,"value":1192},{"type":42,"tag":108,"props":4327,"children":4329},{"class":110,"line":4328},27,[4330,4335,4340,4344,4349,4353,4358,4362,4367],{"type":42,"tag":108,"props":4331,"children":4332},{"style":1099},[4333],{"type":48,"value":4334},"await",{"type":42,"tag":108,"props":4336,"children":4337},{"style":1110},[4338],{"type":48,"value":4339}," app",{"type":42,"tag":108,"props":4341,"children":4342},{"style":132},[4343],{"type":48,"value":2071},{"type":42,"tag":108,"props":4345,"children":4346},{"style":1209},[4347],{"type":48,"value":4348},"connect",{"type":42,"tag":108,"props":4350,"children":4351},{"style":1110},[4352],{"type":48,"value":1216},{"type":42,"tag":108,"props":4354,"children":4355},{"style":132},[4356],{"type":48,"value":4357},"new",{"type":42,"tag":108,"props":4359,"children":4360},{"style":1209},[4361],{"type":48,"value":3471},{"type":42,"tag":108,"props":4363,"children":4364},{"style":1110},[4365],{"type":48,"value":4366},"())",{"type":42,"tag":108,"props":4368,"children":4369},{"style":132},[4370],{"type":48,"value":1142},{"type":42,"tag":183,"props":4372,"children":4374},{"id":4373},"host-styling",[4375],{"type":48,"value":4376},"Host Styling",{"type":42,"tag":51,"props":4378,"children":4379},{},[4380],{"type":48,"value":4381},"Use host CSS variables for theme integration:",{"type":42,"tag":97,"props":4383,"children":4386},{"className":4384,"code":4385,"language":3956,"meta":102,"style":102},"language-css shiki shiki-themes material-theme-lighter material-theme material-theme-palenight",".container {\n  background: var(--color-background-secondary);\n  color: var(--color-text-primary);\n  font-family: var(--font-sans);\n  border-radius: var(--border-radius-md);\n}\n",[4387],{"type":42,"tag":57,"props":4388,"children":4389},{"__ignoreMap":102},[4390,4406,4438,4467,4496,4525],{"type":42,"tag":108,"props":4391,"children":4392},{"class":110,"line":111},[4393,4397,4402],{"type":42,"tag":108,"props":4394,"children":4395},{"style":132},[4396],{"type":48,"value":2071},{"type":42,"tag":108,"props":4398,"children":4399},{"style":115},[4400],{"type":48,"value":4401},"container",{"type":42,"tag":108,"props":4403,"children":4404},{"style":132},[4405],{"type":48,"value":1273},{"type":42,"tag":108,"props":4407,"children":4408},{"class":110,"line":987},[4409,4415,4419,4424,4428,4433],{"type":42,"tag":108,"props":4410,"children":4412},{"style":4411},"--shiki-light:#8796B0;--shiki-default:#B2CCD6;--shiki-dark:#B2CCD6",[4413],{"type":48,"value":4414},"  background",{"type":42,"tag":108,"props":4416,"children":4417},{"style":132},[4418],{"type":48,"value":201},{"type":42,"tag":108,"props":4420,"children":4421},{"style":1209},[4422],{"type":48,"value":4423}," var",{"type":42,"tag":108,"props":4425,"children":4426},{"style":132},[4427],{"type":48,"value":1216},{"type":42,"tag":108,"props":4429,"children":4430},{"style":1110},[4431],{"type":48,"value":4432},"--color-background-secondary",{"type":42,"tag":108,"props":4434,"children":4435},{"style":132},[4436],{"type":48,"value":4437},");\n",{"type":42,"tag":108,"props":4439,"children":4440},{"class":110,"line":1185},[4441,4446,4450,4454,4458,4463],{"type":42,"tag":108,"props":4442,"children":4443},{"style":4411},[4444],{"type":48,"value":4445},"  color",{"type":42,"tag":108,"props":4447,"children":4448},{"style":132},[4449],{"type":48,"value":201},{"type":42,"tag":108,"props":4451,"children":4452},{"style":1209},[4453],{"type":48,"value":4423},{"type":42,"tag":108,"props":4455,"children":4456},{"style":132},[4457],{"type":48,"value":1216},{"type":42,"tag":108,"props":4459,"children":4460},{"style":1110},[4461],{"type":48,"value":4462},"--color-text-primary",{"type":42,"tag":108,"props":4464,"children":4465},{"style":132},[4466],{"type":48,"value":4437},{"type":42,"tag":108,"props":4468,"children":4469},{"class":110,"line":1195},[4470,4475,4479,4483,4487,4492],{"type":42,"tag":108,"props":4471,"children":4472},{"style":4411},[4473],{"type":48,"value":4474},"  font-family",{"type":42,"tag":108,"props":4476,"children":4477},{"style":132},[4478],{"type":48,"value":201},{"type":42,"tag":108,"props":4480,"children":4481},{"style":1209},[4482],{"type":48,"value":4423},{"type":42,"tag":108,"props":4484,"children":4485},{"style":132},[4486],{"type":48,"value":1216},{"type":42,"tag":108,"props":4488,"children":4489},{"style":1110},[4490],{"type":48,"value":4491},"--font-sans",{"type":42,"tag":108,"props":4493,"children":4494},{"style":132},[4495],{"type":48,"value":4437},{"type":42,"tag":108,"props":4497,"children":4498},{"class":110,"line":1224},[4499,4504,4508,4512,4516,4521],{"type":42,"tag":108,"props":4500,"children":4501},{"style":4411},[4502],{"type":48,"value":4503},"  border-radius",{"type":42,"tag":108,"props":4505,"children":4506},{"style":132},[4507],{"type":48,"value":201},{"type":42,"tag":108,"props":4509,"children":4510},{"style":1209},[4511],{"type":48,"value":4423},{"type":42,"tag":108,"props":4513,"children":4514},{"style":132},[4515],{"type":48,"value":1216},{"type":42,"tag":108,"props":4517,"children":4518},{"style":1110},[4519],{"type":48,"value":4520},"--border-radius-md",{"type":42,"tag":108,"props":4522,"children":4523},{"style":132},[4524],{"type":48,"value":4437},{"type":42,"tag":108,"props":4526,"children":4527},{"class":110,"line":1258},[4528],{"type":42,"tag":108,"props":4529,"children":4530},{"style":132},[4531],{"type":48,"value":2030},{"type":42,"tag":51,"props":4533,"children":4534},{},[4535,4537,4543,4544,4550,4551,4557,4558,4563,4564,4570,4571,4577,4578,4584,4585,4591,4593,4598],{"type":48,"value":4536},"Key variable groups: ",{"type":42,"tag":57,"props":4538,"children":4540},{"className":4539},[],[4541],{"type":48,"value":4542},"--color-background-*",{"type":48,"value":260},{"type":42,"tag":57,"props":4545,"children":4547},{"className":4546},[],[4548],{"type":48,"value":4549},"--color-text-*",{"type":48,"value":260},{"type":42,"tag":57,"props":4552,"children":4554},{"className":4553},[],[4555],{"type":48,"value":4556},"--color-border-*",{"type":48,"value":260},{"type":42,"tag":57,"props":4559,"children":4561},{"className":4560},[],[4562],{"type":48,"value":4491},{"type":48,"value":260},{"type":42,"tag":57,"props":4565,"children":4567},{"className":4566},[],[4568],{"type":48,"value":4569},"--font-mono",{"type":48,"value":260},{"type":42,"tag":57,"props":4572,"children":4574},{"className":4573},[],[4575],{"type":48,"value":4576},"--font-text-*-size",{"type":48,"value":260},{"type":42,"tag":57,"props":4579,"children":4581},{"className":4580},[],[4582],{"type":48,"value":4583},"--font-heading-*-size",{"type":48,"value":260},{"type":42,"tag":57,"props":4586,"children":4588},{"className":4587},[],[4589],{"type":48,"value":4590},"--border-radius-*",{"type":48,"value":4592},". See ",{"type":42,"tag":57,"props":4594,"children":4596},{"className":4595},[],[4597],{"type":48,"value":331},{"type":48,"value":4599}," for the full list.",{"type":42,"tag":51,"props":4601,"children":4602},{},[4603,4605,4610,4612,4617,4619,4624],{"type":48,"value":4604},"For React apps, use the ",{"type":42,"tag":57,"props":4606,"children":4608},{"className":4607},[],[4609],{"type":48,"value":400},{"type":48,"value":4611}," and ",{"type":42,"tag":57,"props":4613,"children":4615},{"className":4614},[],[4616],{"type":48,"value":423},{"type":48,"value":4618}," hooks instead — see ",{"type":42,"tag":57,"props":4620,"children":4622},{"className":4621},[],[4623],{"type":48,"value":658},{"type":48,"value":4625}," for the pattern.",{"type":42,"tag":66,"props":4627,"children":4629},{"id":4628},"optional-enhancements",[4630],{"type":48,"value":4631},"Optional Enhancements",{"type":42,"tag":183,"props":4633,"children":4635},{"id":4634},"app-only-helper-tools",[4636],{"type":48,"value":4637},"App-Only Helper Tools",{"type":42,"tag":51,"props":4639,"children":4640},{},[4641],{"type":48,"value":4642},"Tools the UI calls but the model doesn't need to invoke directly (polling, pagination, chunk loading):",{"type":42,"tag":97,"props":4644,"children":4646},{"className":1087,"code":4645,"language":1089,"meta":102,"style":102},"registerAppTool(server, \"poll-data\", {\n  description: \"Polls 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",[4647],{"type":42,"tag":57,"props":4648,"children":4649},{"__ignoreMap":102},[4650,4686,4714,4786,4809,4842,4937],{"type":42,"tag":108,"props":4651,"children":4652},{"class":110,"line":111},[4653,4657,4661,4665,4669,4674,4678,4682],{"type":42,"tag":108,"props":4654,"children":4655},{"style":1209},[4656],{"type":48,"value":303},{"type":42,"tag":108,"props":4658,"children":4659},{"style":1110},[4660],{"type":48,"value":2471},{"type":42,"tag":108,"props":4662,"children":4663},{"style":132},[4664],{"type":48,"value":1350},{"type":42,"tag":108,"props":4666,"children":4667},{"style":132},[4668],{"type":48,"value":135},{"type":42,"tag":108,"props":4670,"children":4671},{"style":121},[4672],{"type":48,"value":4673},"poll-data",{"type":42,"tag":108,"props":4675,"children":4676},{"style":132},[4677],{"type":48,"value":1137},{"type":42,"tag":108,"props":4679,"children":4680},{"style":132},[4681],{"type":48,"value":1350},{"type":42,"tag":108,"props":4683,"children":4684},{"style":132},[4685],{"type":48,"value":1273},{"type":42,"tag":108,"props":4687,"children":4688},{"class":110,"line":987},[4689,4693,4697,4701,4706,4710],{"type":42,"tag":108,"props":4690,"children":4691},{"style":1228},[4692],{"type":48,"value":2503},{"type":42,"tag":108,"props":4694,"children":4695},{"style":132},[4696],{"type":48,"value":201},{"type":42,"tag":108,"props":4698,"children":4699},{"style":132},[4700],{"type":48,"value":135},{"type":42,"tag":108,"props":4702,"children":4703},{"style":121},[4704],{"type":48,"value":4705},"Polls latest data for the UI",{"type":42,"tag":108,"props":4707,"children":4708},{"style":132},[4709],{"type":48,"value":1137},{"type":42,"tag":108,"props":4711,"children":4712},{"style":132},[4713],{"type":48,"value":1255},{"type":42,"tag":108,"props":4715,"children":4716},{"class":110,"line":1185},[4717,4721,4725,4729,4733,4737,4741,4745,4749,4754,4758,4762,4766,4770,4774,4778,4782],{"type":42,"tag":108,"props":4718,"children":4719},{"style":1228},[4720],{"type":48,"value":2577},{"type":42,"tag":108,"props":4722,"children":4723},{"style":132},[4724],{"type":48,"value":201},{"type":42,"tag":108,"props":4726,"children":4727},{"style":132},[4728],{"type":48,"value":1107},{"type":42,"tag":108,"props":4730,"children":4731},{"style":1228},[4732],{"type":48,"value":2590},{"type":42,"tag":108,"props":4734,"children":4735},{"style":132},[4736],{"type":48,"value":201},{"type":42,"tag":108,"props":4738,"children":4739},{"style":132},[4740],{"type":48,"value":1107},{"type":42,"tag":108,"props":4742,"children":4743},{"style":1110},[4744],{"type":48,"value":3071},{"type":42,"tag":108,"props":4746,"children":4747},{"style":132},[4748],{"type":48,"value":1350},{"type":42,"tag":108,"props":4750,"children":4751},{"style":1228},[4752],{"type":48,"value":4753}," visibility",{"type":42,"tag":108,"props":4755,"children":4756},{"style":132},[4757],{"type":48,"value":201},{"type":42,"tag":108,"props":4759,"children":4760},{"style":1110},[4761],{"type":48,"value":1240},{"type":42,"tag":108,"props":4763,"children":4764},{"style":132},[4765],{"type":48,"value":1137},{"type":42,"tag":108,"props":4767,"children":4768},{"style":121},[4769],{"type":48,"value":3636},{"type":42,"tag":108,"props":4771,"children":4772},{"style":132},[4773],{"type":48,"value":1137},{"type":42,"tag":108,"props":4775,"children":4776},{"style":1110},[4777],{"type":48,"value":2315},{"type":42,"tag":108,"props":4779,"children":4780},{"style":132},[4781],{"type":48,"value":1383},{"type":42,"tag":108,"props":4783,"children":4784},{"style":132},[4785],{"type":48,"value":2611},{"type":42,"tag":108,"props":4787,"children":4788},{"class":110,"line":1195},[4789,4793,4797,4801,4805],{"type":42,"tag":108,"props":4790,"children":4791},{"style":132},[4792],{"type":48,"value":2134},{"type":42,"tag":108,"props":4794,"children":4795},{"style":1434},[4796],{"type":48,"value":2139},{"type":42,"tag":108,"props":4798,"children":4799},{"style":132},[4800],{"type":48,"value":3140},{"type":42,"tag":108,"props":4802,"children":4803},{"style":1434},[4804],{"type":48,"value":2159},{"type":42,"tag":108,"props":4806,"children":4807},{"style":132},[4808],{"type":48,"value":1273},{"type":42,"tag":108,"props":4810,"children":4811},{"class":110,"line":1224},[4812,4816,4820,4824,4828,4833,4838],{"type":42,"tag":108,"props":4813,"children":4814},{"style":1434},[4815],{"type":48,"value":2171},{"type":42,"tag":108,"props":4817,"children":4818},{"style":1110},[4819],{"type":48,"value":2176},{"type":42,"tag":108,"props":4821,"children":4822},{"style":132},[4823],{"type":48,"value":2181},{"type":42,"tag":108,"props":4825,"children":4826},{"style":1099},[4827],{"type":48,"value":2186},{"type":42,"tag":108,"props":4829,"children":4830},{"style":1209},[4831],{"type":48,"value":4832}," getLatestData",{"type":42,"tag":108,"props":4834,"children":4835},{"style":1228},[4836],{"type":48,"value":4837},"()",{"type":42,"tag":108,"props":4839,"children":4840},{"style":132},[4841],{"type":48,"value":1142},{"type":42,"tag":108,"props":4843,"children":4844},{"class":110,"line":1258},[4845,4849,4853,4857,4861,4865,4869,4873,4877,4881,4885,4889,4893,4897,4901,4905,4909,4913,4917,4921,4925,4929,4933],{"type":42,"tag":108,"props":4846,"children":4847},{"style":1099},[4848],{"type":48,"value":2224},{"type":42,"tag":108,"props":4850,"children":4851},{"style":132},[4852],{"type":48,"value":1107},{"type":42,"tag":108,"props":4854,"children":4855},{"style":1228},[4856],{"type":48,"value":1576},{"type":42,"tag":108,"props":4858,"children":4859},{"style":132},[4860],{"type":48,"value":201},{"type":42,"tag":108,"props":4862,"children":4863},{"style":1228},[4864],{"type":48,"value":1240},{"type":42,"tag":108,"props":4866,"children":4867},{"style":132},[4868],{"type":48,"value":2245},{"type":42,"tag":108,"props":4870,"children":4871},{"style":1228},[4872],{"type":48,"value":1727},{"type":42,"tag":108,"props":4874,"children":4875},{"style":132},[4876],{"type":48,"value":201},{"type":42,"tag":108,"props":4878,"children":4879},{"style":132},[4880],{"type":48,"value":135},{"type":42,"tag":108,"props":4882,"children":4883},{"style":121},[4884],{"type":48,"value":48},{"type":42,"tag":108,"props":4886,"children":4887},{"style":132},[4888],{"type":48,"value":1137},{"type":42,"tag":108,"props":4890,"children":4891},{"style":132},[4892],{"type":48,"value":1350},{"type":42,"tag":108,"props":4894,"children":4895},{"style":1228},[4896],{"type":48,"value":2274},{"type":42,"tag":108,"props":4898,"children":4899},{"style":132},[4900],{"type":48,"value":201},{"type":42,"tag":108,"props":4902,"children":4903},{"style":1110},[4904],{"type":48,"value":2283},{"type":42,"tag":108,"props":4906,"children":4907},{"style":132},[4908],{"type":48,"value":2071},{"type":42,"tag":108,"props":4910,"children":4911},{"style":1209},[4912],{"type":48,"value":2292},{"type":42,"tag":108,"props":4914,"children":4915},{"style":1228},[4916],{"type":48,"value":1216},{"type":42,"tag":108,"props":4918,"children":4919},{"style":1110},[4920],{"type":48,"value":2301},{"type":42,"tag":108,"props":4922,"children":4923},{"style":1228},[4924],{"type":48,"value":2306},{"type":42,"tag":108,"props":4926,"children":4927},{"style":132},[4928],{"type":48,"value":1383},{"type":42,"tag":108,"props":4930,"children":4931},{"style":1228},[4932],{"type":48,"value":2315},{"type":42,"tag":108,"props":4934,"children":4935},{"style":132},[4936],{"type":48,"value":2320},{"type":42,"tag":108,"props":4938,"children":4939},{"class":110,"line":1276},[4940,4944,4948],{"type":42,"tag":108,"props":4941,"children":4942},{"style":132},[4943],{"type":48,"value":1383},{"type":42,"tag":108,"props":4945,"children":4946},{"style":1110},[4947],{"type":48,"value":1388},{"type":42,"tag":108,"props":4949,"children":4950},{"style":132},[4951],{"type":48,"value":1142},{"type":42,"tag":51,"props":4953,"children":4954},{},[4955,4957,4963],{"type":48,"value":4956},"The UI calls these via ",{"type":42,"tag":57,"props":4958,"children":4960},{"className":4959},[],[4961],{"type":48,"value":4962},"app.callServerTool(\"poll-data\", {})",{"type":48,"value":2071},{"type":42,"tag":183,"props":4965,"children":4967},{"id":4966},"csp-configuration",[4968],{"type":48,"value":4969},"CSP Configuration",{"type":42,"tag":51,"props":4971,"children":4972},{},[4973],{"type":48,"value":4974},"If the UI needs to load external resources (fonts, APIs, CDNs), declare the domains:",{"type":42,"tag":97,"props":4976,"children":4978},{"className":1087,"code":4977,"language":1089,"meta":102,"style":102},"registerAppResource(server, {\n  uri: resourceUri,\n  name: \"My Tool UI\",\n  mimeType: RESOURCE_MIME_TYPE,\n  _meta: {\n    ui: {\n      connectDomains: [\"api.example.com\"],      \u002F\u002F fetch\u002FXHR targets\n      resourceDomains: [\"cdn.example.com\"],      \u002F\u002F scripts, styles, images\n      frameDomains: [\"embed.example.com\"],        \u002F\u002F nested iframes\n    },\n  },\n}, async () => { \u002F* ... *\u002F });\n",[4979],{"type":42,"tag":57,"props":4980,"children":4981},{"__ignoreMap":102},[4982,5001,5020,5047,5066,5081,5097,5139,5181,5223,5230,5237],{"type":42,"tag":108,"props":4983,"children":4984},{"class":110,"line":111},[4985,4989,4993,4997],{"type":42,"tag":108,"props":4986,"children":4987},{"style":1209},[4988],{"type":48,"value":310},{"type":42,"tag":108,"props":4990,"children":4991},{"style":1110},[4992],{"type":48,"value":2471},{"type":42,"tag":108,"props":4994,"children":4995},{"style":132},[4996],{"type":48,"value":1350},{"type":42,"tag":108,"props":4998,"children":4999},{"style":132},[5000],{"type":48,"value":1273},{"type":42,"tag":108,"props":5002,"children":5003},{"class":110,"line":987},[5004,5008,5012,5016],{"type":42,"tag":108,"props":5005,"children":5006},{"style":1228},[5007],{"type":48,"value":3062},{"type":42,"tag":108,"props":5009,"children":5010},{"style":132},[5011],{"type":48,"value":201},{"type":42,"tag":108,"props":5013,"children":5014},{"style":1110},[5015],{"type":48,"value":3071},{"type":42,"tag":108,"props":5017,"children":5018},{"style":132},[5019],{"type":48,"value":1255},{"type":42,"tag":108,"props":5021,"children":5022},{"class":110,"line":1185},[5023,5027,5031,5035,5039,5043],{"type":42,"tag":108,"props":5024,"children":5025},{"style":1228},[5026],{"type":48,"value":3083},{"type":42,"tag":108,"props":5028,"children":5029},{"style":132},[5030],{"type":48,"value":201},{"type":42,"tag":108,"props":5032,"children":5033},{"style":132},[5034],{"type":48,"value":135},{"type":42,"tag":108,"props":5036,"children":5037},{"style":121},[5038],{"type":48,"value":3096},{"type":42,"tag":108,"props":5040,"children":5041},{"style":132},[5042],{"type":48,"value":1137},{"type":42,"tag":108,"props":5044,"children":5045},{"style":132},[5046],{"type":48,"value":1255},{"type":42,"tag":108,"props":5048,"children":5049},{"class":110,"line":1195},[5050,5054,5058,5062],{"type":42,"tag":108,"props":5051,"children":5052},{"style":1228},[5053],{"type":48,"value":3112},{"type":42,"tag":108,"props":5055,"children":5056},{"style":132},[5057],{"type":48,"value":201},{"type":42,"tag":108,"props":5059,"children":5060},{"style":1110},[5061],{"type":48,"value":2386},{"type":42,"tag":108,"props":5063,"children":5064},{"style":132},[5065],{"type":48,"value":1255},{"type":42,"tag":108,"props":5067,"children":5068},{"class":110,"line":1224},[5069,5073,5077],{"type":42,"tag":108,"props":5070,"children":5071},{"style":1228},[5072],{"type":48,"value":2577},{"type":42,"tag":108,"props":5074,"children":5075},{"style":132},[5076],{"type":48,"value":201},{"type":42,"tag":108,"props":5078,"children":5079},{"style":132},[5080],{"type":48,"value":1273},{"type":42,"tag":108,"props":5082,"children":5083},{"class":110,"line":1258},[5084,5089,5093],{"type":42,"tag":108,"props":5085,"children":5086},{"style":1228},[5087],{"type":48,"value":5088},"    ui",{"type":42,"tag":108,"props":5090,"children":5091},{"style":132},[5092],{"type":48,"value":201},{"type":42,"tag":108,"props":5094,"children":5095},{"style":132},[5096],{"type":48,"value":1273},{"type":42,"tag":108,"props":5098,"children":5099},{"class":110,"line":1276},[5100,5105,5109,5113,5117,5122,5126,5130,5134],{"type":42,"tag":108,"props":5101,"children":5102},{"style":1228},[5103],{"type":48,"value":5104},"      connectDomains",{"type":42,"tag":108,"props":5106,"children":5107},{"style":132},[5108],{"type":48,"value":201},{"type":42,"tag":108,"props":5110,"children":5111},{"style":1110},[5112],{"type":48,"value":1240},{"type":42,"tag":108,"props":5114,"children":5115},{"style":132},[5116],{"type":48,"value":1137},{"type":42,"tag":108,"props":5118,"children":5119},{"style":121},[5120],{"type":48,"value":5121},"api.example.com",{"type":42,"tag":108,"props":5123,"children":5124},{"style":132},[5125],{"type":48,"value":1137},{"type":42,"tag":108,"props":5127,"children":5128},{"style":1110},[5129],{"type":48,"value":2785},{"type":42,"tag":108,"props":5131,"children":5132},{"style":132},[5133],{"type":48,"value":1350},{"type":42,"tag":108,"props":5135,"children":5136},{"style":1353},[5137],{"type":48,"value":5138},"      \u002F\u002F fetch\u002FXHR targets\n",{"type":42,"tag":108,"props":5140,"children":5141},{"class":110,"line":1306},[5142,5147,5151,5155,5159,5164,5168,5172,5176],{"type":42,"tag":108,"props":5143,"children":5144},{"style":1228},[5145],{"type":48,"value":5146},"      resourceDomains",{"type":42,"tag":108,"props":5148,"children":5149},{"style":132},[5150],{"type":48,"value":201},{"type":42,"tag":108,"props":5152,"children":5153},{"style":1110},[5154],{"type":48,"value":1240},{"type":42,"tag":108,"props":5156,"children":5157},{"style":132},[5158],{"type":48,"value":1137},{"type":42,"tag":108,"props":5160,"children":5161},{"style":121},[5162],{"type":48,"value":5163},"cdn.example.com",{"type":42,"tag":108,"props":5165,"children":5166},{"style":132},[5167],{"type":48,"value":1137},{"type":42,"tag":108,"props":5169,"children":5170},{"style":1110},[5171],{"type":48,"value":2785},{"type":42,"tag":108,"props":5173,"children":5174},{"style":132},[5175],{"type":48,"value":1350},{"type":42,"tag":108,"props":5177,"children":5178},{"style":1353},[5179],{"type":48,"value":5180},"      \u002F\u002F scripts, styles, images\n",{"type":42,"tag":108,"props":5182,"children":5183},{"class":110,"line":1323},[5184,5189,5193,5197,5201,5206,5210,5214,5218],{"type":42,"tag":108,"props":5185,"children":5186},{"style":1228},[5187],{"type":48,"value":5188},"      frameDomains",{"type":42,"tag":108,"props":5190,"children":5191},{"style":132},[5192],{"type":48,"value":201},{"type":42,"tag":108,"props":5194,"children":5195},{"style":1110},[5196],{"type":48,"value":1240},{"type":42,"tag":108,"props":5198,"children":5199},{"style":132},[5200],{"type":48,"value":1137},{"type":42,"tag":108,"props":5202,"children":5203},{"style":121},[5204],{"type":48,"value":5205},"embed.example.com",{"type":42,"tag":108,"props":5207,"children":5208},{"style":132},[5209],{"type":48,"value":1137},{"type":42,"tag":108,"props":5211,"children":5212},{"style":1110},[5213],{"type":48,"value":2785},{"type":42,"tag":108,"props":5215,"children":5216},{"style":132},[5217],{"type":48,"value":1350},{"type":42,"tag":108,"props":5219,"children":5220},{"style":1353},[5221],{"type":48,"value":5222},"        \u002F\u002F nested iframes\n",{"type":42,"tag":108,"props":5224,"children":5225},{"class":110,"line":1359},[5226],{"type":42,"tag":108,"props":5227,"children":5228},{"style":132},[5229],{"type":48,"value":1365},{"type":42,"tag":108,"props":5231,"children":5232},{"class":110,"line":1368},[5233],{"type":42,"tag":108,"props":5234,"children":5235},{"style":132},[5236],{"type":48,"value":1374},{"type":42,"tag":108,"props":5238,"children":5239},{"class":110,"line":1377},[5240,5244,5248,5252,5256,5260,5265,5269,5273],{"type":42,"tag":108,"props":5241,"children":5242},{"style":132},[5243],{"type":48,"value":2134},{"type":42,"tag":108,"props":5245,"children":5246},{"style":1434},[5247],{"type":48,"value":2139},{"type":42,"tag":108,"props":5249,"children":5250},{"style":132},[5251],{"type":48,"value":3140},{"type":42,"tag":108,"props":5253,"children":5254},{"style":1434},[5255],{"type":48,"value":2159},{"type":42,"tag":108,"props":5257,"children":5258},{"style":132},[5259],{"type":48,"value":1107},{"type":42,"tag":108,"props":5261,"children":5262},{"style":1353},[5263],{"type":48,"value":5264}," \u002F* ... *\u002F",{"type":42,"tag":108,"props":5266,"children":5267},{"style":132},[5268],{"type":48,"value":1118},{"type":42,"tag":108,"props":5270,"children":5271},{"style":1110},[5272],{"type":48,"value":1388},{"type":42,"tag":108,"props":5274,"children":5275},{"style":132},[5276],{"type":48,"value":1142},{"type":42,"tag":183,"props":5278,"children":5280},{"id":5279},"streaming-partial-input",[5281],{"type":48,"value":5282},"Streaming Partial Input",{"type":42,"tag":51,"props":5284,"children":5285},{},[5286],{"type":48,"value":5287},"For large tool inputs, show progress during LLM generation:",{"type":42,"tag":97,"props":5289,"children":5291},{"className":1087,"code":5290,"language":1089,"meta":102,"style":102},"app.ontoolinputpartial = (params) => {\n  const args = params.arguments; \u002F\u002F Healed partial JSON - always valid\n  \u002F\u002F Render preview with partial data\n};\n\napp.ontoolinput = (params) => {\n  \u002F\u002F Final complete input - switch to full render\n};\n",[5292],{"type":42,"tag":57,"props":5293,"children":5294},{"__ignoreMap":102},[5295,5335,5375,5383,5390,5397,5436,5444],{"type":42,"tag":108,"props":5296,"children":5297},{"class":110,"line":111},[5298,5302,5306,5311,5315,5319,5323,5327,5331],{"type":42,"tag":108,"props":5299,"children":5300},{"style":1110},[5301],{"type":48,"value":3636},{"type":42,"tag":108,"props":5303,"children":5304},{"style":132},[5305],{"type":48,"value":2071},{"type":42,"tag":108,"props":5307,"children":5308},{"style":1209},[5309],{"type":48,"value":5310},"ontoolinputpartial",{"type":42,"tag":108,"props":5312,"children":5313},{"style":132},[5314],{"type":48,"value":2181},{"type":42,"tag":108,"props":5316,"children":5317},{"style":132},[5318],{"type":48,"value":2144},{"type":42,"tag":108,"props":5320,"children":5321},{"style":2147},[5322],{"type":48,"value":3657},{"type":42,"tag":108,"props":5324,"children":5325},{"style":132},[5326],{"type":48,"value":1388},{"type":42,"tag":108,"props":5328,"children":5329},{"style":1434},[5330],{"type":48,"value":2159},{"type":42,"tag":108,"props":5332,"children":5333},{"style":132},[5334],{"type":48,"value":1273},{"type":42,"tag":108,"props":5336,"children":5337},{"class":110,"line":987},[5338,5342,5347,5351,5356,5360,5365,5370],{"type":42,"tag":108,"props":5339,"children":5340},{"style":1434},[5341],{"type":48,"value":2171},{"type":42,"tag":108,"props":5343,"children":5344},{"style":1110},[5345],{"type":48,"value":5346}," args",{"type":42,"tag":108,"props":5348,"children":5349},{"style":132},[5350],{"type":48,"value":2181},{"type":42,"tag":108,"props":5352,"children":5353},{"style":1110},[5354],{"type":48,"value":5355}," params",{"type":42,"tag":108,"props":5357,"children":5358},{"style":132},[5359],{"type":48,"value":2071},{"type":42,"tag":108,"props":5361,"children":5362},{"style":1110},[5363],{"type":48,"value":5364},"arguments",{"type":42,"tag":108,"props":5366,"children":5367},{"style":132},[5368],{"type":48,"value":5369},";",{"type":42,"tag":108,"props":5371,"children":5372},{"style":1353},[5373],{"type":48,"value":5374}," \u002F\u002F Healed partial JSON - always valid\n",{"type":42,"tag":108,"props":5376,"children":5377},{"class":110,"line":1185},[5378],{"type":42,"tag":108,"props":5379,"children":5380},{"style":1353},[5381],{"type":48,"value":5382},"  \u002F\u002F Render preview with partial data\n",{"type":42,"tag":108,"props":5384,"children":5385},{"class":110,"line":1195},[5386],{"type":42,"tag":108,"props":5387,"children":5388},{"style":132},[5389],{"type":48,"value":2320},{"type":42,"tag":108,"props":5391,"children":5392},{"class":110,"line":1224},[5393],{"type":42,"tag":108,"props":5394,"children":5395},{"emptyLinePlaceholder":1189},[5396],{"type":48,"value":1192},{"type":42,"tag":108,"props":5398,"children":5399},{"class":110,"line":1258},[5400,5404,5408,5412,5416,5420,5424,5428,5432],{"type":42,"tag":108,"props":5401,"children":5402},{"style":1110},[5403],{"type":48,"value":3636},{"type":42,"tag":108,"props":5405,"children":5406},{"style":132},[5407],{"type":48,"value":2071},{"type":42,"tag":108,"props":5409,"children":5410},{"style":1209},[5411],{"type":48,"value":258},{"type":42,"tag":108,"props":5413,"children":5414},{"style":132},[5415],{"type":48,"value":2181},{"type":42,"tag":108,"props":5417,"children":5418},{"style":132},[5419],{"type":48,"value":2144},{"type":42,"tag":108,"props":5421,"children":5422},{"style":2147},[5423],{"type":48,"value":3657},{"type":42,"tag":108,"props":5425,"children":5426},{"style":132},[5427],{"type":48,"value":1388},{"type":42,"tag":108,"props":5429,"children":5430},{"style":1434},[5431],{"type":48,"value":2159},{"type":42,"tag":108,"props":5433,"children":5434},{"style":132},[5435],{"type":48,"value":1273},{"type":42,"tag":108,"props":5437,"children":5438},{"class":110,"line":1276},[5439],{"type":42,"tag":108,"props":5440,"children":5441},{"style":1353},[5442],{"type":48,"value":5443},"  \u002F\u002F Final complete input - switch to full render\n",{"type":42,"tag":108,"props":5445,"children":5446},{"class":110,"line":1306},[5447],{"type":42,"tag":108,"props":5448,"children":5449},{"style":132},[5450],{"type":48,"value":2320},{"type":42,"tag":183,"props":5452,"children":5454},{"id":5453},"graceful-degradation-with-getuicapability",[5455,5457],{"type":48,"value":5456},"Graceful Degradation with ",{"type":42,"tag":57,"props":5458,"children":5460},{"className":5459},[],[5461],{"type":48,"value":5462},"getUiCapability()",{"type":42,"tag":51,"props":5464,"children":5465},{},[5466],{"type":48,"value":5467},"Conditionally register App tools only when the client supports UI, falling back to text-only tools:",{"type":42,"tag":97,"props":5469,"children":5471},{"className":1087,"code":5470,"language":1089,"meta":102,"style":102},"import { getUiCapability, registerAppTool, RESOURCE_MIME_TYPE } from \"@modelcontextprotocol\u002Fext-apps\u002Fserver\";\n\nserver.server.oninitialized = () => {\n  const clientCapabilities = server.server.getClientCapabilities();\n  const uiCap = getUiCapability(clientCapabilities);\n\n  if (uiCap?.mimeTypes?.includes(RESOURCE_MIME_TYPE)) {\n    \u002F\u002F Client supports UI — register App tool\n    registerAppTool(server, \"my-tool\", {\n      description: \"Shows data with interactive UI\",\n      _meta: { ui: { resourceUri } },\n    }, appToolHandler);\n  } else {\n    \u002F\u002F Text-only client — register plain tool\n    server.tool(\"my-tool\", \"Shows data\", { param: z.string() }, plainToolHandler);\n  }\n};\n",[5472],{"type":42,"tag":57,"props":5473,"children":5474},{"__ignoreMap":102},[5475,5531,5538,5578,5624,5661,5668,5720,5728,5768,5797,5837,5858,5875,5883,5981,5988],{"type":42,"tag":108,"props":5476,"children":5477},{"class":110,"line":111},[5478,5482,5486,5491,5495,5499,5503,5507,5511,5515,5519,5523,5527],{"type":42,"tag":108,"props":5479,"children":5480},{"style":1099},[5481],{"type":48,"value":1102},{"type":42,"tag":108,"props":5483,"children":5484},{"style":132},[5485],{"type":48,"value":1107},{"type":42,"tag":108,"props":5487,"children":5488},{"style":1110},[5489],{"type":48,"value":5490}," getUiCapability",{"type":42,"tag":108,"props":5492,"children":5493},{"style":132},[5494],{"type":48,"value":1350},{"type":42,"tag":108,"props":5496,"children":5497},{"style":1110},[5498],{"type":48,"value":2368},{"type":42,"tag":108,"props":5500,"children":5501},{"style":132},[5502],{"type":48,"value":1350},{"type":42,"tag":108,"props":5504,"children":5505},{"style":1110},[5506],{"type":48,"value":2386},{"type":42,"tag":108,"props":5508,"children":5509},{"style":132},[5510],{"type":48,"value":1118},{"type":42,"tag":108,"props":5512,"children":5513},{"style":1099},[5514],{"type":48,"value":1123},{"type":42,"tag":108,"props":5516,"children":5517},{"style":132},[5518],{"type":48,"value":135},{"type":42,"tag":108,"props":5520,"children":5521},{"style":121},[5522],{"type":48,"value":2403},{"type":42,"tag":108,"props":5524,"children":5525},{"style":132},[5526],{"type":48,"value":1137},{"type":42,"tag":108,"props":5528,"children":5529},{"style":132},[5530],{"type":48,"value":1142},{"type":42,"tag":108,"props":5532,"children":5533},{"class":110,"line":987},[5534],{"type":42,"tag":108,"props":5535,"children":5536},{"emptyLinePlaceholder":1189},[5537],{"type":48,"value":1192},{"type":42,"tag":108,"props":5539,"children":5540},{"class":110,"line":1185},[5541,5545,5549,5553,5557,5562,5566,5570,5574],{"type":42,"tag":108,"props":5542,"children":5543},{"style":1110},[5544],{"type":48,"value":2066},{"type":42,"tag":108,"props":5546,"children":5547},{"style":132},[5548],{"type":48,"value":2071},{"type":42,"tag":108,"props":5550,"children":5551},{"style":1110},[5552],{"type":48,"value":2066},{"type":42,"tag":108,"props":5554,"children":5555},{"style":132},[5556],{"type":48,"value":2071},{"type":42,"tag":108,"props":5558,"children":5559},{"style":1209},[5560],{"type":48,"value":5561},"oninitialized",{"type":42,"tag":108,"props":5563,"children":5564},{"style":132},[5565],{"type":48,"value":2181},{"type":42,"tag":108,"props":5567,"children":5568},{"style":132},[5569],{"type":48,"value":3140},{"type":42,"tag":108,"props":5571,"children":5572},{"style":1434},[5573],{"type":48,"value":2159},{"type":42,"tag":108,"props":5575,"children":5576},{"style":132},[5577],{"type":48,"value":1273},{"type":42,"tag":108,"props":5579,"children":5580},{"class":110,"line":1195},[5581,5585,5590,5594,5599,5603,5607,5611,5616,5620],{"type":42,"tag":108,"props":5582,"children":5583},{"style":1434},[5584],{"type":48,"value":2171},{"type":42,"tag":108,"props":5586,"children":5587},{"style":1110},[5588],{"type":48,"value":5589}," clientCapabilities",{"type":42,"tag":108,"props":5591,"children":5592},{"style":132},[5593],{"type":48,"value":2181},{"type":42,"tag":108,"props":5595,"children":5596},{"style":1110},[5597],{"type":48,"value":5598}," server",{"type":42,"tag":108,"props":5600,"children":5601},{"style":132},[5602],{"type":48,"value":2071},{"type":42,"tag":108,"props":5604,"children":5605},{"style":1110},[5606],{"type":48,"value":2066},{"type":42,"tag":108,"props":5608,"children":5609},{"style":132},[5610],{"type":48,"value":2071},{"type":42,"tag":108,"props":5612,"children":5613},{"style":1209},[5614],{"type":48,"value":5615},"getClientCapabilities",{"type":42,"tag":108,"props":5617,"children":5618},{"style":1228},[5619],{"type":48,"value":4837},{"type":42,"tag":108,"props":5621,"children":5622},{"style":132},[5623],{"type":48,"value":1142},{"type":42,"tag":108,"props":5625,"children":5626},{"class":110,"line":1224},[5627,5631,5636,5640,5644,5648,5653,5657],{"type":42,"tag":108,"props":5628,"children":5629},{"style":1434},[5630],{"type":48,"value":2171},{"type":42,"tag":108,"props":5632,"children":5633},{"style":1110},[5634],{"type":48,"value":5635}," uiCap",{"type":42,"tag":108,"props":5637,"children":5638},{"style":132},[5639],{"type":48,"value":2181},{"type":42,"tag":108,"props":5641,"children":5642},{"style":1209},[5643],{"type":48,"value":5490},{"type":42,"tag":108,"props":5645,"children":5646},{"style":1228},[5647],{"type":48,"value":1216},{"type":42,"tag":108,"props":5649,"children":5650},{"style":1110},[5651],{"type":48,"value":5652},"clientCapabilities",{"type":42,"tag":108,"props":5654,"children":5655},{"style":1228},[5656],{"type":48,"value":1388},{"type":42,"tag":108,"props":5658,"children":5659},{"style":132},[5660],{"type":48,"value":1142},{"type":42,"tag":108,"props":5662,"children":5663},{"class":110,"line":1258},[5664],{"type":42,"tag":108,"props":5665,"children":5666},{"emptyLinePlaceholder":1189},[5667],{"type":48,"value":1192},{"type":42,"tag":108,"props":5669,"children":5670},{"class":110,"line":1276},[5671,5675,5679,5684,5688,5693,5697,5702,5706,5711,5716],{"type":42,"tag":108,"props":5672,"children":5673},{"style":1099},[5674],{"type":48,"value":3801},{"type":42,"tag":108,"props":5676,"children":5677},{"style":1228},[5678],{"type":48,"value":2144},{"type":42,"tag":108,"props":5680,"children":5681},{"style":1110},[5682],{"type":48,"value":5683},"uiCap",{"type":42,"tag":108,"props":5685,"children":5686},{"style":132},[5687],{"type":48,"value":3879},{"type":42,"tag":108,"props":5689,"children":5690},{"style":1110},[5691],{"type":48,"value":5692},"mimeTypes",{"type":42,"tag":108,"props":5694,"children":5695},{"style":132},[5696],{"type":48,"value":3879},{"type":42,"tag":108,"props":5698,"children":5699},{"style":1209},[5700],{"type":48,"value":5701},"includes",{"type":42,"tag":108,"props":5703,"children":5704},{"style":1228},[5705],{"type":48,"value":1216},{"type":42,"tag":108,"props":5707,"children":5708},{"style":1110},[5709],{"type":48,"value":5710},"RESOURCE_MIME_TYPE",{"type":42,"tag":108,"props":5712,"children":5713},{"style":1228},[5714],{"type":48,"value":5715},")) ",{"type":42,"tag":108,"props":5717,"children":5718},{"style":132},[5719],{"type":48,"value":1221},{"type":42,"tag":108,"props":5721,"children":5722},{"class":110,"line":1306},[5723],{"type":42,"tag":108,"props":5724,"children":5725},{"style":1353},[5726],{"type":48,"value":5727},"    \u002F\u002F Client supports UI — register App tool\n",{"type":42,"tag":108,"props":5729,"children":5730},{"class":110,"line":1323},[5731,5736,5740,5744,5748,5752,5756,5760,5764],{"type":42,"tag":108,"props":5732,"children":5733},{"style":1209},[5734],{"type":48,"value":5735},"    registerAppTool",{"type":42,"tag":108,"props":5737,"children":5738},{"style":1228},[5739],{"type":48,"value":1216},{"type":42,"tag":108,"props":5741,"children":5742},{"style":1110},[5743],{"type":48,"value":2066},{"type":42,"tag":108,"props":5745,"children":5746},{"style":132},[5747],{"type":48,"value":1350},{"type":42,"tag":108,"props":5749,"children":5750},{"style":132},[5751],{"type":48,"value":135},{"type":42,"tag":108,"props":5753,"children":5754},{"style":121},[5755],{"type":48,"value":2089},{"type":42,"tag":108,"props":5757,"children":5758},{"style":132},[5759],{"type":48,"value":1137},{"type":42,"tag":108,"props":5761,"children":5762},{"style":132},[5763],{"type":48,"value":1350},{"type":42,"tag":108,"props":5765,"children":5766},{"style":132},[5767],{"type":48,"value":1273},{"type":42,"tag":108,"props":5769,"children":5770},{"class":110,"line":1359},[5771,5776,5780,5784,5789,5793],{"type":42,"tag":108,"props":5772,"children":5773},{"style":1228},[5774],{"type":48,"value":5775},"      description",{"type":42,"tag":108,"props":5777,"children":5778},{"style":132},[5779],{"type":48,"value":201},{"type":42,"tag":108,"props":5781,"children":5782},{"style":132},[5783],{"type":48,"value":135},{"type":42,"tag":108,"props":5785,"children":5786},{"style":121},[5787],{"type":48,"value":5788},"Shows data with interactive UI",{"type":42,"tag":108,"props":5790,"children":5791},{"style":132},[5792],{"type":48,"value":1137},{"type":42,"tag":108,"props":5794,"children":5795},{"style":132},[5796],{"type":48,"value":1255},{"type":42,"tag":108,"props":5798,"children":5799},{"class":110,"line":1368},[5800,5805,5809,5813,5817,5821,5825,5829,5833],{"type":42,"tag":108,"props":5801,"children":5802},{"style":1228},[5803],{"type":48,"value":5804},"      _meta",{"type":42,"tag":108,"props":5806,"children":5807},{"style":132},[5808],{"type":48,"value":201},{"type":42,"tag":108,"props":5810,"children":5811},{"style":132},[5812],{"type":48,"value":1107},{"type":42,"tag":108,"props":5814,"children":5815},{"style":1228},[5816],{"type":48,"value":2590},{"type":42,"tag":108,"props":5818,"children":5819},{"style":132},[5820],{"type":48,"value":201},{"type":42,"tag":108,"props":5822,"children":5823},{"style":132},[5824],{"type":48,"value":1107},{"type":42,"tag":108,"props":5826,"children":5827},{"style":1110},[5828],{"type":48,"value":3071},{"type":42,"tag":108,"props":5830,"children":5831},{"style":132},[5832],{"type":48,"value":1118},{"type":42,"tag":108,"props":5834,"children":5835},{"style":132},[5836],{"type":48,"value":2611},{"type":42,"tag":108,"props":5838,"children":5839},{"class":110,"line":1377},[5840,5845,5850,5854],{"type":42,"tag":108,"props":5841,"children":5842},{"style":132},[5843],{"type":48,"value":5844},"    },",{"type":42,"tag":108,"props":5846,"children":5847},{"style":1110},[5848],{"type":48,"value":5849}," appToolHandler",{"type":42,"tag":108,"props":5851,"children":5852},{"style":1228},[5853],{"type":48,"value":1388},{"type":42,"tag":108,"props":5855,"children":5856},{"style":132},[5857],{"type":48,"value":1142},{"type":42,"tag":108,"props":5859,"children":5860},{"class":110,"line":2797},[5861,5866,5871],{"type":42,"tag":108,"props":5862,"children":5863},{"style":132},[5864],{"type":48,"value":5865},"  }",{"type":42,"tag":108,"props":5867,"children":5868},{"style":1099},[5869],{"type":48,"value":5870}," else",{"type":42,"tag":108,"props":5872,"children":5873},{"style":132},[5874],{"type":48,"value":1273},{"type":42,"tag":108,"props":5876,"children":5877},{"class":110,"line":2828},[5878],{"type":42,"tag":108,"props":5879,"children":5880},{"style":1353},[5881],{"type":48,"value":5882},"    \u002F\u002F Text-only client — register plain tool\n",{"type":42,"tag":108,"props":5884,"children":5885},{"class":110,"line":2837},[5886,5891,5895,5899,5903,5907,5911,5915,5919,5923,5928,5932,5936,5940,5944,5948,5952,5956,5960,5964,5968,5973,5977],{"type":42,"tag":108,"props":5887,"children":5888},{"style":1110},[5889],{"type":48,"value":5890},"    server",{"type":42,"tag":108,"props":5892,"children":5893},{"style":132},[5894],{"type":48,"value":2071},{"type":42,"tag":108,"props":5896,"children":5897},{"style":1209},[5898],{"type":48,"value":2076},{"type":42,"tag":108,"props":5900,"children":5901},{"style":1228},[5902],{"type":48,"value":1216},{"type":42,"tag":108,"props":5904,"children":5905},{"style":132},[5906],{"type":48,"value":1137},{"type":42,"tag":108,"props":5908,"children":5909},{"style":121},[5910],{"type":48,"value":2089},{"type":42,"tag":108,"props":5912,"children":5913},{"style":132},[5914],{"type":48,"value":1137},{"type":42,"tag":108,"props":5916,"children":5917},{"style":132},[5918],{"type":48,"value":1350},{"type":42,"tag":108,"props":5920,"children":5921},{"style":132},[5922],{"type":48,"value":135},{"type":42,"tag":108,"props":5924,"children":5925},{"style":121},[5926],{"type":48,"value":5927},"Shows data",{"type":42,"tag":108,"props":5929,"children":5930},{"style":132},[5931],{"type":48,"value":1137},{"type":42,"tag":108,"props":5933,"children":5934},{"style":132},[5935],{"type":48,"value":1350},{"type":42,"tag":108,"props":5937,"children":5938},{"style":132},[5939],{"type":48,"value":1107},{"type":42,"tag":108,"props":5941,"children":5942},{"style":1228},[5943],{"type":48,"value":2106},{"type":42,"tag":108,"props":5945,"children":5946},{"style":132},[5947],{"type":48,"value":201},{"type":42,"tag":108,"props":5949,"children":5950},{"style":1110},[5951],{"type":48,"value":2115},{"type":42,"tag":108,"props":5953,"children":5954},{"style":132},[5955],{"type":48,"value":2071},{"type":42,"tag":108,"props":5957,"children":5958},{"style":1209},[5959],{"type":48,"value":2124},{"type":42,"tag":108,"props":5961,"children":5962},{"style":1228},[5963],{"type":48,"value":2129},{"type":42,"tag":108,"props":5965,"children":5966},{"style":132},[5967],{"type":48,"value":2134},{"type":42,"tag":108,"props":5969,"children":5970},{"style":1110},[5971],{"type":48,"value":5972}," plainToolHandler",{"type":42,"tag":108,"props":5974,"children":5975},{"style":1228},[5976],{"type":48,"value":1388},{"type":42,"tag":108,"props":5978,"children":5979},{"style":132},[5980],{"type":48,"value":1142},{"type":42,"tag":108,"props":5982,"children":5983},{"class":110,"line":3389},[5984],{"type":42,"tag":108,"props":5985,"children":5986},{"style":132},[5987],{"type":48,"value":2022},{"type":42,"tag":108,"props":5989,"children":5990},{"class":110,"line":4016},[5991],{"type":42,"tag":108,"props":5992,"children":5993},{"style":132},[5994],{"type":48,"value":2320},{"type":42,"tag":183,"props":5996,"children":5998},{"id":5997},"fullscreen-mode",[5999],{"type":48,"value":6000},"Fullscreen Mode",{"type":42,"tag":51,"props":6002,"children":6003},{},[6004],{"type":48,"value":6005},"Allow the UI to expand to fullscreen:",{"type":42,"tag":97,"props":6007,"children":6009},{"className":1087,"code":6008,"language":1089,"meta":102,"style":102},"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",[6010],{"type":42,"tag":57,"props":6011,"children":6012},{"__ignoreMap":102},[6013,6052,6109,6155,6162,6194,6277,6284,6291,6298,6324,6400,6466,6495],{"type":42,"tag":108,"props":6014,"children":6015},{"class":110,"line":111},[6016,6020,6024,6028,6032,6036,6040,6044,6048],{"type":42,"tag":108,"props":6017,"children":6018},{"style":1110},[6019],{"type":48,"value":3636},{"type":42,"tag":108,"props":6021,"children":6022},{"style":132},[6023],{"type":48,"value":2071},{"type":42,"tag":108,"props":6025,"children":6026},{"style":1209},[6027],{"type":48,"value":273},{"type":42,"tag":108,"props":6029,"children":6030},{"style":132},[6031],{"type":48,"value":2181},{"type":42,"tag":108,"props":6033,"children":6034},{"style":132},[6035],{"type":48,"value":2144},{"type":42,"tag":108,"props":6037,"children":6038},{"style":2147},[6039],{"type":48,"value":3781},{"type":42,"tag":108,"props":6041,"children":6042},{"style":132},[6043],{"type":48,"value":1388},{"type":42,"tag":108,"props":6045,"children":6046},{"style":1434},[6047],{"type":48,"value":2159},{"type":42,"tag":108,"props":6049,"children":6050},{"style":132},[6051],{"type":48,"value":1273},{"type":42,"tag":108,"props":6053,"children":6054},{"class":110,"line":987},[6055,6059,6063,6067,6071,6076,6080,6084,6088,6092,6097,6101,6105],{"type":42,"tag":108,"props":6056,"children":6057},{"style":1099},[6058],{"type":48,"value":3801},{"type":42,"tag":108,"props":6060,"children":6061},{"style":1228},[6062],{"type":48,"value":2144},{"type":42,"tag":108,"props":6064,"children":6065},{"style":1110},[6066],{"type":48,"value":3781},{"type":42,"tag":108,"props":6068,"children":6069},{"style":132},[6070],{"type":48,"value":2071},{"type":42,"tag":108,"props":6072,"children":6073},{"style":1110},[6074],{"type":48,"value":6075},"availableDisplayModes",{"type":42,"tag":108,"props":6077,"children":6078},{"style":132},[6079],{"type":48,"value":3879},{"type":42,"tag":108,"props":6081,"children":6082},{"style":1209},[6083],{"type":48,"value":5701},{"type":42,"tag":108,"props":6085,"children":6086},{"style":1228},[6087],{"type":48,"value":1216},{"type":42,"tag":108,"props":6089,"children":6090},{"style":132},[6091],{"type":48,"value":1137},{"type":42,"tag":108,"props":6093,"children":6094},{"style":121},[6095],{"type":48,"value":6096},"fullscreen",{"type":42,"tag":108,"props":6098,"children":6099},{"style":132},[6100],{"type":48,"value":1137},{"type":42,"tag":108,"props":6102,"children":6103},{"style":1228},[6104],{"type":48,"value":5715},{"type":42,"tag":108,"props":6106,"children":6107},{"style":132},[6108],{"type":48,"value":1221},{"type":42,"tag":108,"props":6110,"children":6111},{"class":110,"line":1185},[6112,6117,6121,6125,6129,6134,6138,6142,6147,6151],{"type":42,"tag":108,"props":6113,"children":6114},{"style":1110},[6115],{"type":48,"value":6116},"    fullscreenBtn",{"type":42,"tag":108,"props":6118,"children":6119},{"style":132},[6120],{"type":48,"value":2071},{"type":42,"tag":108,"props":6122,"children":6123},{"style":1110},[6124],{"type":48,"value":4142},{"type":42,"tag":108,"props":6126,"children":6127},{"style":132},[6128],{"type":48,"value":2071},{"type":42,"tag":108,"props":6130,"children":6131},{"style":1110},[6132],{"type":48,"value":6133},"display",{"type":42,"tag":108,"props":6135,"children":6136},{"style":132},[6137],{"type":48,"value":2181},{"type":42,"tag":108,"props":6139,"children":6140},{"style":132},[6141],{"type":48,"value":135},{"type":42,"tag":108,"props":6143,"children":6144},{"style":121},[6145],{"type":48,"value":6146},"block",{"type":42,"tag":108,"props":6148,"children":6149},{"style":132},[6150],{"type":48,"value":1137},{"type":42,"tag":108,"props":6152,"children":6153},{"style":132},[6154],{"type":48,"value":1142},{"type":42,"tag":108,"props":6156,"children":6157},{"class":110,"line":1195},[6158],{"type":42,"tag":108,"props":6159,"children":6160},{"style":132},[6161],{"type":48,"value":2022},{"type":42,"tag":108,"props":6163,"children":6164},{"class":110,"line":1224},[6165,6169,6173,6177,6181,6186,6190],{"type":42,"tag":108,"props":6166,"children":6167},{"style":1099},[6168],{"type":48,"value":3801},{"type":42,"tag":108,"props":6170,"children":6171},{"style":1228},[6172],{"type":48,"value":2144},{"type":42,"tag":108,"props":6174,"children":6175},{"style":1110},[6176],{"type":48,"value":3781},{"type":42,"tag":108,"props":6178,"children":6179},{"style":132},[6180],{"type":48,"value":2071},{"type":42,"tag":108,"props":6182,"children":6183},{"style":1110},[6184],{"type":48,"value":6185},"displayMode",{"type":42,"tag":108,"props":6187,"children":6188},{"style":1228},[6189],{"type":48,"value":2306},{"type":42,"tag":108,"props":6191,"children":6192},{"style":132},[6193],{"type":48,"value":1221},{"type":42,"tag":108,"props":6195,"children":6196},{"class":110,"line":1258},[6197,6202,6206,6211,6215,6220,6224,6228,6232,6236,6240,6244,6248,6252,6257,6261,6265,6269,6273],{"type":42,"tag":108,"props":6198,"children":6199},{"style":1110},[6200],{"type":48,"value":6201},"    container",{"type":42,"tag":108,"props":6203,"children":6204},{"style":132},[6205],{"type":48,"value":2071},{"type":42,"tag":108,"props":6207,"children":6208},{"style":1110},[6209],{"type":48,"value":6210},"classList",{"type":42,"tag":108,"props":6212,"children":6213},{"style":132},[6214],{"type":48,"value":2071},{"type":42,"tag":108,"props":6216,"children":6217},{"style":1209},[6218],{"type":48,"value":6219},"toggle",{"type":42,"tag":108,"props":6221,"children":6222},{"style":1228},[6223],{"type":48,"value":1216},{"type":42,"tag":108,"props":6225,"children":6226},{"style":132},[6227],{"type":48,"value":1137},{"type":42,"tag":108,"props":6229,"children":6230},{"style":121},[6231],{"type":48,"value":6096},{"type":42,"tag":108,"props":6233,"children":6234},{"style":132},[6235],{"type":48,"value":1137},{"type":42,"tag":108,"props":6237,"children":6238},{"style":132},[6239],{"type":48,"value":1350},{"type":42,"tag":108,"props":6241,"children":6242},{"style":1110},[6243],{"type":48,"value":4104},{"type":42,"tag":108,"props":6245,"children":6246},{"style":132},[6247],{"type":48,"value":2071},{"type":42,"tag":108,"props":6249,"children":6250},{"style":1110},[6251],{"type":48,"value":6185},{"type":42,"tag":108,"props":6253,"children":6254},{"style":132},[6255],{"type":48,"value":6256}," ===",{"type":42,"tag":108,"props":6258,"children":6259},{"style":132},[6260],{"type":48,"value":135},{"type":42,"tag":108,"props":6262,"children":6263},{"style":121},[6264],{"type":48,"value":6096},{"type":42,"tag":108,"props":6266,"children":6267},{"style":132},[6268],{"type":48,"value":1137},{"type":42,"tag":108,"props":6270,"children":6271},{"style":1228},[6272],{"type":48,"value":1388},{"type":42,"tag":108,"props":6274,"children":6275},{"style":132},[6276],{"type":48,"value":1142},{"type":42,"tag":108,"props":6278,"children":6279},{"class":110,"line":1276},[6280],{"type":42,"tag":108,"props":6281,"children":6282},{"style":132},[6283],{"type":48,"value":2022},{"type":42,"tag":108,"props":6285,"children":6286},{"class":110,"line":1306},[6287],{"type":42,"tag":108,"props":6288,"children":6289},{"style":132},[6290],{"type":48,"value":2320},{"type":42,"tag":108,"props":6292,"children":6293},{"class":110,"line":1323},[6294],{"type":42,"tag":108,"props":6295,"children":6296},{"emptyLinePlaceholder":1189},[6297],{"type":48,"value":1192},{"type":42,"tag":108,"props":6299,"children":6300},{"class":110,"line":1359},[6301,6306,6311,6316,6320],{"type":42,"tag":108,"props":6302,"children":6303},{"style":1434},[6304],{"type":48,"value":6305},"async",{"type":42,"tag":108,"props":6307,"children":6308},{"style":1434},[6309],{"type":48,"value":6310}," function",{"type":42,"tag":108,"props":6312,"children":6313},{"style":1209},[6314],{"type":48,"value":6315}," toggleFullscreen",{"type":42,"tag":108,"props":6317,"children":6318},{"style":132},[6319],{"type":48,"value":4837},{"type":42,"tag":108,"props":6321,"children":6322},{"style":132},[6323],{"type":48,"value":1273},{"type":42,"tag":108,"props":6325,"children":6326},{"class":110,"line":1368},[6327,6331,6336,6340,6345,6349,6353,6357,6361,6366,6370,6375,6379,6384,6388,6392,6396],{"type":42,"tag":108,"props":6328,"children":6329},{"style":1434},[6330],{"type":48,"value":2171},{"type":42,"tag":108,"props":6332,"children":6333},{"style":1110},[6334],{"type":48,"value":6335}," newMode",{"type":42,"tag":108,"props":6337,"children":6338},{"style":132},[6339],{"type":48,"value":2181},{"type":42,"tag":108,"props":6341,"children":6342},{"style":1110},[6343],{"type":48,"value":6344}," currentMode",{"type":42,"tag":108,"props":6346,"children":6347},{"style":132},[6348],{"type":48,"value":6256},{"type":42,"tag":108,"props":6350,"children":6351},{"style":132},[6352],{"type":48,"value":135},{"type":42,"tag":108,"props":6354,"children":6355},{"style":121},[6356],{"type":48,"value":6096},{"type":42,"tag":108,"props":6358,"children":6359},{"style":132},[6360],{"type":48,"value":1137},{"type":42,"tag":108,"props":6362,"children":6363},{"style":132},[6364],{"type":48,"value":6365}," ?",{"type":42,"tag":108,"props":6367,"children":6368},{"style":132},[6369],{"type":48,"value":135},{"type":42,"tag":108,"props":6371,"children":6372},{"style":121},[6373],{"type":48,"value":6374},"inline",{"type":42,"tag":108,"props":6376,"children":6377},{"style":132},[6378],{"type":48,"value":1137},{"type":42,"tag":108,"props":6380,"children":6381},{"style":132},[6382],{"type":48,"value":6383}," :",{"type":42,"tag":108,"props":6385,"children":6386},{"style":132},[6387],{"type":48,"value":135},{"type":42,"tag":108,"props":6389,"children":6390},{"style":121},[6391],{"type":48,"value":6096},{"type":42,"tag":108,"props":6393,"children":6394},{"style":132},[6395],{"type":48,"value":1137},{"type":42,"tag":108,"props":6397,"children":6398},{"style":132},[6399],{"type":48,"value":1142},{"type":42,"tag":108,"props":6401,"children":6402},{"class":110,"line":1377},[6403,6407,6412,6416,6420,6424,6428,6433,6437,6441,6446,6450,6454,6458,6462],{"type":42,"tag":108,"props":6404,"children":6405},{"style":1434},[6406],{"type":48,"value":2171},{"type":42,"tag":108,"props":6408,"children":6409},{"style":1110},[6410],{"type":48,"value":6411}," result",{"type":42,"tag":108,"props":6413,"children":6414},{"style":132},[6415],{"type":48,"value":2181},{"type":42,"tag":108,"props":6417,"children":6418},{"style":1099},[6419],{"type":48,"value":2186},{"type":42,"tag":108,"props":6421,"children":6422},{"style":1110},[6423],{"type":48,"value":4339},{"type":42,"tag":108,"props":6425,"children":6426},{"style":132},[6427],{"type":48,"value":2071},{"type":42,"tag":108,"props":6429,"children":6430},{"style":1209},[6431],{"type":48,"value":6432},"requestDisplayMode",{"type":42,"tag":108,"props":6434,"children":6435},{"style":1228},[6436],{"type":48,"value":1216},{"type":42,"tag":108,"props":6438,"children":6439},{"style":132},[6440],{"type":48,"value":2245},{"type":42,"tag":108,"props":6442,"children":6443},{"style":1228},[6444],{"type":48,"value":6445}," mode",{"type":42,"tag":108,"props":6447,"children":6448},{"style":132},[6449],{"type":48,"value":201},{"type":42,"tag":108,"props":6451,"children":6452},{"style":1110},[6453],{"type":48,"value":6335},{"type":42,"tag":108,"props":6455,"children":6456},{"style":132},[6457],{"type":48,"value":1118},{"type":42,"tag":108,"props":6459,"children":6460},{"style":1228},[6461],{"type":48,"value":1388},{"type":42,"tag":108,"props":6463,"children":6464},{"style":132},[6465],{"type":48,"value":1142},{"type":42,"tag":108,"props":6467,"children":6468},{"class":110,"line":2797},[6469,6474,6478,6482,6486,6491],{"type":42,"tag":108,"props":6470,"children":6471},{"style":1110},[6472],{"type":48,"value":6473},"  currentMode",{"type":42,"tag":108,"props":6475,"children":6476},{"style":132},[6477],{"type":48,"value":2181},{"type":42,"tag":108,"props":6479,"children":6480},{"style":1110},[6481],{"type":48,"value":6411},{"type":42,"tag":108,"props":6483,"children":6484},{"style":132},[6485],{"type":48,"value":2071},{"type":42,"tag":108,"props":6487,"children":6488},{"style":1110},[6489],{"type":48,"value":6490},"mode",{"type":42,"tag":108,"props":6492,"children":6493},{"style":132},[6494],{"type":48,"value":1142},{"type":42,"tag":108,"props":6496,"children":6497},{"class":110,"line":2828},[6498],{"type":42,"tag":108,"props":6499,"children":6500},{"style":132},[6501],{"type":48,"value":2030},{"type":42,"tag":66,"props":6503,"children":6505},{"id":6504},"common-mistakes-to-avoid",[6506],{"type":48,"value":6507},"Common Mistakes to Avoid",{"type":42,"tag":801,"props":6509,"children":6510},{},[6511,6535,6556,6571,6588,6606],{"type":42,"tag":805,"props":6512,"children":6513},{},[6514,6526,6528,6533],{"type":42,"tag":821,"props":6515,"children":6516},{},[6517,6519,6524],{"type":48,"value":6518},"Forgetting text ",{"type":42,"tag":57,"props":6520,"children":6522},{"className":6521},[],[6523],{"type":48,"value":2873},{"type":48,"value":6525}," fallback",{"type":48,"value":6527}," — Always include ",{"type":42,"tag":57,"props":6529,"children":6531},{"className":6530},[],[6532],{"type":48,"value":2873},{"type":48,"value":6534}," array with text for non-UI hosts",{"type":42,"tag":805,"props":6536,"children":6537},{},[6538,6549,6551],{"type":42,"tag":821,"props":6539,"children":6540},{},[6541,6543],{"type":48,"value":6542},"Registering handlers after ",{"type":42,"tag":57,"props":6544,"children":6546},{"className":6545},[],[6547],{"type":48,"value":6548},"connect()",{"type":48,"value":6550}," — Register ALL handlers BEFORE calling ",{"type":42,"tag":57,"props":6552,"children":6554},{"className":6553},[],[6555],{"type":48,"value":3438},{"type":42,"tag":805,"props":6557,"children":6558},{},[6559,6569],{"type":42,"tag":821,"props":6560,"children":6561},{},[6562,6564],{"type":48,"value":6563},"Missing ",{"type":42,"tag":57,"props":6565,"children":6567},{"className":6566},[],[6568],{"type":48,"value":1082},{"type":48,"value":6570}," — Without it, assets won't load in the sandboxed iframe",{"type":42,"tag":805,"props":6572,"children":6573},{},[6574,6579,6581,6586],{"type":42,"tag":821,"props":6575,"children":6576},{},[6577],{"type":48,"value":6578},"Forgetting resource registration",{"type":48,"value":6580}," — The tool references a ",{"type":42,"tag":57,"props":6582,"children":6584},{"className":6583},[],[6585],{"type":48,"value":3413},{"type":48,"value":6587}," that must have a matching resource",{"type":42,"tag":805,"props":6589,"children":6590},{},[6591,6596,6598,6604],{"type":42,"tag":821,"props":6592,"children":6593},{},[6594],{"type":48,"value":6595},"Hardcoding styles",{"type":48,"value":6597}," — Use host CSS variables (",{"type":42,"tag":57,"props":6599,"children":6601},{"className":6600},[],[6602],{"type":48,"value":6603},"var(--color-*)",{"type":48,"value":6605},") for theme integration",{"type":42,"tag":805,"props":6607,"children":6608},{},[6609,6614,6616,6622,6624],{"type":42,"tag":821,"props":6610,"children":6611},{},[6612],{"type":48,"value":6613},"Not handling safe area insets",{"type":48,"value":6615}," — Always apply ",{"type":42,"tag":57,"props":6617,"children":6619},{"className":6618},[],[6620],{"type":48,"value":6621},"ctx.safeAreaInsets",{"type":48,"value":6623}," in ",{"type":42,"tag":57,"props":6625,"children":6627},{"className":6626},[],[6628],{"type":48,"value":273},{"type":42,"tag":66,"props":6630,"children":6632},{"id":6631},"testing",[6633],{"type":48,"value":6634},"Testing",{"type":42,"tag":183,"props":6636,"children":6638},{"id":6637},"using-basic-host",[6639],{"type":48,"value":6640},"Using basic-host",{"type":42,"tag":51,"props":6642,"children":6643},{},[6644],{"type":48,"value":6645},"Test the enhanced server with the basic-host example:",{"type":42,"tag":97,"props":6647,"children":6649},{"className":99,"code":6648,"language":101,"meta":102,"style":102},"# 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",[6650],{"type":42,"tag":57,"props":6651,"children":6652},{"__ignoreMap":102},[6653,6661,6697,6704,6712,6725,6737,6776],{"type":42,"tag":108,"props":6654,"children":6655},{"class":110,"line":111},[6656],{"type":42,"tag":108,"props":6657,"children":6658},{"style":1353},[6659],{"type":48,"value":6660},"# Terminal 1: Build and run your server\n",{"type":42,"tag":108,"props":6662,"children":6663},{"class":110,"line":987},[6664,6668,6673,6678,6683,6688,6692],{"type":42,"tag":108,"props":6665,"children":6666},{"style":115},[6667],{"type":48,"value":150},{"type":42,"tag":108,"props":6669,"children":6670},{"style":121},[6671],{"type":48,"value":6672}," run",{"type":42,"tag":108,"props":6674,"children":6675},{"style":121},[6676],{"type":48,"value":6677}," build",{"type":42,"tag":108,"props":6679,"children":6680},{"style":132},[6681],{"type":48,"value":6682}," &&",{"type":42,"tag":108,"props":6684,"children":6685},{"style":115},[6686],{"type":48,"value":6687}," npm",{"type":42,"tag":108,"props":6689,"children":6690},{"style":121},[6691],{"type":48,"value":6672},{"type":42,"tag":108,"props":6693,"children":6694},{"style":121},[6695],{"type":48,"value":6696}," serve\n",{"type":42,"tag":108,"props":6698,"children":6699},{"class":110,"line":1185},[6700],{"type":42,"tag":108,"props":6701,"children":6702},{"emptyLinePlaceholder":1189},[6703],{"type":48,"value":1192},{"type":42,"tag":108,"props":6705,"children":6706},{"class":110,"line":1195},[6707],{"type":42,"tag":108,"props":6708,"children":6709},{"style":1353},[6710],{"type":48,"value":6711},"# Terminal 2: Run basic-host (from cloned repo)\n",{"type":42,"tag":108,"props":6713,"children":6714},{"class":110,"line":1224},[6715,6720],{"type":42,"tag":108,"props":6716,"children":6717},{"style":1209},[6718],{"type":48,"value":6719},"cd",{"type":42,"tag":108,"props":6721,"children":6722},{"style":121},[6723],{"type":48,"value":6724}," \u002Ftmp\u002Fmcp-ext-apps\u002Fexamples\u002Fbasic-host\n",{"type":42,"tag":108,"props":6726,"children":6727},{"class":110,"line":1258},[6728,6732],{"type":42,"tag":108,"props":6729,"children":6730},{"style":115},[6731],{"type":48,"value":150},{"type":42,"tag":108,"props":6733,"children":6734},{"style":121},[6735],{"type":48,"value":6736}," install\n",{"type":42,"tag":108,"props":6738,"children":6739},{"class":110,"line":1276},[6740,6745,6749,6754,6759,6763,6767,6771],{"type":42,"tag":108,"props":6741,"children":6742},{"style":1110},[6743],{"type":48,"value":6744},"SERVERS",{"type":42,"tag":108,"props":6746,"children":6747},{"style":132},[6748],{"type":48,"value":1464},{"type":42,"tag":108,"props":6750,"children":6751},{"style":132},[6752],{"type":48,"value":6753},"'",{"type":42,"tag":108,"props":6755,"children":6756},{"style":121},[6757],{"type":48,"value":6758},"[\"http:\u002F\u002Flocalhost:3001\u002Fmcp\"]",{"type":42,"tag":108,"props":6760,"children":6761},{"style":132},[6762],{"type":48,"value":6753},{"type":42,"tag":108,"props":6764,"children":6765},{"style":115},[6766],{"type":48,"value":6687},{"type":42,"tag":108,"props":6768,"children":6769},{"style":121},[6770],{"type":48,"value":6672},{"type":42,"tag":108,"props":6772,"children":6773},{"style":121},[6774],{"type":48,"value":6775}," start\n",{"type":42,"tag":108,"props":6777,"children":6778},{"class":110,"line":1306},[6779],{"type":42,"tag":108,"props":6780,"children":6781},{"style":1353},[6782],{"type":48,"value":6783},"# Open http:\u002F\u002Flocalhost:8080\n",{"type":42,"tag":51,"props":6785,"children":6786},{},[6787,6789,6794,6796,6802],{"type":48,"value":6788},"Configure ",{"type":42,"tag":57,"props":6790,"children":6792},{"className":6791},[],[6793],{"type":48,"value":6744},{"type":48,"value":6795}," with a JSON array of your server URLs (default: ",{"type":42,"tag":57,"props":6797,"children":6799},{"className":6798},[],[6800],{"type":48,"value":6801},"http:\u002F\u002Flocalhost:3001\u002Fmcp",{"type":48,"value":64},{"type":42,"tag":183,"props":6804,"children":6806},{"id":6805},"verify",[6807],{"type":48,"value":6808},"Verify",{"type":42,"tag":801,"props":6810,"children":6811},{},[6812,6817,6822,6832,6842],{"type":42,"tag":805,"props":6813,"children":6814},{},[6815],{"type":48,"value":6816},"Plain tools still work and return text output",{"type":42,"tag":805,"props":6818,"children":6819},{},[6820],{"type":48,"value":6821},"App tools render their UI in the iframe",{"type":42,"tag":805,"props":6823,"children":6824},{},[6825,6830],{"type":42,"tag":57,"props":6826,"children":6828},{"className":6827},[],[6829],{"type":48,"value":258},{"type":48,"value":6831}," handler fires with tool arguments",{"type":42,"tag":805,"props":6833,"children":6834},{},[6835,6840],{"type":42,"tag":57,"props":6836,"children":6838},{"className":6837},[],[6839],{"type":48,"value":266},{"type":48,"value":6841}," handler fires with tool result",{"type":42,"tag":805,"props":6843,"children":6844},{},[6845],{"type":48,"value":6846},"Host styling (theme, fonts, colors) applies correctly",{"type":42,"tag":4142,"props":6848,"children":6849},{},[6850],{"type":48,"value":6851},"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":6853,"total":7033},[6854,6875,6896,6906,6919,6932,6942,6952,6973,6988,7003,7018],{"slug":6855,"name":6855,"fn":6856,"description":6857,"org":6858,"tags":6859,"stars":6872,"repoUrl":6873,"updatedAt":6874},"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},[6860,6863,6866,6869],{"name":6861,"slug":6862,"type":16},"AWS","aws",{"name":6864,"slug":6865,"type":16},"Debugging","debugging",{"name":6867,"slug":6868,"type":16},"Logs","logs",{"name":6870,"slug":6871,"type":16},"Observability","observability",9427,"https:\u002F\u002Fgithub.com\u002Fawslabs\u002Fmcp","2026-07-12T08:37:22.601527",{"slug":6876,"name":6877,"fn":6878,"description":6879,"org":6880,"tags":6881,"stars":6872,"repoUrl":6873,"updatedAt":6895},"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},[6882,6885,6886,6889,6892],{"name":6883,"slug":6884,"type":16},"Aurora","aurora",{"name":6861,"slug":6862,"type":16},{"name":6887,"slug":6888,"type":16},"Database","database",{"name":6890,"slug":6891,"type":16},"Serverless","serverless",{"name":6893,"slug":6894,"type":16},"SQL","sql","2026-07-12T08:36:45.053393",{"slug":6897,"name":6898,"fn":6878,"description":6879,"org":6899,"tags":6900,"stars":6872,"repoUrl":6873,"updatedAt":6905},"aurora-dsql","aurora dsql",{"slug":8,"name":9,"logoUrl":10,"githubOrg":11},[6901,6902,6903,6904],{"name":6861,"slug":6862,"type":16},{"name":6887,"slug":6888,"type":16},{"name":6890,"slug":6891,"type":16},{"name":6893,"slug":6894,"type":16},"2026-07-12T08:36:42.694299",{"slug":6907,"name":6908,"fn":6878,"description":6879,"org":6909,"tags":6910,"stars":6872,"repoUrl":6873,"updatedAt":6918},"aws-dsql","aws dsql",{"slug":8,"name":9,"logoUrl":10,"githubOrg":11},[6911,6912,6913,6916,6917],{"name":6861,"slug":6862,"type":16},{"name":6887,"slug":6888,"type":16},{"name":6914,"slug":6915,"type":16},"Migration","migration",{"name":6890,"slug":6891,"type":16},{"name":6893,"slug":6894,"type":16},"2026-07-12T08:36:38.584057",{"slug":6920,"name":6921,"fn":6878,"description":6879,"org":6922,"tags":6923,"stars":6872,"repoUrl":6873,"updatedAt":6931},"distributed-postgres","distributed postgres",{"slug":8,"name":9,"logoUrl":10,"githubOrg":11},[6924,6925,6926,6929,6930],{"name":6861,"slug":6862,"type":16},{"name":6887,"slug":6888,"type":16},{"name":6927,"slug":6928,"type":16},"PostgreSQL","postgresql",{"name":6890,"slug":6891,"type":16},{"name":6893,"slug":6894,"type":16},"2026-07-12T08:36:46.530743",{"slug":6933,"name":6934,"fn":6878,"description":6879,"org":6935,"tags":6936,"stars":6872,"repoUrl":6873,"updatedAt":6941},"distributed-sql","distributed sql",{"slug":8,"name":9,"logoUrl":10,"githubOrg":11},[6937,6938,6939,6940],{"name":6861,"slug":6862,"type":16},{"name":6887,"slug":6888,"type":16},{"name":6890,"slug":6891,"type":16},{"name":6893,"slug":6894,"type":16},"2026-07-12T08:36:48.104182",{"slug":6943,"name":6943,"fn":6878,"description":6879,"org":6944,"tags":6945,"stars":6872,"repoUrl":6873,"updatedAt":6951},"dsql",{"slug":8,"name":9,"logoUrl":10,"githubOrg":11},[6946,6947,6948,6949,6950],{"name":6861,"slug":6862,"type":16},{"name":6887,"slug":6888,"type":16},{"name":6914,"slug":6915,"type":16},{"name":6890,"slug":6891,"type":16},{"name":6893,"slug":6894,"type":16},"2026-07-12T08:36:36.374512",{"slug":6953,"name":6953,"fn":6954,"description":6955,"org":6956,"tags":6957,"stars":6970,"repoUrl":6971,"updatedAt":6972},"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},[6958,6961,6964,6967],{"name":6959,"slug":6960,"type":16},"Accounting","accounting",{"name":6962,"slug":6963,"type":16},"Analytics","analytics",{"name":6965,"slug":6966,"type":16},"Cost Optimization","cost-optimization",{"name":6968,"slug":6969,"type":16},"Finance","finance",3176,"https:\u002F\u002Fgithub.com\u002Fawslabs\u002Fagentcore-samples","2026-07-12T08:40:03.29555",{"slug":6974,"name":6974,"fn":6975,"description":6976,"org":6977,"tags":6978,"stars":6970,"repoUrl":6971,"updatedAt":6987},"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},[6979,6980,6981,6984],{"name":6861,"slug":6862,"type":16},{"name":6968,"slug":6969,"type":16},{"name":6982,"slug":6983,"type":16},"Management","management",{"name":6985,"slug":6986,"type":16},"Reporting","reporting","2026-07-12T08:40:02.066471",{"slug":6989,"name":6989,"fn":6990,"description":6991,"org":6992,"tags":6993,"stars":6970,"repoUrl":6971,"updatedAt":7002},"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},[6994,6995,6996,6999],{"name":6962,"slug":6963,"type":16},{"name":6968,"slug":6969,"type":16},{"name":6997,"slug":6998,"type":16},"Financial Statements","financial-statements",{"name":7000,"slug":7001,"type":16},"Variance Analysis","variance-analysis","2026-07-12T08:40:00.79141",{"slug":7004,"name":7004,"fn":7005,"description":7006,"org":7007,"tags":7008,"stars":6970,"repoUrl":6971,"updatedAt":7017},"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},[7009,7012,7015],{"name":7010,"slug":7011,"type":16},"Automation","automation",{"name":7013,"slug":7014,"type":16},"Documents","documents",{"name":7016,"slug":7004,"type":16},"PDF","2026-07-12T08:41:44.135656",{"slug":7019,"name":7019,"fn":7020,"description":7021,"org":7022,"tags":7023,"stars":6970,"repoUrl":6971,"updatedAt":7032},"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},[7024,7025,7028,7029],{"name":6959,"slug":6960,"type":16},{"name":7026,"slug":7027,"type":16},"Data Analysis","data-analysis",{"name":6968,"slug":6969,"type":16},{"name":7030,"slug":7031,"type":16},"KPI","kpi","2026-07-12T08:39:59.54971",150,{"items":7035,"total":3389},[7036,7043,7058,7070,7086,7099,7113],{"slug":4,"name":4,"fn":5,"description":6,"org":7037,"tags":7038,"stars":26,"repoUrl":27,"updatedAt":28},{"slug":8,"name":9,"logoUrl":10,"githubOrg":11},[7039,7040,7041,7042],{"name":24,"slug":25,"type":16},{"name":14,"slug":15,"type":16},{"name":18,"slug":19,"type":16},{"name":21,"slug":22,"type":16},{"slug":7044,"name":7044,"fn":7045,"description":7046,"org":7047,"tags":7048,"stars":26,"repoUrl":27,"updatedAt":7057},"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},[7049,7052,7055,7056],{"name":7050,"slug":7051,"type":16},"Agents","agents",{"name":7053,"slug":7054,"type":16},"Dashboards","dashboards",{"name":14,"slug":15,"type":16},{"name":21,"slug":22,"type":16},"2026-07-22T05:35:50.851108",{"slug":7059,"name":7059,"fn":7060,"description":7061,"org":7062,"tags":7063,"stars":26,"repoUrl":27,"updatedAt":7069},"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},[7064,7065,7066],{"name":7050,"slug":7051,"type":16},{"name":6861,"slug":6862,"type":16},{"name":7067,"slug":7068,"type":16},"Orchestration","orchestration","2026-07-25T05:56:34.255071",{"slug":7071,"name":7071,"fn":7072,"description":7073,"org":7074,"tags":7075,"stars":26,"repoUrl":27,"updatedAt":7085},"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},[7076,7079,7082],{"name":7077,"slug":7078,"type":16},"Best Practices","best-practices",{"name":7080,"slug":7081,"type":16},"Engineering","engineering",{"name":7083,"slug":7084,"type":16},"Operations","operations","2026-07-29T06:00:28.147989",{"slug":7087,"name":7087,"fn":7088,"description":7089,"org":7090,"tags":7091,"stars":26,"repoUrl":27,"updatedAt":7098},"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},[7092,7093,7096,7097],{"name":7050,"slug":7051,"type":16},{"name":7094,"slug":7095,"type":16},"CLI","cli",{"name":14,"slug":15,"type":16},{"name":21,"slug":22,"type":16},"2026-07-22T05:35:52.952289",{"slug":7100,"name":7100,"fn":7101,"description":7102,"org":7103,"tags":7104,"stars":26,"repoUrl":27,"updatedAt":7112},"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},[7105,7106,7109],{"name":7050,"slug":7051,"type":16},{"name":7107,"slug":7108,"type":16},"Memory","memory",{"name":7110,"slug":7111,"type":16},"Productivity","productivity","2026-07-12T08:37:03.180421",{"slug":7114,"name":7114,"fn":7115,"description":7116,"org":7117,"tags":7118,"stars":26,"repoUrl":27,"updatedAt":7123},"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},[7119,7120,7121,7122],{"name":7050,"slug":7051,"type":16},{"name":7010,"slug":7011,"type":16},{"name":7094,"slug":7095,"type":16},{"name":18,"slug":19,"type":16},"2026-07-12T08:36:49.784639"]