# Website Builder MCP Server

A Model Context Protocol (MCP) server for automated website generation with Excel data integration.

## 🚀 Features

- ✅ **Multiple Website Templates** - Portfolio, blog, catalog, directory
- ✅ **Excel Data Integration** - Build websites directly from Excel files  
- ✅ **Component Generation** - Navbar, hero, cards, forms with multiple styles
- ✅ **Responsive Design** - Modern CSS framework with mobile support
- ✅ **MCP Protocol** - Full Model Context Protocol server implementation
- ✅ **Automated Pages** - Generate individual pages from Excel rows

## 📊 Excel Integration

Transform Excel spreadsheets into complete websites:

### **Product Catalog** 📦
- **Excel Format:** Product Name, Description, Price, Category, Image
- **Generates:** Product grid, individual product pages, category filtering
- **Perfect for:** E-commerce sites, inventory displays

### **Staff Directory** 👥  
- **Excel Format:** Name, Title, Department, Email, Phone, Bio
- **Generates:** Team overview, individual profiles, department pages
- **Perfect for:** Company websites, organization directories

### **Portfolio Sites** 💼
- **Excel Format:** Project Name, Description, Technologies, Link, Status
- **Generates:** Project showcase, technology filtering, project details
- **Perfect for:** Developer portfolios, agency showcases

### **Custom Data Sites** 📋
- **Excel Format:** Any structured data
- **Generates:** Data tables, searchable listings, custom layouts
- **Perfect for:** Reports, listings, catalogs

## 🛠️ Installation

```bash
# Clone the repository
git clone https://github.com/pmkhairnarr/website-builder-mcp.git
cd website-builder-mcp

# Install dependencies
npm install

# Start the MCP server
npm start
```

## 📝 Usage

### Basic Website Creation
```javascript
// Create website from template
{
  "name": "create_website",
  "arguments": {
    "name": "my-portfolio",
    "template": "portfolio", 
    "title": "My Portfolio",
    "description": "Showcasing my work"
  }
}
```

### Excel-Powered Websites
```javascript
// Build from Excel file
{
  "name": "build_from_excel",
  "arguments": {
    "excelFile": "./examples/sample-products.xlsx",
    "template": "catalog",
    "siteName": "product-catalog",
    "sheetName": "Products"
  }
}
```

## 📂 Project Structure

```
website-builder-mcp/
├── server.js              # Main MCP server
├── package.json           # Dependencies & scripts  
├── templates/             # HTML/CSS templates
│   ├── base.html         # Base page template
│   └── styles.css        # Responsive CSS framework
├── examples/              # Sample Excel files
│   ├── sample-products.xlsx
│   ├── sample-directory.xlsx
│   └── sample-portfolio.xlsx
├── websites/              # Generated websites
└── tests/                 # Test files
```

## 🔧 Available Tools

### Core Tools
- **`create_website`** - Create from templates
- **`add_page`** - Add pages to existing sites
- **`generate_component`** - Create HTML components
- **`list_websites`** - List all created sites

### Excel Tools  
- **`build_from_excel`** - Generate complete sites from Excel data

## 📋 Excel File Format

### Product Catalog Example
| Product Name | Description | Price | Category | Image | In Stock |
|--------------|-------------|-------|----------|-------|----------|
| Wireless Headphones | High-quality wireless... | $199.99 | Electronics | image.jpg | Yes |

### Staff Directory Example
| Name | Title | Department | Email | Phone | Bio |
|------|-------|------------|-------|-------|-----|
| John Smith | Software Engineer | Engineering | john@company.com | 555-0101 | Experienced developer... |

### Portfolio Example  
| Project Name | Description | Technologies | Link | Status |
|--------------|-------------|--------------|------|---------|
| E-commerce Platform | Full-stack solution... | React, Node.js | github.com/... | Completed |

## 🧪 Testing

```bash
# Test Excel integration
npm run test:excel

# Test MCP server
npm test

# Run direct functionality test  
node direct-test.js
```

## 🌐 Generated Websites

Websites are created in the `websites/` directory with:
- **Responsive HTML** pages
- **Modern CSS** styling  
- **Site configuration** (site.json)
- **Navigation** between pages
- **Mobile-friendly** design

## 🔗 MCP Integration

Use with MCP-compatible clients:
- **VS Code with MCP extension**
- **Claude Desktop**
- **Custom MCP clients**

## 📖 API Documentation

### MCP Server Configuration
```json
{
  "mcpServers": {
    "website-builder": {
      "command": "node",
      "args": ["server.js"],
      "cwd": "./website-builder-mcp"
    }
  }
}
```

## 🤝 Contributing

1. Fork the repository
2. Create feature branch (`git checkout -b feature/amazing-feature`)
3. Commit changes (`git commit -m 'Add amazing feature'`)
4. Push to branch (`git push origin feature/amazing-feature`)
5. Open Pull Request

## 📄 License

This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.

## 🎯 Use Cases

- **Business Websites** - Generate company sites from employee data
- **Product Showcases** - Create catalogs from inventory spreadsheets  
- **Portfolio Sites** - Build project showcases from work data
- **Directory Sites** - Create searchable listings from contact data
- **Report Sites** - Transform data reports into web presentations

## 🚀 Advanced Features

- **Automatic slug generation** for SEO-friendly URLs
- **Responsive grid layouts** for all device sizes
- **Smart column detection** for Excel processing
- **Template customization** for brand consistency
- **Batch processing** for large datasets
- **Error handling** with detailed feedback

---

**Built with ❤️ for the AI Development Community**