UI/UX MCP Server

Instructions

Implementation Reference

• src/tools/components.ts:29-90 (handler)

  The handler function that implements the core logic of the 'component_create' tool. It parses input arguments using the schema, generates component code based on the specified type (React, Vue, Svelte, or Web Component), creates accompanying tests, Storybook stories, and documentation, then returns the results.

  async create(args: any) {
    const params = ComponentCreateSchema.parse(args);
    
    try {
      let componentCode: string;
      
      switch (params.type) {
        case 'react':
          componentCode = this.generateReactComponent(params);
          break;
        case 'vue':
          componentCode = this.generateVueComponent(params);
          break;
        case 'svelte':
          componentCode = this.generateSvelteComponent(params);
          break;
        case 'web-component':
          componentCode = this.generateWebComponent(params);
          break;
        default:
          throw new Error(`Unsupported component type: ${params.type}`);
      }
  
      const tests = this.generateTests(params);
      const storybook = this.generateStorybookStory(params);
      const documentation = this.generateDocumentation(params);
  
      return {
        content: [
          {
            type: 'text',
            text: JSON.stringify({
              component: {
                name: params.name,
                type: params.type,
                code: componentCode,
                tests,
                storybook,
                documentation
              },
              files: {
                component: `${params.name}.${this.getFileExtension(params.type)}`,
                test: `${params.name}.test.${this.getFileExtension(params.type)}`,
                story: `${params.name}.stories.${this.getFileExtension(params.type)}`,
                docs: `${params.name}.md`
              }
            }, null, 2)
          }
        ]
      };
    } catch (error: any) {
      return {
        content: [
          {
            type: 'text',
            text: `Error creating component: ${error.message}`
          }
        ],
        isError: true
      };
    }
  }

• src/tools/components.ts:3-19 (schema)

  Zod schema defining the input parameters for the component_create tool, including name, type, props, styles, and accessibility attributes.

  const ComponentCreateSchema = z.object({
    name: z.string(),
    type: z.enum(['react', 'vue', 'svelte', 'web-component']),
    props: z.array(z.object({
      name: z.string(),
      type: z.string(),
      required: z.boolean().optional(),
      default: z.any().optional()
    })).optional(),
    styles: z.record(z.any()).optional(),
    accessibility: z.object({
      role: z.string().optional(),
      ariaLabel: z.string().optional(),
      ariaDescribedBy: z.string().optional(),
      tabIndex: z.number().optional()
    }).optional()
  });

• src/index.ts:219-236 (registration)

  Tool registration in the listTools handler, defining the name, description, and input schema for component_create.

  {
    name: 'component_create',
    description: 'Create a new UI component with best practices',
    inputSchema: {
      type: 'object',
      properties: {
        name: { type: 'string' },
        type: { 
          type: 'string',
          enum: ['react', 'vue', 'svelte', 'web-component']
        },
        props: { type: 'array', items: { type: 'object' } },
        styles: { type: 'object' },
        accessibility: { type: 'object' }
      },
      required: ['name', 'type']
    }
  },

• src/index.ts:326-327 (registration)

  Dispatch case in the CallToolRequestSchema handler that routes calls to the componentTools.create method.

  case 'component_create':
    return await this.componentTools.create(args);

• src/tools/components.ts:26-90 (helper)

  The ComponentTools class containing the create handler and all supporting helper methods for generating components, tests, stories, and documentation.

  export class ComponentTools {
    constructor() {}
  
    async create(args: any) {
      const params = ComponentCreateSchema.parse(args);
      
      try {
        let componentCode: string;
        
        switch (params.type) {
          case 'react':
            componentCode = this.generateReactComponent(params);
            break;
          case 'vue':
            componentCode = this.generateVueComponent(params);
            break;
          case 'svelte':
            componentCode = this.generateSvelteComponent(params);
            break;
          case 'web-component':
            componentCode = this.generateWebComponent(params);
            break;
          default:
            throw new Error(`Unsupported component type: ${params.type}`);
        }
  
        const tests = this.generateTests(params);
        const storybook = this.generateStorybookStory(params);
        const documentation = this.generateDocumentation(params);
  
        return {
          content: [
            {
              type: 'text',
              text: JSON.stringify({
                component: {
                  name: params.name,
                  type: params.type,
                  code: componentCode,
                  tests,
                  storybook,
                  documentation
                },
                files: {
                  component: `${params.name}.${this.getFileExtension(params.type)}`,
                  test: `${params.name}.test.${this.getFileExtension(params.type)}`,
                  story: `${params.name}.stories.${this.getFileExtension(params.type)}`,
                  docs: `${params.name}.md`
                }
              }, null, 2)
            }
          ]
        };
      } catch (error: any) {
        return {
          content: [
            {
              type: 'text',
              text: `Error creating component: ${error.message}`
            }
          ],
          isError: true
        };
      }
    }