refactor: inline HTML strings

Author: tsck

.gitignore

@@ -15,6 +15,9 @@ coverage
 # Generated assets by accuracy runs
 .accuracy
 
+# Generated UI module (rebuilt by `pnpm build:ui`)
+src/ui/generated
+
 .DS_Store
 
 # Development tool files

package.json

@@ -63,7 +63,7 @@
     "build:cjs": "tsc --project tsconfig.cjs.json",
     "build:ui": "vite build --config vite.ui.config.ts",
     "build:universal-package": "tsx scripts/createUniversalPackage.ts",
-    "build": "pnpm run build:clean && concurrently \"pnpm run build:esm\" \"pnpm run build:cjs\" && pnpm run build:ui && pnpm run build:universal-package",
+    "build": "pnpm run build:clean && pnpm run build:ui && concurrently \"pnpm run build:esm\" \"pnpm run build:cjs\" && pnpm run build:universal-package",
     "inspect": "pnpm run build && mcp-inspector -- dist/esm/index.js",
     "prettier": "prettier",
     "check": "concurrently \"pnpm run build\" \"pnpm run check:types\" \"pnpm run check:lint\" \"pnpm run check:format\" \"pnpm run check:dependencies\"",

src/tools/mongodb/metadata/listDatabases.tsx

@@ -5,7 +5,6 @@ import type { OperationType } from "../../tool.js";
 import { formatUntrustedData } from "../../tool.js";
 import { ListDatabasesOutputSchema, type ListDatabasesOutput } from "../../../ui/components/ListDatabases/schema.js";
 
-// Re-export for consumers who need the schema/type
 export { ListDatabasesOutputSchema, type ListDatabasesOutput };
 
 export class ListDatabasesTool extends MongoDBToolBase {

src/ui/registry/registry.ts

@@ -1,52 +1,15 @@
-import { readFileSync, existsSync } from "fs";
-import { join, dirname } from "path";
-import { fileURLToPath } from "url";
-import { uiMap } from "./uiMap.js";
-
-/**
- * Get the directory of the current module, works in both ESM and CJS.
- */
-function getCurrentDir(): string {
-    if (typeof __dirname !== "undefined") {
-        return __dirname;
-    }
-    return dirname(fileURLToPath(import.meta.url));
-}
-
-/**
- * Find the package root by looking for package.json walking up from the current directory.
- */
-function findPackageRoot(startDir: string): string {
-    let dir = startDir;
-    while (dir !== dirname(dir)) {
-        if (existsSync(join(dir, "package.json"))) {
-            return dir;
-        }
-        dir = dirname(dir);
-    }
-    return process.cwd();
-}
-
-/**
- * Get the default UI dist path by finding the package root.
- */
-function getDefaultUIDistPath(): string {
-    const currentDir = getCurrentDir();
-    const packageRoot = findPackageRoot(currentDir);
-    return join(packageRoot, "dist", "ui");
-}
+import { uiHtml } from "../generated/uiHtml.js";
 
 /**
  * UI Registry that manages bundled UI HTML strings for tools.
+ *
+ * The default UIs are embedded at build time via the generated uiHtml module.
+ * Custom UIs can be provided at runtime to override or extend the defaults.
  */
 export class UIRegistry {
     private customUIs: Map<string, string> = new Map();
-    private cache: Map<string, string> = new Map();
-    private uiDistPath: string;
 
     constructor(options?: { customUIs?: Record<string, string> }) {
-        this.uiDistPath = getDefaultUIDistPath();
-
         if (options?.customUIs) {
             for (const [toolName, html] of Object.entries(options.customUIs)) {
                 this.customUIs.set(toolName, html);
@@ -56,35 +19,29 @@ export class UIRegistry {
 
     /**
      * Get the UI HTML string for a tool.
-     * Returns the custom UI if provided, otherwise loads the default from disk.
-     * @param toolName The name of the tool
+     * @param toolName The name of the tool (kebab-case, e.g., "list-databases")
      * @returns The HTML string, or undefined if no UI exists for this tool
      */
     get(toolName: string): string | undefined {
-        if (this.customUIs.has(toolName)) {
-            return this.customUIs.get(toolName);
-        }
-
-        const componentName = uiMap[toolName];
-        if (!componentName) {
-            return undefined;
-        }
-
-        if (this.cache.has(toolName)) {
-            return this.cache.get(toolName);
-        }
+        return this.customUIs.get(toolName) ?? uiHtml[toolName];
+    }
 
-        const filePath = join(this.uiDistPath, `${componentName}.html`);
-        if (!existsSync(filePath)) {
-            return undefined;
-        }
+    /**
+     * Check if a UI exists for a tool.
+     * @param toolName The name of the tool
+     * @returns True if a UI exists (custom or built-in)
+     */
+    has(toolName: string): boolean {
+        return this.customUIs.has(toolName) || toolName in uiHtml;
+    }
 
-        try {
-            const html = readFileSync(filePath, "utf-8");
-            this.cache.set(toolName, html);
-            return html;
-        } catch {
-            return undefined;
-        }
+    /**
+     * Get all available tool names that have UIs.
+     * @returns Array of tool names
+     */
+    getAvailableTools(): string[] {
+        const builtIn = Object.keys(uiHtml);
+        const custom = Array.from(this.customUIs.keys());
+        return [...new Set([...builtIn, ...custom])];
     }
 }

src/ui/registry/uiMap.ts

@@ -1,10 +1,11 @@
 /**
  * Mapping from tool names to their UI component names.
+ *
  * Tool names use kebab-case (e.g., 'list-databases')
  * Component names use PascalCase (e.g., 'ListDatabases')
  *
  * The component name corresponds to the folder in src/ui/components/
- * The registry handles resolving this to the built HTML file.
+ * This mapping is used at BUILD TIME to generate the uiHtml module.
  */
 export const uiMap: Record<string, string> = {
     "list-databases": "ListDatabases",

vite.ui.config.ts

@@ -2,57 +2,46 @@ import { defineConfig, Plugin, PluginOption } from "vite";
 import react from "@vitejs/plugin-react";
 import { viteSingleFile } from "vite-plugin-singlefile";
 import { nodePolyfills } from "vite-plugin-node-polyfills";
-import { readdirSync, statSync, readFileSync, writeFileSync, mkdirSync, existsSync } from "fs";
+import { readFileSync, writeFileSync, mkdirSync, existsSync } from "fs";
 import { join, resolve } from "path";
+import { uiMap } from "./src/ui/registry/uiMap.js";
 
 const componentsDir = resolve(__dirname, "src/ui/components");
 // Use node_modules/.cache for generated HTML entries - these are build artifacts, not source files
 const entriesDir = resolve(__dirname, "node_modules/.cache/mongodb-mcp-server/ui-entries");
 const templatePath = resolve(__dirname, "src/ui/build/template.html");
 const mountPath = resolve(__dirname, "src/ui/build/mount.tsx");
+const generatedModulePath = resolve(__dirname, "src/ui/generated/uiHtml.ts");
+const uiDistPath = resolve(__dirname, "dist/ui");
 
-/**
- * Discover all component directories in src/ui/components/
- * Each directory should have an index.ts that exports the component
- */
-function discoverComponents(): string[] {
-    const components: string[] = [];
-
-    try {
-        const dirs = readdirSync(componentsDir);
-        for (const dir of dirs) {
-            const dirPath = join(componentsDir, dir);
-            if (statSync(dirPath).isDirectory()) {
-                // Check if index.ts exists
-                const indexPath = join(dirPath, "index.ts");
-                if (existsSync(indexPath)) {
-                    components.push(dir);
-                }
-            }
-        }
-    } catch {
-        console.warn("No components directory found or error reading it");
-    }
-
-    return components;
-}
+// Unique component names from uiMap - only these will be built
+const components = [...new Set(Object.values(uiMap))];
 
 /**
- * Vite plugin that generates HTML entry files for each component
- * based on the template.html file
+ * Vite plugin that generates HTML entry files for each mapped component
+ * based on the template.html file.
+ *
+ * Only builds components that are referenced in uiMap.
  */
 function generateHtmlEntries(): Plugin {
     return {
         name: "generate-html-entries",
         buildStart() {
-            const components = discoverComponents();
             const template = readFileSync(templatePath, "utf-8");
 
             if (!existsSync(entriesDir)) {
                 mkdirSync(entriesDir, { recursive: true });
             }
 
             for (const componentName of components) {
+                // Verify the component exists
+                const componentPath = join(componentsDir, componentName, "index.ts");
+                if (!existsSync(componentPath)) {
+                    throw new Error(
+                        `Component "${componentName}" referenced in uiMap but not found at ${componentPath}`
+                    );
+                }
+
                 const html = template
                     .replace("{{COMPONENT_NAME}}", componentName)
                     .replace("{{TITLE}}", componentName.replace(/([A-Z])/g, " $1").trim()) // "ListDatabases" -> "List Databases"
@@ -66,7 +55,58 @@ function generateHtmlEntries(): Plugin {
     };
 }
 
-const components = discoverComponents();
+/**
+ * Vite plugin that generates the uiHtml.ts module after the build completes.
+ * This embeds all built HTML strings into a TypeScript module so they can be
+ * imported at runtime.
+ *
+ * Uses the uiMap from src/ui/registry/uiMap.ts to map tool names to component HTML files.
+ */
+function generateUIModule(): Plugin {
+    return {
+        name: "generate-ui-module",
+        closeBundle() {
+            if (!existsSync(uiDistPath)) {
+                console.warn("[generate-ui-module] dist/ui not found, skipping module generation");
+                return;
+            }
+
+            const entries: Record<string, string> = {};
+
+            // Use uiMap to determine which tools get which UI
+            for (const [toolName, componentName] of Object.entries(uiMap)) {
+                const htmlFile = join(uiDistPath, `${componentName}.html`);
+                if (!existsSync(htmlFile)) {
+                    console.warn(
+                        `[generate-ui-module] HTML file not found for component "${componentName}" (tool: "${toolName}")`
+                    );
+                    continue;
+                }
+                const html = readFileSync(htmlFile, "utf-8");
+                entries[toolName] = html;
+            }
+
+            const moduleContent = `/**
+ * AUTO-GENERATED FILE - DO NOT EDIT MANUALLY
+ *
+ * This file is generated by the UI build process (vite build --config vite.ui.config.ts).
+ * It contains the bundled HTML strings for each UI component, keyed by tool name.
+ *
+ * To add a new UI:
+ * 1. Create a component in src/ui/components/YourComponent/
+ * 2. Add the mapping in src/ui/registry/uiMap.ts
+ * 3. Run \`pnpm build:ui\` to regenerate this file
+ */
+export const uiHtml: Record<string, string> = ${JSON.stringify(entries, null, 4)};
+`;
+
+            writeFileSync(generatedModulePath, moduleContent);
+            console.log(
+                `[generate-ui-module] Generated uiHtml.ts with ${Object.keys(entries).length} UI(s): ${Object.keys(entries).join(", ")}`
+            );
+        },
+    };
+}
 
 export default defineConfig({
     root: entriesDir,
@@ -82,6 +122,7 @@ export default defineConfig({
         viteSingleFile({
             removeViteModuleLoader: true,
         }),
+        generateUIModule(),
     ],
     build: {
         outDir: resolve(__dirname, "dist/ui"),