https://github.com/codestackr/ai-tutor
https://github.com/codestackr/ai-tutor
Last synced: 9 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/codestackr/ai-tutor
- Owner: codeSTACKr
- Created: 2025-08-13T01:07:28.000Z (9 months ago)
- Default Branch: main
- Last Pushed: 2025-08-13T01:24:50.000Z (9 months ago)
- Last Synced: 2025-08-13T03:26:08.263Z (9 months ago)
- Language: TypeScript
- Size: 126 KB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# AI Tutor Demo - Interactive Flashcard Learning Platform
## Overview
Claude generates **interactive UI components as educational content** - transforming chat into a personalized tutoring platform. Instead of text responses, Claude creates functional flashcards, multiple-choice questions, and adaptive learning experiences as React components within the conversation.
**Why It's Compelling**: Demonstrates Claude's generative UI capabilities, sophisticated tool orchestration, and educational intelligence on a production-ready stack (Next.js 15, MongoDB, better-auth).
## Video Walkthrough
[](http://www.youtube.com/watch?v=goxnUKwwf-I)
## Setup & Running
**Prerequisites**: Node.js 18+, MongoDB database, Anthropic API key
1. **Install**: `npm install`
2. **Environment**: Create `.env.local` with:
```env
ANTHROPIC_API_KEY=your_claude_api_key
MONGODB_URI=your_mongodb_connection_string
BETTER_AUTH_SECRET=your_secret_key
BETTER_AUTH_URL=http://localhost:3000
```
3. **Run**: `npm run dev` → http://localhost:3000
4. **Try**: Login → Tutor page → "Create flashcards for Python basics"
## Technical Approach
**Core Innovation**: Claude generates interactive React components as educational responses, not just text. Educational content works best when interactive.
**Key Decisions**:
- **AI Elements + Tool Calls**: Vercel AI SDK v5 with structured educational content generation
- **Production Stack**: Next.js 15, MongoDB, better-auth for real-world integration patterns
- **Educational Intelligence**: Claude understands pedagogy, creates progressive difficulty, adapts to responses
**Why This Demo**: Education tech + Claude's advanced capabilities (tool orchestration, context awareness, structured output) = compelling developer use case with clear market opportunity.
## Why Builders Will Want This
**Immediate Appeal**: Every developer wants to learn something - AI generates content they'd actually use (flashcards, quizzes, interactive lessons).
**Clear Extensions**: Code challenges, LMS integration, domain-specific tutors (interview prep, certifications), collaborative learning.
**Technical Value**: Production-ready patterns for AI-enhanced UX, sophisticated prompt engineering, proven ed-tech market opportunity.
## How I Used Claude
**Key Insight**: Asked Claude to focus on generative UI - creating React components as educational responses vs. traditional text tutoring.
**Breakthrough**: Structuring educational content as tool calls enabled interactive components within chat.
**Development Process**:
1. Migrated todo app → educational platform
2. Designed tools for different content types (flashcards, multiple choice)
3. Refined with pedagogical principles
**Technical Discoveries**:
- Prompt: "teach like a great educator" >> generic requests
- Tool parameters need flexibility + educational effectiveness balance
- Graceful degradation essential for robust AI generation
## Future Improvements
**Next Phase**: Adaptive difficulty, analytics dashboard, hint system, mastery tracking
**Advanced**: Code challenges with live execution, collaborative learning, PDF import, mobile app, voice integration
**Technical**: Redis caching, A/B testing, detailed analytics, accessibility enhancements
## Current Features
✅ Interactive chat with educational focus
✅ Multiple flashcard types (Q&A, multiple choice)
✅ Persistent learning sessions
✅ Session management and history
✅ Real-time AI content generation
✅ User authentication
**Try**: "Create flashcards for Python basics" or "Quiz me on React hooks"
---
Ready to see Claude teach? This functional learning platform demonstrates interactive AI tutoring potential.