Which integrations are available for this server?

Provides tools and resources for exploring and comparing React design and rendering patterns, including HOC, Hooks, Compound, Container/Presentational, Render Props, CSR, SSR, SSG, ISR, Progressive Hydration, Streaming SSR, RSC, and Selective Hydration.

How do I use React Patterns MCP Server?

1. Click on "Deploy Server". 2. Wait a few minutes for the server to deploy. Once ready, it will show a "Started" state. 3. In the chat, type @ followed by the MCP server name and your instructions, e.g., "@React Patterns MCP Server Compare SSR and CSR patterns" That's it! The server will respond to your query, and you can continue using it as needed. Here is a step-by-step guide with screenshots.

React Patterns MCP Server

by 1beyza

Overview Schema Source Related Servers Discussions Admin

TypeScript

Local

React Patterns MCP Server v2

A comprehensive MCP (Model Context Protocol) server that teaches and applies React architecture, design patterns, and best practices — covering everything from patterns.dev/react.

Built in TypeScript / Node.js for use with Claude Code.

Features

Category	Tools
Pattern Reference	All patterns.dev/react patterns with full details, comparisons, recommendations
Code Analyzer	Detect anti-patterns and suggest refactors in existing React code
Template Engine	Ready-to-use TypeScript code templates per pattern
Scaffold	Generate project skeleton based on architecture + patterns
Architecture Doc	ADR generator that recommends patterns for your project
Live Docs	Fetch docs.react.dev + React version-aware API guidance
Mobile	Tailwind responsive patterns + React Native layouts
Memory	Persist project state between sessions
Task Planner	Break goals into parallelisable subtasks for Claude subagents
Token Optimizer	Compress outputs, manage response cache

Related MCP server: PatternFly MCP Server

Covered Patterns

🎨 Design Patterns

ID	Pattern
`hoc-pattern`	Higher-Order Component (HOC)
`hooks-pattern`	Hooks Pattern
`compound-pattern`	Compound Pattern
`container-presentational-pattern`	Container / Presentational
`render-props-pattern`	Render Props
`observer-pattern`	Observer / Pub-Sub (Zustand)
`provider-pattern`	Provider (React Context)
`prototype-pattern`	Prototype / Object Pool
`module-pattern`	Module / Feature Slice
`singleton-pattern`	Singleton (API clients, stores)

⚙️ Rendering Patterns

ID	Pattern
`client-side-rendering`	CSR (Vite SPA, dashboards)
`server-side-rendering`	SSR (Next.js per-request)
`static-rendering`	SSG (Next.js build-time)
`incremental-static-rendering`	ISR (stale-while-revalidate)
`progressive-hydration`	Progressive Hydration
`streaming-ssr`	Streaming SSR
`react-server-components`	RSC (Next.js App Router)
`selective-hydration`	Selective Hydration (React 18)

⚡ Performance Patterns

ID	Pattern
`dynamic-import`	Dynamic Import / Code Splitting
`import-on-visibility`	Import on Visibility (IntersectionObserver)
`import-on-interaction`	Import on Interaction (defer until click/hover)
`route-based-splitting`	Route-Based Code Splitting
`bundle-splitting`	Bundle Splitting / Vendor Chunking
`tree-shaking`	Tree Shaking (dead-code elimination)
`preload`	Preload Critical Resources
`prefetch`	Prefetch Next-Page Resources
`prpl-pattern`	PRPL Pattern (PWA loading strategy)

Tool Reference

Tool	Description
`list_all_patterns`	All patterns grouped by category
`list_performance_patterns`	Performance patterns only
`get_pattern`	Full detail + code example for a pattern
`compare_patterns`	Side-by-side comparison of 2–5 patterns
`find_pattern_for_use_case`	Describe a problem, get pattern recommendations
`ask_architecture_preference`	Call this first — shows architecture options
`scaffold_project`	Generate project skeleton
`analyze_code`	Detect anti-patterns in React code
`get_code_template`	Ready-to-use TypeScript code template
`generate_architecture_doc`	ADR — which patterns and why for your project
`fetch_react_docs`	Live fetch from docs.react.dev with version guidance
`save_memory` / `get_memory`	Persist and recall project context across sessions
`create_task_plan`	Break a goal into parallelisable subtasks
`compress_output`	Compress verbose responses to save tokens

Installation

Prerequisites

Node.js 20+
npm or pnpm

Setup

git clone https://github.com/1beyza/react-patterns-mcp.git
cd react-patterns-mcp
npm install
npm run build

Add to Claude Code

In your project's .claude/mcp.json (or global ~/.claude/mcp.json):

{
  "mcpServers": {
    "react-patterns": {
      "command": "node",
      "args": ["/absolute/path/to/react-patterns-mcp/dist/index.js"]
    }
  }
}

Or run directly for testing:

npm run dev   # tsx (no build needed)

Usage Workflows

New Project

1. create_task_plan     — break the goal into subtasks
2. generate_architecture_doc  — get pattern recommendations + ADR
3. scaffold_project     — generate directory structure + setup commands
4. get_code_template    — get starter code for each essential pattern
5. save_memory          — persist architecture choices

Existing Project Improvement

1. analyze_code         — detect issues and pattern opportunities
2. compare_patterns     — compare alternatives
3. suggest_refactor     — get a refactor plan toward a target pattern
4. get_code_template    — get the target pattern's starter code

Quick Pattern Lookup

list_all_patterns        — browse everything
get_pattern <id>         — full details + code example
find_pattern_for_use_case — describe your problem, get recommendations

Architecture

react-patterns-mcp/
├── src/
│   ├── index.ts                    # MCP server entry — registers all tools
│   ├── tools/                      # Tool layer — MCP tool handlers
│   │   ├── index.ts               # Barrel export
│   │   ├── pattern-tools.ts       # Pattern query / compare / recommend
│   │   ├── scaffold-tools.ts      # Project scaffolding
│   │   ├── analyzer-tools.ts      # Code analysis + refactor suggestions
│   │   ├── template-tools.ts      # Code template retrieval
│   │   ├── architecture-tools.ts  # ADR generation
│   │   ├── docs-tools.ts          # Live React docs + version guidance
│   │   ├── mobile-tools.ts        # Mobile / responsive patterns
│   │   ├── memory-tools.ts        # Project state persistence
│   │   ├── task-planner-tools.ts  # Subtask decomposition
│   │   └── token-optimizer-tools.ts # Output compression + cache
│   ├── data/                       # Data layer — pure data, no MCP logic
│   │   ├── patterns.ts            # All design & rendering pattern definitions
│   │   ├── templates.ts           # Code templates per pattern
│   │   └── mobile-patterns.ts     # Mobile responsiveness patterns
│   └── utils/                      # Utility layer — shared functions
│       ├── validator.ts           # Zod schemas for all tool inputs
│       ├── formatter.ts           # Markdown output formatting
│       ├── cache.ts               # TTL response cache
│       └── file-io.ts             # Memory persistence (JSON files)
├── memory/                         # Runtime project memory (gitignored)
├── dist/                           # Compiled JavaScript output
├── package.json
├── tsconfig.json
└── README.md

Layer rules:

data/ — pure data objects, no side effects
utils/ — pure functions and shared helpers, no MCP awareness
tools/ — MCP tool handlers; validate with Zod, call data/utils, return strings
index.ts — MCP protocol binding only; no business logic

All MCP Tools

Tool	Description
`list_all_patterns`	List all patterns with summaries
`list_design_patterns`	List design patterns only
`list_rendering_patterns`	List rendering patterns only
`get_pattern`	Full details + code example for a pattern
`compare_patterns`	Side-by-side comparison of 2–5 patterns
`find_pattern_for_use_case`	Describe your problem → get recommendations
`get_related_patterns`	Patterns related to a given pattern
`get_pattern_tradeoffs`	Quick pros/cons for a pattern
`scaffold_project`	Generate full project scaffold
`analyze_code`	Detect anti-patterns in React code
`suggest_refactor`	Refactor plan toward a target pattern
`get_code_template`	Get ready TypeScript code for a pattern
`list_templates`	List all available code templates
`generate_architecture_doc`	ADR with pattern recommendations
`fetch_react_docs`	Live docs.react.dev content
`get_react_version_guidance`	Version-specific API guidance
`get_mobile_pattern`	Mobile/responsive pattern details
`get_tailwind_responsive_cheatsheet`	Tailwind responsive design guide
`save_memory`	Persist project state to disk
`get_memory`	Retrieve saved project state
`clear_memory`	Delete project memory
`list_project_memory`	List all projects with saved state
`create_task_plan`	Break a goal into parallelisable subtasks
`compress_output`	Reduce token cost of verbose output
`get_cache_stats`	View response cache statistics
`clear_caches`	Clear all response caches

This server cannot be deployed

One endpoint for every MCP toolRayrun runs every MCP server behind one URL and holds the credentials. Each call is decided per client, tool, and argument, then recorded.ray.runAd

Maintenance

ActivitySlowing

ResponsivenessSyncing

Resources

GitHub Repository

Need Help?

Related Servers

Related MCP Connectors

marmo-ui A
io.github.mahmoudilyan
Live React design-system APIs, patterns, and code validation so AI agents build real UI, not slop.
Design Tools Developer Tools
142
journeyman A
com.softwareengineeringprofessional
Read-only Pattern-Assist corpus for aspiring software engineers: grounded dev patterns with sources.
Education & Learning Tools Documentation Access
61
Motion Menu A
io.github.dev55acc-ai
597 motion/3D UI patterns as ready HTML/CSS/JS, served over MCP. The entire library is free.
Developer Tools
111
BotKelp A
io.github.aiscimi-code
Verified Next.js component scaffolds via remote HTTP MCP, with integrity stamps for Claude/Cursor.
Developer Tools
151

Related MCP Servers

UI Expert MCP Server
Developer Tools Autonomous Agents
reallygood83
A
license
B
quality
D
maintenance
Provides professional UI/UX design expertise and frontend development tools for analyzing interfaces, generating design systems, and creating modern components with accessibility and best practices built-in. Supports React, Vue, Angular and other frameworks with seamless Claude Code CLI integration.
Updated a year ago (2025-08-09 00:33 UTC)
4
23
MIT
PatternFly MCP Serverofficial
Documentation Access Developer Tools
patternfly
A
license
A
quality
A
maintenance
Provides access to PatternFly React documentation, development rules, and component schemas through MCP tools, enabling AI assistants to help developers build applications with PatternFly components following best practices.
Updated 5 days ago (2026-09-16 15:22 UTC)
2
1,531 npm
5
MIT
ui-kit
Design Tools Developer Tools
annondeveloper
A
license
Not graded
quality
C
maintenance
Native Claude Code integration for @annondeveloper/ui-kit — a zero-dependency React component library with 147 components, 3 weight tiers, physics-based animations, and OKLCH color system. Gives Claude deep awareness of the library's components, design patterns, and conventions. Includes 5 skills for component discovery, code generation, design system reference, tier selection, and accessibility
Updated 3 months ago (2026-06-07 03:18 UTC)
14 npm
MIT
Design-Pattern-MCP
Developer Tools Software Architecture
sirius-zuo
A
license
A
quality
D
maintenance
Provides design pattern templates and anti-pattern guidance to AI coding agents for correct pattern implementation.
Updated 5 months ago (2026-04-20 00:00 UTC)
2
MIT