Grow your words. Grow your world. 🌿LingoVine
🌿 Inspiration
As a language learner and developer, I often struggled to stay focused while reading online — switching between tabs for translation, pronunciation, or grammar checks made learning feel disconnected. I wanted to create something that helps people learn languages naturally as they browse, without breaking their reading flow.
That’s how LingoVine was born — a Chrome extension that turns everyday browsing into a personalized language-learning experience, powered by Chrome’s built-in AI APIs.
💬 What it does
LingoVine helps users understand, learn, and retain new vocabulary directly from any webpage. It uses a Dual-Mode Interface for optimal performance across different selections.
When users highlight a word or sentence, the extension offers a comprehensive suite of learning tools:
Smart Text Analysis: Automatically detects language using text and surrounding context for higher accuracy. It uses a Dual-Mode Interface to offer tailored experiences: Short Text (vocabulary/idioms) for dictionary-style definitions, and Long Text (sentences/paragraphs) for translation, summary, and meaning analysis.
Comprehensive Definitions: Provides bilingual definitions, part of speech, translations, and contextual examples via smart caching for instant retrieval.
Intelligent Pronunciation Training: Goes beyond simple audio by providing Intonation Visualization (with stress and pitch markers) and Interactive Practice with real-time, AI-powered feedback (e.g., "Sounds like Native") upon recording.
Advanced Translation & Understanding: Features Intelligent Translation that preserves proper nouns and code, built on a multi-step pipeline (Analysis → Translation → Proofreading → Natural merging). It also provides bilingual summaries and inline translation toggles.
Personalized Learning: Users can save words with full context into a personal Word Bank. It generates Smart Quizzes (multiple choice, fill-in-the-blank) and offers a Practice Writing mode with grammar feedback.
It’s like having an intelligent dictionary, translator, and language coach — all built into Chrome, designed for an offline-first and privacy-focused experience.
🛠️ How I built it
I built LingoVine as a solo project using: Manifest V3, HTML, CSS, and JavaScript for the UI, background worker, and content scripts, Chrome Built-in AI APIs (seven utilized in total):
🧠 Prompt API (LanguageModel.create()): For definitions, examples, grammar, intonation analysis, and advanced contextual explanations.
🌍 Translator API (chrome.ai.translator): For fast, on-device multilingual translation support.
✍️ Proofreader API (chrome.ai.proofreader): For grammar and spelling corrections within the translation pipeline.
📝 Rewriter API (chrome.ai.rewriter): Used for text merging and natural flow optimization in translations.
🧾 Summarizer API (Summarizer.create()): For long-text comprehension and generating bilingual key points.
🌐 Language Detection API (chrome.i18n.detectLanguage): For fast, contextual source language detection.
🔊 Web Speech API / MediaRecorder API: For text-to-speech reference audio and enabling pronunciation recording/practice. Gemini Nano (on-device) provides the core power for offline-first functionality and faster, privacy-friendly responses. Storage Strategy utilizes chrome.storage.local for the Word Bank and caching, and chrome.storage.sync for user preferences/settings. To optimize performance, I implemented advanced caching strategies, parallel API calls, and a Dual-Mode UI that intelligently splits interactions into Short Text Mode and Long Text Mode.
⚡ Challenges I ran into
- Detecting the correct source language for short phrases or multi-language paragraphs required combining Chrome’s language detection with contextual analysis from the Prompt API.
- I needed to balance speed and accuracy — minimizing API latency with local caching and on-device AI.
- Creating a smooth UX that works across short and long text interactions while staying lightweight within Chrome’s constraints.
🏆 Accomplishments I’m proud of
- Designed a smooth, responsive popup UI that feels natural while reading
- Combined five built-in AI APIs effectively in a single educational use case
- Added offline capability and cache optimization for instant responses
- Built and demoed the entire extension solo within two weeks
📚 What I learned
- How to integrate Chrome’s built-in AI APIs (Prompt, Summarizer, Translator, Proofreader) into real-world browser experiences
- How on-device AI (Gemini Nano) can enhance privacy and responsiveness
- The importance of minimalist UX — making AI tools invisible yet powerful
- Designing educational AI systems that are practical, lightweight, and accessible
🌱 What’s next for LingoVine
- Supporting cross-device word bank sync
- Introducing learning progress tracking and analytics
- Optimizing Core Performance and AI Responsiveness
- Publishing on the Chrome Web Store to help more users learn languages naturally while browsing
LingoVine’s mission is to make language learning effortless — helping users grow their vocabulary, confidence, and curiosity one word at a time, just like a vine that keeps reaching upward. 🌿
Log in or sign up for Devpost to join the conversation.