📚 Educational Visualizer

An interactive educational platform that combines AI-powered explanations with dynamic visualizations. Ask any math, physics, or science question and get both a clear explanation and an interactive visualization generated in real-time by Claude AI.

🎯 Features

• AI-Powered Explanations: Get clear, concise explanations using Claude's advanced language model
• Dynamic Visualizations: Automatically generated React components for interactive learning
• Real-time Code Generation: Claude generates complete, runnable visualization code on-the-fly
• Safe Code Execution: Isolated iframe sandbox for secure code rendering
• Multiple Domains: Supports geometry, algebra, physics, calculus, and more
• Interactive UI: Beautiful split-panel interface with chat and visualization side-by-side

🏗️ Architecture

Backend (FastAPI)

• FastAPI REST API with CORS support
• Integration with Anthropic's Claude API
• Structured prompt engineering for consistent visualization generation
• JSON response format with explanation, code, and metadata

Frontend (React)

• Split-panel layout: Chat interface + Visualization canvas
• Safe code execution using iframe sandboxing
• Real-time rendering of AI-generated React components
• Support for Recharts, Three.js, and SVG visualizations
• Code viewer with syntax highlighting

🚀 Getting Started

Prerequisites

• Python 3.8+ (for backend)
• Node.js 16+ (for frontend)
• Anthropic API key (Get one here)

Backend Setup

1. Navigate to backend directory

   cd backend

2. Create virtual environment

   python -m venv venv
   source venv/bin/activate  # On Windows: venv\Scripts\activate

3. Install dependencies

   pip install -r requirements.txt

4. Set up environment variables

   cp .env.example .env
   # Edit .env and add your ANTHROPIC_API_KEY

5. Run the backend server

   python main.py

   The API will be available at http://localhost:8000

Frontend Setup

1. Navigate to frontend directory

   cd frontend

2. Install dependencies

   npm install

3. Start the development server

   npm start

   The app will open at http://localhost:3000

🎓 Example Questions to Try

Geometry

• "Explain the Pythagorean theorem"
• "Show me how the unit circle works"
• "Visualize the area of a circle"

Algebra

• "Graph a quadratic equation"
• "Show me linear vs exponential growth"
• "Visualize slope and y-intercept"

Physics

• "Show projectile motion"
• "Visualize simple harmonic motion"
• "Demonstrate Newton's second law"

Calculus

• "Show what a derivative means"
• "Visualize Riemann sums"
• "Demonstrate the fundamental theorem of calculus"

🔧 API Endpoints

POST /api/visualize

Generate explanation and visualization code

Request:

{
  "question": "Explain the Pythagorean theorem"
}

Response:

{
  "explanation": "The Pythagorean theorem states...",
  "code": "import React from 'react'...",
  "visualizable": true,
  "visualization_type": "geometry"
}

GET /api/examples

Get example questions by category

Response:

{
  "examples": [
    {
      "category": "Geometry",
      "questions": ["...", "..."]
    }
  ]
}

GET /api/health

Health check endpoint

🎨 How It Works

1. User asks a question → Frontend sends to backend API
2. Backend prompts Claude → Specialized system prompt instructs Claude to generate both explanation and React code
3. Claude generates response → Returns JSON with explanation, code, and metadata
4. Frontend executes code → Safely renders the visualization in an isolated iframe
5. User sees results → Split view with explanation and interactive visualization

🛡️ Security Features

• Iframe Sandboxing: Code executes in isolated environment with restricted permissions
• No External Dependencies: Generated code uses only approved libraries (React, Recharts, Three.js)
• CSP Headers: Content Security Policy prevents malicious script execution
• CORS Protection: Backend only accepts requests from allowed origins

📦 Tech Stack

Backend:

• FastAPI - Modern Python web framework
• Anthropic API - Claude AI integration
• Pydantic - Data validation
• Uvicorn - ASGI server

Frontend:

• React 18 - UI framework
• Babel Standalone - Runtime JSX compilation
• Recharts - Chart library
• Three.js - 3D graphics
• Tailwind CSS - Styling

🎯 Use Cases

• Students: Interactive learning with visual explanations
• Teachers: Generate teaching materials on-the-fly
• Developers: Learn through code examples and visualizations
• Researchers: Quick prototyping of mathematical concepts

🔮 Future Enhancements

• Save/export visualizations as images
• User accounts and history
• Share visualizations via unique URLs
• Support for more libraries (D3.js, Plotly)
• Mobile app version
• Collaborative learning features
• Custom themes and color schemes

🐛 Troubleshooting

Backend won't start:

• Check that Python 3.8+ is installed
• Verify ANTHROPIC_API_KEY is set in .env
• Ensure port 8000 is not in use

Frontend shows CORS errors:

• Verify backend is running on port 8000
• Check CORS middleware configuration in backend/main.py

Visualizations not rendering:

• Open browser console for error messages
• Verify the generated code syntax in the code viewer
• Check network tab for API response

📝 License

This project is open source and available for educational purposes.

🙏 Credits

Built with:

• Anthropic Claude
• FastAPI
• React
• Recharts
• Three.js

🤝 Contributing

Feel free to submit issues and enhancement requests!

---

Built by Ram | Powered by Claude AI