completed

Tablo Study

An AI-powered collaborative learning platform that combines real-time voice interaction, visual reasoning, and Socratic tutoring to help students learn through understanding rather than receiving answers. Built as a full-stack AI system with multimodal interaction, agent workflows, and production-ready infrastructure.

Next.jsFastAPILangGraphLiveKitPostgreSQLRedisQdrantDocker

The Problem

Traditional learning tools often optimize for providing answers quickly rather than helping students develop deep understanding. Students can receive information instantly, but they often struggle with asking better questions, connecting concepts, and developing problem-solving ability.

Existing AI tutors typically operate as text-based chat interfaces where students ask questions and receive generated responses. While useful, these systems lack the interactive experience of a real tutor: understanding the student's thought process, asking guiding questions, and adapting explanations based on their current understanding.

The challenge was to create a learning environment where AI acts less like an answer generator and more like a collaborative thinking partner.

Existing Solutions

Current AI learning tools mainly focus on conversational question answering. They can explain concepts, summarize information, and generate exercises, but many still follow a reactive model:

Student asks → AI answers.

This approach can encourage passive learning and does not always reveal whether the student truly understands the concept.

Traditional digital learning platforms provide structured content but lack personalization and real-time interaction.

Tablo explores a different direction: combining the accessibility of AI with the guidance of human tutoring.

Why This Approach

Tablo was designed around the idea that learning happens through interaction, not just information delivery.

Instead of optimizing for giving the fastest answer, the system follows a Socratic approach:

  • Ask guiding questions.
  • Encourage students to reason.
  • Provide visual explanations.
  • Adapt based on the student's progress.

The architecture was designed around multimodal interaction because learning is not limited to text. Students naturally explain ideas through speech, drawings, and visual thinking.

This led to combining:

  • Real-time voice communication
  • Interactive canvas-based reasoning
  • AI agent workflows
  • Knowledge retrieval
  • Learning progress tracking

The main trade-off was balancing intelligence with responsiveness. A powerful AI system is not useful if the interaction feels slow, so the architecture prioritized low latency and efficient processing.

Architecture

Tablo follows a modular full-stack architecture designed around real-time AI interaction.

Frontend Layer

The user interface is built with Next.js and React, combining an interactive visual workspace, AI conversation interface, and learning tools. The canvas experience is powered by tldraw, allowing students and AI to interact visually.

AI Orchestration Layer

The backend uses FastAPI with LangGraph to manage AI workflows. LangGraph coordinates different AI behaviors including conversation management, Socratic tutoring logic, tool usage, and context handling. This allows the AI system to move beyond simple chat responses into structured reasoning workflows.

Real-Time Communication Layer

LiveKit and WebRTC enable real-time voice interaction between students and the AI system. The goal was to create a natural tutoring experience where students can communicate without relying only on typing.

Data & Infrastructure Layer

PostgreSQL manages structured application data. Redis supports fast temporary state management. Qdrant provides vector search capabilities for retrieving relevant information. Docker enables consistent deployment and infrastructure management.

Tech Stack

Frontend

Next.js + React — Building a fast, responsive application interface with modern web architecture.

Tailwind CSS — Efficient UI development and consistent design systems.

tldraw — Provides the interactive canvas where visual learning and AI-generated explanations happen.

Backend

FastAPI — Provides the API layer and handles communication between the frontend, AI systems, and databases.

PostgreSQL — Stores application data and user information.

Redis — Handles fast-access state and temporary data.

AI Systems

LangGraph — Building structured AI agent workflows rather than simple prompt-response interactions.

Qdrant — Provides semantic search and retrieval capabilities.

Gemini Live API — Enables real-time multimodal AI interaction.

Infrastructure

Docker — Provides reproducible environments and simplified deployment.

Interesting Engineering Challenges

Building Real-Time Multimodal Interaction

Combining voice, visual input, and AI responses required managing multiple streams of information while maintaining a natural user experience. The challenge was creating an interaction flow where the AI could understand context across different input types without making the experience feel delayed.

Designing AI Behavior Around Learning

A normal chatbot is optimized for answering questions. Tablo required designing AI behavior around teaching. The system needed to encourage reasoning, ask useful questions, and avoid simply revealing solutions.

Building a Production AI Architecture

Moving beyond a prototype required thinking about reliability, security, scalability, and maintainability. This involved designing authentication flows, data management, deployment workflows, and safeguards around AI interactions.

Demo

Lessons Learned

Building Tablo changed my understanding of AI product development. The hardest part was not integrating AI models—it was designing the complete experience around them.

A successful AI product requires balancing model capabilities, user experience, latency, reliability, and real-world constraints.

The project reinforced the importance of starting with the user's problem and choosing technology based on what creates the most value.

Future Work

Future development focuses on making AI learning more accessible and personalized. Potential improvements include:

  • Smaller local AI models for lower-cost and offline usage
  • Mobile and desktop applications
  • Improved personalization based on learning patterns
  • School-focused features and management systems
  • More advanced learning analytics