Gauntlet-Incept MCP
by Birdsmith
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;