VibeMongo Admin - MongoDB Track

AI-first MongoDB administration dashboard powered by a triad of cutting-edge technologies: Google Cloud Agent, the MongoDB MCP Server, and Arize Phoenix Cloud & MCP for monitoring and LLM evaluation.

Comment

Inspiration

Managing MongoDB databases using traditional GUI clients often involves writing complex, syntax-heavy aggregation pipelines just to get simple answers. For developers who are not MongoDB experts, writing these pipelines can be a huge time sink. Furthermore, monitoring database performance and identifying slow queries usually requires jumping into completely separate APM (Application Performance Monitoring) tools.

We were inspired to build a modern, web-based admin interface that combines the robust features of traditional database clients with the power of generative AI and real-time observability. Our goal was to create a "Vibe" where managing databases feels effortless, intuitive, and conversational, while also introducing Autonomous Database SRE capabilities.

What it does

VibeMongo Admin is a next-generation, responsive web-based MongoDB administration dashboard powered by Vue 3, Express, and a powerful triad of technologies: Google Cloud Agent (ADK), Arize Phoenix, and MongoDB MCP.

It provides a fully-featured interface for database management (connecting, viewing collections, managing documents, building indexes, and running backups/restores).

The standout features are driven by our AI architecture:

  1. AI Database Administrator Assistant: A persistent chat sidebar where users can ask natural language questions (e.g., "Show me the top 5 users by age"). The Google Agent securely interacts with MongoDB, parses the results, and dynamically renders the output as interactive UI components (ECharts graphs, clickable navigation buttons).
  2. DB-Guardian Copilot (AI-Driven SRE): Powered by Arize Phoenix telemetry, VibeMongo actively monitors query performance. It surfaces slow queries in the UI via the Phoenix Alert Banner.
  3. Ask AI to Optimize & AI Judge Evaluate: Users can click to have the Google Cloud Agent analyze a slow trace waterfall, explain the bottleneck step-by-step in natural language, and suggest optimizations (like adding indexes) or evaluate the safety of the query.

Architecture & Technology Stack

VibeMongo Admin runs as a unified containerized service hosting both backend API services and frontend assets.

VibeMongo Architecture Diagram

Core Integration (The Tri-Partner Architecture)

  • Frontend (UI/UX): Vue 3 (Composition API) with Vite, styled with modern Element Plus and ECharts. We built a dynamic parsing engine that reads specific JSON blocks outputted by the AI agent to render interactive components on the fly.
  • Brain (Google Cloud Agent & Gemini): We utilized the Google Agent Development Kit (ADK) and Google's highly capable Gemini 3.1 Flash-Lite model on Vertex AI to act as the central reasoning engine.
  • Execution (MongoDB MCP): To bridge the AI agent with MongoDB securely, we integrated the official MongoDB MCP Server (mongodb-mcp-server). The Agent leverages this standardized Model Context Protocol to introspect schemas and execute aggregation pipelines dynamically based on the current active connection.
  • Observability & Evaluation (Arize Phoenix Cloud & MCP): We integrated the Arize Phoenix MCP and @arizeai/phoenix-otel to capture OpenTelemetry traces of both MongoDB operations and LLM reasoning. When the user requests an "AI Judge Evaluation" or "Ask AI to Optimize", the UI fetches the trace data and sends it back to the Gemini Agent to provide human-readable, step-by-step diagnostic feedback directly in the chat interface.

Technology Stack Components

Frontend (Client)

Component Technology Role / Description
Framework Vue 3 + TypeScript Core reactive Single Page Application (SPA) using Composition API
Build Tool Vite Ultra-fast Hot Module Replacement (HMR) and production build pipeline
UI Library Element Plus Premium component library for modern, dark-mode native dashboard layout
Charts & Dataviz ECharts, Chart.js, vue-echarts Interactive query results and performance metrics visualization
State Management Pinia Modular, type-safe global client state stores
Routing Vue Router 4 Client-side view routing & navigation guards
HTTP Client Axios RESTful API communication with the backend service
i18n vue-i18n Multi-language localization support
Styling Sass (SCSS) CSS preprocessor for custom glassmorphic styling and smooth variables control

Backend (Server)

Component Technology Role / Description
Runtime Node.js 20+ Fast, cross-platform JavaScript server runtime
Framework Express 4 Lightweight REST API endpoint router
Language TypeScript Strong typing for clean, maintainable backend business logic
Database Driver MongoDB Node.js Driver v6 Native driver for direct database management and CRUD operations
Observability DB NeDB (@seald-io/nedb) Lightweight, embedded datastore for telemetry, server stats & monitoring
Connection Store SQLite (sqlite3) Encrypted, server-side storage of MongoDB connection profiles
File Handler Multer Multipart form parser for uploading zip-based database backups

AI Agent & Observability Layer

Component Technology Role / Description
Agent SDK @google/adk v1 Google Agent Development Kit for AI agent orchestration and tool execution
LLM Model Gemini (via Vertex AI / Google AI Studio) High-performance reasoning engine for natural-language-to-BSON query translation
Tool Transport MCP stdio subprocess Secure local execution of the mongodb-mcp-server command via standard I/O
MCP SDK @modelcontextprotocol/sdk Node SDK implementing Model Context Protocol JSON-RPC standard
Database Tools mongodb-mcp-server (npx) Official MongoDB MCP tools for schema introspection and pipeline execution
Telemetry Tools @arizeai/phoenix-mcp Trace monitoring integration for real-time trace analysis & DB-Guardian
Observability APM Arize Phoenix Cloud & OpenTelemetry Telemetry spans capture for LLM evaluations, tracing bottlenecks & query debugging

Challenges we ran into

Integrating an LLM with live database queries and observability tools presents security and architectural challenges:

  1. Dynamic Tool Provisioning: Passing the correct database connection string to the MCP server dynamically as the user switched between servers was tricky. We solved this by decrypting the active connection string on the fly and injecting it into the environment variables when spawning the mongodb-mcp-server subprocess.
  2. Structured Rendering: The LLM would often format responses unpredictably, breaking UI rendering. We solved this by implementing strict SYSTEM_INSTRUCTION prompts that forced the ADK Agent to output structured tags (like [COLLECTIONS]...[/COLLECTIONS]).
  3. Closing the Evaluation Loop: To provide real "LLM-as-a-judge" capabilities, we had to elegantly map Arize Phoenix's trace telemetry back into Gemini's context window. We built a bridge that allows the UI to fetch a trace span, construct an evaluation prompt, and trigger the Agent Chat seamlessly.

Accomplishments that we're proud of

  • We successfully built a stable bridge between Google ADK, MongoDB MCP Server, and Arize Phoenix, demonstrating how standardized protocols (MCP) can dramatically accelerate autonomous agent development.
  • The dynamic rendering engine: seeing the AI agent return raw aggregation data and having the Vue frontend instantly transform it into a beautiful, interactive ECharts visualization is incredibly satisfying!
  • We achieved 100% functional parity with traditional MongoDB web admins while introducing groundbreaking AI and SRE features.

What we learned

  • We gained deep hands-on experience with the Google Agent Development Kit (ADK) and orchestrating multi-turn, tool-using agents.
  • We learned how the MongoDB MCP (MCP) standardizes the way AI models interact with MongoDB data sources securely.
  • We discovered the immense value of Arize Phoenix for tracing complex LLM-to-Database toolchains, making debugging and optimization significantly easier.

What's next for VibeMongo Admin

  • Automated Index Optimization (Auto-Pilot): Moving beyond suggestions to allow the DB-Guardian to automatically apply index optimizations during low-traffic periods.
  • Data Generation: Adding an agentic feature to generate massive amounts of realistic mock data for testing environments based on the collection's inferred schema.
  • Role-Based Access Control (RBAC): Implementing multi-user support so teams can collaborate and restrict certain destructive AI operations.

Built With

Share this project:

Updates