FrontendLeap MCP Server

# 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 ```