Chart-AI

Turn knowledge into connected learning flows — powered by Chart-AI.

Comment

💡 Inspiration

Learning complex topics often feels overwhelming because information is scattered across notes, PDFs, videos, and browser tabs. Traditional note-taking tools store information linearly, but real learning happens through connections between ideas.
Chart-AI was inspired by the need for a tool that visually represents how concepts relate to one another, while also using AI to actively assist in understanding and organizing knowledge.

⚙️ What It Does

Chart-AI is an AI-powered visual learning flow builder that helps users create, organize, and explore knowledge through connected nodes.

Users can:

  • Build visual, node-based learning flows
  • Generate explanations, quizzes, summaries, and study plans using AI
  • Chat with their learning flow using context-aware (RAG) AI
  • Upload files (PDF, TXT, MD) and convert them into structured learning paths
  • Automatically organize complex flows with a single click
  • Save progress automatically using browser-based storage

🛠️ How We Built It

  • Frontend: React, TypeScript, Vite
  • Styling: Tailwind CSS, Lucide Icons
  • AI Integration: Google Gemini API with structured JSON outputs
  • RAG System: Uses visible node content as AI context
  • Data Storage: IndexedDB for offline persistence, Firebase for configuration
  • Graph Layout: Dagre algorithm for automatic node positioning

The app is fully client-side, fast, responsive, and designed for scalability.

🚧 Challenges We Ran Into

  • API rate limits and token expiration when using a shared AI key
  • Complex canvas interactions involving zoom, pan, and touch gestures
  • React hook ordering issues during dynamic modal rendering
  • Ensuring consistent AI output for reliable UI rendering

Each issue required careful debugging and architectural decisions.

🏆 Accomplishments That We're Proud Of

  • Built a fully functional visual learning system from scratch
  • Implemented context-aware AI chat (RAG) in a browser app
  • Designed a user-provided API key system to avoid token-limit issues
  • Achieved smooth canvas interactions with minimap and auto-layout
  • Delivered a polished, production-ready UI suitable for real users

📚 What We Learned

  • How to design AI-powered products responsibly and scalably
  • Advanced React patterns and performance optimization
  • Managing complex UI state in large applications
  • Handling real-world API constraints and user experience challenges
  • Turning an idea into a complete, deployable product

🔮 What's Next for Chart-AI

  • User authentication and cloud-based flow sync
  • Collaborative real-time learning flows
  • More AI models and learning strategies
  • Export flows as study guides or presentations
  • Mobile and tablet optimization

Chart-AI aims to become a personal AI learning companion that adapts to how humans truly learn — through connections.

Built With

Share this project:

Updates