Native_MCP

A Model Context Protocol (MCP) server for React Native development tools and utilities.

🚀 Overview

Native_MCP is an extensible MCP server that provides tools and utilities for React Native development. It allows AI assistants like Claude to generate React Native components and perform other development tasks through a standardized protocol.

✨ Features

React Native Component Generator: Automatically generate React Native components with proper structure
Extensible Tool System: Add custom tools through a simple plugin architecture
MCP Protocol Compliance: Full compatibility with Model Context Protocol 2025-06-18
Dynamic Tool Loading: Tools are loaded dynamically from the tools/ directory

🛠️ Available Tools

React Native Helper

generate_component: Generate a basic React Native functional component
- Input: component_name (string)
- Output: Complete React Native component code with View and Text elements

📋 Prerequisites

Python 3.12 or higher
uv package manager
VS Code with Claude extension (for MCP integration)

🔧 Installation

Clone the repository:

git clone https://github.com/ArkVex/Native_MCP.git
cd Native_MCP

Install dependencies:
```
uv sync
```
Verify installation:
```
uv run mcp_server.py
```

🚀 Usage

With Claude in VS Code

Configure the MCP server in your Claude settings:

{
  "mcpServers": {
    "native-mcp": {
      "command": "uv",
      "args": [
        "--directory",
        "C:\\path\\to\\Native_MCP",
        "run",
        "mcp_server.py"
      ]
    }
  }
}

Start using the tools in Claude:
- Ask Claude to "generate a React Native component called LoginScreen"
- Claude will use the generate_component tool automatically

Manual Testing

You can test the server manually using JSON-RPC:

# Initialize the server
echo '{"method":"initialize","params":{"protocolVersion":"2025-06-18","capabilities":{},"clientInfo":{"name":"test-client","version":"0.1.0"}},"jsonrpc":"2.0","id":0}' | uv run mcp_server.py

# List available tools
echo '{"method":"tools/list","params":{},"jsonrpc":"2.0","id":1}' | uv run mcp_server.py

# Generate a component
echo '{"method":"tools/call","params":{"name":"generate_component","arguments":{"component_name":"MyButton"}},"jsonrpc":"2.0","id":2}' | uv run mcp_server.py

📁 Project Structure

Native_MCP/
├── mcp_server.py          # Main MCP server implementation
├── pyproject.toml         # Project configuration
├── requirements.txt       # Python dependencies
├── tools/                 # Tool plugins directory
│   └── react-native-helper/
│       ├── main.py        # Tool implementation
│       └── mcp.json       # Tool metadata
├── .venv/                 # Virtual environment
└── README.md             # This file

🔌 Adding Custom Tools

To add a new tool to the server:

Create a tool directory:
```
mkdir tools/my-custom-tool
```

Create the tool implementation (tools/my-custom-tool/main.py):

def my_function(params):
    # Your tool logic here
    result = params.get("input", "default")
    return {"output": f"Processed: {result}"}

Create the tool metadata (tools/my-custom-tool/mcp.json):

{
  "name": "my-custom-tool",
  "entry_point": "main.py",
  "commands": {
    "my_function": {
      "description": "Description of what this tool does",
      "params": {
        "input": "string"
      }
    }
  }
}

Restart the server - tools are loaded automatically

🐛 Troubleshooting

Server Won't Start

Ensure Python 3.12+ is installed
Verify uv is installed and in your PATH
Check that all dependencies are installed with uv sync

Tools Not Loading

Verify tool directory structure matches the expected format
Check that mcp.json is valid JSON
Ensure the entry point file exists and functions are named correctly

Connection Issues

Verify the MCP server path in your Claude configuration
Check that the server process isn't already running
Review the Claude extension logs for detailed error messages

📖 API Reference

MCP Protocol Methods

initialize: Initialize the server connection
tools/list: Get list of available tools
tools/call: Execute a specific tool
resources/list: List available resources (currently empty)
prompts/list: List available prompts (currently empty)

Tool Response Format

Tools return responses in the MCP standard format:

{
  "content": [
    {
      "type": "text",
      "text": "Tool output here"
    }
  ]
}

🤝 Contributing

Fork the repository
Create a feature branch: git checkout -b feature/new-tool
Make your changes and add tests
Commit your changes: git commit -am 'Add new tool'
Push to the branch: git push origin feature/new-tool
Submit a pull request

📝 License

This project is licensed under the MIT License - see the LICENSE file for details.

🙏 Acknowledgments

Model Context Protocol for the specification
Anthropic for Claude and MCP support
React Native community for inspiration

📞 Support

If you encounter any issues or have questions:

Check the Troubleshooting section
Search existing GitHub Issues
Create a new issue with detailed information about your problem

Made with ❤️ for the React Native and AI development community