clean-code-react

Clean Code React MCP Server

A Model Context Protocol (MCP) server that provides comprehensive React and TypeScript pattern guidance for AI coding assistants.

Overview

Clean Code React helps AI coding assistants writeN better React/TypeScript code by providing:

• Essential Patterns: From basic Container/Presentational to advanced Builder and Factory patterns
• Bad vs Good Examples: Compare problematic code with improved solutions
• Detailed Guidance: Comprehensive descriptions, use cases, and best practices
• Pattern Discovery: Get an overview of all patterns or dive deep into specific ones

Usage

Typical Configuration

{
  "mcpServers": {
    "clean-code-react": {
      "command": "npx",
      "args": ["clean-code-react@latest"]
    }
  }
}

Cursor

Claude Code

claude mcp add clean-code-react npx clean-code-react@latest

VS Code

code --add-mcp '{"name":"clean-code-react","command":"npx","args":["clean-code-react@latest"]}'

What You Get

This MCP server provides AI coding assistants with access to:

• Essential React Patterns - From basic Container/Presentational to advanced Builder and Factory patterns
• Code Quality Fundamentals - Four principles of writing good code: Readability, Predictability, Cohesion, and Coupling
• Bad vs Good Examples - Compare problematic code with improved solutions
• Best Practices - Comprehensive guidance and common mistakes to avoid

Available Patterns

React Patterns

• Container/Presentational - Separate data logic from presentation
• Render Props - Share code between components using render props
• Compound Component - Create flexible, composable component APIs
• Higher-Order Component - Enhance components with additional functionality

Architecture Patterns

• Dependency Injection - Manage dependencies and improve testability
• Service Layer - Organize business logic and external integrations
• Adapter Pattern - Bridge incompatible interfaces

Code Quality Patterns

• Declarative Programming - Write more readable, maintainable code
• Prop Drilling Solutions - Solve prop drilling with modern techniques

Design Patterns

• Builder Pattern - Construct complex objects step by step
• Factory Pattern - Create objects without specifying exact classes
• Strategy Pattern - Define algorithms and make them interchangeable

How to Use

Simply ask your AI coding assistant to use the clean-code-react MCP server when working on React code:

Examples

Refactor existing code:

"Refactor this component using clean-code-react mcp"

Build new features:

"Build a user settings page using clean-code-react mcp"

Improve code quality:

"Apply clean-code-react mcp's quality fundamentals to improve this code"

The AI assistant will automatically discover and apply the most appropriate patterns and principles for your specific use case.

Development

# Install dependencies
npm install

# Run in development mode
npm run dev

# Build for production
npm run build

# Run type checking
npm run typecheck

# Run linting
npm run lint

# Inspect server with MCP Inspector (for debugging)
npm run inspect

MCP Inspector

The project includes the MCP Inspector for debugging and development:

npm run inspect

This opens a web interface where you can:

• Test all available tools interactively
• Inspect tool schemas and responses
• Debug server behavior
• Validate MCP protocol implementation

Architecture

src/
├── patterns/        # Pattern definitions with colocated data
├── tools/           # MCP tool implementations
├── types/           # TypeScript type definitions
├── server.ts        # Core server setup with all tools
└── index.ts         # Entry point with stdio transport

Contributing

Contributions are welcome! Please:

1. Fork the repository
2. Create a feature branch
3. Add tests for new functionality
4. Ensure all patterns have bad/good examples
5. Update pattern descriptions and use cases
6. Submit a pull request

License

MIT