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

Related MCP server: MCP Python Toolbox

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!