Create Mcp Ext Apps

• Convert all accepted input shapes into one canonical UI model.
• Keep renderer data-driven from this model.
• This allows changing tool purpose without changing core app skeleton.

• Separate transport + registration + UI runtime from tool-specific domain schema.
• When tool function changes (input canvas, document canvas, etc.), reuse the platform skeleton and replace schema/model/render components.

11. Multi-tool ext-app pattern (learned from a second tool).

• Keep each tool with its own schema module and parser (src/schema.ts, src/document-schema.ts).
• Register each tool with its own UI resource URI (for example mcp-app.html vs mcp-document-app.html).
• Keep each renderer isolated (src/mcp-app.ts vs src/document-app.ts) to avoid cross-tool coupling.
• Design shared host behavior (theme/style hooks) once, but keep view logic tool-specific.

12. Multi-entry UI build constraints.

• vite-plugin-singlefile cannot inline multiple HTML inputs in a single Vite build run.
• Build each HTML entrypoint in separate Vite invocations.
• Keep server bundling separate from UI bundling (vite first, then tsc/bun build).

13. Schema evolution for real payloads.

• Make field optionality match tool description exactly (for example optional sections in document canvas).
• Validate against real sample files early (document.json) to catch mismatch (for example missing optional fields).
• Keep renderer null-safe for optional sections so partial payloads render cleanly.

14. Sectioned document rendering pattern.

• Use semantic section cards for each document block (objective, architecture, table, repository tree).
• Render architecture flow as a code block for readability.
• Render assumptions as a table and repository layout as a tree-style block.
• Assume vertical scroll by default for long documents; do not constrain to one viewport.

Minimal Build Checklist

1. Scaffold from reference ext-app example.
2. Register tool with a strongly typed inputSchema and UI resource URI.
3. Implement UI app that renders from typed model.
4. Add concrete examples for callers.
5. Verify with parser smoke tests + npm run build.
6. Confirm behavior in host after MCP server restart.
7. If multiple tools have separate UIs, build each HTML entrypoint explicitly.