component_analyze
Analyze UI components for performance, accessibility, best practices, and SEO compliance to identify optimization opportunities and ensure development standards.
Instructions
Analyze component for performance and accessibility
Input Schema
TableJSON Schema
| Name | Required | Description | Default |
|---|---|---|---|
| code | Yes | ||
| checks | No |
Implementation Reference
- src/tools/components.ts:92-151 (handler)Core execution logic for the 'component_analyze' tool. Parses input arguments using Zod schema, runs specified checks (performance, accessibility, best-practices, SEO), computes overall score, and returns structured 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 defining the input structure for the component_analyze tool: required 'code' string and optional array of checks.const ComponentAnalyzeSchema = z.object({ code: z.string(), checks: z.array(z.enum(['performance', 'accessibility', 'best-practices', 'seo'])).optional() });
- src/index.ts:237-254 (registration)Tool registration in the listTools handler, defining name, description, and inputSchema matching the Zod schema.{ 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 case in the callToolRequest handler that routes execution to ComponentTools.analyze method.case 'component_analyze': return await this.componentTools.analyze(args);
- src/tools/components.ts:347-374 (helper)Helper method for performance analysis used by the handler, detecting common issues like missing optimizations and event listener leaks.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' } }; }