generate_component
Create React components with TypeScript support by specifying name, path, type, and props. Part of the Node Omnibus MCP Server for streamlined Node.js development.
Instructions
Generate a new React component with TypeScript support
Input Schema
TableJSON Schema
| Name | Required | Description | Default |
|---|---|---|---|
| name | Yes | Component name | |
| path | Yes | Component directory path | |
| props | No | Component props with types | |
| type | Yes | Component type |
Implementation Reference
- src/index.ts:733-762 (handler)Main handler function that orchestrates component generation by calling helper methods to create the TSX file and MD documentation, then writes them to disk.private async handleGenerateComponent(args: GenerateComponentArgs) { await this.validatePath(args.path); const componentContent = this.generateComponentContent(args); const fileName = `${args.name}.tsx`; const filePath = path.join(args.path, fileName); try { await fs.writeFile(filePath, componentContent); // Generate component documentation const docContent = this.generateComponentDocumentation(args); const docPath = path.join(args.path, `${args.name}.md`); await fs.writeFile(docPath, docContent); return { content: [ { type: 'text', text: `Component ${args.name} created successfully at ${filePath}`, }, ], }; } catch (error) { throw new McpError( ErrorCode.InternalError, `Failed to generate component: ${error instanceof Error ? error.message : String(error)}` ); } }
- src/index.ts:42-47 (schema)TypeScript interface defining the expected arguments for the generate_component tool.interface GenerateComponentArgs extends Record<string, unknown> { name: string; path: string; type: 'functional' | 'class'; props?: Record<string, string>; }
- src/index.ts:273-300 (registration)Tool registration in the ListTools handler, defining name, description, and input schema for MCP protocol.{ name: 'generate_component', description: 'Generate a new React component with TypeScript support', inputSchema: { type: 'object', properties: { name: { type: 'string', description: 'Component name', }, path: { type: 'string', description: 'Component directory path', }, type: { type: 'string', enum: ['functional', 'class'], description: 'Component type', }, props: { type: 'object', description: 'Component props with types', additionalProperties: { type: 'string' }, }, }, required: ['name', 'path', 'type'], }, },
- src/index.ts:764-806 (helper)Helper method that generates the actual React component TypeScript code based on args.private generateComponentContent(args: GenerateComponentArgs): string { const propsInterface = args.props ? `interface ${args.name}Props { ${Object.entries(args.props).map(([key, type]) => `${key}: ${type};`).join('\n ')} }` : ''; if (args.type === 'functional') { return `import React from 'react'; ${propsInterface} ${args.props ? `const ${args.name}: React.FC<${args.name}Props> = ({ ${Object.keys(args.props).join(', ')} }) => {` : `const ${args.name}: React.FC = () => {`} return ( <div> {/* Add your component content here */} </div> ); }; export default ${args.name}; `; } else { return `import React, { Component } from 'react'; ${propsInterface} class ${args.name} extends Component${args.props ? `<${args.name}Props>` : ''} { render() { return ( <div> {/* Add your component content here */} </div> ); } } export default ${args.name}; `; } }
- src/index.ts:808-833 (helper)Helper method that generates Markdown documentation for the component, including props and usage examples.private generateComponentDocumentation(args: GenerateComponentArgs): string { return `# ${args.name} Component ## Overview ${args.type === 'functional' ? 'A functional React component' : 'A class-based React component'} ## Props ${args.props ? Object.entries(args.props) .map(([key, type]) => `- \`${key}\`: ${type}`) .join('\n') : 'This component does not accept any props.'} ## Usage \`\`\`tsx import ${args.name} from './${args.name}'; ${args.props ? `// Example usage with props <${args.name} ${Object.entries(args.props) .map(([key, type]) => `${key}={${this.getExampleValue(type)}}`) .join(' ')} />` : `// Example usage <${args.name} />`} \`\`\` `;