Gauntlet-Incept MCP
by Birdsmith
import React, { useState } from 'react';
import axios from 'axios';
function CoursePage() {
const [formData, setFormData] = useState({
subject: 'math',
grade: '6',
title: '',
duration: 'semester',
standards: '',
objectives: '',
additionalInstructions: ''
});
const [generatedCourse, setGeneratedCourse] = 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,
title: formData.title,
duration: formData.duration
},
standards: formData.standards || undefined,
objectives: formData.objectives || undefined,
additionalInstructions: formData.additionalInstructions || undefined
};
// Make API request
const response = await axios.post('http://localhost:3000/api/course/generate', requestData);
setGeneratedCourse(response.data.data);
} catch (err) {
setError(err.response?.data?.error || 'An error occurred while generating the course');
} finally {
setLoading(false);
}
};
return (
<div className="course-page">
<h1>Generate Course Outlines</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 Arts</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>
<option value="computer_science">Computer Science</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="title">Course Title:</label>
<input
type="text"
id="title"
name="title"
value={formData.title}
onChange={handleChange}
placeholder="e.g., Introduction to Algebra, World History"
required
/>
</div>
<div className="form-group">
<label htmlFor="duration">Course Duration:</label>
<select
id="duration"
name="duration"
value={formData.duration}
onChange={handleChange}
required
>
<option value="quarter">Quarter (9 weeks)</option>
<option value="semester">Semester (18 weeks)</option>
<option value="year">Full Year (36 weeks)</option>
<option value="unit">Unit (4-6 weeks)</option>
</select>
</div>
<div className="form-group">
<label htmlFor="standards">Educational Standards (Optional):</label>
<textarea
id="standards"
name="standards"
value={formData.standards}
onChange={handleChange}
placeholder="List any specific standards this course should address (e.g., CCSS.Math.6.NS, NGSS.MS-PS1)"
rows="3"
></textarea>
</div>
<div className="form-group">
<label htmlFor="objectives">Learning Objectives (Optional):</label>
<textarea
id="objectives"
name="objectives"
value={formData.objectives}
onChange={handleChange}
placeholder="List key learning objectives for this course"
rows="3"
></textarea>
</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, teaching approaches, or focus areas"
rows="3"
></textarea>
</div>
<button type="submit" className="btn btn-primary" disabled={loading}>
{loading ? 'Generating...' : 'Generate Course Outline'}
</button>
</form>
</div>
{error && (
<div className="error-message">
<p>{error}</p>
</div>
)}
{generatedCourse && (
<div className="result-container">
<h2>Generated Course Outline</h2>
<div className="course-header">
<h3>{generatedCourse.title}</h3>
<p className="course-description">{generatedCourse.description}</p>
</div>
<div className="course-metadata">
<h3>Course Information</h3>
<ul>
<li><strong>Subject:</strong> {generatedCourse.metadata.subject}</li>
<li><strong>Grade Level:</strong> {generatedCourse.metadata.grade}</li>
<li><strong>Duration:</strong> {generatedCourse.metadata.duration}</li>
<li><strong>Total Units:</strong> {generatedCourse.units.length}</li>
</ul>
</div>
<div className="course-objectives">
<h3>Learning Objectives</h3>
<ul>
{generatedCourse.objectives.map((objective, index) => (
<li key={index}>{objective}</li>
))}
</ul>
</div>
<div className="course-standards">
<h3>Standards Addressed</h3>
<ul>
{generatedCourse.standards.map((standard, index) => (
<li key={index}>{standard}</li>
))}
</ul>
</div>
<div className="course-units">
<h3>Course Units</h3>
{generatedCourse.units.map((unit, unitIndex) => (
<div key={unitIndex} className="course-unit">
<h4>Unit {unitIndex + 1}: {unit.title}</h4>
<p>{unit.description}</p>
<div className="unit-lessons">
<h5>Lessons</h5>
<ol>
{unit.lessons.map((lesson, lessonIndex) => (
<li key={lessonIndex}>
<div className="lesson">
<h6>{lesson.title}</h6>
<p>{lesson.description}</p>
{lesson.activities && lesson.activities.length > 0 && (
<div className="lesson-activities">
<strong>Activities:</strong>
<ul>
{lesson.activities.map((activity, activityIndex) => (
<li key={activityIndex}>{activity}</li>
))}
</ul>
</div>
)}
{lesson.resources && lesson.resources.length > 0 && (
<div className="lesson-resources">
<strong>Resources:</strong>
<ul>
{lesson.resources.map((resource, resourceIndex) => (
<li key={resourceIndex}>{resource}</li>
))}
</ul>
</div>
)}
{lesson.assessment && (
<div className="lesson-assessment">
<strong>Assessment:</strong> {lesson.assessment}
</div>
)}
</div>
</li>
))}
</ol>
</div>
{unit.assessment && (
<div className="unit-assessment">
<h5>Unit Assessment</h5>
<p>{unit.assessment}</p>
</div>
)}
</div>
))}
</div>
{generatedCourse.resources && generatedCourse.resources.length > 0 && (
<div className="course-resources">
<h3>Course Resources</h3>
<ul>
{generatedCourse.resources.map((resource, index) => (
<li key={index}>{resource}</li>
))}
</ul>
</div>
)}
<div className="course-actions">
<button className="btn btn-secondary">Download as PDF</button>
<button className="btn btn-secondary">Export to Google Docs</button>
<button className="btn btn-secondary">Copy to Clipboard</button>
</div>
</div>
)}
</div>
);
}
export default CoursePage;