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:

npm run dev

Production mode:

npm start

Watch mode (rebuilds on changes):

npm run watch

Configuration with MCP Clients

Claude Desktop

Add to your claude_desktop_config.json:

{
  "mcpServers": {
    "website-generator": {
      "command": "node",
      "args": ["/absolute/path/to/mcpserver/build/index.js"],
      "env": {
        "GROQ_API_KEY": "your_groq_api_key",
        "GEMINI_API_KEY": "your_gemini_api_key"
      }
    }
  }
}

VS Code with MCP Extension

Add to your MCP configuration:

{
  "name": "website-generator",
  "command": "node",
  "args": ["/absolute/path/to/mcpserver/build/index.js"],
  "env": {
    "GROQ_API_KEY": "your_groq_api_key",
    "GEMINI_API_KEY": "your_gemini_api_key"
  }
}

Usage Examples

Generate HTML

Use the generate_html tool with:
- prompt: "Create a modern landing page for a tech startup"
- provider: "groq" (optional, defaults to groq)
- model: "llama-3.3-70b-versatile" (optional)

Generate Complete Website

Use the generate_website tool with:
- prompt: "Build a portfolio website for a web developer"
- provider: "gemini" (optional)
- includeJs: true (optional, defaults to true)

Get Available Models

Use the get_available_models tool to see:
- Groq: llama-3.3-70b-versatile, llama-3.1-70b-versatile, llama-3.1-8b-instant, etc.
- Gemini: gemini-1.5-flash, gemini-1.5-pro, gemini-1.0-pro

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

src/
├── index.ts           # Main MCP server entry point
├── types.ts           # TypeScript interfaces
└── llm/
    ├── groq.ts        # Groq LLM integration
    └── gemini.ts      # Gemini LLM integration

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:

npx @modelcontextprotocol/inspector node build/index.js

Environment Variables

Variable	Required	Description
GROQ_API_KEY	Optional*	API key for Groq (required if using Groq)
GEMINI_API_KEY	Optional*	API key for Gemini (required if using Gemini)

*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