Inspiration

Traditional note-taking apps with AI features require sending your data to external servers, requiring internet connectivity and essentially raising privacy concerns. Their database layer is also almost always hosted on a 3rd party provider. I want my notes completely to myself.

What it does

Notester solves this by:

  • Privacy-First: All AI processing happens locally using Chrome's Built-in AI.
  • No External Databases: Notes are stored in your browser's IndexedDB using PGlite. They're not stored on any third-party database.
  • Offline-Capable: Works without an internet connection
  • Cost-Free: No API costs or quotas - unlimited AI usage
  • Multimodal Input: Generate notes from images, PDFs, and audio files without uploading them anywhere

AI Features (Prompt & Translator API):

  • Create notes from scratch with AI assistance
  • Enhance writing quality and clarity
  • Correct spelling and grammatical errors
  • Translate text
  • Real-time AI auto-completion while writing
  • Upload PDF files for note creation
  • Upload images to generate notes from visual content (handwritten notes)
  • Upload audio files to be transcribed into notes
  • Chat with an AI assistant about your note and let it search the web & edit it

How we built it

Notester is built in React with Nextjs as the framework. It uses TipTap editor components for the note editor as well as a PGlite (PostgreSQL in the browser) database.

Challenges we ran into

Navigating the different new APIs. Even though there are quite a few to chose from based on the task at hand, I think it was essential to also factor in the user experience (UX). Using the Prompt API for most of the tasks actually seemed like providing a better overall experience (latency wise).

Accomplishments that we're proud of

Tool calling that enables the AI model to edit the user's notes. I think that a 4B parameter model being capable of that is quite awesome. I also really like how fast and snappy the application feels. Good for quick note-taking.

What we learned

A ton about how well smaller language models excels at smaller challenges such as text-editing. I really find it fascinating that the overall experience with Gemini Nano and a larger model in an application like this is pretty similar.

What's next for Notester

We'd like to refine and adjust some of the system prompts, add a toggle to use a larger model (especially for mobile devices) and overall just make the experience better.

Built With

  • nextjs
  • pglite
  • promptapi
  • react
  • tailwind
  • tanstack
  • three.js
  • tiptap
  • translatorapi
  • zustand
Share this project:

Updates