Skip to content
BranchesTags

Repository files navigation

AI Analytics Client

AI Analytics

An intelligent analytics platform that transforms your databases into interactive AI-powered dashboards

React TypeScript Vite TailwindCSS

📋 Table of Contents

🌟 Overview

AI Analytics Client is a modern, cutting-edge web application that revolutionizes data analytics by combining the power of AI with interactive visualizations. Connect your databases, and let AI automatically generate insights, relationships, and beautiful analytics dashboards—all through a conversational interface.

This is the frontend client built with React, TypeScript, and modern web technologies, designed to provide a seamless, premium user experience with stunning UI/UX.

Key Highlights

  • 🤖 AI-Powered Analytics: Automatically generate insights and dashboards from your data
  • 💬 Conversational Interface: Chat with your data using natural language
  • 🔌 Multi-Database Support: Connect to various database systems (PostgreSQL, MySQL, etc.)
  • 📊 Interactive Dashboards: Drag-and-drop customizable analytics panels
  • 🎨 Premium UI/UX: Modern design with smooth animations and dark mode support
  • 🔒 Secure Authentication: Built with Supabase authentication

✨ Features

🎯 Core Features

  • Datasource Management

    • Connect multiple databases (PostgreSQL, MySQL, MongoDB, etc.)
    • Auto-generate database schemas
    • AI-powered relationship detection
    • Semantic layer generation for natural language queries

  • AI-Powered Dashboards

    • Automatically generate analytics dashboards from database schemas
    • Interactive chart panels (Bar, Line, Pie, Area, Scatter, etc.)
    • Drag-and-drop grid layout for customization
    • Real-time data querying and visualization

  • Conversational Analytics (Threads)

    • Chat with your data using natural language
    • AI interprets questions and generates SQL queries
    • Streaming responses with real-time updates
    • Context-aware conversations about your data

  • Theme Support

    • Beautiful light and dark themes
    • Smooth transitions and animations
    • Premium glassmorphism effects

  • Authentication & Security

    • Secure user authentication via Supabase
    • Password reset functionality
    • Protected routes and session management

🎨 UI/UX Features

  • Responsive design for all screen sizes
  • Framer Motion animations for smooth interactions
  • Skeleton loaders for better perceived performance
  • Toast notifications for user feedback
  • Interactive modals and dialogs
  • Custom scrollbars and hover effects

🛠️ Tech Stack

Core Technologies

Technology Version Purpose
React 19.1.1 UI Framework
TypeScript 5.8.3 Type Safety
Vite 7.1.2 Build Tool & Dev Server
TailwindCSS 4.1.12 Styling Framework
Redux Toolkit 2.8.2 State Management
React Router 7.8.2 Routing

Key Libraries

UI Components & Styling

  • Radix UI - Accessible component primitives
  • Framer Motion (12.23.13) - Animation library
  • Lucide React - Icon library
  • class-variance-authority - Component variants
  • tailwind-merge - Utility class merging

Data Visualization

  • Recharts (3.3.0) - Chart library
  • React Grid Layout (1.5.2) - Draggable grid system
  • @xyflow/react (12.8.6) - Node-based UI

AI & Chatbot

  • ai (5.0.92) - Vercel AI SDK for streaming
  • react-markdown (10.1.0) - Markdown rendering
  • react-syntax-highlighter - Code syntax highlighting
  • shiki - Code highlighting with themes
  • katex - Math rendering

Backend Integration

  • @supabase/supabase-js (2.57.4) - Backend & Auth
  • RTK Query - API state management

Form Handling

  • react-hook-form (7.62.0) - Form state management
  • @rjsf/core - JSON Schema forms
  • zod (4.1.8) - Schema validation

Developer Experience

  • ESLint - Code linting
  • @vitejs/plugin-react-swc - Fast refresh with SWC

🚀 Getting Started

Prerequisites

Before you begin, ensure you have the following installed:

  • Node.js: Version 18.x or higher
  • npm: Version 9.x or higher (comes with Node.js)
  • Git: For cloning the repository

Installation

  1. Clone the repository
git clone <repository-url>
cd ai_analytics_client
  1. Install dependencies
npm install

Environment Setup

Create a .env.local file in the root directory with the following variables:

# Supabase Configuration
VITE_SUPABASE_URL=your_supabase_project_url
VITE_SUPABASE_PUBLISHABLE_KEY=your_supabase_anon_key

# Analytics AI API
VITE_ANALYTICS_AI_API_URL=your_backend_api_url

Note: See .env.example for reference. You'll need to set up a Supabase project and the corresponding backend API.

Running the Application

Development Mode

npm run dev

The application will be available at http://localhost:5173

Build for Production

npm run build

This creates an optimized production build in the dist folder.

Preview Production Build

npm run preview

Linting

npm run lint

📁 Project Structure

ai_analytics_client/
├── public/                          # Static assets
│   ├── ai_analytics_illustration.png
│   └── undraw_*.svg                # Illustration assets
├── src/
│   ├── assets/                      # Images, fonts, etc.
│   ├── components/                  # React components
│   │   ├── analytics/              # Dashboard & chart components
│   │   ├── auth/                   # Authentication components
│   │   ├── chat/                   # Chat interface components
│   │   ├── dashboard/              # Dashboard layout components
│   │   ├── datasources/            # Datasource management
│   │   ├── layout/                 # App layout components
│   │   ├── main/                   # Main page templates
│   │   ├── modals/                 # Modal dialogs
│   │   ├── threads/                # Thread/chat components
│   │   ├── theme/                  # Theme toggle components
│   │   └── ui/                     # Reusable UI components (52 components)
│   ├── constants/                   # App constants
│   ├── hooks/                       # Custom React hooks
│   ├── lib/                         # Utility libraries
│   │   └── supbaseClient.ts        # Supabase client setup
│   ├── pages/                       # Page components
│   │   ├── dashboards/             # Dashboard pages
│   │   ├── datasources/            # Datasource pages
│   │   ├── threads/                # Thread pages
│   │   ├── signin/                 # Sign in page
│   │   ├── signup/                 # Sign up page
│   │   ├── forgot-password/        # Password recovery
│   │   ├── reset-password/         # Password reset
│   │   └── page.tsx                # Home page
│   ├── providers/                   # Context providers
│   │   └── AuthProvider.tsx        # Authentication provider
│   ├── store/                       # Redux store
│   │   ├── auth/                   # Auth state & API
│   │   ├── common/                 # Common API configuration
│   │   ├── dashboards/             # Dashboard state & API
│   │   ├── datasources/            # Datasource state & API
│   │   ├── threads/                # Threads state & API
│   │   └── store.ts                # Redux store configuration
│   ├── types/                       # TypeScript type definitions
│   ├── App.tsx                      # Main App component
│   ├── main.tsx                     # App entry point
│   └── index.css                    # Global styles
├── .env.example                     # Environment variables template
├── .gitignore                       # Git ignore rules
├── components.json                  # shadcn/ui configuration
├── eslint.config.js                # ESLint configuration
├── index.html                       # HTML entry point
├── package.json                     # Dependencies & scripts
├── tsconfig.json                    # TypeScript configuration
├── tsconfig.app.json               # App-specific TS config
├── tsconfig.node.json              # Node-specific TS config
├── vite.config.ts                  # Vite configuration
└── README.md                        # This file

🔍 Key Features Details

1. Datasource Connection

Users can connect to various databases:

  1. Navigate to the home page
  2. Click "Add Datasource"
  3. Select database type (PostgreSQL, MySQL, etc.)
  4. Enter connection credentials
  5. AI automatically:
    • Fetches database schema
    • Generates table relationships
    • Creates semantic layer for natural language queries

Key Files:

  • src/components/datasources/ - UI components
  • src/store/datasources/datasources.api.ts - API endpoints

2. AI-Generated Dashboards

Once a datasource is connected:

  1. Click "Generate Analytics" on a datasource
  2. AI analyzes the database schema
  3. Automatically creates multiple chart panels
  4. Users can:
    • Drag and drop panels to rearrange
    • Resize panels
    • Delete or refresh individual panels

Chart Types Supported:

  • Bar Chart
  • Line Chart
  • Pie Chart
  • Area Chart
  • Scatter Plot
  • Composed Charts
  • And more...

Key Files:

  • src/components/analytics/charts/ - Chart renderers
  • src/components/dashboard/DashboardGrid.tsx - Grid layout
  • src/store/dashboards/dashboards.api.ts - Dashboard API

3. Conversational Analytics (Threads)

Chat with your data:

  1. Create a new thread
  2. Select a datasource
  3. Ask questions in natural language
  4. AI:
    • Interprets your question
    • Generates appropriate SQL queries
    • Returns visualizations or data tables
    • Maintains conversation context

Key Files:

  • src/components/threads/ - Thread UI components
  • src/components/chat/ - Chat interface
  • src/store/threads/threads.api.ts - Threads API

4. State Management

The app uses Redux Toolkit with RTK Query for efficient state management:

  • Auth State: User authentication and session
  • Datasources: Connected databases
  • Dashboards: Dashboard configurations and panels
  • Threads: Conversation threads
  • Common: Shared API configuration with auto-reauth middleware

Key Files:

  • src/store/store.ts - Redux store configuration
  • src/store/*/*.api.ts` - RTK Query endpoints

📚 Usage Guide

First Time Setup

  1. Sign Up

    • Navigate to /signup
    • Create an account with email and password
    • Confirm email (if required by Supabase settings)

  2. Sign In

    • Navigate to /signin
    • Enter credentials
    • You'll be redirected to the home page

  3. Connect Your First Datasource

    • Click "Add Datasource" on the home page
    • Fill in the connection form
    • Wait for AI to process the schema

  4. Generate Your First Dashboard

    • Click on a connected datasource
    • Click "Generate Analytics"
    • Watch as AI creates visualizations!

  5. Start a Conversation

    • Create a new thread
    • Select your datasource
    • Ask questions about your data!

Navigation

  • Home (/): Dashboard overview, datasources, and threads
  • Dashboard (/dashboards/:id): View and interact with a specific dashboard
  • Datasource (/datasources/:id): Manage a specific datasource
  • Thread (/threads/:id): Chat interface for conversational analytics

🏗️ Architecture

Component Architecture

The application follows a modular component architecture:

Components
├── Pages (Route-level components)
├── Templates (Page layouts)
├── Organisms (Complex components)
├── Molecules (Composite components)
└── Atoms (Base UI components in /ui)

State Management Flow

User Action → Component → Redux Action/RTK Query
                                ↓
                        API Middleware
                                ↓
                        Backend API
                                ↓
                        Update Redux State
                                ↓
                        Component Re-renders

Authentication Flow

1. User signs in → Supabase Auth
2. AuthProvider checks session
3. Protected routes validate authentication
4. API calls include auth token via middleware
5. Auto-refresh on token expiration

🔗 API Integration

Backend Requirements

This frontend expects a backend API with the following endpoints:

Datasources

  • POST /datasources/create - Create new datasource
  • DELETE /datasources/:id - Delete datasource
  • POST /datasources/schemas - Fetch database schema
  • POST /datasources/generate-relationships - AI relationship generation
  • POST /datasources/generate-semantics - AI semantic layer generation
  • POST /datasources/query - Execute database query

Analytics

  • POST /chat/analytics - Generate AI analytics dashboard

Authentication

Handled via Supabase directly from the client.

API Configuration

API base URL is configured in:

  • .env.local → VITE_ANALYTICS_AI_API_URL
  • src/store/common/common.api.ts - RTK Query base configuration

🎨 Theming

The app supports light and dark themes:

  • Theme Toggle: Available in the navigation bar
  • Persistence: Theme preference saved to localStorage
  • SSR-Safe: Theme applied before React hydration to prevent flash

Theme Implementation:

  • Uses next-themes for theme management
  • TailwindCSS dark mode classes
  • Custom CSS variables in src/index.css

🧪 Development Guidelines

Code Style

  • TypeScript: Strict mode enabled
  • ESLint: Used for linting
  • File Naming:
    • Components: PascalCase.tsx
    • Utilities: camelCase.ts
    • Styles: kebab-case.css

Component Guidelines

  1. Use functional components with hooks
  2. Prefer composition over inheritance
  3. Keep components small and focused
  4. Use TypeScript interfaces for props
  5. Implement proper loading and error states

State Management

  1. Use Redux for global state
  2. Use RTK Query for server state
  3. Use React hooks for local component state
  4. Implement optimistic updates where appropriate

🤝 Contributing

Contributions are welcome! Please follow these steps:

  1. Fork the repository
  2. Create a feature branch (git checkout -b feature/AmazingFeature)
  3. Commit your changes (git commit -m 'Add some AmazingFeature')
  4. Push to the branch (git push origin feature/AmazingFeature)
  5. Open a Pull Request

Development Workflow

  1. Ensure all ESLint rules pass: npm run lint
  2. Test your changes thoroughly
  3. Update documentation if needed
  4. Follow the existing code style

📄 License

This project is currently unlicensed. Please contact the project owner for licensing information.

🙏 Acknowledgments

  • Radix UI for accessible component primitives
  • shadcn/ui for the component design system
  • Vercel for the AI SDK
  • Supabase for backend and authentication
  • Recharts for beautiful data visualizations
  • All open-source contributors

📞 Support

For issues, questions, or suggestions:

  • Create an issue in the repository
  • Contact the development team

Made with ❤️ using React, TypeScript, and AI

About

No description, website, or topics provided.

Resources

Readme
Activity

Stars

0 stars

Watchers

0 watching

Forks

0 forks
Report repository

Releases

Packages

Contributors

Languages