# 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](https://console.groq.com)
  - **Gemini**: Get free API key from [Google AI Studio](https://aistudio.google.com)

### Installation

1. **Clone and install dependencies:**
   ```bash
   git clone <repository-url>
   cd mcpserver
   npm install
   ```

2. **Set up environment variables:**
   ```bash
   # 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:**
   ```bash
   npm run build
   ```

### Running the Server

**Development mode:**
```bash
npm run dev
```

**Production mode:**
```bash
npm start
```

**Watch mode (rebuilds on changes):**
```bash
npm run watch
```

## Configuration with MCP Clients

### Claude Desktop

Add to your `claude_desktop_config.json`:

```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:

```json
{
  "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:
```bash
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](https://modelcontextprotocol.io)
- Review provider API documentation
- Open GitHub issues for bugs