An AI-powered chatbot interface for analyzing Port of Singapore Authority (PSA) operational metrics with real-time Power BI integration and intelligent data retrieval using RAG (Retrieval-Augmented Generation).
- π€ AI-Powered Analysis: Uses Google Gemini AI for intelligent insights and recommendations
- π Power BI Integration: Connects to Microsoft Power BI dashboards for live operational data
- π§ RAG (Retrieval-Augmented Generation): Vector store retrieves historical context to enhance AI responses
- π― Strategic Alignment: Insights mapped to PSA's four strategic pillars
- Operational Excellence - Port operations optimization, reduced berth times
- Digital Integration - Real-time data, AI-driven decisions, seamless coordination
- Sustainability - Carbon reduction, fuel optimization, environmental stewardship
- Customer-Centric Innovation - Predictable service, proactive communication
- Port Time Savings (%)
- Arrival Accuracy (%)
- Bunker Savings ($M)
- Carbon Abatement (K tonnes)
- Node.js (v14 or higher)
- npm or yarn
- Google Gemini API Key (Get one here)
git clone https://github.com/pranavpro9/PSA-Code-Sprint.git
cd PSA-Code-Sprintnpm installCopy the example environment file:
cp .env.example .envEdit .env and add your Gemini API key:
# Required: Google Gemini API Key
REACT_APP_GEMINI_API_KEY=your-actual-gemini-api-key- Visit Google AI Studio
- Sign in with your Google account
- Click "Create API Key"
- Copy the key and paste it into your
.envfile
npm startThe app will open at http://localhost:3000
npm run buildnpm test- Launch the application
- Wait for the vector store to initialize (shows "connected" status)
- Try one of the quick prompts or ask your own question
- View AI-generated insights with strategic pillar alignment
- "Analyze current port time savings performance"
- "What are the key trends in arrival accuracy?"
- "Compare bunker savings across recent periods"
- "Provide insights on carbon abatement progress"
The app loads Power BI dashboard data and makes it available for conversational analysis:
- Data Loading: Dashboard metrics are loaded on startup
- AI Analysis: Gemini AI analyzes the data and detects patterns
- Proactive Insights: Automatically identifies anomalies and opportunities
- Chat Interface: Ask questions in natural language to get insights
- Recommended Actions: Every insight includes specific action items
Current Data Includes:
- 5 months of performance metrics (May-September 2025)
- Port Time Savings, Arrival Accuracy, Bunker Savings, Carbon Abatement
- Automatic anomaly detection and trend analysis
- Strategic recommendations aligned with PSA pillars
βββββββββββββββββββ
β React UI β
β (Frontend) β
ββββββββββ¬βββββββββ
β
ββββββ΄βββββ
β β
βββββΌβββ ββββΌβββββββββ
βGeminiβ β Power BI β
β AI β β API β
βββββ¬βββ ββββ¬βββββββββ
β β
ββββββ¬ββββ
β
ββββββΌβββββββββ
β Vector Storeβ
β (RAG) β
βββββββββββββββ
- App.js: Main application component with chat interface
- VectorStore: In-memory RAG implementation for context retrieval
- Power BI Integration: Live data fetching and caching
- Gemini AI: Natural language processing and insight generation
The app is configured for Google Gemini. To use a different provider, modify src/App.js:
- Update API endpoint in
callGeminiAI()function - Adjust request/response format
- Update environment variables
- Create an Azure AD application
- Grant Power BI API permissions
- Get workspace and dataset IDs from Power BI Service
- Add credentials to
.envfile
"Missing API Key" Error
- Ensure
.envfile exists in project root - Verify
REACT_APP_GEMINI_API_KEYis set - Restart the development server after changing
.env
Data Not Loading
- Check browser console for errors
- Ensure Gemini API key is configured correctly
- Verify the app has fully loaded (all status indicators green)
- Try refreshing the page
Dependencies Installation Failed
# Clear cache and reinstall
rm -rf node_modules package-lock.json
npm installSecurity Vulnerabilities
# Fix non-breaking issues
npm audit fix
# Fix all issues (may cause breaking changes)
npm audit fix --forceTailwind CSS CDN Warning
- This is a development-only warning
- The app uses Tailwind via CDN for simplicity
- For production, consider installing Tailwind as a PostCSS plugin
- Current setup works fine for demos and development
- Never commit
.envfile to version control - API keys in frontend are visible to users
- For production, implement a backend proxy to secure API calls
- Use environment-specific configurations
- Rotate API keys regularly
- React 19.2.0 - UI framework
- Lucide React - Icon library
- TailwindCSS - Styling (via CDN)
- @testing-library/react - Component testing
- @testing-library/jest-dom - DOM assertions
- Frontend API Calls: API keys exposed in browser (needs backend proxy)
- In-Memory Vector Store: Data lost on refresh (needs persistent storage)
- No Authentication: Open access (needs user auth)
- Limited Error Handling: Basic error messages (needs improvement)
- No Rate Limiting: Uncontrolled API usage (needs throttling)
- Backend API proxy for secure key management
- Persistent vector store (PostgreSQL + pgvector)
- User authentication and session management
- Advanced error handling and retry logic
- Real-time Power BI streaming
- Export insights to PDF/Excel
- Multi-language support
- Mobile responsive improvements
This project is private and proprietary.
- Team Tembusu Meal Enhancements (Min Wenn, Pranav, Han Sheng)
For issues or questions, please contact the development team.
Built with β€οΈ for PSA International