mcp__gemini__generate_component
Create UI components for React, Vue, Angular, or Svelte by specifying the name, framework, styling, and features. Simplifies frontend development with tailored component generation.
Instructions
Generate UI components for React, Vue, Angular, Svelte
Input Schema
TableJSON Schema
| Name | Required | Description | Default |
|---|---|---|---|
| features | No | Component features | |
| framework | No | Framework | react |
| name | Yes | Component name | |
| styling | No | Styling approach | css |
Implementation Reference
- src/tools/code-tools.js:14-31 (handler)The main handler function that implements the tool logic: destructures arguments, validates input, constructs an AI prompt for component generation, calls the AI client, and formats the response.
handler: async (args) => { const { name, framework = 'react', styling = 'css', features = '' } = args; validateString(name, 'component name'); const prompt = `Generate a ${framework} component named "${name}" with ${styling} styling. Features: ${features} Provide: 1. Complete component code 2. Proper imports and exports 3. TypeScript if applicable 4. Basic styling 5. Usage example`; const result = await aiClient.call(prompt, 'coding'); return `🎨 **${framework.toUpperCase()} Component Generated**\n\n${result}`; } - src/tools/code-tools.js:6-13 (schema)The tool's input schema definition including description and parameters for name (required), framework, styling, and features.
'mcp__gemini__generate_component': { description: 'Generate UI components for React, Vue, Angular, Svelte', parameters: { name: { type: 'string', description: 'Component name', required: true }, framework: { type: 'string', description: 'Framework', default: 'react' }, styling: { type: 'string', description: 'Styling approach', default: 'css' }, features: { type: 'string', description: 'Component features' } }, - src/tools/registry.js:234-239 (registration)Registers all tools from the codeTools module (which contains mcp__gemini__generate_component) into the central ToolRegistry via registerToolsFromModule.
// Register additional tools from modules this.registerToolsFromModule(codeTools); this.registerToolsFromModule(analysisTools); this.registerToolsFromModule(enhancedTools); this.registerToolsFromModule(businessTools); this.registerToolsFromModule(licenseTools); - src/tools/registry.js:5-5 (registration)Imports the codeTools object containing the generate_component tool definition.
import { codeTools } from './code-tools.js';