Gauntlet-Incept MCP

import React, { useState } from 'react'; import axios from 'axios'; function QuestionPage() { const [formData, setFormData] = useState({ subject: 'math', grade: '6', standard: '', lesson: '', difficulty: '2', exampleQuestion: '' }); const [generatedQuestion, setGeneratedQuestion] = useState(null); const [loading, setLoading] = useState(false); const [error, setError] = useState(null); const handleChange = (e) => { const { name, value } = e.target; setFormData({ ...formData, [name]: value }); }; const handleSubmit = async (e) => { e.preventDefault(); setLoading(true); setError(null); try { // Prepare request data const requestData = { tags: { subject: formData.subject, grade: formData.grade, standard: formData.standard, lesson: formData.lesson, difficulty: parseInt(formData.difficulty) } }; if (formData.exampleQuestion) { requestData.exampleQuestion = formData.exampleQuestion; } // Make API request const response = await axios.post('http://localhost:3000/api/question/generate', requestData); setGeneratedQuestion(response.data.data); } catch (err) { setError(err.response?.data?.error || 'An error occurred while generating the question'); } finally { setLoading(false); } }; return ( <div className="question-page"> <h1>Generate Educational Questions</h1> <div className="form-container"> <form onSubmit={handleSubmit}> <div className="form-group"> <label htmlFor="subject">Subject:</label> <select id="subject" name="subject" value={formData.subject} onChange={handleChange} required > <option value="math">Math</option> <option value="language">Language</option> <option value="science">Science</option> <option value="social_studies">Social Studies</option> </select> </div> <div className="form-group"> <label htmlFor="grade">Grade Level:</label> <select id="grade" name="grade" value={formData.grade} onChange={handleChange} required > {[...Array(9).keys()].map(i => ( <option key={i} value={i === 0 ? 'K' : i.toString()}> {i === 0 ? 'Kindergarten' : `Grade ${i}`} </option> ))} </select> </div> <div className="form-group"> <label htmlFor="standard">Standard:</label> <input type="text" id="standard" name="standard" value={formData.standard} onChange={handleChange} placeholder="e.g., CCSS.Math.6.NS.1" /> </div> <div className="form-group"> <label htmlFor="lesson">Lesson:</label> <input type="text" id="lesson" name="lesson" value={formData.lesson} onChange={handleChange} placeholder="e.g., Division of Fractions" /> </div> <div className="form-group"> <label htmlFor="difficulty">Difficulty Level:</label> <select id="difficulty" name="difficulty" value={formData.difficulty} onChange={handleChange} required > <option value="1">Easy</option> <option value="2">Medium</option> <option value="3">Hard</option> </select> </div> <div className="form-group"> <label htmlFor="exampleQuestion">Example Question (Optional):</label> <textarea id="exampleQuestion" name="exampleQuestion" value={formData.exampleQuestion} onChange={handleChange} placeholder="Paste an example question here to generate a similar one" rows="5" ></textarea> </div> <button type="submit" className="btn btn-primary" disabled={loading}> {loading ? 'Generating...' : 'Generate Question'} </button> </form> </div> {error && ( <div className="error-message"> <p>{error}</p> </div> )} {generatedQuestion && ( <div className="result-container"> <h2>Generated Question</h2> <div className="question-content"> <pre>{generatedQuestion.question}</pre> </div> <div className="question-metadata"> <h3>Metadata</h3> <ul> <li><strong>Subject:</strong> {generatedQuestion.tags.subject}</li> <li><strong>Grade:</strong> {generatedQuestion.tags.grade}</li> <li><strong>Standard:</strong> {generatedQuestion.tags.standard}</li> <li><strong>Lesson:</strong> {generatedQuestion.tags.lesson}</li> <li><strong>Difficulty:</strong> {generatedQuestion.tags.difficulty}</li> </ul> </div> <div className="question-quality"> <h3>Quality Assessment</h3> <p><strong>Overall:</strong> {generatedQuestion.gradeResult.pass ? 'Passed' : 'Failed'}</p> <div className="scorecard"> {Object.entries(generatedQuestion.gradeResult.scorecard).map(([criterion, passed]) => ( <div key={criterion} className={`criterion ${passed ? 'passed' : 'failed'}`}> <span className="criterion-name">{criterion}</span> <span className="criterion-result">{passed ? '✓' : '✗'}</span> </div> ))} </div> <div className="feedback"> <h4>Feedback</h4> <p>{generatedQuestion.gradeResult.feedback}</p> </div> </div> </div> )} </div> ); } export default QuestionPage;