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

Install dependencies:
```
npm install
```

Configure environment:

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

Build the server:
```
npm run build
```

Usage

With Claude Desktop

Add this to your Claude Desktop MCP configuration:

{
  "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

# Run in development mode
npm run dev

# Build for production
npm run build

# Start production server
npm start

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

Usage

With Claude Desktop

Add this to your Claude Desktop MCP configuration:

{ "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!