NotesAI

Project Story

Inspiration

In a world of cloud-connected everything, I was inspired to create a truly private and intelligent workspace. I've always been fascinated by hands-free voice assistants but concerned about where my data goes. My goal for NotesAI was to build a powerful note-taking application that puts user privacy first, leveraging the latest advancements in on-device AI. NotesAI is the perfect fusion of convenience and confidentiality, allowing you to capture and organize your life without compromise.

What it does

NotesAI is a privacy-first web application for note-taking and task management that runs entirely in your browser. All data and AI processing happen 100% on-device, powered by Chrome's built-in AI, ensuring your thoughts remain completely yours.

• 📄 Instant Summaries (Summarizer API): Distill long meeting notes, articles, or brainstorms into concise key points with a single click, making review fast and efficient.
• 🔤 Effortless Proofreading (Proofreader API): Correct grammar and spelling mistakes with intelligent, inline suggestions that help you write clearly and professionally.
• 💭 Proactive Intelligence (Prompt API with Gemini Nano): The "Smart Notice Board" analyzes your notes on-device to automatically surface urgent tasks, deadlines, and important information, acting as your private, proactive assistant.
• 🎙️ Advanced Voice Control & Dictation (Web Speech API): Go completely hands-free. Dictate content, format text ("make it bold"), insert elements ("add a task"), and control the app using natural language.
• 📝 Full-Featured Note Management: A rich text editor supports formatting, images, and task lists. Organize everything with a flexible tagging system, favorites, and an archive.
• ✅ Modern & Offline-First: The app features a clean, responsive design with light and dark modes, and is fully functional offline.

How I built it

NotesAI is built with a modern, "no-build-step" architecture, focusing on performance and leveraging native browser capabilities.

• Core Logic: A Single Page Application (SPA) written in Modern Vanilla JS (ES6+). It uses a component-based architecture with Vue.js 3 (via CDN) for a reactive and efficient user interface.
• On-Device AI & Voice: It deeply integrates Chrome's Built-in AI APIs (Summarizer, Proofreader, and Prompt API with Gemini Nano) for all intelligent features. The Web Speech API powers real-time voice recognition.
• UI & Styling: The responsive layout is built with Bootstrap 5, with a custom, modular CSS system for theming and component styling.
• Data Storage: All notes, tags, and user settings are stored securely and persistently on the client-side using IndexedDB, enabling full offline functionality.

Challenges I ran into

One of the biggest challenges was managing the nuances of the Web Speech API. Providing instant, accurate feedback to the user during dictation while simultaneously listening for specific voice commands required careful state management. Designing a robust voice command parser that could reliably distinguish between dictation content (like the words "delete last word") and an actual command was a complex but rewarding problem to solve.

Accomplishments that I'm proud of

I am incredibly proud of creating a fully hands-free, privacy-first note-taking experience that directly fulfills the promise of on-device AI. Integrating ambient hotword listening ("Hey Notes") that seamlessly transitions into a powerful in-editor dictation and command mode is a key accomplishment. Most importantly, I've built a genuinely useful AI-powered tool that respects user privacy by design, proving that powerful intelligence doesn't have to come at the cost of confidentiality.

What I learned

This project reinforced a crucial lesson: a great User Experience (UX) with AI is built on clear communication and trust. Designing the ai-status indicator to show exactly what the AI was doing (listening, processing, downloading) was more critical than just aesthetics. I learned that anticipating user intent and providing a safety net (like undo/redo for voice commands) is essential for building confidence in an AI-powered system.

What's next for NotesAI

The future of NotesAI is focused on expanding its on-device capabilities while staying true to its privacy-first mission.

• Smarter Organization: Use the Prompt API to suggest relevant tags automatically based on a note's content.
• Enhanced Search: Implement a more powerful local search that can understand natural language queries (e.g., "what were my action items from last week?").
• Data Portability: Allow users to back up their entire database to a local file and restore it, ensuring they always own their data.

Built With

• bootstrap-5.3.2
• chrome-built-in-ai-api
• css3
• html5
• indexeddb
• javascript-(es6)
• vue.js-3
• web-speech-api