An interactive presentation and learning platform demonstrating how AI-powered tools can help educators create engaging educational materials about cutting-edge AI concepts.
MCP Explorer is a narrative-driven interactive learning experience designed to teach high school students (ages 14-18) about Anthropic's Model Context Protocol (MCP) without requiring any technical background. This project serves dual purposes:
- Primary Goal: Make advanced AI concepts accessible to students through an engaging 10-15 minute interactive module
- Secondary Goal: Demonstrate how AI-assisted development tools can empower educators to rapidly create sophisticated learning experiences
- Interactive Learning Platform: mcp-explorer.vercel.app
- Presentation Mode: Add
?presentation=trueto the URL for slideshow navigation
- Narrative-Driven Learning: Students follow Sam, a relatable high school character, through real-world scenarios
- Interactive Playground: Hands-on experimentation with toggleable MCP servers to understand context in AI
- Zero Prerequisites: Designed for complete beginners with no technical background
- Research-Backed Pedagogy: Incorporates cognitive load theory, constructivist learning, and scaffolding techniques
- AI-Powered Development: Built using AI-assisted development tools to demonstrate rapid content creation
The platform implements four key pedagogical approaches:
- Narrative-Driven Learning: Story-based scenarios with relatable characters and real-world problems
- Cognitive Load Theory: Progressive disclosure of information to prevent cognitive overload
- Constructivist Learning: Active exploration through interactive exercises and playground
- Scaffolding: Gradual reduction of support as learners progress through the material
neurips-presentation/
├── presentation/ # Main React application
│ ├── src/
│ ├── public/
│ └── package.json
└── README.md
- Node.js (v16 or higher)
- npm or yarn
- Clone the repository:
git clone <repository-url>
cd neurips-presentation/presentation- Install dependencies:
npm install- Start the development server:
npm run dev- Open http://localhost:5173 in your browser
To view the presentation with navigation controls optimized for presenting:
http://localhost:5173?presentation=true
- React - UI framework
- TypeScript - Type-safe development
- Tailwind CSS - Styling and design system
- Three.js / React Three Fiber - 3D visualizations
- Vite - Build tool and development server
This project addresses a critical challenge in AI education: How do we keep pace with AI evolution while helping learners stay current and engaged?
Key challenges addressed:
- Rapid Innovation: New AI concepts emerge faster than traditional curriculum cycles
- Student Engagement: Learners need relevant, current content with real-world applications
- Educator Capacity: Teachers must balance staying current while managing existing responsibilities
-
Racing Against Evolution: Technology advances faster than traditional curriculum cycles, highlighting the urgent need to empower educators with rapid content creation tools
-
Sprinkle Some Stories: Narrative-driven learning made easy—AI can be a powerful writing partner for creating engaging, relatable content
-
Partner with SMEs: AI-generated errors are a concern, but AI also makes it easier to collaborate with subject matter experts to build better educational materials faster
- High school students (ages 14-18)
- No prior technical or programming background required
- Interest in learning about AI and emerging technologies
10-15 minute interactive learning experience
- Sherry Ruan
- Joyce He
MIT License - Free for educational use
This project was developed for NeurIPS 2025 Education Materials track, demonstrating how AI-assisted development tools can empower educators to create sophisticated, interactive learning experiences rapidly and effectively.
NeurIPS 2025 Education Materials | Built with AI-assisted development tools