Website Generator MCP Server

A Model Context Protocol (MCP) server that provides website generation tools using free LLMs (Groq and Google Gemini).

Features

• Multiple LLM Providers: Support for Groq and Google Gemini APIs

• Component Generation: Generate HTML, CSS, and JavaScript separately or together

• Complete Website Generation: Create full websites with all components

• Model Selection: Choose specific models from each provider

• MCP Integration: Works with any MCP-compatible client (Claude, VS Code, etc.)

Available Tools

1. generate_html - Generate HTML content using AI

2. generate_css - Generate CSS styles using AI

3. generate_js - Generate JavaScript functionality using AI

4. generate_website - Generate complete website with all components

5. get_available_models - List available models for each provider

Setup

Prerequisites

• Node.js 18 or higher

• API keys for LLM providers:

  • Groq: Get free API key from console.groq.com

  • Gemini: Get free API key from Google AI Studio

Installation

1. Clone and install dependencies:

   git clone <repository-url> cd mcpserver npm install

2. Set up environment variables:

   # Create .env file or set environment variables export GROQ_API_KEY="your_groq_api_key_here" export GEMINI_API_KEY="your_gemini_api_key_here"

3. Build the project:

   npm run build

Running the Server

Development mode:

Production mode:

Watch mode (rebuilds on changes):

Configuration with MCP Clients

Claude Desktop

Add to your claude_desktop_config.json:

VS Code with MCP Extension

Add to your MCP configuration:

Usage Examples

Generate HTML

Generate Complete Website

Get Available Models

Supported LLM Providers

Groq (Free Tier)

• Models: Llama 3.3 70B, Llama 3.1 70B/8B, Mixtral 8x7B, Gemma2 9B

• Rate Limits: Generous free tier with high request limits

• Strengths: Fast inference, good code generation

Google Gemini (Free Tier)

• Models: Gemini 1.5 Flash, Gemini 1.5 Pro, Gemini 1.0 Pro

• Rate Limits: Free tier with good monthly quotas

• Strengths: Strong reasoning, multimodal capabilities

Architecture

Development

Project Structure

• src/index.ts: Main server with MCP tool definitions

• src/types.ts: TypeScript interfaces for type safety

• src/llm/: LLM provider implementations

• build/: Compiled JavaScript output

Adding New Providers

1. Create new file in src/llm/

2. Implement WebsiteGenerator interface

3. Add to provider enum in tools

4. Update documentation

Testing

Use the MCP Inspector for testing:

Environment Variables

*At least one API key is required for the server to function.

Error Handling

The server includes comprehensive error handling:

• API key validation on startup

• Rate limit handling with retries

• Network error recovery

• Invalid input validation

• Graceful error responses to MCP clients

License

MIT License - see LICENSE file for details.

Contributing

1. Fork the repository

2. Create feature branch

3. Make changes with tests

4. Submit pull request

Support

For issues and questions:

• Check the MCP Documentation

• Review provider API documentation

• Open GitHub issues for bugs