AI Tool Usage Reporting Dashboard

A comprehensive suite of HTML dashboards for reporting on AI tool usage and conversation data via webhook APIs.

Total cost: $6.36 Total duration (API): 17m 17.1s Total duration (wall): 3h 40m 1.3s

Overview

This repository contains several connected reporting tools:

1. Main Navigation Dashboard (main-index.html): Central hub for accessing all reports
2. Conversation Reports:
   • Latam Report (index-Latam.html): Latin America conversation metrics
   • SBII Report (index-SBII.html): SBII platform conversation metrics
   • Sidekick Report (index-sidekick.html): Sidekick assistant conversation metrics
3. AI Tool Usage Report (SANDBOX-ai-tools-report.html): Monitors usage of AI tools like Text-to-Voice and Text-to-Image services

Main Navigation Dashboard

A clean, card-based interface for navigating between all available reports. Each report is represented by a color-coded card with a description of its purpose and a direct link to open it.

Conversation Reports

Features

• Simple Interface: Clean, compact design using Montserrat font
• Data Selection: Dropdown menu to select different conversation datasets
• Assistant Name Resolution:
  • Automatically looks up friendly names for assistant IDs
  • Displays both name and ID in reports for easy identification
  • Handles multiple assistant databases for Latam report
• Pivot Table View:
  • Groups data by Assistant
  • Shows conversation count per user
  • Includes subtotals per Assistant
  • Displays grand total of all conversations
• Usage Graph:
  • Interactive line chart showing usage over time
  • Filter data by time period (Today, 7 days, 30 days, 3 months, All time)
  • Color-coded lines for different assistants
  • Assistants labeled by name instead of ID for readability
• CSV Export:
  • Export all raw data in CSV format
  • Includes both assistant IDs and names in separate columns
  • Timestamp included in filename for version tracking

How to Use Conversation Reports

1. Open main-index.html in a web browser to access the navigation dashboard
2. Select the desired report from the available options
3. In each report, select the desired dataset from the dropdown (if applicable)
4. Click "Send Request" to fetch the data
5. View the usage graph showing trends over time, and use time filters to focus on specific periods
6. Explore the detailed pivot table showing conversation metrics
7. Use the "Export CSV" button to download the raw data as a CSV file

AI Tool Usage Report

Features

• Multi-view Dashboard: Comprehensive analytics with multiple views
• Data Filtering: Filter by date range, user, model and sub-tool
• Summary Cards: Quick overview of usage metrics
• Multiple Pivot Tables:
  • By User: See which users are using which tools
  • By Model: Track usage across different AI models
  • By Sub-Tool: Analyze which sub-tools are most popular
• Detailed View: See all usage entries with full details
• CSV Export: Download full raw data as a CSV file

How to Use AI Tools Report

1. Open the AI Tools Report from the main dashboard
2. Select report type from dropdown (All Tools, Text-to-Voice, Text-to-Image)
3. Click "Send Request" to fetch the data
4. Use the filters to narrow down results by date, user, model or sub-tool
5. Navigate between tabs to see different views of the data

Technical Details

• Pure HTML/CSS/JavaScript: Uses native web technologies
• Chart.js Integration: For interactive data visualization
• Multiple API Endpoints:
  • Each report connects to appropriate data webhooks
  • Assistant name lookup uses separate assistant database webhooks
• Parallel API Calls: Makes simultaneous requests to improve loading performance
• Authentication: Includes secure auth_code token with each request
• Error Handling: Gracefully handles API errors and displays user-friendly messages
• Responsive Design: Works on desktop and tablet devices

Data Structures

Conversation Data

[
  {
    "data": {
      "User_ID": "example@domain.com",
      "StartTime": "2024-10-21T21:29:47.470Z",
      "Brand Voice Setting": "standard",
      "Title": "Example Title",
      "EndTime": "2024-10-21T21:29:57.203Z",
      "Assistant_ID": "asst_identifier",
      "Assistant_Key": "key_value",
      "Conversation_ID": "conversation_id",
      "Vision_Images": ""
    }
  }
]

Assistant Data

[
  {
    "data": {
      "Name": "Friendly Assistant Name",
      "Assistant ID": "asst_identifier",
      "Instructions": "Assistant instructions...",
      "Model": "claude-3-sonnet-20240229"
    }
  }
]

AI Tool Usage Data

[
  {
    "data": {
      "Date": "2024-05-15T23:00:00.000Z",
      "TOOL": "TEXT2VOICE",
      "USER": "user@example.com",
      "MODEL": "eleven_multilingual_v2",
      "PROMPT": "Example prompt text",
      "SUB_TOOL": "Elevenlabs",
      "SETTINGS": "Voice settings",
      "BOX_FILE_ID": "123456"
    }
  }
]