UI Shell Generator

Generates a server-side HTML shell builder inside the @frontmcp/ui-shells package. Shells use buildShell from @frontmcp/uipack — no React dependency.

Usage

nx g @frontmcp/nx:ui-shell admin-dashboard

Options

Option	Type	Default	Description
`name`	`string`	—	Required. Shell name (kebab-case or PascalCase — auto-converted to kebab-case for files)
`description`	`string`	`""`	Optional description for the shell
`skipFormat`	`boolean`	`false`	Skip running Prettier after generation

Generated Files

ui/shells/src/admin-dashboard/
  index.ts
  admin-dashboard.shell.ts
  admin-dashboard.shell.spec.ts

admin-dashboard.shell.ts

import { buildShell } from '@frontmcp/uipack';

export interface AdminDashboardShellOptions {
  toolName: string;
  input?: unknown;
  output?: unknown;
}

export function buildAdminDashboardShell(options: AdminDashboardShellOptions) {
  const content = `<div id="app">TODO: implement ${options.toolName} shell</div>`;
  return buildShell(content, {
    toolName: options.toolName,
    input: options.input,
    output: options.output,
  });
}

index.ts

export { buildAdminDashboardShell } from './admin-dashboard.shell';
export type { AdminDashboardShellOptions } from './admin-dashboard.shell';

Auto-Updates

The generator also updates three files in your workspace:

ui/shells/project.json — adds the entry to additionalEntryPoints in both build-cjs and build-esm targets
tsconfig.base.json — adds the path alias @frontmcp/ui-shells/admin-dashboard → ./ui/shells/src/admin-dashboard/index.ts (relative, so it resolves with or without a baseUrl)
ui/shells/src/index.ts — appends export * from './admin-dashboard'

Dependencies

The first UI shell creates the ui/shells package and adds what it needs to the workspace package.json: @frontmcp/uipack (at the plugin’s version) as a dependency, and @nx/esbuild plus esbuild (^0.27.3) for the package’s build targets. The esbuild range satisfies the esbuild >=0.27 peer range of @frontmcp/uipack and matches the one the frontmcp CLI uses, so the install resolves a single esbuild. Ranges already in your package.json are kept, except an esbuild range older than ^0.27.3 (such as the ^0.25.0 earlier versions of the UI generators wrote), which would fail the install with ERESOLVE and is raised to ^0.27.3 where it is declared.

Consuming

import { buildAdminDashboardShell } from '@frontmcp/ui-shells/admin-dashboard';

Example

# PascalCase input is auto-converted to kebab-case
nx g @frontmcp/nx:ui-shell MyDashboard
# Creates: ui/shells/src/my-dashboard/my-dashboard.shell.ts

Get Started

Generators

Executors

Usage

Options

Generated Files

Auto-Updates

Dependencies

Consuming

Example

​Usage

​Options

​Generated Files

​Auto-Updates

​Dependencies

​Consuming

​Example

Usage

Options

Generated Files

Auto-Updates

Dependencies

Consuming

Example