Skip to content

MCP server for developing modern react native applications, using supabase as backend.

License

JacobOmateq/react-native-mcp-server

Repository files navigation

React Native Blueprint MCP Server

A simplified MCP server for creating minimal React Native projects with progressive enhancement.

Overview

This MCP server provides AI assistants with access to minimal React Native project creation, comprehensive documentation, and intelligent diagnostics. It follows the minimal approach - start simple, add complexity only when needed.

Features

πŸš€ Minimal Project Creation

  • Uses official React Native CLI (latest version 0.82+)
  • Creates projects in current directory
  • Progressive enhancement for adding features
  • Automatic dependency conflict resolution

πŸ“š Comprehensive Documentation

  • 50+ React Native documentation sections
  • Filter by category, difficulty, or tags
  • Personalized learning paths
  • Official React Native website integration

πŸ” Smart Diagnostics

  • Project structure validation
  • Error diagnosis and fixes
  • Development environment checking
  • Automatic problem resolution

Tools

1. create_minimal_project - πŸš€ Main Tool

Create minimal React Native project using official CLI with progressive enhancement.

Parameters:

  • projectName (required): Name of the project
  • projectPath (required): Path where to create the project (use '.' for current directory)
  • useTypeScript (optional): Use TypeScript template (default: true)
  • features (optional): Features to add progressively (navigation, state, http, forms, storage)
  • pruneDefault (optional): Remove unnecessary default files (default: true)

2. get_react_native_docs - πŸ“š Documentation

Get comprehensive React Native documentation from the official website.

3. get_learning_path - πŸŽ“ Learning

Get a personalized learning path based on experience level (beginner, intermediate, advanced).

4. validate_project - πŸ” Validation

Validate React Native project structure and identify issues.

5. diagnose_error - 🩺 Diagnostics

Diagnose specific React Native errors and provide targeted fixes.

Installation

Prerequisites

  • Node.js 18 or higher
  • npm or yarn

Install from npm

npm install -g react-native-blueprint-mcp

Build from Source

# Clone the repository
git clone <repository-url>
cd react-native-blueprint-mcp

# Install dependencies
npm install

# Build the project
npm run build

# Link globally (optional)
npm link

Configuration

Add the server to your MCP client configuration file:

Claude Desktop

Edit your Claude Desktop configuration file:

macOS: ~/Library/Application Support/Claude/claude_desktop_config.json Windows: %APPDATA%\Claude\claude_desktop_config.json

{
  "mcpServers": {
    "react-native-blueprint": {
      "command": "react-native-blueprint-mcp"
    }
  }
}

Usage Examples

Example 1: Create Minimal Project

Create a minimal React Native project called "MyApp" with TypeScript and navigation

The AI will use create_minimal_project to create a clean React Native project with progressive enhancement.

Example 2: Get Learning Path

I'm a beginner React Native developer, give me a learning path

The AI will provide a personalized learning path with 10 beginner topics and estimated time.

Example 3: Diagnose Error

I'm getting this error: "Cannot read properties of null (reading 'automaticPodsInstallation')"

The AI will diagnose the error and provide specific fixes for iOS project initialization issues.

Example 4: Validate Project

Validate my React Native project at /path/to/project

The AI will check for missing files, configuration issues, and provide specific fixes.

Project Structure

src/
β”œβ”€β”€ index.ts                 # Main server
β”œβ”€β”€ types/
β”‚   └── index.ts            # Shared types
└── tools/
    β”œβ”€β”€ index.ts            # Export all tools
    β”œβ”€β”€ minimal-project.ts  # Project creation
    β”œβ”€β”€ documentation.ts    # Docs and learning
    └── diagnostics.ts     # Validation and fixes

Development

Build

npm run build

Watch Mode

npm run watch

Testing the Server

node dist/index.js

Key Benefits

βœ… Minimal Approach

  • Start with official React Native CLI
  • Add features progressively as needed
  • Maximum control with minimal dependencies

βœ… Actually Works

  • Creates projects in current directory
  • Resolves dependency conflicts automatically
  • Uses latest React Native version (0.82+)

βœ… Comprehensive Learning

  • Access to official React Native documentation
  • Personalized learning paths
  • Smart error diagnosis and fixes

βœ… Developer Experience

  • Simple, focused toolset
  • Clear error messages and fixes
  • Follows React Native best practices

Changelog

Version 3.0.0 - πŸ”„ Complete Refactoring

  • SIMPLIFIED: Reduced from 19 tools to 5 essential tools
  • FOCUSED: Each tool has clear, specific purpose
  • MINIMAL: Follows minimal React Native approach
  • RELIABLE: Fewer moving parts = fewer bugs
  • CLEAN: Removed redundant functionality and documentation

Version 2.0.0 - Docker-First Supabase

  • NEW: Docker Compose Supabase setup
  • FIXED: Current directory project creation
  • IMPROVED: Dependency conflict resolution

Version 1.0.0

  • Initial release with complex scaffolding

License

MIT

Support

For issues, questions, or suggestions:

  • Open an issue on GitHub
  • Check React Native documentation
  • Use the built-in diagnostics tools

Built with ❀️ for the React Native community

About

MCP server for developing modern react native applications, using supabase as backend.

Resources

License

Contributing

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published