Complete Cross-Platform Setup Guide for React Development with Claude Desktop MCP Server
Are you tired of generic coding advice that doesn't apply to your specific React codebase? What if Claude could analyze your actual project files, understand your component architecture, and provide expert-level suggestions tailored to your code?
Today, I'll show you how to set up a Model Context Protocol (MCP) server that transforms Claude Desktop into the most powerful React development assistant you've ever used – complete with setup instructions for macOS, Windows, and Linux.
🚀 What You'll Gain from This Setup
By the end of this guide, you'll have Claude Desktop with superpowers that can:
Analyze your actual React components for performance issues, accessibility problems, and TypeScript improvements
Generate production-ready components with proper types, accessibility attributes, and best practices
Create comprehensive test suites tailored to your specific components
Perform project-wide audits for bundle size, security, and code quality
Provide context-aware suggestions based on your entire codebase
The difference is night and day:
Before: "Claude, how do I optimize React performance?"
After: "Claude, analyze src/components/UserDashboard.tsx for performance issues" → Gets specific line-by-line feedback with optimization suggestions.
🧠 Understanding MCP (Model Context Protocol)
MCP is Anthropic's protocol that allows Claude to use external tools and access your local development environment. Think of it as giving Claude Desktop a direct connection to your project files and specialized React development expertise.
Traditional Claude: Limited to general advice and examples
Claude with MCP: Direct file access + 10 specialized React development tools
📋 Prerequisites (All Platforms)
Before we start, ensure you have:
✅ Claude Desktop installed (download here)
✅ Node.js v16 or higher (download here)
✅ VS Code or your preferred code editor
✅ Basic terminal/command prompt knowledge
Check your Node.js version:
node --version
# Should show v16.0.0 or higher
🔧 Part 1: Creating the MCP Server (All Platforms)
This section is identical for all operating systems.
Step 1: Initialize the Project
# Create project directory
mkdir react-dev-mcp-server
cd react-dev-mcp-server
# Initialize Node.js project
npm init -y
Step 2: Install Dependencies
# Core MCP dependencies
npm install @modelcontextprotocol/sdk
# Development dependencies
npm install --save-dev typescript @types/node tsx
Step 3: Create Project Structure
# Create directories
mkdir src dist
# Create main files
touch src/index.ts tsconfig.json
Your structure should look like:
react-dev-mcp-server/
├── src/
│ └── index.ts
├── dist/
├── package.json
├── tsconfig.json
└── node_modules/
Step 4: Configure TypeScript
Create tsconfig.json:
{
"compilerOptions": {
"target": "ES2022",
"module": "ESNext",
"moduleResolution": "node",
"allowSyntheticDefaultImports": true,
"esModuleInterop": true,
"strict": true,
"skipLibCheck": true,
"forceConsistentCasingInFileNames": true,
"outDir": "./dist",
"rootDir": "./src",
"declaration": true,
"declarationMap": true,
"sourceMap": true
},
"include": ["src/**/*"],
"exclude": ["node_modules", "dist"]
}
Step 5: Update package.json
Replace your package.json content with:
{
"name": "react-dev-mcp-server",
"version": "1.0.0",
"description": "MCP server for React/React Native development assistance",
"main": "dist/index.js",
"type": "module",
"scripts": {
"build": "tsc",
"start": "node dist/index.js",
"dev": "tsx src/index.ts",
"watch": "tsx --watch src/index.ts"
},
"keywords": [
"mcp",
"react",
"react-native",
"nextjs",
"typescript",
"development",
"assistant"
],
"author": "Your Name",
"license": "MIT",
"dependencies": {
"@modelcontextprotocol/sdk": "^0.4.0"
},
"devDependencies": {
"@types/node": "^20.0.0",
"typescript": "^5.0.0",
"tsx": "^4.0.0"
},
"bin": {
"react-dev-mcp": "./dist/index.js"
},
"files": [
"dist"
]
}
Step 6: Add the MCP Server Code
Open src/index.ts and add the complete MCP server implementation:
#!/usr/bin/env node
import { Server } from '@modelcontextprotocol/sdk/server/index.js';
import { StdioServerTransport } from '@modelcontextprotocol/sdk/server/stdio.js';
import {
CallToolRequestSchema,
ListToolsRequestSchema,
Tool,
} from '@modelcontextprotocol/sdk/types.js';
import fs from 'fs/promises';
import path from 'path';
import { execSync } from 'child_process';
interface CodeAnalysis {
issues: Array<{
type: 'performance' | 'accessibility' | 'best-practice' | 'typescript' | 'security';
severity: 'error' | 'warning' | 'info';
message: string;
line?: number;
suggestion?: string;
}>;
metrics: {
complexity: number;
maintainability: number;
performance: number;
};
}
class ReactDevMCPServer {
private server: Server;
constructor() {
this.server = new Server(
{
name: 'react-dev-assistant',
version: '1.0.0',
},
{
capabilities: {
tools: {},
},
}
);
this.setupToolHandlers();
this.setupRequestHandlers();
}
private setupRequestHandlers() {
this.server.setRequestHandler(ListToolsRequestSchema, async () => ({
tools: this.getTools(),
}));
this.server.setRequestHandler(CallToolRequestSchema, async (request) => {
const { name, arguments: args } = request.params;
try {
switch (name) {
case 'analyze_react_component':
return await this.analyzeReactComponent(args);
case 'optimize_performance':
return await this.optimizePerformance(args);
case 'generate_component':
return await this.generateComponent(args);
case 'check_typescript_types':
return await this.checkTypeScript(args);
case 'optimize_css':
return await this.optimizeCSS(args);
case 'check_accessibility':
return await this.checkAccessibility(args);
case 'suggest_best_practices':
return await this.suggestBestPractices(args);
case 'analyze_bundle_size':
return await this.analyzeBundleSize(args);
case 'generate_tests':
return await this.generateTests(args);
case 'fix_eslint_issues':
return await this.fixESlintIssues(args);
default:
throw new Error(`Unknown tool: ${name}`);
}
} catch (error) {
return {
content: [
{
type: 'text',
text: `Error: ${error instanceof Error ? error.message : 'Unknown error'}`,
},
],
};
}
});
}
private setupToolHandlers() {
// Tool handlers will be defined in the methods below
}
private getTools(): Tool[] {
return [
{
name: 'analyze_react_component',
description: 'Analyze React/React Native components for performance, best practices, and potential issues',
inputSchema: {
type: 'object',
properties: {
filePath: { type: 'string', description: 'Path to the component file' },
code: { type: 'string', description: 'Component code to analyze (alternative to filePath)' },
},
anyOf: [
{ required: ['filePath'] },
{ required: ['code'] }
],
},
},
{
name: 'optimize_performance',
description: 'Suggest performance optimizations for React components',
inputSchema: {
type: 'object',
properties: {
filePath: { type: 'string', description: 'Path to the component file' },
code: { type: 'string', description: 'Component code to optimize' },
},
anyOf: [
{ required: ['filePath'] },
{ required: ['code'] }
],
},
},
{
name: 'generate_component',
description: 'Generate React/React Native components with TypeScript',
inputSchema: {
type: 'object',
properties: {
name: { type: 'string', description: 'Component name' },
type: { type: 'string', enum: ['functional', 'class'], description: 'Component type' },
props: { type: 'array', items: { type: 'string' }, description: 'Props interface' },
platform: { type: 'string', enum: ['react', 'react-native', 'nextjs'], description: 'Target platform' },
features: { type: 'array', items: { type: 'string' }, description: 'Additional features (hooks, state, etc.)' },
},
required: ['name', 'type', 'platform'],
},
},
{
name: 'check_typescript_types',
description: 'Check TypeScript types and suggest improvements',
inputSchema: {
type: 'object',
properties: {
filePath: { type: 'string', description: 'Path to the TypeScript file' },
code: { type: 'string', description: 'TypeScript code to check' },
},
anyOf: [
{ required: ['filePath'] },
{ required: ['code'] }
],
},
},
{
name: 'optimize_css',
description: 'Optimize CSS/styled-components for performance and maintainability',
inputSchema: {
type: 'object',
properties: {
filePath: { type: 'string', description: 'Path to the CSS/styled file' },
code: { type: 'string', description: 'CSS code to optimize' },
framework: { type: 'string', enum: ['css', 'styled-components', 'emotion', 'tailwind'], description: 'CSS framework' },
},
anyOf: [
{ required: ['filePath'] },
{ required: ['code'] }
],
},
},
{
name: 'check_accessibility',
description: 'Check accessibility compliance and suggest improvements',
inputSchema: {
type: 'object',
properties: {
filePath: { type: 'string', description: 'Path to the component file' },
code: { type: 'string', description: 'Component code to check' },
},
anyOf: [
{ required: ['filePath'] },
{ required: ['code'] }
],
},
},
{
name: 'suggest_best_practices',
description: 'Suggest React/Next.js best practices for the codebase',
inputSchema: {
type: 'object',
properties: {
filePath: { type: 'string', description: 'Path to the file' },
code: { type: 'string', description: 'Code to analyze' },
framework: { type: 'string', enum: ['react', 'nextjs', 'react-native'], description: 'Target framework' },
},
anyOf: [
{ required: ['filePath'] },
{ required: ['code'] }
],
},
},
{
name: 'analyze_bundle_size',
description: 'Analyze bundle size and suggest optimizations',
inputSchema: {
type: 'object',
properties: {
projectPath: { type: 'string', description: 'Path to the project root' },
},
required: ['projectPath'],
},
},
{
name: 'generate_tests',
description: 'Generate unit tests for React components',
inputSchema: {
type: 'object',
properties: {
filePath: { type: 'string', description: 'Path to the component file' },
code: { type: 'string', description: 'Component code to test' },
testFramework: { type: 'string', enum: ['jest', 'vitest', 'cypress'], description: 'Testing framework' },
},
anyOf: [
{ required: ['filePath'] },
{ required: ['code'] }
],
},
},
{
name: 'fix_eslint_issues',
description: 'Fix ESLint issues automatically',
inputSchema: {
type: 'object',
properties: {
filePath: { type: 'string', description: 'Path to the file to fix' },
projectPath: { type: 'string', description: 'Path to the project root' },
},
required: ['filePath'],
},
},
];
}
// Implementation methods for all tools
private async analyzeReactComponent(args: any) {
const code = await this.getCodeContent(args);
const analysis = this.performCodeAnalysis(code);
return {
content: [
{
type: 'text',
text: this.formatAnalysisResults(analysis),
},
],
};
}
private async optimizePerformance(args: any) {
const code = await this.getCodeContent(args);
const optimizations = this.getPerformanceOptimizations(code);
return {
content: [
{
type: 'text',
text: `Performance Optimization Suggestions:\n\n${optimizations.join('\n\n')}`,
},
],
};
}
private async generateComponent(args: any) {
const { name, type, props = [], platform, features = [] } = args;
const component = this.createComponentTemplate(name, type, props, platform, features);
return {
content: [
{
type: 'text',
text: `Generated ${platform} component:\n\n\`\`\`typescript\n${component}\n\`\`\``,
},
],
};
}
private async checkTypeScript(args: any) {
const code = await this.getCodeContent(args);
const typeIssues = this.analyzeTypeScript(code);
return {
content: [
{
type: 'text',
text: `TypeScript Analysis:\n\n${typeIssues.join('\n\n')}`,
},
],
};
}
private async optimizeCSS(args: any) {
const code = await this.getCodeContent(args);
const { framework = 'css' } = args;
const optimizations = this.getCSSOptimizations(code, framework);
return {
content: [
{
type: 'text',
text: `CSS Optimization Suggestions:\n\n${optimizations.join('\n\n')}`,
},
],
};
}
private async checkAccessibility(args: any) {
const code = await this.getCodeContent(args);
const a11yIssues = this.analyzeAccessibility(code);
return {
content: [
{
type: 'text',
text: `Accessibility Analysis:\n\n${a11yIssues.join('\n\n')}`,
},
],
};
}
private async suggestBestPractices(args: any) {
const code = await this.getCodeContent(args);
const { framework = 'react' } = args;
const suggestions = this.getBestPractices(code, framework);
return {
content: [
{
type: 'text',
text: `Best Practice Suggestions:\n\n${suggestions.join('\n\n')}`,
},
],
};
}
private async analyzeBundleSize(args: any) {
const { projectPath } = args;
try {
const analysis = await this.performBundleAnalysis(projectPath);
return {
content: [
{
type: 'text',
text: `Bundle Size Analysis:\n\n${analysis}`,
},
],
};
} catch (error) {
return {
content: [
{
type: 'text',
text: `Error analyzing bundle: ${error}`,
},
],
};
}
}
private async generateTests(args: any) {
const code = await this.getCodeContent(args);
const { testFramework = 'jest' } = args;
const tests = this.createTestTemplate(code, testFramework);
return {
content: [
{
type: 'text',
text: `Generated Tests (${testFramework}):\n\n\`\`\`typescript\n${tests}\n\`\`\``,
},
],
};
}
private async fixESlintIssues(args: any) {
const { filePath, projectPath } = args;
try {
const result = execSync(`npx eslint ${filePath} --fix`, {
cwd: projectPath,
encoding: 'utf8'
});
return {
content: [
{
type: 'text',
text: `ESLint fixes applied to ${filePath}:\n\n${result}`,
},
],
};
} catch (error) {
return {
content: [
{
type: 'text',
text: `Error fixing ESLint issues: ${error}`,
},
],
};
}
}
// Helper methods
private async getCodeContent(args: any): Promise<string> {
if (args.code) {
return args.code;
}
if (args.filePath) {
return await fs.readFile(args.filePath, 'utf8');
}
throw new Error('Either code or filePath must be provided');
}
private performCodeAnalysis(code: string): CodeAnalysis {
const issues = [];
if (code.includes('useEffect(() => {') && !code.includes('[]')) {
issues.push({
type: 'performance' as const,
severity: 'warning' as const,
message: 'useEffect without dependency array may cause infinite renders',
suggestion: 'Add dependency array to useEffect'
});
}
if (code.includes('bind(this)') || code.includes('() => {')) {
issues.push({
type: 'performance' as const,
severity: 'info' as const,
message: 'Consider using useCallback for function props to prevent re-renders',
suggestion: 'Wrap function in useCallback hook'
});
}
return {
issues,
metrics: {
complexity: this.calculateComplexity(code),
maintainability: this.calculateMaintainability(code),
performance: this.calculatePerformanceScore(code)
}
};
}
private getPerformanceOptimizations(code: string): string[] {
const optimizations = [];
if (code.includes('useState') && code.includes('map(')) {
optimizations.push('• Consider using useMemo for expensive calculations in render');
}
if (code.includes('useEffect') && code.includes('fetch')) {
optimizations.push('• Consider using React Query or SWR for data fetching');
}
if (!code.includes('React.memo') && code.length > 500) {
optimizations.push('• Consider wrapping component in React.memo to prevent unnecessary re-renders');
}
return optimizations;
}
private createComponentTemplate(name: string, type: string, props: string[], platform: string, features: string[]): string {
const hasState = features.includes('state');
const hasEffects = features.includes('effects');
let template = '';
if (platform === 'react-native') {
template += `import React${hasState ? ', { useState }' : ''}${hasEffects ? ', { useEffect }' : ''} from 'react';\n`;
template += `import { View, Text, StyleSheet } from 'react-native';\n\n`;
} else {
template += `import React${hasState ? ', { useState }' : ''}${hasEffects ? ', { useEffect }' : ''} from 'react';\n\n`;
}
if (props.length > 0) {
template += `interface ${name}Props {\n`;
props.forEach(prop => {
template += ` ${prop};\n`;
});
template += `}\n\n`;
}
template += `const ${name}: React.FC${props.length > 0 ? `<${name}Props>` : ''} = (${props.length > 0 ? 'props' : ''}) => {\n`;
if (hasState) {
template += ` const [state, setState] = useState('');\n\n`;
}
if (hasEffects) {
template += ` useEffect(() => {\n // Effect logic here\n }, []);\n\n`;
}
template += ` return (\n`;
if (platform === 'react-native') {
template += ` <View style={styles.container}>\n <Text>${name} Component</Text>\n </View>\n`;
} else {
template += ` <div>\n <h1>${name} Component</h1>\n </div>\n`;
}
template += ` );\n};\n\n`;
if (platform === 'react-native') {
template += `const styles = StyleSheet.create({\n container: {\n flex: 1,\n justifyContent: 'center',\n alignItems: 'center',\n },\n});\n\n`;
}
template += `export default ${name};`;
return template;
}
private analyzeTypeScript(code: string): string[] {
const issues = [];
if (code.includes(': any')) {
issues.push('• Avoid using "any" type - use specific types or unknown instead');
}
if (!code.includes('interface') && code.includes('props')) {
issues.push('• Consider defining interfaces for props to improve type safety');
}
return issues;
}
private getCSSOptimizations(code: string, framework: string): string[] {
const optimizations = [];
if (framework === 'styled-components' && code.includes('${props =>')) {
optimizations.push('• Consider extracting dynamic styles to CSS custom properties for better performance');
}
if (code.includes('!important')) {
optimizations.push('• Avoid using !important - use more specific selectors instead');
}
return optimizations;
}
private analyzeAccessibility(code: string): string[] {
const issues = [];
if (code.includes('<img') && !code.includes('alt=')) {
issues.push('• Add alt attributes to img elements for screen readers');
}
if (code.includes('<button') && !code.includes('aria-label')) {
issues.push('• Consider adding aria-label to buttons for better accessibility');
}
return issues;
}
private getBestPractices(code: string, framework: string): string[] {
const suggestions = [];
if (framework === 'nextjs' && code.includes('getServerSideProps')) {
suggestions.push('• Consider using getStaticProps with ISR for better performance when possible');
}
if (code.includes('console.log')) {
suggestions.push('• Remove console.log statements before production deployment');
}
return suggestions;
}
private async performBundleAnalysis(projectPath: string): Promise<string> {
return 'Bundle analysis would require integration with webpack-bundle-analyzer or similar tools';
}
private createTestTemplate(code: string, framework: string): string {
const componentName = this.extractComponentName(code);
return `import React from 'react';
import { render, screen } from '@testing-library/react';
import ${componentName} from './${componentName}';
describe('${componentName}', () => {
it('renders without crashing', () => {
render(<${componentName} />);
expect(screen.getByText(/component/i)).toBeInTheDocument();
});
// Add more tests based on component functionality
});`;
}
private extractComponentName(code: string): string {
const match = code.match(/(?:const|function)\s+(\w+)/);
return match ? match[1] : 'Component';
}
private calculateComplexity(code: string): number {
const complexity = (code.match(/if|for|while|switch|catch/g) || []).length;
return Math.min(complexity, 10);
}
private calculateMaintainability(code: string): number {
const lines = code.split('\n').length;
const score = Math.max(10 - Math.floor(lines / 50), 1);
return score;
}
private calculatePerformanceScore(code: string): number {
let score = 10;
if (code.includes('bind(this)')) score -= 2;
if (code.includes('useEffect') && !code.includes('[]')) score -= 2;
if (!code.includes('React.memo') && code.length > 500) score -= 1;
return Math.max(score, 1);
}
private formatAnalysisResults(analysis: CodeAnalysis): string {
let result = `Code Analysis Results:\n\n`;
result += `Metrics:\n`;
result += `• Complexity: ${analysis.metrics.complexity}/10\n`;
result += `• Maintainability: ${analysis.metrics.maintainability}/10\n`;
result += `• Performance: ${analysis.metrics.performance}/10\n\n`;
if (analysis.issues.length > 0) {
result += `Issues Found:\n`;
analysis.issues.forEach((issue, index) => {
result += `${index + 1}. [${issue.severity.toUpperCase()}] ${issue.message}\n`;
if (issue.suggestion) {
result += ` Suggestion: ${issue.suggestion}\n`;
}
});
} else {
result += `No issues found! 🎉`;
}
return result;
}
async run() {
const transport = new StdioServerTransport();
await this.server.connect(transport);
}
}
// Start the server
const server = new ReactDevMCPServer();
server.run().catch(console.error);
Step 7: Build the Server
npm run build
Expected output:
> [email protected] build
> tsc
# Should complete without errors
Test the server:
npm start
The server should start and appear to "hang" (this is normal - it's waiting for MCP connections). Press Ctrl+C to stop.
🖥️ Part 2: Platform-Specific Claude Desktop Configuration
Now we configure Claude Desktop to connect to your MCP server. This differs by operating system.
🍎 macOS Configuration
Step 1: Get your project path
cd ~/react-dev-mcp-server
pwd
# Copy this output
Step 2: Open Claude Desktop config
# Method 1: Direct edit
code ~/Library/Application\ Support/Claude/claude_desktop_config.json
# Method 2: Using Finder
open ~/Library/Application\ Support/Claude/
Step 3: Configure the MCP server
Replace the entire file content with (update the path):
{
"mcpServers": {
"react-dev-assistant": {
"command": "node",
"args": ["/Users/yourusername/react-dev-mcp-server/dist/index.js"],
"env": {
"NODE_PATH": "/Users/yourusername/react-dev-mcp-server/node_modules"
}
}
}
}
Example with real path:
{
"mcpServers": {
"react-dev-assistant": {
"command": "node",
"args": ["/Users/johnsmith/react-dev-mcp-server/dist/index.js"],
"env": {
"NODE_PATH": "/Users/johnsmith/react-dev-mcp-server/node_modules"
}
}
}
}
🪟 Windows Configuration
Step 1: Get your project path
cd C:\Users\%USERNAME%\react-dev-mcp-server
echo %cd%
# Copy this output
Step 2: Open Claude Desktop config
# Open Run dialog (Windows + R) and paste:
%APPDATA%\Claude\
# Then open claude_desktop_config.json in your text editor
Step 3: Configure the MCP server
Replace the entire file content with (update the path, use double backslashes):
{
"mcpServers": {
"react-dev-assistant": {
"command": "node",
"args": ["C:\\Users\\YourUsername\\react-dev-mcp-server\\dist\\index.js"],
"env": {
"NODE_PATH": "C:\\Users\\YourUsername\\react-dev-mcp-server\\node_modules"
}
}
}
}
Example with real path:
{
"mcpServers": {
"react-dev-assistant": {
"command": "node",
"args": ["C:\\Users\\johnsmith\\react-dev-mcp-server\\dist\\index.js"],
"env": {
"NODE_PATH": "C:\\Users\\johnsmith\\react-dev-mcp-server\\node_modules"
}
}
}
}
🐧 Linux Configuration
Step 1: Get your project path
cd ~/react-dev-mcp-server
pwd
# Copy this output
Step 2: Open Claude Desktop config
# Most distributions
code ~/.config/Claude/claude_desktop_config.json
# Alternative path for some distributions
code ~/.local/share/Claude/claude_desktop_config.json
Step 3: Configure the MCP server
Replace the entire file content with (update the path):
{
"mcpServers": {
"react-dev-assistant": {
"command": "node",
"args": ["/home/yourusername/react-dev-mcp-server/dist/index.js"],
"env": {
"NODE_PATH": "/home/yourusername/react-dev-mcp-server/node_modules"
}
}
}
}
🧪 Part 3: Testing Your Setup (All Platforms)
Step 1: Restart Claude Desktop
macOS:
pkill -f "Claude"
sleep 5
open -a "Claude"
Windows:
Close Claude Desktop completely
Wait 5 seconds
Reopen from Start Menu
Linux:
pkill -f claude
sleep 5
claude &
Step 2: Verify the Connection
In Claude Desktop, start a new conversation:
What React development tools do you have available?
Expected Response: Claude should list 10 tools:
analyzereactcomponent
optimize_performance
generate_component
checktypescripttypes
optimize_css
check_accessibility
suggestbestpractices
analyzebundlesize
generate_tests
fixeslintissues
Step 3: Test with Real Code
Create a test React file to verify file access:
// TestComponent.tsx
import React, { useEffect, useState } from 'react';
const TestComponent = ({ userId }) => {
const [user, setUser] = useState(null);
useEffect(() => {
fetch(`/api/users/${userId}`)
.then(response => response.json())
.then(data => setUser(data));
});
return (
<div>
<img src={user?.avatar} />
<h1>{user?.name}</h1>
</div>
);
};
export default TestComponent;
Ask Claude:
Analyze TestComponent.tsx for performance and accessibility issues
Expected Response: Claude should identify:
Missing dependency array in useEffect
Missing TypeScript types
Missing alt attribute on image
Performance optimization suggestions
🎯 Part 4: Your First Real Development Session
Now let's see the real power! Here are example commands to try:
Component Analysis
"Analyze src/components/UserProfile.tsx for performance issues and suggest specific optimizations"
Code Generation
"Generate a TypeScript React component called 'ProductCard' with props for title, price, image, and onAddToCart callback. Include accessibility features and styled-components."
Project-Wide Audits
"Review all components in my src/components/ folder and create a prioritized list of issues to fix"
Test Generation
"Generate comprehensive tests for src/components/Dashboard.tsx using Jest and React Testing Library"
Performance Optimization
"My app feels slow. Analyze src/components/DataTable.tsx and suggest performance improvements"
🆘 Platform-Specific Troubleshooting
🍎 macOS Issues
"Tools not found" error:
# Check config file exists and is valid
ls -la ~/Library/Application\ Support/Claude/claude_desktop_config.json
cat ~/Library/Application\ Support/Claude/claude_desktop_config.json
# Verify paths are absolute
cd ~/react-dev-mcp-server && pwd
# Force restart Claude
pkill -f "Claude" && sleep 3 && open -a "Claude"
Permission errors:
# Make script executable
chmod +x ~/react-dev-mcp-server/dist/index.js
# Check Node.js is accessible
which node && node --version
🪟 Windows Issues
"Tools not found" error:
# Check config file
dir %APPDATA%\Claude\claude_desktop_config.json
type %APPDATA%\Claude\claude_desktop_config.json
# Verify paths use double backslashes
# Restart Claude Desktop completely
Path issues:
# Get exact path
cd C:\Users\%USERNAME%\react-dev-mcp-server
echo %cd%
# Ensure no spaces in path, use double backslashes in config
Node.js not found:
# Check Node.js installation
node --version
where node
# Add Node.js to PATH if needed
🐧 Linux Issues
"Tools not found" error:
# Check config locations
ls -la ~/.config/Claude/claude_desktop_config.json
ls -la ~/.local/share/Claude/claude_desktop_config.json
# Verify Node.js
which node && node --version
# Restart Claude
pkill claude && sleep 3 && claude &
Permission errors:
# Make executable
chmod +x ~/react-dev-mcp-server/dist/index.js
# Check file permissions
ls -la ~/react-dev-mcp-server/dist/
🚀 Advanced Usage Examples
Once your setup is working, here are some advanced use cases:
Comprehensive Project Review
"Perform a complete audit of my React project. Check performance, accessibility, TypeScript usage, and bundle size. Provide a prioritized action plan."
Architecture Consultation
"Review my component architecture in src/components/ and suggest improvements for better maintainability and performance"
Automated Refactoring
"Help me modernize src/components/LegacyDashboard.tsx from class component to functional component with hooks"
Security Analysis
"Analyze my React components for security vulnerabilities like XSS, unsafe refs, and other common issues"
🎉 Conclusion: Your New Development Superpower
Congratulations! You've successfully set up the most powerful React development assistant available. Here's what you've gained:
🔍 Intelligent Analysis: Claude can now read your actual files and provide specific, line-by-line feedback tailored to your codebase.
⚡ Performance Optimization: Get expert-level performance suggestions with before/after examples.
♿ Accessibility Compliance: Automated WCAG 2.1 compliance checking with actionable fixes.
🧪 Test Generation: Create comprehensive test suites tailored to your components.
📦 Project Insights: Bundle analysis, architecture reviews, and security audits.
🎯 Daily Workflow Integration: Ask questions about your actual code and get expert responses.
Your Development Process is Now:
Code in your favorite editor
Ask Claude for specific help with your files
Get expert analysis with actionable suggestions
Apply improvements to your codebase
Learn React best practices along the way
Pro Tips for Maximum Benefit:
Be specific: Ask about specific files rather than general questions
Request explanations: Ask Claude to explain why changes are needed
Use it daily: The more you use it, the better your React skills become
Explore all tools: Try component generation, accessibility checking, and performance optimization
You now have an AI pair programmer that knows your codebase intimately and has deep React expertise. Happy coding! 🚀
Have questions about the setup? Found this helpful? Share your experience and help other developers transform their React development workflow!
Tags: #React #TypeScript #Claude #MCP #Development #AI #Productivity #WebDev