Discover MCPs & agents
Loading MCPs and agents…
Loading MCPs and agents…
🗺️ Interactive IELTS Vocabulary Mindmap & Learning Platform co-engineered with Google Gemini AI, featuring Dynamic Bezier SVG Engine & Supabase Sync.
From the repo.
-F7DF1E?logo=javascript&logoColor=black){kind=icon}
English | 繁體中文
🌐 Live Application: https://ielts-vocab-mindmap.pages.dev/
IELTS Vocab Mindmap is an interactive, visual, and data-driven IELTS & General English scenario vocabulary learning platform. Co-engineered with Google Gemini 3.6 AI, the platform combines an AI-curated Cambridge IELTS exam dataset across 30 scenario units (1,148 core high-frequency words) with a dynamic SVG Bezier curve engine, 100% unique educational flashcard SVG illustrations, Web Speech API audio synthesis, and a hybrid dual-layer storage sync backed by Supabase PostgreSQL.
This project showcases a Human-in-the-Loop AI Engineering Workflow, leveraging cutting-edge LLMs to accelerate development velocity and elevate data quality:
unitsData.js), ensuring 1,148 words complete with precise IPA phonetics, IELTS Band target levels (Band 5.0 ~ 7.5+), authentic sample sentences, and exam tips.1.0x standard speed and 0.75x slow intensive listening mode.user_learned_words).graph TD
subgraph Client ["Browser Client Application"]
UI["User Interface & Control Panel"]
Engine["Bezier SVG Mindmap Engine"]
TTS["Web Speech API Audio Engine"]
Quiz["Dictation Quiz Controller"]
State["Global App State"]
LocalDB[("Web LocalStorage Cache")]
end
subgraph AI ["AI Data & Engineering Layer"]
Gemini["Google Gemini 3.6 AI"]
DataPipeline["AI-Curated 30-Unit IELTS Dataset Pipeline"]
end
subgraph Backend ["Cloud Backend - Supabase"]
SupaClient["Supabase JS Client SDK v2"]
PgDB[("PostgreSQL Cloud Database")]
RLS["Row Level Security"]
end
Gemini -->|"Dataset Generation & Validation"| DataPipeline
DataPipeline -->|"Structure 30-Unit unitsData.js"| State
UI -->|"User Action / Filter"| State
State -->|"Calculate Node Layout"| Engine
State -->|"Trigger Audio Playback"| TTS
State -->|"Load Quiz Vocabulary"| Quiz
State -->|"Progress Change"| LocalDB
State -->|"Hybrid Cloud Sync"| SupaClient
SupaClient -->|"Upsert / Delete / Fetch"| PgDB
PgDB --- RLS
| Layer | Technology / Tools | Details & Responsibilities |
|---|---|---|
| Frontend UI | Vanilla HTML5 / CSS3 / ES6+ JavaScript | Zero build-step architecture, Glassmorphism UI, Responsive CSS Grid |
| Mindmap Rendering | SVG Bezier Math Engine | Dynamic quadratic/cubic Bezier curves linking topic hubs to cards |
| Icon System | Educational Vector SVG Icons | 1,148 custom, word-specific minimal flat vector art icons |
| Audio Engine | Web Speech API (SpeechSynthesis) | Dual-speed (1.0x / 0.75x) native pronunciation for words and sentences |
| Database & Cloud | Supabase PostgreSQL & JS SDK v2 | Real-time cloud sync for user learning progress (user_learned_words) |
| State & Local Storage | LocalStorage + Event-driven Bus | Offline-first data caching with fallback capabilities |
| Deployment | Cloudflare Pages | Global Edge CDN hosting with zero latency |
| AI Co-Engineer | Google Gemini 3.6 & Antigravity | AI Data Pipeline for 30 IELTS units & pair programming |
Simply clone the repository and open index.html in any web browser:
git clone https://github.com/b1uewave/ielts-vocab-mindmap.git
cd ielts-vocab-mindmap
open index.html
For testing Web Speech API and Supabase network requests:
npx serve ./
# or
npx live-server ./
Then navigate to http://localhost:3000 or http://127.0.0.1:8080.
This project is licensed under the MIT License.
Replace {MCP_ENDPOINT_URL} with this MCP’s endpoint URL (from its repo or docs above). No API key — you connect directly.
Tool
OS
Config file: ~/.cursor/mcp.json
{
"mcpServers": {
"mcp-server": {
"url": "{MCP_ENDPOINT_URL}"
}
}
}Paste into mcpServers in the config file. Restart Cursor after saving.
If this MCP is also published on mcpchannel.ai, you can subscribe from Browse and use the gateway config there instead.