Integrates with Google Gemini API to generate HTML, CSS, JavaScript, and complete websites using AI models like Gemini 1.5 Flash, Gemini 1.5 Pro, and Gemini 1.0 Pro
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
- generate_html - Generate HTML content using AI
- generate_css - Generate CSS styles using AI
- generate_js - Generate JavaScript functionality using AI
- generate_website - Generate complete website with all components
- 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
- Clone and install dependencies:
- Set up environment variables:
- Build the project:
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
- Create new file in
src/llm/
- Implement
WebsiteGenerator
interface - Add to provider enum in tools
- Update documentation
Testing
Use the MCP Inspector for testing:
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
- Fork the repository
- Create feature branch
- Make changes with tests
- Submit pull request
Support
For issues and questions:
- Check the MCP Documentation
- Review provider API documentation
- Open GitHub issues for bugs
This server cannot be installed
remote-capable server
The server can be hosted and run remotely because it primarily relies on remote services or has no dependency on the local environment.
Generates HTML, CSS, JavaScript components and complete websites using free LLMs (Groq and Google Gemini). Supports multiple AI models for creating web content through natural language prompts.