AI Monitor App

as-monitor-app

Comment

Inspiration

The AI Monitor App was born out of the growing demand for a unified platform to oversee and manage diverse AI agents and services. As businesses increasingly rely on AI solutions like voice assistants and chatbots, the need to monitor their performance, usage, and operational status becomes critical. This app delivers a centralized, intuitive dashboard that brings clarity and control to AI operations—streamlining management beyond fragmented tools and scattered data.

What it does

AI Monitor offers a comprehensive dashboard to track the health, activity, and usage of AI agents in one place.

Key features include:

  • Agent Management: Add, edit, and remove AI agents while specifying provider, category, and API keys.
  • Dynamic Dashboards: Create multiple customizable dashboards with drag-and-drop widgets.
  • Real-time Monitoring (Mocked): View agent statuses (online, warning, offline), monitor Vapi API usage, and track recent interactions.
  • User Authentication: Secure sign-up and sign-in with Supabase.
  • Customizable UI: Light/dark mode support with persistent preferences.
  • Responsive Design: Fully adaptive across mobile, tablet, and desktop devices.

How we built it

We used a modern, scalable web development stack to build the AI Monitor App:

  • Frontend: React with TypeScript for a robust user interface.
  • Styling: Tailwind CSS for consistent, responsive UI design.
  • State Management: React hooks (useState, useEffect, useCallback).
  • Backend & Database: Supabase for authentication and data storage.
  • Drag-and-Drop: @dnd-kit library for widget interactivity.
  • Build Tool: Vite for fast development and optimized builds.
  • Data Integration: Currently mocked or handled through Make.com webhooks, with future plans for direct API connections.

Challenges we ran into

  • Dynamic Grid Layout: Building a responsive drag-and-drop system that handles resizable widgets across devices.
  • Data Integration: Parsing and normalizing data from inconsistent or malformed webhook responses.
  • Supabase Integration: Structuring the database for secure user-specific data and managing dashboard layout persistence.
  • User Experience: Balancing customization with simplicity in drag-and-drop interactions and dashboard control.

Accomplishments that we're proud of

  • A fully interactive, customizable dashboard with smooth drag-and-drop functionality.
  • A modular and extensible component architecture.
  • Supabase integration for authentication and persistent, user-specific dashboard storage.
  • A clean, responsive interface using Tailwind CSS.
  • Intuitive tools for managing AI agents.

What we learned

  • Advanced React practices including context, hooks, and reusable components.
  • How to leverage Supabase for real-time database interactions and secure authentication.
  • Implementing drag-and-drop UI using @dnd-kit.
  • Handling and transforming external data structures for display and interaction.
  • Responsive design principles using Tailwind CSS.

What's next for AI Monitor App

  • Replace mock/webhook data with full API integrations to platforms like Vapi and Voiceflow.
  • Build advanced analytics views for agent performance and usage insights.
  • Add real-time logging and event tracking.
  • Expand the widget library for deeper customization and control.
  • Implement notification systems for agent status alerts.
  • Offer more settings for user preferences, including dashboard refresh intervals and UI configurations.

Built With

Share this project:

Updates

Submission history