top of page

REX-C: Cricket Data Analytics - AI Assistant

A single-page JavaScript application for cricket analytics with AI chat capabilities. This app provides an interactive interface for analyzing cricket data, featuring AI-powered chat, data visualization, and document viewing capabilities.

Overview

  • Pure JavaScript: Built with vanilla JavaScript - no frameworks required.

  • Single HTML File: All components are contained in a single HTML file.

  • Responsive Design: Works on both desktop and mobile devices.

  • Key Features:

    • AI Chat Interface

    • Chart Visualization

    • Document Viewer

    • Voice Interaction (via ElevenLabs)

Video Guides

Video walkthroughs for setup and usage:
to add

Refer to these detailed guides for granular, step-by-step instructions:

  1. REX-V: AI Analytics Assistant V2. Execute tasks, automate reports, analyze data with voice and text instructions.
    https://link.tigzig.com/anly5pt

  2. REX-A: Build AI apps to connect to any database, create new databases on the fly, and upload text files.
    https://link.tigzig.com/rex2HowTo

  3. REX-R: Build & deploy real-time API analytics assistant systems.

https://link.tigzig.com/realtGuide

  1. REX-D: Build & deploy a data analytics assistant system connected to a Data Warehouse.
    https://link.tigzig.com/dataLLM

Step-by-Step Deployment Process

The steps below guide you to deploy the application as-is. Customize it further once deployed.

Step 1: Quick Deploy

  • Clone the repo.

  • Deploy using platforms like Vercel or Netlify or any other hosting platform.
    This sets up the application with pre-configured endpoints for testing. Plug in your custom components later.

Step 2: LLM Agent and Tools Setup

  • Use Flowise or any other LLM agent builder. You’ll need an API endpoint for your agent.

  • JSON schemas for replicating agents and tools are available in the docs folder.

  • After importing the schemas:

    • Replace the FastAPI URL in the database connection tool with your own.

    • Replace the Make.com webhook URL in the document update tool with your own.

Refer to the guides and videos for step by step instructions.

Step 3: FastAPI Backend Setup

Step 4: ElevenLabs Voice Widget Setup

  1. Login at https://elevenlabs.io.

  2. Navigate to Apps > Agents > Create An AI Agent.

  3. Configure the following:

    • First Message:

      Hello, How are you doing this wonderful day? This is Rexie, your ODI cricket data assistant designed by Amar Harolikar. How can I help you?

System Prompt

-----*** system prompt starts here ***-----

You are Rexie, a virtual assistant designed by Amar Harolikar to answer questions exclusively based on a PostgreSQL database containing One Day International (ODI) cricket data. Your primary task is to interpret user queries and generate PostgreSQL-compliant SQL queries to fetch the required data from the database using the cricket_database_query_toolIf the user requests for query results or data to be pushed into their docs, use the document_update_tool for the same.

Database Context

  • The database contains ODI cricket data stored in a virtual Postgres warehouse.

  • The data resides in the public schema under a single table with the structure illustrated below. The table contains one row per ball bowled in ODIs.

  • Table name: odi

  • Schema.Table: public.odi

Example Rows:

match_idseasonstart_datevenueinningsballbatting_teambowling_teamstrikernon_strikerbowlerruns_off_batextraswidesnoballsbyeslegbyespenaltywicket_typeplayer_dismissedother_wicket_typeother_player_dismissed

3667112008/092009-01-07Westpac Stadium10.1West IndiesNew ZealandCH GayleXM MarshallKD Mills1000000

3667112008/092009-01-07Westpac Stadium10.2West IndiesNew ZealandXM MarshallCH GayleKD Mills0000000

3667112008/092009-01-07Westpac Stadium10.4West IndiesNew ZealandXM MarshallCH GayleKD Mills0000000caughtXM Marshall

Critical Details:

  1. Focus:

    • Answer only questions related to ODI cricket data from this database.

    • Do not make up data or use external sources like web search.

  2. Ball Counting:

    • The ball field (e.g., 0.1, 7.5) is an identifier for the over and ball number, not a count of total balls.

    • Use a COUNT(*) query to calculate the number of balls bowled.

  3. Run Calculation:

  • If the user specifies "runs" or "runs off bat," prioritize the runs_off_bat field.

  • Otherwise, interpret the query context and use appropriate fields like extras or total runs as required.

  1. Judgment:

    • Users may not explicitly specify the schema, table name, or field names.

    • Use the sample rows to infer the structure and intelligently map user queries to database fields.

  2. Context:

    • The table includes critical fields such as:

      • Match details: match_id, season, start_date, venue.

      • Inning and ball information: innings, ball.

      • Teams and players: batting_team, bowling_team, striker, non_striker, bowler.

      • Outcome: runs_off_bat, extras, wicket_type, player_dismissed.

  3. Player Name Queries:

  • If a query is made regarding a player's name and the agent knows the name from previous messages, use that exact name string in the query.

  • If the agent does not know the name and needs to find out about a player, use only the surname. Wrap the surname in % wildcard characters (e.g., %surname%) to account for variations in case and ensure it can match anywhere in the relevant fields.

Your Responsibilities:

  • Respond concisely to user questions with factual answers derived exclusively from the database.

  • Convert user questions into PostgreSQL queries while ensuring they comply with the database schema.

  • Avoid speculating, making up data, or performing tasks outside your scope.

-----*** system prompt ends here ***-----

Setup Tools for the Agent:

cricket_database_query_tool

Description: Executes PostgreSQL-compliant SQL queries on a cloud database (Aiven).

Query Parameters:

  • String | sqlquery

    • Required

    • The PostgreSQL-compliant SQL query string generated from the user's input. Ensure proper URI encoding for special characters.

  • String | cloud

    • Required

    • The cloud database provider. Always set to 'aiven'.

    (Replace with your own cloud database identifier if different)

document_update_tool

Pushes text or table data requested by the user to their Google Docs backend.

Query Parameters:

  • String | data

    • The text data that the user has requested to be pushed to their docs.

Step 5: Modify the index.html File

1. Update ElevenLabs Widget embed code

Replace the ElevenLabs widget code with your own. Locate this section in index.html:

<elevenlabs-convai agent-id="OHD9JQ3OoinJByncSRkS" style="all: unset; width: auto; height: 100%;" ></elevenlabs-convai>

Replace with your own widget code from ElevenLabs.

2. AI Chat Backend

The app currently uses a Flowise AI agent. Locate and modify this configuration in index.html:

const chatflowId = '5e61fc5e-a2d9-410d-b1a4-1519fa0c3b4d'; const baseUrl = 'https://flowise-coolify.hosting.tigzig.com'; // Replace with your own Flowise chatflowId and baseUrl or alternative AI backend

3. Document Links

The document viewer section currently points to specific document URLs. Locate and modify this configuration in index.html:

const DOCUMENT_URLS = { excel: { view: 'https://harolikar-my.sharepoint.com/personal/amar_harolikar_com/_layouts/15/Doc.aspx?sourcedoc={371a2aba-3da4-4966-8d5a-e02eb2038845}&action=embedview&wdAllowInteractivity=False&wdHideGridlines=True&wdHideHeaders=True&wdDownloadButton=True&wdInConfigurator=True&wdInConfigurator=True', edit: 'https://harolikar-my.sharepoint.com/personal/amar_harolikar_com/_layouts/15/Doc.aspx?sourcedoc={371a2aba-3da4-4966-8d5a-e02eb2038845}&action=edit' }, google: { view: 'https://docs.google.com/spreadsheets/d/e/2PACX-1vT-ASVIfFJ4HdqIjq-2fSar4taGxlUutrZCeH1dFgfT6o-baBFQHLtJcGwgretrT2NmqtbQe7FbmxiS/pubhtml?widget=true&headers=false', edit: 'https://docs.google.com/spreadsheets/d/e/2PACX-1vT-ASVIfFJ4HdqIjq-2fSar4taGxlUutrZCeH1dFgfT6o-baBFQHLtJcGwgretrT2NmqtbQe7FbmxiS/pubhtml?widget=true&headers=false' }, docs: { view: 'https://docs.google.com/document/d/e/2PACX-1vQ2z_n6-egJOrvFLMXsIBWvhxoPg01fS2XMchIJ-993uqD9YbaNbw9H1ZTD09CzeZ-VetsRNML2p3qF/pub?embedded=true', edit: 'https://docs.google.com/document/d/1v8BQURR8F6yoVlxGMmjPE9hEJAsLyx7cjtjiNLiXkhk/edit?usp=sharing' } };

Replace these URLs with links to your own documents. You can use:

  • SharePoint links for Excel files

  • Google Sheets/Docs public sharing links

  • Any other document service that provides embed URLs

4. Image URLs

The chart images are served from the Flowise backend. The image URLs are constructed using this pattern in index.html:

const imageUrl = `${baseUrl}/api/v1/get-upload-file?chatflowId=${chatflowId}&chatId=${data.chatId}&fileName=${fileName}`;

When setting up your own instance:

  • Replace baseUrl with your Flowise server URL

  • Use your own chatflowId

  • The chatId and fileName are dynamically generated by Flowise

Example URL structure:

https://your-flowise-server.com/api/v1/get-upload-file?chatflowId=your-chatflow-id&chatId=generated-chat-id&fileName=chart.png

Note: The image URLs are generated automatically when Flowise creates charts.

Important Notes

  • All styling is contained within the HTML file for easy modification

  • The application uses DOMPurify for sanitizing markdown content

  • Mobile view includes a tab-based interface for better user experience

That's it!

License

MIT License - Feel free to use and modify as needed.

bottom of page