F45 Admin Console — AI Feature Module

AI administration module for managing agents, conversations, and settings — React frontend integrated; backend APIs and LLM integration in progress.

Role: Full Stack Developer

Location context: Remote · India

Overview

An AI-focused administration and management module built for an enterprise admin console. The module centralises AI dashboard metrics, agent configuration, conversation management, and AI-related settings behind role-based access control — with the full frontend experience completed and backend architecture underway.

Challenge

Operations and admin teams needed a single interface to manage AI agents, review activity, handle conversations, and configure AI settings — without exposing functionality to users who lacked the right permissions.

Approach

Structured the module into four core areas — Dashboard, Agents, Conversations, and Settings — each with dedicated React interfaces, shared navigation patterns, and permission-gated routes. Frontend flows were built and integrated using mock data while backend APIs and LLM provider integration are designed in parallel.

Key contributions

Built and integrated React frontend for AI Dashboard, Agents, Conversations, and Settings
Implemented role-based access control across all AI module routes and navigation
Designed UI flows for agent configuration, prompt management, voice settings, and tools setup
Developed conversation management interfaces with message history and contact context
Created dashboard layouts for performance metrics, activity monitoring, and call quality overview
Implemented AI settings screens for notifications, reminders, and user preferences
Prepared frontend architecture for REST API integration once backend endpoints are live

Key features

AI Dashboard: performance metrics, activity monitoring, call quality overview, agent insights
AI Agents: agent management, prompts, voice config, tools, compliance and widget settings
AI Conversations: conversation list, chat interface, message history, contact information
AI Settings: notification preferences, reminders, user preferences, AI configuration
Role-based access control for Dashboard, Agents, Conversations, and Settings
Modular React architecture ready for backend API wiring

Technology stack

Frontend: React, JavaScript, component-based UI
Backend: Ruby on Rails (API layer in development)
Architecture: REST APIs, Role-Based Access Control, AI agent architecture
Ai: LLM provider integration and prompt management (planned)
Other: Conversation management, analytics and monitoring (planned)

Technical challenges

Frontend-first with evolving backend contracts

Problem: AI features depend on backend and LLM APIs still being finalised while the UI needed to ship first.

Solution: Built integrated React interfaces against mock data with clear API integration points for the next phase.

Permission-scoped AI functionality

Problem: Different admin roles need access to different AI areas without exposing sensitive configuration.

Solution: Role-based route and navigation gating across Dashboard, Agents, Conversations, and Settings.

Current status

Frontend complete for all four major AI pages and integrated into the application. Current UI runs on mock/static data while backend APIs, persistent settings, and live AI/LLM integration are in active development.

Roadmap

Backend API development for agents, conversations, and settings
AI/LLM provider integration and agent configuration APIs
Conversation and messaging APIs with persistent storage
Dashboard analytics APIs with live activity and performance data
Token usage and cost tracking
Frontend-to-backend integration, QA, and production deployment

Timeline

Frontend phase complete · Backend and AI integration phase in progress

Enterprise admin console work — client names, credentials, internal URLs, and production endpoints are not disclosed publicly. Live AI/LLM integration is not yet in production.