README.md

---
title: UI Button Generator MCP
emoji: 🐠
colorFrom: yellow
colorTo: blue
sdk: gradio
sdk_version: 5.39.0
app_file: app.py
pinned: false
license: apache-2.0
short_description: Button Create MCP call Z-Image-Turbo zero-gpu 
tags:
  - building-mcp-track-creative
---

## MCP 1st birthday
[details](https://huggingface.co/MCP-1st-Birthday)

## Social Media Post
I shared my project on X:
[View Post on X](https://x.com/Akihito_AI/status/1994658933357867378)

## Demo Video
The demo video is attached to the X post above. You can watch it directly here:
[Watch Demo Video on X](https://x.com/Akihito_AI/status/1994659192087744988)


## 🚀 Quick Start

1. **Open the App**: Launch the Gradio application
2. **Fill in Settings**: Configure your button design preferences
3. **Generate**: Click the "Generate Buttons" button
4. **Download**: Save your generated button images

## 📝 Basic Settings

### Button Text
- Enter the text you want to display on your buttons
- You can enter multiple texts separated by commas (e.g., "Start, OK, Cancel")
- Supports up to 4 different button texts

### Detail Prompt
- Describe the design style you want (e.g., "Neon cyberpunk", "Minimal elegant", "Wood texture")
- This controls the overall aesthetic and visual elements
- Examples:
  - "Neon glowing cyberpunk, blue/purple gradient"
  - "Luxury gold texture, minimal elegant, serif"
  - "Wood texture, steel rim, fantasy game style"

## 🎨 Style & Layout

### Shape Options
- **Box**: Sharp rectangular corners
- **Rounded**: Soft rounded corners (default)
- **Oval**: Elliptical shape
- **Free**: Organic freeform shape

### Layout Options
- **Horizontal 3**: 3 buttons arranged in horizontal rows (top, middle, bottom)
- **Vertical 2**: 2 tall buttons arranged side by side (left, right)
- **Box 2x2**: 4 buttons in a 2x2 grid (left-top, right-top, left-bottom, right-bottom)

### Background Options
- **Natural**: Natural background with subtle textures and ambient lighting
- **White**: Plain white background
- **Black**: Plain black background

## ⚙️ Advanced Settings

### Seed
- Controls the randomness of the generation
- Range: 0 to 2,147,483,647
- Use the same seed value to reproduce identical results

### Randomize Seed
- Toggle to enable/disable random seed generation
- When enabled, each generation uses a different random seed

### Aspect Ratio
- **1:1**: Square format (1024x1024) - Recommended
- **16:9**: Wide format (1280x720)
- **9:16**: Portrait format (720x1280)

### Guidance Scale
- Controls how closely the AI follows your prompt
- Default: 1.0 (recommended)
- Range: 1.0 to 5.0

### Steps
- Number of inference steps for image generation
- Default: 8 (recommended)
- Range: 4 to 28
- Higher values may improve quality but increase generation time

## 🎯 Quick Presets

Use the example presets to get started quickly:

### 1. Cyberpunk Start Button
- **Text**: "Start, Option, Exit"
- **Style**: Neon glowing cyberpunk, blue/purple gradient
- **Shape**: Box
- **Layout**: Horizontal 3
- **Background**: Black

### 2. Luxury Buy Button
- **Text**: "Buy"
- **Style**: Luxury gold texture, minimal elegant, serif
- **Shape**: Rounded
- **Layout**: Vertical 2
- **Background**: White

### 3. Fantasy RPG Buttons
- **Text**: "RPG, R, P, G"
- **Style**: Wood texture, steel rim, fantasy game style
- **Shape**: Free
- **Layout**: Box 2x2
- **Background**: Natural

## 💡 Tips for Best Results

1. **Be Specific**: The more detailed your prompt, the better the results
2. **Use References**: Mention styles like "minimal", "cyberpunk", "vintage", etc.
3. **Experiment**: Try different combinations of settings
4. **Save Seeds**: Note down seeds for designs you like to reproduce them later
5. **Background Matters**: Choose background that complements your design

## 🔧 Technical Details

- **Model**: Z-Image-Turbo (Zero-GPU)
- **Resolution**: Up to 1024x1024 pixels
- **Format**: WebP output
- **Platform**: Gradio web interface

## 🌐 MCP Integration

This app supports MCP (Model Context Protocol) for enhanced functionality:
- Zero-GPU inference on Hugging Face Spaces
- Header authorization for API access
- Shareable links for collaboration

## 📸 Downloading Results

1. Generated images appear in the output panel
2. Right-click on the image to save
3. Images are automatically saved in WebP format
4. You can convert to other formats using image editors if needed

## 🤔 Troubleshooting

### Generation Failed
- Check your internet connection
- Try reducing the number of inference steps
- Verify your HF_TOKEN if using private models

### Poor Quality Results
- Increase the number of inference steps (up to 28)
- Make your prompt more specific
- Try different aspect ratios

### Slow Generation
- Use fewer inference steps (4-12)
- Use 1:1 aspect ratio for faster processing
- Close other browser tabs to free up resources

## 🎨 Design Inspiration

Try these popular styles:
- **Minimal**: Clean, simple, flat design
- **Neon**: Cyberpunk with glowing effects
- **Vintage**: Retro 80s/90s aesthetics
- **Luxury**: Gold, black, premium materials
- **Fantasy**: Medieval, wood, magical themes
- **Sci-Fi**: Futuristic, metallic, high-tech

Enjoy creating your button designs! 🎨✨