# 🚀 Quick Setup Guide

## Prerequisites
- **Python 3.8+** installed on your system
- **Claude API key** from Anthropic
- **Git** (optional, for cloning)

## 🎯 Step-by-Step Setup

### 1. Get Your Claude API Key
1. Go to [Anthropic Console](https://console.anthropic.com/)
2. Sign up/Login and create an API key
3. Copy your API key (starts with `sk-ant-api03-...`)

### 2. Install Python Dependencies
```bash
cd backend
pip install -r requirements.txt
```

### 3. Configure Environment
```bash
# Copy the example environment file
cp env.example .env

# Edit .env and add your API key
# Replace "your-claude-api-key-here" with your actual key
```

**Example .env file:**
```env
CLAUDE_API_KEY=sk-ant-api03-your-actual-key-here
FLASK_ENV=development
PORT=5000
```

### 4. Start the Backend

#### **Windows Users:**
```bash
# Double-click start_backend.bat
# OR run in command prompt:
start_backend.bat
```

#### **Mac/Linux Users:**
```bash
# Make script executable
chmod +x start_backend.sh

# Run the script
./start_backend.sh
```

#### **Manual Start:**
```bash
python run.py
```

### 5. Verify Backend is Running
- Backend should start on `http://localhost:5000`
- You should see: "🌐 Backend starting on http://localhost:5000"
- Frontend can now connect to this backend

## 🧪 Testing the Backend

### Run the Test Suite
```bash
python test_api.py
```

This will test:
- ✅ Health endpoint
- ✅ Wireframe generation
- ✅ Error handling
- ✅ API responses

### Manual API Testing
```bash
# Health check
curl http://localhost:5000/api/health

# Generate wireframe
curl -X POST http://localhost:5000/api/generate-wireframe \
  -H "Content-Type: application/json" \
  -d '{"prompt": "Dashboard with header and sidebar"}'
```

## 🔧 Troubleshooting

### Common Issues

#### **"Module not found" errors**
```bash
# Reinstall dependencies
pip install -r requirements.txt --force-reinstall
```

#### **"Cannot connect to backend"**
- Check if backend is running on port 5000
- Verify no firewall blocking the port
- Check console for error messages

#### **"Claude API key not configured"**
- Ensure `.env` file exists in backend folder
- Verify API key is correct and not placeholder text
- Restart backend after changing `.env`

#### **Port already in use**
```bash
# Find process using port 5000
netstat -ano | findstr :5000  # Windows
lsof -i :5000                 # Mac/Linux

# Kill the process or change port in .env
```

### Environment Variables
| Variable | Description | Default |
|----------|-------------|---------|
| `CLAUDE_API_KEY` | Your Anthropic API key | Required |
| `PORT` | Backend port | 5000 |
| `FLASK_ENV` | Flask environment | development |

## 📱 Frontend Integration

Once backend is running, your Next.js frontend can:

1. **Send prompts** to `/api/generate-wireframe`
2. **Receive structured wireframe data** in JSON format
3. **Render wireframes** using the AI-generated specifications
4. **Handle errors** gracefully with fallback options

## 🎨 API Response Format

The backend returns structured wireframe data:

```json
{
  "success": true,
  "wireframe": {
    "layout": {
      "page": {"width": 1200, "height": 800},
      "header": {"enabled": true, "height": 72},
      "sidebar": {"enabled": true, "width": 240},
      "main_content": {
        "sections": [
          {
            "type": "grid",
            "rows": 2,
            "cols": 3,
            "height": 200
          }
        ]
      },
      "footer": {"enabled": true, "height": 64}
    },
    "styling": {
      "theme": "modern",
      "colors": {"primary": "#3B82F6"},
      "spacing": {"gap": 16, "padding": 20}
    }
  }
}
```

## 🚀 Next Steps

1. **Test the backend** with `python test_api.py`
2. **Modify the frontend** to use the new API
3. **Customize wireframe generation** by editing `app.py`
4. **Add more AI features** like layout optimization
5. **Deploy to production** with proper environment setup

## 📞 Support

If you encounter issues:
1. Check the console output for error messages
2. Verify your Claude API key is valid
3. Ensure all dependencies are installed
4. Check if port 5000 is available

Happy wireframing! 🎨✨
