create_challenge

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"]
          }
        }
      ]
    };
  });