Skip to main content
Glama
Tai-DT

mcp-ui-expo-tamagui

by Tai-DT
OverviewSchemaRelated ServersScoreDiscussions
TypeScript
Remote

🎨 MCP UI Expo Tamagui Server

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

Related MCP server: React Native MCP Server

🚀 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!

This server cannot be installed

A
license - permissive license
-
quality - not tested
D
maintenance

How are these scores calculated?

Maintenance

–Maintainers
–Response time
–Release cycle
–Releases (12mo)
Commit activity

Resources

Unclaimed servers have limited discoverability.

Looking for Admin?

If you are the server author, to access and configure the admin panel.

Latest Blog Posts

MCP directory API

We provide all the information about MCP servers via our MCP API.

curl -X GET 'https://glama.ai/api/mcp/v1/servers/Tai-DT/mcp-ui-expo-tamagui'

If you have feedback or need assistance with the MCP directory API, please join our Discord server