README.md•3.02 kB
# 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
```