rnr-mcp-server
Version:
A Model Context Protocol (MCP) server for React Native Reusables components, providing AI assistants with access to component source code, demos, and metadata for React Native development.
585 lines (437 loc) • 15.6 kB
Markdown
[](https://badge.fury.io/js/rnr-mcp-server)
[](https://opensource.org/licenses/MIT)
A Model Context Protocol (MCP) server that provides AI assistants with comprehensive access to [React Native Reusables](https://reactnativereusables.com/) components, demos, and metadata. This server enables AI tools like Claude Desktop, Continue.dev, VS Code, Cursor, and other MCP-compatible clients to retrieve and work with React Native Reusables components seamlessly.
## 🚀 Key Features
- **Component Source Code**: Get the latest React Native Reusables component TypeScript source
- **Component Demos**: Access example implementations and usage patterns
- **Blocks Support**: Retrieve complete block implementations (dashboards, calendars, login forms, etc.)
- **Metadata Access**: Get component dependencies, descriptions, and configuration details
- **Directory Browsing**: Explore the React Native Reusables repository structure
- **GitHub API Integration**: Efficient caching and intelligent rate limit handling
- **Framework Support**: Switch between React Native and Expo implementations
## 📦 Quick Start
### ⚡ Using npx (Recommended)
The fastest way to get started - no installation required!
```bash
# Basic usage (rate limited to 60 requests/hour)
npx rnr-mcp-server
# With GitHub token for better rate limits (5000 requests/hour)
npx rnr-mcp-server --github-api-key ghp_your_token_here
# Short form
npx rnr-mcp-server -g ghp_your_token_here
# Using environment variable
export GITHUB_PERSONAL_ACCESS_TOKEN=ghp_your_token_here
npx rnr-mcp-server
npx rnr-mcp-server --framework expo
npx rnr-mcp-server --framework expo --github-api-key ghp_your_token_here
export FRAMEWORK=expo
npx rnr-mcp-server
```
**🎯 Try it now**: Run `npx rnr-mcp-server --help` to see all options!
**🔄 Framework Selection**: The server supports both React Native and Expo implementations. Use `--framework expo` to switch to Expo components.
```bash
rnr-mcp-server [options]
Options:
--github-api-key, -g <token> GitHub Personal Access Token
--framework, -f <framework> Framework to use: 'react-native' or 'expo' (default: react-native)
--help, -h Show help message
--version, -v Show version information
Environment Variables:
GITHUB_PERSONAL_ACCESS_TOKEN Alternative way to provide GitHub token
FRAMEWORK Framework to use: 'react-native' or 'expo' (default: react-native)
Examples:
npx rnr-mcp-server --help
npx rnr-mcp-server --version
npx rnr-mcp-server -g ghp_1234567890abcdef
GITHUB_PERSONAL_ACCESS_TOKEN=ghp_token npx rnr-mcp-server
npx rnr-mcp-server --framework expo
npx rnr-mcp-server -f react-native
export FRAMEWORK=expo && npx rnr-mcp-server
```
**Why do you need a token?**
- Without token: Limited to 60 API requests per hour
- With token: Up to 5,000 requests per hour
- Better reliability and faster responses
1. **Go to GitHub Settings**:
- Visit [GitHub Settings → Developer settings → Personal access tokens → Tokens (classic)](https://github.com/settings/tokens)
- Or: GitHub Profile → Settings → Developer settings → Personal access tokens
2. **Generate New Token**:
- Click "Generate new token (classic)"
- Add a note: "React Native Reusables MCP server"
- **Expiration**: Choose your preference (90 days recommended)
- **Scopes**: ✅ **No scopes needed!** (public repository access is sufficient)
3. **Copy Your Token**:
- Copy the generated token (starts with `ghp_`)
- ⚠️ **Save it securely** - you won't see it again!
### 🚀 Using Your Token
**Method 1: Command Line (Quick testing)**
```bash
npx rnr-mcp-server --github-api-key ghp_your_token_here
```
**Method 2: Environment Variable (Recommended)**
```bash
# Add to your shell profile (~/.bashrc, ~/.zshrc, etc.)
export GITHUB_PERSONAL_ACCESS_TOKEN=ghp_your_token_here
npx rnr-mcp-server
```
The MCP server supports both **React Native** and **Expo** implementations. You can switch between them based on your project needs.
| Framework | Repository | File Extension | Description |
| -------------------------- | ------------------------------------- | -------------- | --------------------------------------------------- |
| **React Native** (default) | `mrzachnugent/react-native-reusables` | `.tsx` | React Native components from React Native Reusables |
| **Expo** | `mrzachnugent/react-native-reusables` | `.tsx` | Expo components from React Native Reusables |
**Method 1: Command Line Argument (Recommended)**
```bash
# Use React Native (default)
npx rnr-mcp-server
# Switch to Expo
npx rnr-mcp-server --framework expo
npx rnr-mcp-server -f expo
# Switch back to React Native
npx rnr-mcp-server --framework react-native
npx rnr-mcp-server -f react-native
```
**Method 2: Environment Variable**
```bash
# Use Expo
export FRAMEWORK=expo
npx rnr-mcp-server
export FRAMEWORK=react-native
npx rnr-mcp-server
FRAMEWORK=expo npx rnr-mcp-server
```
**Method 3: Combined with GitHub Token**
```bash
npx rnr-mcp-server --framework expo --github-api-key ghp_your_token_here
npx rnr-mcp-server --github-api-key ghp_your_token_here
```
The server will log which framework is being used:
```bash
INFO: Framework set to 'expo' via command line argument
INFO: MCP Server configured for EXPO framework
INFO: Repository: mrzachnugent/react-native-reusables
INFO: File extension: .tsx
```
**⚠️ Important**: When using environment variables, make sure to use the correct syntax:
- ✅ Correct: `export FRAMEWORK=expo && npx rnr-mcp-server`
- ✅ Correct: `FRAMEWORK=expo npx rnr-mcp-server`
- ❌ Incorrect: `FRAMEWORK=expo npx rnr-mcp-server` (without proper spacing)
- **React Native Projects**: Use default or `--framework react-native` for React Native applications
- **Expo Projects**: Use `--framework expo` for Expo applications
- **Multi-Framework Development**: Switch between frameworks to compare implementations
- **Learning**: Explore both React Native and Expo versions of the same components
1. **Install Continue Extension**:
- Open VS Code
- Go to Extensions (Ctrl+Shift+X)
- Search for "Continue" and install it
2. **Configure MCP Server**:
- Open Command Palette (Ctrl+Shift+P)
- Type "Continue: Configure" and select it
- Add this configuration to your settings:
```json
{
"continue.server": {
"mcpServers": {
"react-native-reusables": {
"command": "npx",
"args": ["rnr-mcp-server", "--github-api-key", "ghp_your_token_here"]
},
// If using Expo, do this instead:
"react-native-reusables-expo": {
"command": "npx",
"args": [
"rnr-mcp-server",
"--framework",
"expo",
"--github-api-key",
"ghp_your_token_here"
]
}
}
}
}
```
1. **Install Claude Extension**:
- Search for "Claude" in VS Code extensions
- Install the official Claude extension
2. **Configure MCP Server**:
- Add to your VS Code settings.json:
```json
{
"claude.mcpServers": {
"react-native-reusables": {
"command": "npx",
"args": ["rnr-mcp-server"],
"env": {
"GITHUB_PERSONAL_ACCESS_TOKEN": "ghp_your_token_here"
}
},
// If using Expo, do this instead:
"react-native-reusables-expo": {
"command": "npx",
"args": ["rnr-mcp-server", "--framework", "expo"],
"env": {
"GITHUB_PERSONAL_ACCESS_TOKEN": "ghp_your_token_here"
}
}
}
}
```
1. **Open Cursor Settings**:
- Go to Settings (Cmd/Ctrl + ,)
- Search for "MCP" or "Model Context Protocol"
2. **Add MCP Server Configuration**:
```json
{
"mcpServers": {
"react-native-reusables": {
"command": "npx",
"args": ["rnr-mcp-server", "--github-api-key", "ghp_your_token_here"]
},
// If using Expo, do this instead:
"react-native-reusables-expo": {
"command": "npx",
"args": [
"rnr-mcp-server",
"--framework",
"expo",
"--github-api-key",
"ghp_your_token_here"
]
}
}
}
```
Create a `.cursorrules` file in your project root:
```json
{
"mcpServers": {
"react-native-reusables": {
"command": "npx",
"args": ["rnr-mcp-server"],
"env": {
"GITHUB_PERSONAL_ACCESS_TOKEN": "ghp_your_token_here"
}
},
// If using Expo, do this instead:
"react-native-reusables-expo": {
"command": "npx",
"args": ["rnr-mcp-server", "--framework", "expo"],
"env": {
"GITHUB_PERSONAL_ACCESS_TOKEN": "ghp_your_token_here"
}
}
}
}
```
Add to your Claude Desktop configuration (`~/.config/Claude/claude_desktop_config.json`):
```json
{
"mcpServers": {
"react-native-reusables": {
"command": "npx",
"args": ["rnr-mcp-server", "--github-api-key", "ghp_your_token_here"]
},
// If using Expo, do this instead:
"react-native-reusables-expo": {
"command": "npx",
"args": [
"rnr-mcp-server",
"--framework",
"expo",
"--github-api-key",
"ghp_your_token_here"
]
}
}
}
```
Or with environment variable:
```json
{
"mcpServers": {
"react-native-reusables": {
"command": "npx",
"args": ["rnr-mcp-server"],
"env": {
"GITHUB_PERSONAL_ACCESS_TOKEN": "ghp_your_token_here"
}
},
// If using Expo, do this instead:
"react-native-reusables-expo": {
"command": "npx",
"args": ["rnr-mcp-server", "--framework", "expo"],
"env": {
"GITHUB_PERSONAL_ACCESS_TOKEN": "ghp_your_token_here"
}
}
}
}
```
1. **Install Continue.dev**:
- Download from [continue.dev](https://continue.dev)
- Install the application
2. **Configure MCP Server**:
- Open Continue.dev
- Go to Settings → MCP Servers
- Add new server:
```json
{
"name": "react-native-reusables",
"command": "npx",
"args": ["rnr-mcp-server", "--github-api-key", "ghp_your_token_here"]
}
```
Or for Expo:
```json
{
"name": "react-native-reusables-expo",
"command": "npx",
"args": [
"rnr-mcp-server",
"--framework",
"expo",
"--github-api-key",
"ghp_your_token_here"
]
}
```
Ask your AI assistant:
```
"Show me the source code for the React Native Reusables button component"
```
The AI can now access the complete TypeScript source code for the button component.
Ask your AI assistant:
```
"Create a dashboard using React Native Reusables components. Use the dashboard-01 block as a starting point"
```
The AI can retrieve the complete dashboard block implementation and customize it for your needs.
Ask your AI assistant:
```
"Help me build a login form using React Native Reusables components. Show me the available form components"
```
The AI can list all available components and help you build the form.
The MCP server provides these tools for AI assistants:
- **`get_component`** - Get component source code
- **`get_component_demo`** - Get component usage examples
- **`list_components`** - List all available components
- **`get_component_metadata`** - Get component dependencies and info
- **`get_block`** - Get complete block implementations (dashboard-01, calendar-01, etc.)
- **`list_blocks`** - List all available blocks with categories
### Repository Tools
- **`get_directory_structure`** - Explore the React Native Reusables repository structure
### Example Tool Usage
```typescript
// These tools can be called by AI assistants via MCP protocol
// Get button component source
{
"tool": "get_component",
"arguments": { "componentName": "button" }
}
// List all components
{
"tool": "list_components",
"arguments": {}
}
// Get dashboard block
{
"tool": "get_block",
"arguments": { "blockName": "dashboard-01" }
}
```
**"Rate limit exceeded" errors:**
```bash
npx rnr-mcp-server --github-api-key ghp_your_token_here
```
**"Command not found" errors:**
```bash
node --version
npx --version
```
**Component not found:**
```bash
npx rnr-mcp-server
```
**Network/proxy issues:**
```bash
export HTTP_PROXY=http://your-proxy:8080
export HTTPS_PROXY=http://your-proxy:8080
npx rnr-mcp-server
```
**Editor not recognizing MCP server:**
```bash
npx rnr-mcp-server --help
```
Enable verbose logging:
```bash
DEBUG=* npx rnr-mcp-server --github-api-key ghp_your_token
```
This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.
1. Fork the repository
2. Create a feature branch (`git checkout -b feature/amazing-feature`)
3. Commit your changes (`git commit -m 'Add amazing feature'`)
4. Push to the branch (`git push origin feature/amazing-feature`)
5. Open a Pull Request
## 📞 Support
- 🐛 [Report Issues](https://github.com/danieltgfischer/rnr-mcp-server/issues)
- 💬 [Discussions](https://github.com/danieltgfischer/rnr-mcp-server/discussions)
- 📖 [Documentation](https://github.com/danieltgfischer/rnr-mcp-server#readme)
- 📦 [npm Package](https://www.npmjs.com/package/rnr-mcp-server)
## 🔗 Related Projects
- [React Native Reusables](https://reactnativereusables.com/) - Universal shadcn/ui for React Native (default framework)
- [React Native Reusables GitHub](https://github.com/mrzachnugent/react-native-reusables) - Source repository
- [Model Context Protocol](https://modelcontextprotocol.io/) - The protocol specification
- [MCP TypeScript SDK](https://github.com/modelcontextprotocol/typescript-sdk) - Official MCP SDK
## ⭐ Acknowledgments
- [mrzachnugent](https://github.com/mrzachnugent) for the amazing React Native Reusables component library
- [Anthropic](https://anthropic.com) for the Model Context Protocol specification
- The open source community for inspiration and contributions
---
**Made with ❤️ by [Daniel Fischer](https://github.com/danieltgfischer)**
**Star ⭐ this repo if you find it helpful!**