component_create
Generate new UI components with structured templates and best practices for React, Vue, Svelte, or web components. Includes props, styles, and accessibility configurations to streamline development workflows.
Instructions
Create a new UI component with best practices
Input Schema
TableJSON Schema
| Name | Required | Description | Default |
|---|---|---|---|
| accessibility | No | ||
| name | Yes | ||
| props | No | ||
| styles | No | ||
| type | Yes |
Implementation Reference
- src/tools/components.ts:29-90 (handler)Main handler function `create` in ComponentTools class that parses input args with schema, generates framework-specific component code, tests, stories, and docs, then structures the response for the MCP tool.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 `ComponentCreateSchema` used to validate and parse the input arguments for the component_create tool.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:220-236 (registration)Tool registration in the ListTools response: defines name 'component_create', description, and inputSchema advertised to MCP clients.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 handler in the CallToolRequest switch statement that routes 'component_create' calls to the ComponentTools.create method.case 'component_create': return await this.componentTools.create(args);