51 lines
3.1 KiB
Plaintext
51 lines
3.1 KiB
Plaintext
# Walkthrough: AI-Powered Live Analytics Dashboard
|
|
|
|
## Overview
|
|
|
|
We have successfully rebuilt the analytics dashboard for **Production**. We removed all mock database layers (DuckDB) and manual JSON paste boxes. The dashboard is now a fully automated **Live MCP Integration**. The user types a question in natural language, and the AI backend fetches real data from the live MCP server, determines the optimal visualization, mathematically computes the insights, and renders a stunning visual response.
|
|
|
|
## Changes Made
|
|
|
|
### 1. Pure Server-to-Server MCP Injection ([c:\bitbucket\ai-service\ai_service.py](file:///c:/bitbucket/ai-service/ai_service.py))
|
|
|
|
Rebuilt the `/chat` endpoint to act as an automated orchestration layer:
|
|
|
|
1. **Live Data Fetch**: When a query hits `/chat`, the backend immediately fires an outbound HTTP request to the live MCP endpoint (`http://localhost:3000/mcp/chat`) to grab the latest user data.
|
|
2. **LLM Schema Analysis**: The Python backend reads the keys of the returned JSON payload and injects that schema into an extremely strict prompt format pointing to the local Ollama `tinyllama` model.
|
|
3. **Intent Routing**: The `tinyllama` model uses the schema to determine the correct statistical axes (e.g. plotting `tenantname` vs `count`) and selects the optimal graph format (Bar, Line, Pie) based on the textual query.
|
|
4. **Deterministic Explanation Engine**: Because 1B parameter models like TinyLlama struggle with accurate mathematical insight generation, we transitioned the textual explanation off the LLM entirely. Python now dynamically reads the *actual* dataset to evaluate, sort, and format the numerical insights (e.g., extracting the precise max value to explain "The top result is Daily Grubs").
|
|
|
|
### 2. Frontend Modernization ([c:\bitbucket\ai-dashboard\src\components\RevenueChart.jsx](file:///c:/bitbucket/ai-dashboard/src/components/RevenueChart.jsx))
|
|
|
|
- **Natural Language Interface**: Totally removed the cumbersome `<textarea>` JSON injection block. The UI is now a single, clean search bar.
|
|
- **Glassmorphism Aesthetic**: Upgraded the UI rendering engine with deep gradient blues, sleek translucent panels, and responsive grid layouts to create a premium, production-level aesthetic.
|
|
- **Dynamic Render**: Handled mapping the deterministic AI output into real React ECharts components supporting Line, Bar, and Pie topologies with interactive hovers and animations.
|
|
|
|
## How to Test
|
|
|
|
**1. Start the Live MCP Server:**
|
|
Ensure your actual external MCP server is running on `http://localhost:3000`.
|
|
|
|
**2. Start the FastAPI backend:**
|
|
Open a terminal in `c:\bitbucket\ai-service` and run:
|
|
|
|
```bash
|
|
.\venv\Scripts\activate
|
|
uvicorn ai_service:app --port 8000
|
|
```
|
|
|
|
**3. Start the React Frontend:**
|
|
Open a terminal in `c:\bitbucket\ai-dashboard` and run:
|
|
|
|
```bash
|
|
npm run dev
|
|
```
|
|
|
|
**4. Ask a Question:**
|
|
Open `http://localhost:5173` in your browser.
|
|
|
|
- Type your question in the beautiful search box: _"Which tenant has the highest revenue?"_
|
|
- Click **✨ Generate**.
|
|
|
|
The Python system will hit your MCP, ask the AI how to format it, calculate the exact statistical insight, and animate it onto the screen!
|