# FrontendLeap MCP Server

A Model Context Protocol (MCP) server that enables Claude and other AI assistants to generate personalized coding challenges from FrontendLeap.

## Features

- 🧠 **Claude-Powered Content**: All challenge content (explanations, starter code, tests) generated by Claude based on conversation context
- 🎯 **Fully Customized Challenges**: No templates - every challenge is unique and contextually relevant
- 🔒 **Secure Authentication**: Uses API key authentication with your FrontendLeap instance
- 🌐 **Multi-language Support**: JavaScript, TypeScript, HTML, and CSS challenges
- ⚡ **Instant Creation**: Claude generates complete challenges and saves them directly to your platform

## Installation

1. **Install dependencies:**

   ```bash
   npm install
   ```

2. **Configure environment:**

   ```bash
   cp .env.example .env
   # Edit .env and add your FRONTENDLEAP_API_KEY
   ```

3. **Build the server:**
   ```bash
   npm run build
   ```

## Usage

### With Claude Desktop

Add this to your Claude Desktop MCP configuration:

```json
{
  "mcpServers": {
    "frontendleap": {
      "command": "node",
      "args": ["/path/to/frontendleap-mcp-server/dist/index.js"],
      "env": {
        "FRONTENDLEAP_API_KEY": "YOUR_API_KEY",
        "FRONTENDLEAP_API_URL": "https://fl.test"
      }
    }
  }
}
```

### Available Tools

- **`create_challenge`**: Create a complete coding challenge with Claude-generated content
  - `title` (required): Challenge title
  - `description` (required): Brief description of what the challenge teaches
  - `explanation` (required): Detailed markdown explanation with learning objectives
  - `starter_code` (required): Initial code template relevant to the challenge
  - `test_code` (required): JavaScript test code (Jasmine) that validates solutions
  - `solution` (optional): Markdown explanation of the solution approach
  - `language` (required): javascript, typescript, html, or css
  - `difficulty` (required): beginner, intermediate, or advanced

## Example Usage

```
User: "I want to learn CSS Grid layout, specifically how to create a responsive card grid"

Claude: I'll create a comprehensive CSS Grid challenge for you with detailed explanations and practical examples.

[Claude generates complete challenge content and calls create_challenge]

Claude: 🎯 Challenge Created Successfully!
**CSS Grid Layout Mastery**
- Difficulty: intermediate
- Language: css

🔗 Access your challenge here: https://fl.test/desafios/css-grid-layout-mastery

Your custom coding challenge is ready! The challenge includes:
- Claude-generated explanation and learning objectives
- Contextually relevant starter code (.grid-container with proper setup)
- Comprehensive test cases (validates grid properties)
- Interactive Monaco code editor

The challenge is now live and ready for users to solve!
```

## Development

```bash
# Run in development mode
npm run dev

# Build for production
npm run build

# Start production server
npm start
```