MCP Apps Kit - v0.5.0
    Preparing search index...

    Function buildReactUIs

    • Build multiple React UIs into self-contained HTML files.

      This function takes a record of React UI definitions and compiles each one into a complete HTML file that includes React, ReactDOM, @mcp-apps-kit/ui-react, and the user's component code.

      IMPORTANT: Limitations

      This programmatic build function serializes components using .toString(), which has significant limitations:

      • No external imports: Components cannot import other modules, hooks, or utilities
      • No closures: Components that capture external variables will not work
      • Simple components only: Best for self-contained components without dependencies

      For production use, prefer the Vite plugin (mcpReactUI) which uses file paths for proper import resolution and supports:

      • Full import/export resolution
      • CSS imports and CSS modules
      • All React hooks and utilities
      • External component dependencies

      This function is primarily intended for:

      • Testing: Unit and integration tests for the build pipeline
      • Simple widgets: Self-contained components with no external imports
      • Prototyping: Quick experimentation before setting up Vite

      Parameters

      • uis: Record<string, ReactUIDef>

        Record of UI keys to React UI definitions

      • options: BuildOptions = {}

        Build configuration options

      Returns Promise<BuildResult>

      Build result with compiled HTML and metadata

      // For production, use the Vite plugin instead:
      // vite.config.ts
      import { mcpReactUI } from "@mcp-apps-kit/ui-react-builder/vite";

      export default defineConfig({
        plugins: [mcpReactUI({ serverEntry: "./src/index.ts" })],
      });

      // This programmatic API is for simple/test cases:
      import { buildReactUIs, defineReactUI } from "@mcp-apps-kit/ui-react-builder";

      // Only works with simple, self-contained components
      const SimpleWidget = () => <div>Hello World</div>;

      const result = await buildReactUIs({
        "simple": defineReactUI({
          component: SimpleWidget,
          name: "Simple Widget",
        }),
      });

    Settings

    Member Visibility