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 "Install 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 Related Servers Score Discussions

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 installed

license - not found

quality - not tested

maintenance

How are these scores calculated?

Maintenance

–Maintainers

–Response time

–Release cycle

–Releases (12mo)

Commit activity

Resources

GitHub Repository

Need Help?

Related Servers

Unclaimed servers have limited discoverability.

Looking for Admin?

If you are the server author, to access and configure the admin panel.

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.
Last updated 2025-08-09
4
22
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.
Last updated 2026-08-04
2
1,343
3
MIT
ui-kit
Design Tools Developer Tools
annondeveloper
A
license
-
quality
A
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
Last updated 2026-06-07
46
MIT
Design-Pattern-MCP
Developer Tools Software Architecture
sirius-zuo
A
license
-
quality
D
maintenance
Provides design pattern templates and anti-pattern guidance to AI coding agents for correct pattern implementation.
Last updated 2026-04-20
MIT

View all related MCP servers

Related MCP Connectors

Semiotic
Verified React chart generation: select, validate, repair, render, and inspect charts through MCP.
AgentSEO
Live SEO workflow tools for Claude Code, Codex, and AI agents.
mcp
Augments MCP Server - A comprehensive framework documentation provider for Claude Code

View all MCP Connectors

Latest Blog Posts

Who's Calling? MCP Hosts Are an Identity Blind Spot (And the Spec Knows It)
By Om-Shree-0709 on July 25, 2026.
mcp
Agent Identity
OAuth 2.1
Your AI Chatbot Just Exposed Your CEO's Salary to an Intern
By Om-Shree-0709 on July 2, 2026.
Agent Identity
MCP Security
OAuth Delegation
Why MCP Servers Need Execution Sandboxing (And Why Your Current Stack Isn't Enough)
By Om-Shree-0709 on June 30, 2026.
Agentic Ai
Prompt Injection
WebAssembly

MCP directory API

We provide all the information about MCP servers via our MCP API.

curl -X GET 'https://glama.ai/api/mcp/v1/servers/1beyza/react-patterns-mcp'

If you have feedback or need assistance with the MCP directory API, please join our Discord server