FrontendLeap MCP Server

Instructions

Implementation Reference

• src/index.ts:90-186 (handler)

  The handler logic for 'create_challenge' tool call. It extracts arguments, makes an authenticated POST request to the FrontendLeap API to create the challenge, parses the response, and returns a rich text response with the new challenge's URL or an error message.
  if (name === "create_challenge") { try { if (!args) { throw new Error("Missing arguments for challenge creation"); } const challengeData = args as { title: string; description: string; explanation: string; starter_code: string; test_code: string; solution?: string; language: string; difficulty: string; }; console.error(`🚀 Creating challenge: ${challengeData.title} (${challengeData.difficulty}, ${challengeData.language})`); const response = await fetch(`${FRONTENDLEAP_API_URL}/api/mcp/challenges/create`, { method: 'POST', headers: { 'Content-Type': 'application/json', 'Authorization': `Bearer ${FRONTENDLEAP_API_KEY}`, 'User-Agent': 'FrontendLeap-MCP-Server/0.1.0' }, body: JSON.stringify(challengeData), // Bypass SSL verification for local development agent: FRONTENDLEAP_API_URL.includes('.test') || FRONTENDLEAP_API_URL.includes('localhost') ? httpsAgent : undefined }); if (!response.ok) { const errorText = await response.text(); throw new Error(`API request failed: ${response.status} ${response.statusText} - ${errorText}`); } const data = await response.json() as { success: boolean; error?: string; challenge_url: string; challenge: { id: number; title: string; slug: string; difficulty: string; language: string; }; }; if (!data.success) { throw new Error(data.error || 'Challenge generation failed'); } console.error(`✅ Challenge created: ${data.challenge.title}`); return { content: [ { type: "text", text: `🎯 **Challenge Created Successfully!** **${data.challenge.title}** - **Difficulty:** ${challengeData.difficulty} - **Language:** ${challengeData.language} 🔗 **Access your challenge here:** ${data.challenge_url} Your custom coding challenge is ready! The challenge includes: - Claude-generated explanation and learning objectives - Contextually relevant starter code - Comprehensive test cases - Interactive Monaco code editor The challenge is now live and ready for users to solve!` } ] }; } catch (error) { const errorMessage = error instanceof Error ? error.message : 'Unknown error occurred'; console.error(`❌ Error creating challenge: ${errorMessage}`); return { content: [ { type: "text", text: `❌ **Error creating challenge** ${errorMessage} Please try again or check if the FrontendLeap API is accessible.` } ], isError: true }; } }
• src/index.ts:41-80 (schema)

  Defines the JSON input schema for the 'create_challenge' tool, including all properties, descriptions, enums for language and difficulty, and required fields.
  inputSchema: { type: "object", properties: { title: { type: "string", description: "The challenge title (e.g., 'Advanced CSS Flexbox Centering Challenge')" }, description: { type: "string", description: "Brief description of what the challenge teaches" }, explanation: { type: "string", description: "Detailed markdown explanation of the concept, including examples and learning objectives" }, starter_code: { type: "string", description: "The initial code template that users start with - should be relevant to the challenge" }, test_code: { type: "string", description: "JavaScript test code (using Jasmine) that validates the user's solution" }, solution: { type: "string", description: "Optional markdown explanation of the solution approach and key concepts" }, language: { type: "string", enum: ["javascript", "html", "css", "typescript"], description: "Programming language for the challenge" }, difficulty: { type: "string", enum: ["beginner", "intermediate", "advanced"], description: "Challenge difficulty level" } }, required: ["title", "description", "explanation", "starter_code", "test_code", "language", "difficulty"] }
• src/index.ts:35-84 (registration)

  Registers the 'create_challenge' tool by defining it in the ListToolsRequestHandler response, including its name, description, and input schema.
  server.setRequestHandler(ListToolsRequestSchema, async () => { return { tools: [ { name: "create_challenge", description: "Create a complete coding challenge with all content generated by Claude and save it to FrontendLeap", inputSchema: { type: "object", properties: { title: { type: "string", description: "The challenge title (e.g., 'Advanced CSS Flexbox Centering Challenge')" }, description: { type: "string", description: "Brief description of what the challenge teaches" }, explanation: { type: "string", description: "Detailed markdown explanation of the concept, including examples and learning objectives" }, starter_code: { type: "string", description: "The initial code template that users start with - should be relevant to the challenge" }, test_code: { type: "string", description: "JavaScript test code (using Jasmine) that validates the user's solution" }, solution: { type: "string", description: "Optional markdown explanation of the solution approach and key concepts" }, language: { type: "string", enum: ["javascript", "html", "css", "typescript"], description: "Programming language for the challenge" }, difficulty: { type: "string", enum: ["beginner", "intermediate", "advanced"], description: "Challenge difficulty level" } }, required: ["title", "description", "explanation", "starter_code", "test_code", "language", "difficulty"] } } ] }; });