generate_component

Create React components with TypeScript support by specifying name, path, type, and props to streamline UI development.

Instructions

Generate a new React component with TypeScript support

Input Schema

TableJSON Schema

Name	Required	Description
`name`	Yes	Component name
`path`	Yes	Component directory path
`type`	Yes	Component type
`props`	No	Component props with types

Implementation Reference

src/index.ts:733-763 (handler)

Main handler function for the 'generate_component' tool. Validates the path, generates the component TypeScript code and Markdown documentation, writes both files to disk, and returns a success message.

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 input arguments for the generate_component tool handler.

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 ListToolsRequestSchema handler, including name, description, and JSON input schema.

{
    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 function that generates the TypeScript code for the React component (functional or class-based) 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 function that generates Markdown documentation for the component, including overview, props list, and usage example.

    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} />`}
\`\`\`
`;

Node Omnibus MCP Server