import fs from 'node:fs'; import path from 'node:path'; import { z } from 'zod'; import { config } from '../../config.js'; import { detectProject } from '../../lib/frameworks/detect.js'; import { resolveWorkspacePath } from '../../lib/sandbox.js'; import { errorResult, jsonResult, toErrorMessage } from '../shared.js'; /** * UI component generator. Prefers React (TSX/JSX) or Vue/Nuxt SFCs when a * matching frontend is detected; otherwise writes a plain HTML/CSS/JS snippet. */ export function registerGenerateComponentTool(server) { server.registerTool('generate_component', { title: 'Generate Component', description: 'Scaffold a UI component. Generates a React function component (TSX/JSX) when React is detected, ' + 'a Vue SFC (.vue) when Vue or Nuxt is detected, or a plain HTML/CSS/JS snippet otherwise.', inputSchema: { name: z.string().min(1).describe('Component name, e.g. "UserCard" (PascalCase recommended).'), directory: z .string() .optional() .describe('Directory relative to the frontend project root. Defaults to "src/components".'), style: z.enum(['css-module', 'tailwind', 'none']).optional().default('css-module'), withTest: z.boolean().optional().default(false), clientComponent: z .boolean() .optional() .default(false) .describe('If true (Next.js App Router), prepends "use client" for Client Components. Ignored for Vue/Nuxt.'), overwrite: z.boolean().optional().default(false), }, }, async ({ name, directory, style, withTest, clientComponent, overwrite }) => { try { const detected = detectProject(config.workspaceRoot); const frontend = detected.frontend; if (frontend?.kind === 'react') { return jsonResult(generateReactComponent(frontend.root, name, directory, style, withTest, clientComponent ?? false, overwrite)); } if (frontend?.kind === 'vue' || frontend?.kind === 'nuxt') { return jsonResult(generateVueSfc(frontend.root, frontend.kind, name, directory, style, withTest, overwrite)); } return jsonResult(generatePlainComponent(config.workspaceRoot, name, directory, overwrite)); } catch (error) { return errorResult(toErrorMessage(error)); } }); } function generateReactComponent(frontendRoot, name, directory, style, withTest, clientComponent, overwrite) { const typescript = fs.existsSync(path.join(frontendRoot, 'tsconfig.json')); const ext = typescript ? 'tsx' : 'jsx'; const dir = resolveWorkspacePath(frontendRoot, directory ?? 'src/components'); const componentFile = path.join(dir, `${name}.${ext}`); const files = []; assertNotExists(componentFile, overwrite); fs.mkdirSync(dir, { recursive: true }); const useClient = clientComponent ? `'use client';\n\n` : ''; const cssImport = style === 'css-module' ? `import styles from './${name}.module.css';\n` : ''; const rootClass = style === 'css-module' ? ' className={styles.root}' : style === 'tailwind' ? ' className="p-4"' : ''; fs.writeFileSync(componentFile, `${useClient}${cssImport}export function ${name}() { return (
${name}
${name}
${name}