Gauntlet-Incept MCP

import React, { useState } from 'react'; import axios from 'axios'; function ArticlePage() { const [formData, setFormData] = useState({ subject: 'math', grade: '6', topic: '', length: 'medium', tone: 'educational', additionalInstructions: '' }); const [generatedArticle, setGeneratedArticle] = 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 = { metadata: { subject: formData.subject, grade: formData.grade, topic: formData.topic, length: formData.length, tone: formData.tone }, additionalInstructions: formData.additionalInstructions || undefined }; // Make API request const response = await axios.post('http://localhost:3000/api/article/generate', requestData); setGeneratedArticle(response.data.data); } catch (err) { setError(err.response?.data?.error || 'An error occurred while generating the article'); } finally { setLoading(false); } }; return ( <div className="article-page"> <h1>Generate Educational Articles</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> <option value="art">Art</option> <option value="music">Music</option> <option value="physical_education">Physical Education</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(13).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="topic">Topic:</label> <input type="text" id="topic" name="topic" value={formData.topic} onChange={handleChange} placeholder="e.g., Photosynthesis, American Revolution" required /> </div> <div className="form-group"> <label htmlFor="length">Article Length:</label> <select id="length" name="length" value={formData.length} onChange={handleChange} required > <option value="short">Short (300-500 words)</option> <option value="medium">Medium (500-800 words)</option> <option value="long">Long (800-1200 words)</option> </select> </div> <div className="form-group"> <label htmlFor="tone">Tone:</label> <select id="tone" name="tone" value={formData.tone} onChange={handleChange} required > <option value="educational">Educational</option> <option value="conversational">Conversational</option> <option value="enthusiastic">Enthusiastic</option> <option value="formal">Formal</option> <option value="storytelling">Storytelling</option> </select> </div> <div className="form-group"> <label htmlFor="additionalInstructions">Additional Instructions (Optional):</label> <textarea id="additionalInstructions" name="additionalInstructions" value={formData.additionalInstructions} onChange={handleChange} placeholder="Any specific requirements or focus areas for the article" rows="4" ></textarea> </div> <button type="submit" className="btn btn-primary" disabled={loading}> {loading ? 'Generating...' : 'Generate Article'} </button> </form> </div> {error && ( <div className="error-message"> <p>{error}</p> </div> )} {generatedArticle && ( <div className="result-container"> <h2>Generated Article</h2> <div className="article-title"> <h3>{generatedArticle.title}</h3> </div> <div className="article-content"> {generatedArticle.content.split('\n\n').map((paragraph, index) => ( <p key={index}>{paragraph}</p> ))} </div> <div className="article-metadata"> <h3>Metadata</h3> <ul> <li><strong>Subject:</strong> {generatedArticle.metadata.subject}</li> <li><strong>Grade:</strong> {generatedArticle.metadata.grade}</li> <li><strong>Topic:</strong> {generatedArticle.metadata.topic}</li> <li><strong>Word Count:</strong> {generatedArticle.wordCount}</li> <li><strong>Reading Level:</strong> {generatedArticle.readingLevel}</li> </ul> </div> {generatedArticle.keyPoints && ( <div className="article-key-points"> <h3>Key Points</h3> <ul> {generatedArticle.keyPoints.map((point, index) => ( <li key={index}>{point}</li> ))} </ul> </div> )} {generatedArticle.discussionQuestions && ( <div className="article-discussion-questions"> <h3>Discussion Questions</h3> <ol> {generatedArticle.discussionQuestions.map((question, index) => ( <li key={index}>{question}</li> ))} </ol> </div> )} <div className="article-actions"> <button className="btn btn-secondary">Download as PDF</button> <button className="btn btn-secondary">Copy to Clipboard</button> </div> </div> )} </div> ); } export default ArticlePage;