Skip to main content
Glama

Website Generator MCP Server

by lasindu-themiya
GitHub
TypeScript
OverviewInspectNewEndpointsSchemaRelated ServersReviewsScore
Need Help?View Source CodeReport Issue

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

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

This server cannot be installed

-
security - not tested
F
license - not found
-
quality - not tested

How are these scores calculated?

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.

  1. Features
    1. Available Tools
      1. Setup
        1. Prerequisites
        2. Installation
        3. Running the Server
      2. Configuration with MCP Clients
        1. Claude Desktop
        2. VS Code with MCP Extension
      3. Usage Examples
        1. Generate HTML
        2. Generate Complete Website
        3. Get Available Models
      4. Supported LLM Providers
        1. Groq (Free Tier)
        2. Google Gemini (Free Tier)
      5. Architecture
        1. Development
          1. Project Structure
          2. Adding New Providers
          3. Testing
        2. Environment Variables
          1. Error Handling
            1. License
              1. Contributing
                1. Support

                  Appeared in Searches

                  New MCP Servers

                  MCP directory API

                  We provide all the information about MCP servers via our MCP API.

                  curl -X GET 'https://glama.ai/api/mcp/v1/servers/lasindu-themiya/mcpwebgenerator'

                  If you have feedback or need assistance with the MCP directory API, please join our Discord server