Rami - Your AI Study Sidekick Extension

Inspiration

Learning is powerful—but let’s be honest, it’s not always easy. Sometimes it’s slow. Sometimes it’s frustrating. You reread the same paragraph three times, trying to make sense of it. Your brain feels foggy, the concepts won’t click, and the pressure keeps building.

We’ve felt that too. Not because we weren’t trying hard enough— but because traditional tools weren’t built for how our minds actually work.

Then came the “aha moment” during a late-night study session. It’s 2 AM. You’re exhausted. You need a break. What’s the fastest way to reset? Instant noodles. Simple, comforting, no thinking required.

Learning should be like instant noodles for your brain—quick, satisfying, and energizing. 🍜

We built RAMI to take the stress out of studying, transform complex material into digestible chunks, and give your mind the refresh it craves.

Just like how ramen (ラーメン) fuels late-night marathons, RAMI—short for Read, Analyze, Map, Insight—fuels your learning journey.

Traditional note-taking tools force linear thinking. But our brains work in networks, connections, and visual patterns.

We wanted something that could turn the flood of information into clear, interactive mindmaps—designed to match how you think and learn best.

RAMI was born from the belief that learning should be:

🧠 Visual — because we think in shapes, not spreadsheets

🎯 Personalized — because no two learners are the same

🍜 Satisfying — like that first bite of hot ramen after hours of studying

What it does

RAMI (Read, Analyze, Map, Insight) is your AI-powered study sidekick that transforms any material into interactive mindmaps, quizzes, and Summarize

Core Features:

📖 Summarization: Uses Gemini Nano to distill complex articles into key insights

🧠 Dual Mindmap Views: Choose between React Flow (interactive, draggable) or Mermaid (exportable, markdown-based) visualizations

🎭 5 AI Personas: Adapt RAMI's reasoning style—Strategist, Analyst, Architect, Researcher, or Mentor

✏️ Smart Highlights: Link highlighted text directly to mindmap nodes for context-aware note-taking

🎯 Quiz Generation: Auto-generate interactive quizzes from your mindmaps to test comprehension

🔒 Privacy-First: All AI processing happens locally—your data never leaves your device

📤 Export Everywhere: Download mindmaps as SVG for use in Notion or Obsidian

How we built it

RAMI is built on a privacy-first, visual-learning architecture designed to make studying feel intuitive, personal, and secure.

By harnessing cutting-edge AI that runs entirely in your browser, RAMI becomes a real-time study sidekick—no internet required.

It’s engineered to: 🔍 Analyze and distill complex articles into clear, actionable insights

🧠 Transform linear text into interactive mindmaps using dual visualization engines

🎭 Adapt to your thinking style with five AI personas: Strategist, Analyst, Architect, Researcher, and Mentor

🔒 Protect your privacy by processing everything locally—your data never leaves your device

🌐 Work seamlessly across any website, turning overwhelming content into visual knowledge

Our development was guided by three core principles:

Visual clarity — so you can see how ideas connect
Adaptive learning — so RAMI fits your style, not the other way around
Zero-compromise privacy — so you can trust every click, highlight, and insight

From tree-structured mindmaps to instant quiz generation, every feature was built to support these goals—and to make learning feel as satisfying as that first bite of hot ramen after hours of studying.

Challenges we ran into

Mermaid SVG Crashes Mermaid was crashing when trying to measure SVG text before the DOM was ready. To fix this, we switched from mermaid.run() to the legacy mermaid.render() API, which pre-renders diagrams off-screen. We inserted the SVG manually and added a double requestAnimationFrame plus a 150ms setTimeout to ensure the DOM was fully ready before rendering.
React Flow Edge Visibility Edges pointing to nodes above the main node weren’t rendering properly. React Flow handles can only be either a source or a target—not both. To solve this, we created bidirectional handles for each node position, allowing upward connections to display correctly.
Gemini Nano Context Limits Gemini Nano has a context window of about 2000 tokens, which limits how much content it can process at once. We solved this by splitting long articles into 1500-character chunks and summarizing each batch individually, then combining the results.
Mindmap Tree Structure Enforcement Users could create many-to-many relationships between nodes, which led to visual clutter and confusion. To maintain clarity, we enforced a tree structure by tracking parent assignments and skipping duplicate connections during rendering.

Accomplishments that we're proud of

RAMI isn’t just fast—it’s private, powerful, and obsessively refined. 🔒 100% Offline AI — No API keys, no subscriptions, no privacy concerns

⚡ Sub-second mindmap generation — Gemini Nano processes summaries in ~800ms

🧠 Zero data leakage — All processing happens locally, right on your device

🌍 Accessible to 1B+ users — Available to anyone on Chrome 127+, which reaches over 3.45 billion users

🔁 50+ hours of iteration — We rebuilt the mindmap engine four times to get it just right

🐞 Fixed 6 major bugs — Including the infamous getComputedTextLength crash that haunted us for days

What we learned

🧪 Technical Insights

Chrome’s AI APIs are production-ready Gemini Nano proved to be fast, reliable, and powerful enough for real-world, offline AI experiences.
SVG rendering is deceptively complex From text measurement quirks to DOM timing and coordinate systems, rendering clean, responsive diagrams required deep attention to detail.
React Flow is a powerhouse Its flexibility allowed us to build fully custom nodes, edges, and layouts—essential for our dynamic mindmap engine.
Mermaid.js demands precision Even a stray character could break a diagram. We built robust sanitization layers to ensure stability and syntax safety.

🎨 Design Discoveries

Visual beats linear Users processed information up to 40% faster with mindmaps compared to traditional bullet points.
Personas drive engagement Giving users the ability to choose how RAMI thinks—Strategist, Analyst, Architect, Researcher, or Mentor—made the experience feel more personal and intuitive.
Offline isn’t a limitation—it’s a superpower What started as a privacy safeguard became a standout feature. Users loved the speed, security, and independence of local AI.

What's next for Rami - Your AI Extension Study Sidekick

📆 Short-Term (Next 3 Months)

Bi-directional linking Connect concepts across multiple articles—like Obsidian, but visual and automatic.
Spaced repetition Schedule quizzes based on forgetting curves to reinforce long-term memory.
Voice input Summarize podcasts and videos using speech-to-text for hands-free learning.

🌠 Long-Term Vision

Multi-document synthesis Combine insights from 10+ articles into one unified, cross-linked mindmap.
AI tutor mode Ask questions and get answers directly from your personalized knowledge graph.
Auto-note generation Export structured notes to Notion or Obsidian with backlinks and context.
Research assistant Automatically surface connections between papers, concepts, and ideas you might’ve missed.

🎯 The Ultimate Goal Make learning unstoppable.

We envision RAMI as the default way students, researchers, and curious minds engage with information— not just reading, but truly understanding.

Our mission is to transform the web from a sea of scattered text into a connected universe of knowledge— where ideas link, insights emerge, and learning becomes visual, personal, and deeply satisfying.

RAMI isn’t just a tool. It’s a new way to think.