# 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**
