Frontendleap MCP Challenge

🚀 FrontendLeap MCP Server

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

🚀 Quick Start

The FrontendLeap MCP Server is a powerful tool that allows Claude and other AI assistants to generate personalized coding challenges. Here's how you can get started.

✨ Features

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

📦 Installation

1. Install dependencies:

   npm install
   

2. Configure environment:

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

3. Build the server:

   npm run build
   

💻 Usage Examples

With Claude Desktop

Add the following 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

Basic 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!

🔧 Technical Details

Development

# Run in development mode
npm run dev

# Build for production
npm run build

# Start production server
npm start