Ui Expo Tamagui

Node.js TypeScript Docker MCP

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

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

export GEMINI_API_KEY=your-gemini-api-key

3. Test MCP Server

./test-mcp-tools.sh

🔌 Claude Desktop Integration

Add to your claude_desktop_config.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

# 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

# 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

{
  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

{
  name: "PostCard", 
  description: "Post card with avatar, content, reactions",
  styling: { theme: "dark", responsive: true }
}

🔧 Development

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 file for details.

🎉 Ready to Go!

Start creating amazing UI components with AI! 🚀✨

Happy Coding!