ChatTutor is a notable example of how AI tutoring can move beyond text responses to incorporate visual teaching aids directly controlled by large language models (LLMs). For developers curious about building interactive AI tutors that use math canvases, mind maps, and whiteboards, ChatTutor offers a practical, open-source implementation combining modern frontend and backend technologies.
What ChatTutor does and how it’s built
ChatTutor is an open-source AI tutoring platform that equips LLMs with visual teaching tools. The standout feature is the integration of a math canvas powered by Geogebra, an interactive mind map, and a virtual whiteboard — all manipulable through AI agent prompts. This approach allows the AI to teach STEM concepts visually, not just via text.
Architecturally, the frontend is built with Vue.js and bundled using Vite, offering a reactive and performant UI layer. The backend uses ElysiaJs, a Bun-native JavaScript framework designed for speed and simplicity, which is still relatively fresh in the ecosystem compared to Node.js or Express. This backend integrates the Vercel AI SDK, providing abstraction over multiple LLM providers such as OpenAI, Anthropic, and DeepSeek.
ChatTutor persists user conversations and session data in a PostgreSQL database, ensuring durability and allowing users to revisit past sessions. The project is licensed under AGPL v3, emphasizing openness and community collaboration.
How ChatTutor stands out technically
Several technical aspects distinguish ChatTutor:
Visual AI tutoring: Unlike typical chatbots that rely solely on text, ChatTutor gives LLMs a “digital whiteboard” along with a math canvas and mind mapping tools. This requires bridging LLM prompt outputs with UI tool interactions, a non-trivial integration that leverages the Geogebra API and custom front-end components.
Multi-provider AI SDK abstraction: Supporting OpenAI, Anthropic, and DeepSeek means the backend can switch between providers with minimal friction. This abstraction is crucial given the rapidly evolving AI provider landscape and varying API capabilities.
Modern full-stack with Bun and Vue: Using Bun (a fast JavaScript runtime alternative to Node.js) and ElysiaJs backend is a forward-looking choice. It promises faster startup times and lower overhead. However, Bun and ElysiaJs are newer technologies with smaller communities and ecosystems, so adopting them comes with tradeoffs in maturity and third-party integrations.
Clean separation and environment-driven config: The codebase clearly delineates frontend and backend concerns, with configuration driven extensively by environment variables for database, API URLs, AI provider keys, and OSS (object storage) settings. This makes deployments flexible but requires careful environment management.
The main tradeoffs here are the complexity of orchestrating multiple AI providers and the need for users to supply their own API keys, which limits out-of-the-box use for non-technical users. Also, relying on relatively new backend frameworks like ElysiaJs and Bun may pose challenges for teams used to more established stacks.
Quick start
ChatTutor provides a well-documented quick start section with environment variables and commands for running via Docker or directly with Node.js and Bun.
Environment variables to configure
DATABASE_URL # PostgreSQL connection string
VITE_API_BASE_URL # API server base URL (e.g., http://localhost:8002)
CLINET_BASE_URL # Client app base URL (e.g., http://localhost:8001)
MODEL_API_KEY # API key for AI model provider
MODEL_BASE_URL # Optional base URL for AI service
AGENT_MODEL # AI model for tutoring agent (e.g., gpt-4)
AGENT_MODEL_PROVIDER # AI provider enum: openai, anthropic, deepseek
TITLE_MODEL # Optional model for chat title generation
TITLE_MODEL_PROVIDER # Optional provider for title model
OSS_ENDPOINT # Object storage endpoint (optional)
OSS_ACCESS_KEY # OSS access key
OSS_SECRET_KEY # OSS secret key
OSS_BUCKET # OSS bucket name
OSS_REGION # OSS region
Running with Docker
git clone https://github.com/HugeCatLab/ChatTutor.git
cd ChatTutor
cp .env.example .env
cd docker
docker compose up -d
Running with Node & Bun
git clone https://github.com/HugeCatLab/ChatTutor.git
cd ChatTutor
pnpm i
pnpm dev
Or to run client and server separately:
pnpm client:dev
pnpm web:dev
And to build and start:
pnpm build
pnpm client:start
pnpm web:start
verdict
ChatTutor is relevant for developers and educators interested in AI tutoring tools that go beyond text and incorporate interactive visual aids. Its architecture demonstrates how to combine modern frontend frameworks with a Bun-native backend and multi-provider AI SDKs.
However, the need to supply your own AI API keys and the reliance on newer backend tech like ElysiaJs/Bun means it might be less accessible for casual users or teams seeking battle-tested ecosystems. Still, the code is surprisingly clean and well-structured, making it a solid foundation for extending AI tutoring with visual interfaces.
For anyone building AI education tools or experimenting with LLM-driven visual teaching, ChatTutor offers concrete examples and patterns worth studying.
Related Articles
- Building a production-ready second brain with agentic RAG and LLMOps — Explore an open-source course that teaches building a production-grade AI assistant using advanced retrieval-augmented g
- Langchain-Chatchat: A model-agnostic orchestration layer for Chinese-language RAG and Agents — Langchain-Chatchat offers a flexible, offline-capable orchestration layer for multiple Chinese LLMs and RAG approaches,
- DeepChat: a unified Electron desktop platform for multi-LLM AI agents with ACP integration — DeepChat is an Electron-based TypeScript desktop app unifying multi-LLM chat, MCP protocols, and ACP agent integration w
- Langfuse: Simplifying LLM observability with decorator-based tracing — Langfuse provides end-to-end observability for LLM applications with automatic tracing via an @observe() decorator, enab
- Open Deep Research: A Next.js 16 agentic AI assistant for iterative web research — Open Deep Research is a TypeScript Next.js 16 app that uses an LLM to plan, execute, and iterate web research via Exa an
→ GitHub Repo: HugeCatLab/ChatTutor ⭐ 1,119 · Vue