Native_MCP
An extensible Model Context Protocol server that enables AI assistants like Claude to generate React Native components and perform development tasks through a standardized interface.
README Documentation
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
- Input:
📋 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 connectiontools/list
: Get list of available toolstools/call
: Execute a specific toolresources/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