StudyTree — the study app built around a living thought tree
Branchthink, reborn as StudyTree. Every study session becomes a visual React Flow tree that AI can expand, quiz, challenge, and update.
Client — StudyTree · A visual AI study app for agent-native learners (formerly BranchThink)
StudyTree is a full-stack AI study app that Agency7 is building for agent-native learners — people who already learn through AI chats, YouTube, PDFs, and self-directed exploration, but lose structure across every tool they use. The app turns that fragmented study workflow into a living visual tree. It is the next generation of BranchThink, rebuilt on Next.js 16, Convex, React Flow, Clerk, and OpenAI, and launching through studytree.ai — a curated directory of AI-powered learning tools that gives the app a built-in audience the day it ships.
Live demo · Topic: PhotosynthesisScroll to build the tree — then chat with any node
What a StudyTree user sees when they paste a topic like “photosynthesis.” The AI generates a tree of concepts, questions, misconceptions, evidence, and next actions — and every node is an AI-chattable surface. Click a node and a focused conversation opens, scoped to that node and powered by OpenClaw. Replies come back as edits you can accept into your tree, new child nodes, or quiz prompts — so every chat leaves an artifact behind.
What is StudyTree?
StudyTree is a web app where every study session becomes a living thought tree. Users paste notes, upload a source, or type a topic — and the app generates a React Flow canvas of concepts, questions, misconceptions, examples, and next actions that they can explore, edit, quiz themselves on, and deepen over time.
The product began life as BranchThink — an AI-powered visual decision-tree tool with a Limitless pendant integration and the tagline "Think. Branch. Act." BranchThink validated the core visual-tree thesis and the Limitless hardware loop, but the positioning was broad. StudyTree narrows it decisively: the same visual-tree engine, now pointed at learning and studying specifically, for the fastest-growing segment of users — people who already live inside AI chat products and want a way to see and keep what they are learning.
StudyTree ships through the studytree.ai directory, which curates the best AI-powered learning tools across writing, PDF analysis, audio learning, and AI tutoring. Being the flagship app on that directory gives StudyTree built-in discovery from day one.
The challenge
Most AI study tools are documents, chats, or flashcards wearing a skin. The user asks a question, gets an answer, forgets the thread, and loses the reasoning path. A week later the same confusion comes back and nothing in their tools remembers it.
We wanted to solve a harder and more specific problem: turn a messy, multi-tool learning workflow into a single visible structure the user owns — one they can see, edit, test, and return to weeks later with context intact. That meant rethinking the data model around a living tree instead of a document, designing AI actions that leave structured artifacts behind instead of chat logs, and making the canvas responsive enough that editing a node feels like editing a thought.
On top of that, we needed to evolve from the Branchthink hardware era (Limitless pendant → voice capture → decision tree) to a web-first product that stands on its own — while keeping the door open for agent and MCP integrations later. The new stack had to be realtime, reactive, and aggressively simple to extend.
What we built
Tree-first canvas (React Flow)
An @xyflow/react canvas with pan/zoom, drag-and-drop nodes, branch connections, collapse/expand sections, and optional auto-layout via Dagre. The tree is the primary object in the product — not a visualization glued onto something else.
Ten semantic node types
Topic, Concept, Question, Misconception, Example, Evidence, Prerequisite, Exercise, Summary, and Next Action. Each node carries a title, body, status, source reference, and AI-generation metadata — so a tree is a model of understanding, not just a diagram.
AI branch actions that leave artifacts
Expand, simplify, quiz, find gaps, challenge reasoning, generate examples, find prerequisites, summarize, turn into next steps. Every action returns a structured diff — newNodes, updatedNodes, newEdges — that the UI previews and applies. AI leaves the tree better; it does not just print text.
Branch quiz mode
Select any branch, generate 3–10 short-answer questions, get feedback, mark confidence, and watch the branch status update automatically. Mastery becomes visible instead of vibes-based.
Branch mastery state
Six statuses — New, Exploring, Shaky, Confused, Understood, Mastered — tied to visual indicators on every node. Users can set status manually; AI can suggest changes after a quiz. The tree doubles as a confidence map.
Source grounding
Uploaded documents, pasted text, and topic prompts feed the tree generator. A source panel ties branches back to the material that created them — so learning stays verifiable, not hallucinated.
Realtime persistence (Convex)
Trees, nodes, edges, sources, AI actions, and quiz sessions persist to Convex with reactive queries. Changes save instantly, resume cleanly, and are scoped per authenticated user.
Read-only public sharing
Toggle a tree public to generate a shareable read-only URL with branch statuses and summaries visible. Users share clean visual explanations without exposing their private workspace.
Launch through studytree.ai directory
StudyTree ships as the flagship app inside studytree.ai — a curated directory of AI learning tools across writing, PDF analysis, audio learning, and tutoring. Built-in audience and trust signal from day one.
OpenClaw-ready scripts
An openclaw-connector script in the repo keeps the door open for future agent integrations (MCP, Claude Code, OpenClaw). The app is built to become an action layer for learning agents, not just a human-facing product.
How we built it
Frontend
- —Next.js 16 — App Router, TypeScript, server actions
- —React 19 — latest concurrent features
- —@xyflow/react (React Flow) — interactive node canvas
- —Dagre — auto-layout for generated trees
- —Tailwind CSS v4 — styling system
Backend & data
- —Convex — reactive database, functions, realtime sync, file storage
- —Domain tables — users, trees, nodes, edges, sources, actions, quizSessions
- —Ownership enforcement — every record scoped by Clerk user ID, no cross-user leakage
Auth & identity
- —Clerk — sign-up, sign-in, session management, protected routes
- —Convex user linkage — first-login sync mirrors Clerk users into Convex for ownership and history
AI layer
- —OpenAI — tree generation from text/sources, branch actions, quiz generation
- —Structured AI output contract — newNodes, updatedNodes, deletedNodeIds, newEdges, suggestedStatusChanges — safe preview/apply flow
- —Server-side action layer — accepts tree/node context, returns structured diffs
Testing & tooling
- —Vitest + convex-test — unit and integration testing across client and backend
- —ESLint + eslint-config-next — strict linting
- —TypeScript 5 — end-to-end type safety across Convex, Next.js, and React
Predecessor (BranchThink)
- —RedwoodSDK + Vite — original app framework
- —Prisma on Cloudflare D1 — database layer before Convex migration
- —DurableObjects — session management
- —WebAuthn passkeys — auth before Clerk
- —Cloudflare R2 — file/audio storage
- —Limitless pendant integration — voice-capture-to-tree loop
The user flow
StudyTree collapses a messy multi-tool study workflow into a single clean spine: input → visual tree → AI branch actions → quiz → mastery state → return later and deepen. Every step writes structured data to Convex so the tree is always resumable, shareable, and queryable.
- 01
Sign in and onboard
Clerk handles auth. Onboarding asks the user what they want to learn and offers three starts: blank tree, paste notes, or upload source material. First tree generates in under five minutes.
- 02
Generate the initial tree
OpenAI receives the input and returns a structured payload — root topic plus first-level branches plus supporting nodes (concepts, questions, misconceptions, examples). Convex persists everything; React Flow renders it with Dagre auto-layout.
- 03
Edit and extend on the canvas
The user drags, reconnects, edits, and adds nodes on the React Flow canvas. Collapse/expand keeps large trees navigable. A left sidebar shows the tree outline; a right sidebar shows node detail and available AI actions.
- 04
Run AI actions on a branch
Select a node or branch and run an action — expand, challenge, find gaps, generate examples, turn into next steps. The AI returns a structured diff the UI previews. The user accepts, edits, or discards before the tree updates.
- 05
Quiz yourself, mark mastery
Pick a branch and run a branch-scoped quiz. Short-answer feedback updates the branch status (New → Exploring → Shaky → Understood → Mastered). The tree turns into a live confidence map.
- 06
Share and return
Toggle the tree public for a read-only share link. Come back days or weeks later to the dashboard, see recent trees ordered by last-updated, and continue where the reasoning left off — with full history preserved.
Outcomes & learnings
- Shipped the next generation of BranchThink with decisive new positioning — agent-native learners over generic decision-makers — validated by a clear PRD, domain model, and MVP spec before a line of product code.
- Migrated from a RedwoodSDK + Prisma/D1 + DurableObjects + WebAuthn stack to Next.js 16 + Convex + Clerk + React Flow, reducing backend surface area and unlocking realtime reactivity out of the box.
- Designed the AI layer around structured output contracts (newNodes / updatedNodes / newEdges) so every AI action leaves persistent tree artifacts instead of ephemeral chat — the core differentiator vs generic AI tutors.
- Built a launch channel before launching — studytree.ai curates the directory of AI learning tools, and StudyTree ships as its flagship app. The directory is the funnel.
- Left an explicit door open for agent integrations: an OpenClaw connector script, an action-layer architecture, and a data model ready for MCP/Claude Code integration in a later phase.
- Proved a repeatable build pattern — Next.js 16 + Convex + Clerk + React Flow — that Agency7 now reuses on other agent-native product builds.
Need a full-stack AI product built?
StudyTree is a ground-up AI product build — PRD, stack choice, data modeling, realtime backend, interactive canvas, AI actions with structured outputs, launch channel. We do the same end-to-end build for Edmonton businesses and Canadian startups that want to ship a real AI product, not a ChatGPT wrapper.
Web development in EdmontonWant something like this?
Free 15-minute strategy call. We'll walk through what a similar system could look like for your business.
Book a free build consult