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

Fork the repository
Create feature branch (git checkout -b feature/amazing-feature)
Commit changes (git commit -m 'Add amazing feature')
Push to branch (git push origin feature/amazing-feature)
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