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

# 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

// Create website from template
{
  "name": "create_website",
  "arguments": {
    "name": "my-portfolio",
    "template": "portfolio", 
    "title": "My Portfolio",
    "description": "Showcasing my work"
  }
}

Excel-Powered Websites

// 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

# 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

{
  "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 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