# 🎨 MCP UI Expo Tamagui Server

[![Node.js](https://img.shields.io/badge/Node.js-18+-green.svg)](https://nodejs.org/)
[![TypeScript](https://img.shields.io/badge/TypeScript-5.0+-blue.svg)](https://www.typescriptlang.org/)
[![Docker](https://img.shields.io/badge/Docker-Ready-blue.svg)](https://docker.com/)
[![MCP](https://img.shields.io/badge/MCP-Compatible-purple.svg)](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!**