Node Omnibus MCP Server

Instructions

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