Goodnotes SQ25

Intro

This spring quarter, Codelab had the chance to work with all of our favorite note-taking app: Goodnotes! Together with our client, we had the chance to build out a note-taking assistant that helps students quickly polish, update, and create handwritten notes and diagrams.

Team

Timeframe

April — June 2025

Problem

Students today spend hundreds of hours polishing their notes and hand-drawing diagrams. This is slow and tedious and prevents students from being more efficient in their learning process.

Solution

Leveraging the latest capabilities in LLMs and VLMs, we created a chat-based assistant with a deep understanding of the current document canvas. Users can talk to this assistant and task it to create new notes, diagrams, and drawings or to modify existing ones.

Tech Stack

For this project, we wanted to demonstrate a proof-of-concept AI note taker for the Goodnotes app while enabling a fast iteration speed to quickly test different approaches and their efficacies. To do this, we decided on:

• Next.js
• Supabase
• Shadcn, TailwindCSS, Lucide React
• Excalidraw
• Vercel AI SDK

The entire tech stack worked wonderfully as it allowed us to quickly develop new features while having a robust, fast, and modern codebase to work with.

Development Process

To begin with the project, the team set out to create a foundation for the webapp. We started with a Next.js template integrated with Supabase, Shadcn, and TailwindCSS to get the basics up and running quickly.

From there, we split into feature branches to work on different components simultaneously. The first major milestone was integrating Excalidraw as our drawing canvas and building a chat interface that could stream AI responses in real-time.

Once we had the core chat-to-canvas interaction working, we focused on developing specialized AI agents. We built a diagramming agent that could generate Mermaid diagrams, an SVG creation agent with feedback loops, and a tool-calling system that let the AI directly manipulate shapes on the canvas.

Throughout development, we used a feature-branch workflow with pull requests for code review. This let us experiment with different AI approaches while keeping the main branch stable. Each contributor could work on their specialized features without blocking others.

The rapid iteration cycle was crucial — we were able to test new AI capabilities and canvas integrations within days rather than weeks, allowing us to quickly validate what worked and pivot when needed.

[diagram screenshots]

Design Process

The design part of this project was crucial as we had to come up with a UI/UX flow that allowed users to intuitively understand the AI note taking assistant’s capabilities and easily convey their intent. Additionally, we were tasked with finding an effective UI workflow that easily enabled users to accept or reject the assistant’s changes or ask follow-up questions.

To begin, our designers created a detailed survey about note-taking and students’ biggest complaints to clarify the user requirements. We found that there is very strong demand for a product like this.

Afterwards, our design team worked on creating low, mid, and high fidelity mockups of all UI screens and pages. During this process, we worked closely with the client as well as our developers to ensure good communication between stakeholders.

The design mockups were then used by developers to create the final, polished version of the web app.

More screenshots coming soon

Demo

coming soon

Closing

Working with Goodnotes on this project was an amazing experience. Their team provided invaluable feedback and guidance throughout development, helping us build something that could genuinely solve real problems for students.

This project pushed us to explore the cutting edge of AI-powered interfaces and gave us hands-on experience with the latest LLM capabilities. We’re excited to see how these concepts might evolve into tools that actually make students’ lives easier.

Thanks to Goodnotes for trusting us with this challenge and for being such great partners throughout the process.