Spaces:

faizee07
/

AI-Code-Agent-Prompt-Enhancer

Sleeping

File size: 6,390 Bytes

---
title: AI Code Agent Prompt Enhancer
emoji: 📊
colorFrom: indigo
colorTo: red
sdk: gradio
sdk_version: 5.49.1
app_file: app.py
pinned: false
license: mit
short_description: Transform your website ideas into professional
---

# 🚀 AI Code Agent Prompt Enhancer

Transform your website ideas into professional, production-ready prompts optimized for AI code agent systems. This tool guides you through a series of questions to gather all necessary information, then generates detailed prompts that work with AI coding assistants like Cursor, Bolt.new, v0.dev, and custom AI code agents.

## ✨ Features

- 🎯 **Smart Questionnaire** - Guided questions to gather all project requirements
- 🎨 **Professional Prompts** - Generate detailed, production-ready specifications
- 📱 **AI Code Agent Compatible** - Uses TITLE_PAGE, UPDATE_PAGE, SEARCH/REPLACE format
- ✨ **Modern Tech Stack** - Includes TailwindCSS, Feather Icons, AOS, Vanta.js
- 🖼️ **Image Placeholders** - Integrates Static.photos for professional placeholder images
- 📥 **Downloadable** - Save prompts for future use

## 🔧 Technology Stack

- **Gradio** - Interactive web interface
- **Hugging Face Inference API** - AI-powered prompt generation
- **TailwindCSS** - Utility-first CSS framework
- **Feather Icons** - Beautiful icon set
- **AOS.js** - Scroll animation library
- **Vanta.js** - Animated backgrounds
- **Static.photos** - Professional placeholder images

## 🎯 What You Get

✅ **Clean, Professional Prompt** - No Q&A clutter, just specifications  
✅ **AI Code Agent Format** - Uses TITLE_PAGE, UPDATE_PAGE, SEARCH/REPLACE blocks  
✅ **TailwindCSS Integration** - Modern, responsive styling  
✅ **Animation Ready** - AOS scroll animations + Vanta.js backgrounds  
✅ **Icon System** - Feather Icons integrated  
✅ **Image Placeholders** - Static.photos for all images  
✅ **Production Ready** - Complete technical specifications  
✅ **Downloadable** - Save for future use  

## 📋 How to Use

### Step 1: Create Your Prompt
1. **Enter Your Idea** - Describe your website concept
2. **Answer Questions** - Respond to guided questions (7 total)
3. **Generate Prompt** - Click to create your AI code agent prompt
4. **Download/Copy** - Save or copy the generated prompt

### Step 2: Use with AI Code Agent
1. **Copy the generated prompt**
2. **Paste into your AI code agent** (Cursor, Bolt.new, v0.dev, custom agents)
3. **Get production-ready code** with proper formatting

## 🔧 Compatible Systems

This tool generates prompts compatible with:
- ✨ **Custom AI Code Agents** (using the TITLE_PAGE/UPDATE_PAGE format)
- ✨ **Cursor AI** - Paste and generate
- ✨ **Bolt.new** - Direct integration
- ✨ **v0.dev** - Component generation
- ✨ **GitHub Copilot** - Enhanced context
- ✨ **Any LLM** - ChatGPT, Claude, Gemini

## 📚 Output Format

The generated prompts use a specific format for AI code agents:

### For New Websites:
```
<<<<<<< START_TITLE index.html >>>>>>> END_TITLE
```html
<!DOCTYPE html>
...complete HTML code...
```
```

### For Updates:
```
<<<<<<< UPDATE_PAGE_START index.html >>>>>>> UPDATE_PAGE_END
<<<<<<< SEARCH
    <h1>Old Content</h1>
=======
    <h1 class="text-4xl font-bold">New Content</h1>
>>>>>>> REPLACE
```

## 🛠️ Installation

1. **Clone the repository**
```bash
git clone <your-repo-url>
cd ai-code-agent-enhancer
```

2. **Install dependencies**
```bash
pip install -r requirements.txt
```

3. **Set up environment variables**
Create a .env file or set the HuggingFace token:
```bash
export HF_TOKEN="your_huggingface_token_here"
```

## 🎮 Usage

1. **Run the application**
```bash
python app.py
```

2. **Open in browser**
The app will launch at http://localhost:7860

3. **Follow the process**
   - Enter your website idea
   - Answer 7 guided questions
   - Select an AI model
   - Generate your enhanced prompt
   - Copy or download the result

## 🎯 How It Works

### Step 1: Input Collection
The system asks targeted questions about:
- Website type (portfolio, e-commerce, etc.)
- Purpose and goals
- Target audience
- Required sections/pages
- Design preferences
- Features needed
- New vs. update request

### Step 2: Prompt Generation
An LLM processes your answers and creates a detailed specification including:
- Complete technical requirements
- Design specifications
- Feature descriptions
- Code structure format
- CDN links and libraries
- Accessibility guidelines

### Step 3: Format Optimization
The output is formatted for AI code agents with:
- TITLE_PAGE blocks for new websites
- UPDATE_PAGE and SEARCH/REPLACE blocks for updates
- HTML templates
- Animation examples
- Styling guidelines

## 🛠️ Tech Stack

- **Frontend**: Gradio 4.0+
- **AI**: HuggingFace Inference API
- **Models**: Llama, Phi, Zephyr, Mistral
- **Output Format**: AI Code Agent compatible

## 🔐 Environment Variables

| Variable | Description | Required |
|----------|-------------|----------|
| `HF_TOKEN` | HuggingFace API token | Yes |

Get your token from: https://huggingface.co/settings/tokens

## 🎨 Supported Technologies

Generated prompts include:
- **TailwindCSS** - Responsive styling
- **Feather Icons** - Icon library
- **AOS.js** - Scroll animations
- **Vanta.js** - Background animations
- **Anime.js** - Advanced animations
- **Static.photos** - Placeholder images

## 📝 Example Usage

**Input:**
- Website Idea: "Portfolio website for a photographer"
- Type: Portfolio
- Purpose: Showcase work and attract clients
- Audience: Potential photography clients
- Sections: Home, Gallery, About, Contact
- Theme: Dark, modern, elegant
- Features: Image gallery, contact form, smooth animations

**Output:**
Complete AI code agent prompt with all specifications, ready to paste into Cursor, Bolt.new, v0.dev, or any AI coding assistant.

## 🤝 Contributing

Contributions are welcome! Please:
1. Fork the repository
2. Create a feature branch
3. Make your changes
4. Submit a pull request

## 📄 License

MIT License - feel free to use in your projects

## 🆘 Support

If you encounter issues:
1. Check that `HF_TOKEN` is set correctly
2. Ensure all dependencies are installed
3. Try a different AI model from the dropdown
4. Check HuggingFace API status

## 🌟 Credits

Created for developers who want to streamline their AI-powered web development workflow.

---

**Happy Coding! 🚀**