UI Page Generator - AgentFront

Generates a full-page React component inside the @frontmcp/ui-pages package with an MUI scaffold, spec file, and barrel index.

Usage

nx g @frontmcp/nx:ui-page AdminDashboard

Options

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

Generated Files

ui/pages/src/AdminDashboard/
  index.ts
  AdminDashboard.tsx
  AdminDashboard.spec.tsx

AdminDashboard.tsx

import { Box, Typography } from '@mui/material';

export interface AdminDashboardProps {
  title?: string;
}

export function AdminDashboard({ title = 'AdminDashboard' }: AdminDashboardProps) {
  return (
    <Box sx={{ p: 3 }}>
      <Typography variant="h4">{title}</Typography>
      <Typography variant="body1" sx={{ mt: 2 }}>
        TODO: implement AdminDashboard
      </Typography>
    </Box>
  );
}

index.ts

export { AdminDashboard } from './AdminDashboard';
export { AdminDashboard as default } from './AdminDashboard';
export type { AdminDashboardProps } from './AdminDashboard';

Auto-Updates

The generator also updates three files in your workspace:

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

Consuming

import { AdminDashboard } from '@frontmcp/ui-pages/AdminDashboard';

Example

# Kebab-case input is auto-converted to PascalCase
nx g @frontmcp/nx:ui-page settings-page
# Creates: ui/pages/src/SettingsPage/SettingsPage.tsx