README.md•5.17 kB
# 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