component_analyze
Assess UI components for performance, accessibility, best practices, and SEO compliance. Integrate with UI/UX workflows to optimize development and ensure adherence to standards.
Instructions
Analyze component for performance and accessibility
Input Schema
TableJSON Schema
| Name | Required | Description | Default |
|---|---|---|---|
| checks | No | ||
| code | Yes |
Implementation Reference
- src/tools/components.ts:92-151 (handler)The core handler function that executes the component analysis, parsing inputs, running specified checks, computing scores, and returning JSON results.async analyze(args: any) { const params = ComponentAnalyzeSchema.parse(args); const checks = params.checks || ['performance', 'accessibility', 'best-practices']; try { const results: any = { summary: { score: 0, issues: [], suggestions: [] }, checks: {} }; if (checks.includes('performance')) { results.checks.performance = this.analyzePerformance(params.code); } if (checks.includes('accessibility')) { results.checks.accessibility = this.analyzeAccessibility(params.code); } if (checks.includes('best-practices')) { results.checks.bestPractices = this.analyzeBestPractices(params.code); } if (checks.includes('seo')) { results.checks.seo = this.analyzeSEO(params.code); } // Calculate overall score const scores = Object.values(results.checks).map((check: any) => check.score); results.summary.score = scores.reduce((a, b) => a + b, 0) / scores.length; // Collect all issues and suggestions Object.values(results.checks).forEach((check: any) => { results.summary.issues.push(...(check.issues || [])); results.summary.suggestions.push(...(check.suggestions || [])); }); return { content: [ { type: 'text', text: JSON.stringify(results, null, 2) } ] }; } catch (error: any) { return { content: [ { type: 'text', text: `Error analyzing component: ${error.message}` } ], isError: true }; } }
- src/tools/components.ts:21-24 (schema)Zod schema for validating the input arguments to the analyze method (code and optional checks).const ComponentAnalyzeSchema = z.object({ code: z.string(), checks: z.array(z.enum(['performance', 'accessibility', 'best-practices', 'seo'])).optional() });
- src/index.ts:238-254 (registration)Tool registration in the listTools handler, defining name, description, and input schema for MCP protocol.name: 'component_analyze', description: 'Analyze component for performance and accessibility', inputSchema: { type: 'object', properties: { code: { type: 'string' }, checks: { type: 'array', items: { type: 'string', enum: ['performance', 'accessibility', 'best-practices', 'seo'] } } }, required: ['code'] } },
- src/index.ts:328-329 (registration)Dispatch handler in the CallToolRequest switch statement that routes execution to ComponentTools.analyze method.case 'component_analyze': return await this.componentTools.analyze(args);
- src/tools/components.ts:347-374 (helper)One of the helper analysis functions called by the handler for performance checks (others exist for accessibility, best-practices, SEO).private analyzePerformance(code: string): any { const issues = []; const suggestions = []; // Check for common performance issues if (code.includes('componentDidUpdate') && !code.includes('shouldComponentUpdate')) { issues.push('Missing shouldComponentUpdate optimization'); } if (code.match(/useState.*map/)) { suggestions.push('Consider using useMemo for expensive computations'); } if (code.includes('addEventListener') && !code.includes('removeEventListener')) { issues.push('Event listener not cleaned up'); } return { score: Math.max(100 - issues.length * 20, 0), issues, suggestions, metrics: { renderComplexity: 'Low', reRenderRisk: issues.length > 0 ? 'High' : 'Low', memoryLeakRisk: code.includes('addEventListener') ? 'Medium' : 'Low' } }; }