mcp-ui-expo-tamagui

# 🎨 MCP UI Expo Tamagui Server [](https://nodejs.org/) [](https://www.typescriptlang.org/) [](https://docker.com/) [](https://modelcontextprotocol.io/) **AI-Powered UI Component Generator for Expo + Tamagui with Claude Desktop Integration** 🚀 Automatically generate React Native/Expo components using AI Gemini through Model Context Protocol (MCP) ## ✨ Features - 🤖 **AI Component Generation**: Create components with natural language descriptions - 📚 **Real-time Docs Search**: Search Expo & Tamagui documentation - ⚡ **Code Optimization**: Optimize components for performance - 🎨 **Theme Configuration**: Generate theme configs automatically - 💡 **Smart Suggestions**: Intelligent component recommendations - 🐳 **Docker Ready**: Production-ready containerization - 🔧 **TypeScript Support**: Full type safety ## 🚀 Quick Start ### 1. Installation & Build ```bash git clone https://github.com/yourusername/mcp-ui-expo-tamagui.git cd mcp-ui-expo-tamagui npm install npm run build ``` ### 2. Configure API Key ```bash export GEMINI_API_KEY=your-gemini-api-key ``` ### 3. Test MCP Server ```bash ./test-mcp-tools.sh ``` ## 🔌 Claude Desktop Integration Add to your `claude_desktop_config.json`: ```json { "mcpServers": { "mcp-ui-expo-tamagui": { "command": "node", "args": ["/path/to/mcp-ui-expo-tamagui/build/index.js"], "env": { "GEMINI_API_KEY": "your-gemini-api-key" } } } } ``` ### Usage with Claude ``` 💬 "Create a Button component with title, onPress, and variant props" 💬 "How to implement navigation in Expo?" 💬 "Suggest components for an e-commerce screen" 💬 "Optimize this component for performance" 💬 "Create dark theme with purple primary color" ``` ## 🛠️ MCP Tools | Tool | Description | Parameters | |------|-------------|------------| | `generate_ui_component` | Generate UI component with AI | name, description, props, styling, platform | | `search_expo_docs` | Search Expo documentation | query | | `search_tamagui_docs` | Search Tamagui documentation | query | | `get_component_suggestions` | Get component suggestions | context, requirements | | `optimize_component` | Optimize component code | code, optimizationType | | `create_theme_config` | Create theme configuration | colorScheme, primaryColors, components | ## 🐳 Docker Deployment ### Build & Run ```bash # Build Docker image docker build -t mcp-ui-expo-tamagui . # Run with Docker Compose docker-compose up # Run standalone docker run -e GEMINI_API_KEY=your-key mcp-ui-expo-tamagui ``` ## 🧪 Testing ```bash # Test MCP tools ./test-mcp-tools.sh # Test Docker ./test-docker.sh # TypeScript validation npm run lint # Jest tests npm test ``` ## 📁 Project Structure ``` mcp-ui-expo-tamagui/ ├── src/ │ ├── index.ts # Main MCP server │ ├── types/interfaces.ts # Type definitions │ ├── services/ # Core services │ └── utils/ # Utilities ├── build/ # Compiled output ├── Dockerfile # Docker configuration ├── docker-compose.yml # Docker Compose └── README.md # Documentation ``` ## 🎯 Example Use Cases ### E-commerce Product Card ```typescript { name: "ProductCard", description: "Product card with image, title, price, rating, add to cart", props: [ { name: "product", type: "Product", required: true }, { name: "onAddToCart", type: "function", required: true } ] } ``` ### Social Media Post ```typescript { name: "PostCard", description: "Post card with avatar, content, reactions", styling: { theme: "dark", responsive: true } } ``` ## 🔧 Development ```bash npm run dev # Development mode npm run build # Build production npm run test # Run tests npm run lint # TypeScript check ``` ## 🚨 Environment Variables - `GEMINI_API_KEY` - Google Gemini AI API key (required) - `NODE_ENV` - Environment (optional) - `LOG_LEVEL` - Logging level (optional) ## 📄 License MIT License - see [LICENSE](LICENSE) file for details. ## 🎉 Ready to Go! Start creating amazing UI components with AI! 🚀✨ **Happy Coding!**