StudyTree AI Study App

See how the things you’re learning connect.

An AI study application that turns notes and questions into a visual tree you can explore, edit, and return to.

Visit StudyTree Explore the project
Relationship
Project
Focus
A visual AI study app, developed from BranchThink

The project

What is StudyTree?

Agency7’s work brings the study canvas, source material, AI actions, and saved progress into one product. The focus is helping learners keep track of what they understand and what they want to explore next.

StudyTree organizes a study session as connected concepts, questions, examples, and next steps. Learners can start with notes, source material, or a topic, then explore and edit the resulting tree.

The project developed from BranchThink, a visual decision-tree tool that included a Limitless voice-capture integration. StudyTree applies that visual approach to learning, with AI explanations, quizzes, and progress attached to individual branches.

01 / The problem

The challenge

Learning across chats, documents, and videos can leave the reasoning scattered. A useful answer is easy to lose, and a learner may struggle to see how it connects to an earlier question.

The product needed a visible, editable structure that could hold source material, AI suggestions, and progress together. It also needed to work as a web application independently of the earlier voice-capture hardware.

02 / What we built

What we built

An editable study canvas

Learners can move concepts, connect branches, and collapse sections to organize a topic in a way that makes sense to them.

A structure for different kinds of thinking

Topics, concepts, questions, examples, evidence, exercises, and next actions have distinct roles. Each can carry notes, a source reference, and a progress status.

AI help where a learner needs it

A learner can expand a branch, simplify an explanation, look for gaps, or ask for examples. Proposed changes are previewed before they become part of the tree.

Branch quiz mode

Short-answer questions focus on a selected branch. Feedback and confidence markers help learners decide what to revisit.

Visible learning progress

Branch statuses show where a learner feels confident or confused. Learners can set them directly, with AI suggestions after quizzes.

Source grounding

A source panel connects branches to uploaded documents and pasted material, making the underlying references easier to revisit.

Saved work and progress

Trees, source material, AI actions, and quiz sessions are saved to each signed-in user’s workspace.

Read-only public sharing

A public, read-only tree link lets people share a visual explanation without giving editing access to their workspace.

A foundation for future integrations

Connector scaffolding leaves room for future OpenClaw and MCP integrations. These are planned extensions, not part of the current learning flow.

03 / How it works

The user flow

Start with a topic or source, explore the connections, and choose what to study next.

  1. 01

    Sign in and onboard

    Sign in and choose a blank tree, pasted notes, or uploaded source material as the starting point.

  2. 02

    Generate the initial tree

    AI organizes the input into an initial topic and connected branches for the learner to review.

  3. 03

    Edit and extend on the canvas

    Move, connect, and edit concepts. Open a branch for its notes, source material, and available actions.

  4. 04

    Run AI actions on a branch

    Ask for examples, a simpler explanation, or missing prerequisites. Review the proposed changes before accepting them.

  5. 05

    Quiz yourself and mark progress

    Answer questions on a selected branch, review feedback, and update its progress status.

  6. 06

    Share and return

    Share a read-only view or return to the saved tree and continue exploring.

Illustrated workflow. Sample content, not a live customer session.

StudyTreeSample study session · Preset responses

See a connected study session.

12 nodes · One branch in focus

Topic

Photosynthesis

  • Concept

    Light-dependent reactions

    • ThylakoidProduces ATP + NADPH
  • ConceptIn the chat

    Calvin cycle

    • StromaFixes CO₂ into glucose
  • Evidence

    6CO₂ + 6H₂O → C₆H₁₂O₆ + 6O₂

  • Question

    Why do leaves change color in fall?

    • Chlorophyll degradesCarotenoids become visible
  • Misconception

    Plants only breathe CO₂

    • Plants also respireThey consume O₂ too
  • Prerequisite

    Cellular respiration

Next action

Quiz me on Calvin cycle

This illustration uses preset responses to show how a topic like “photosynthesis” can become a connected study tree. The sample conversation focuses on one branch, with example explanations, suggested edits, and quiz prompts. The OpenClaw connection is a future integration concept shown here for illustration.

04 / The result

What the project brings together

  • A focused learning application developed from the earlier BranchThink visual-tree project.
  • An interactive canvas that connects source material, questions, AI suggestions, and progress.
  • AI actions that produce reviewable changes to saved work.
  • A web application foundation with authentication, saved workspaces, and read-only sharing.
How we built itTechnical details

Frontend

  • Next.js 16App Router, TypeScript, server actions
  • React 19interactive application components
  • @xyflow/react (React Flow)interactive node canvas
  • Dagreauto-layout for generated trees
  • Tailwind CSS v4styling system

Backend & data

  • Convexreactive database, functions, realtime sync, file storage
  • Domain tablesusers, trees, nodes, edges, sources, actions, quizSessions
  • Ownership enforcementrecords scoped by Clerk user ID

Auth & identity

  • Clerksign-up, sign-in, session management, protected routes
  • Convex user linkagefirst-login sync mirrors Clerk users into Convex for ownership and history

AI layer

  • OpenAItree generation from text/sources, branch actions, quiz generation
  • Structured AI output contractproposed node, edge, and status changes for a preview-and-apply flow
  • Server-side action layeraccepts tree/node context, returns structured diffs

Testing & tooling

  • Vitest + convex-testunit and integration testing across client and backend
  • ESLint + eslint-config-nextstrict linting
  • TypeScript 5end-to-end type safety across Convex, Next.js, and React

Predecessor (BranchThink)

  • RedwoodSDK + Viteoriginal app framework
  • Prisma on Cloudflare D1database layer before Convex migration
  • DurableObjectssession management
  • WebAuthn passkeysauth before Clerk
  • Cloudflare R2file/audio storage
  • Limitless pendant integrationvoice-capture-to-tree loop

For your business

We help shape the idea, design the experience, and connect AI to a useful workflow. Whether your next step is a business website or a custom application, we can scope the build and support it as it develops.

Web development in Edmonton

Your next project

Something in mind?
Let’s build it.

Tell us what your business needs. We’ll help you work out what to build and how to keep it running.

Talk about your project See more work