Automotive AI Cockpit | Real-Time CAN Bus Diagnostic Twin

A full-stack, real-time Software-Defined Vehicle (SDV) cockpit dashboard and agentic diagnostic system. AutoStream streams live CAN bus vehicle telemetry via WebSockets, visualizes physical parameters with an interactive 3D digital twin, simulates real-world vehicle fault injections, and leverages Google Gemini AI to analyze active Diagnostic Trouble Codes (DTCs) in real time.

🔗 Live Demo: automotive-ai-cockpit.vercel.app

---

🌟 Key Features

• Real-Time CAN Bus Telemetry Gauges: Interactive custom SVG gauges tracking Speed, Engine RPM, Battery SOC, Coolant Temperature, and overall System Status, driven by simulated CAN bus signal data.
• Tire Pressure Monitoring System (TPMS): Visual 4-corner tire indicator (FL, FR, RL, RR) with real-time threshold detection and animated fault alerts for low pressure (<29 PSI).
• Interactive 3D Digital Twin: Isometric EV x-ray viewport featuring dynamically anchored error callouts positioned directly over faulty vehicle components.
• Gemini AI Diagnostic Agent: Ingests simulated OBD-II diagnostic trouble codes (e.g., C0035) and generates human-readable root-cause analysis and repair advice via the Google Gemini API.
• Fault-Tolerant Architecture: Asynchronous state handling, error boundary fallbacks, and a live network status indicator (SYSTEM ONLINE) for graceful degradation when API calls fail.

---

🛠️ Tech Stack

• Frontend: React, Tailwind CSS, Lucide React, Socket.io-Client, Vite / Create React App
• Backend: Node.js, Express.js, Socket.io, Mongoose (MongoDB)
• Icons & UI Assets: Lucide React, Custom SVG Data Visualization
• AI Engine: Google Gemini API (@google/genai)
• Design System: Cyber-Navy Dark Mode with Enterprise OEM Telemetry Styling
• Deployment: Vercel (Frontend), Render (Backend), MongoDB Atlas (Database)

---

🚀 Getting Started

Prerequisites

• Node.js (v18 or higher)
• npm or yarn
• Google Gemini API Key (Get one from Google AI Studio)

Installation & Setup

1. Clone the repository

git clone https://github.com/Divya-shr/Automotive-AI-cockpit.git
cd Automotive-AI-cockpit

2. Install Project Dependencies

npm install

(Optional) If you are initializing from scratch:

npm install lucide-react @google/genai
npm install -D tailwindcss postcss autoprefixer

3. Configure Environment Variables

Create a .env file in the root directory of your project:

PORT=10000
GEMINI_API_KEY=your_google_gemini_api_key
CLIENT_ORIGIN= ypur_frontend_url
MONGO_URI=mongodb+srv://<user>:<password>@cluster0.xxx.mongodb.net/autostream_db

Open the .env file and add your Gemini API key:

For Vite Projects (Vite default):

VITE_GEMINI_API_KEY=your_actual_gemini_api_key_here

For Create React App Projects:

REACT_APP_GEMINI_API_KEY=your_actual_gemini_api_key_here

4. Verify Public Assets

Ensure the 3D EV schematic image (image_0.png) is placed inside the public/ directory so the UI can render the digital twin correctly:

Automotive-AI-cockpit/
└── public/
    └── image_0.png

5. Start the Local Development Server

npm run dev
# Or for Create React App:
# npm start

Open your browser and navigate to http://localhost:5173 (or http://localhost:3000).

---

🏗️ Production Build

To build the project for deployment:

npm run build

The optimized static assets will be generated in the dist/ (or build/) folder, ready to be deployed on platforms like Vercel, Netlify, or GitHub Pages.

---

📁 Project Architecture

Automotive-AI-cockpit/
├── backend/
│   ├── server.js          # Express server, Socket.io event loop, Gemini API endpoint
│   └── package.json       # Backend dependencies
├── public/
│   └── image_0.png        # 3D EV X-Ray Graphic Asset
├── src/
│   ├── components/
│   │   ├── SDVDashboard.jsx  # Main cockpit gauges & live stream visuals
│   │   ├── FaultInjector.jsx # Telemetry anomaly injection controls
│   │   └── AIAssistant.jsx   # Gemini agentic diagnostics panel
│   ├── App.jsx            # Core layout & WebSocket event listener
│   ├── main.jsx           # App entry point
│   └── index.css          # Tailwind CSS styling directives
├── .gitignore
├── package.json           # Frontend dependencies & build scripts
├── tailwind.config.js     # Tailwind design system configuration
└── README.md              # Project documentation

---

🗺️ Roadmap / Future Improvements

• Add a backend service (Node.js/Express) to proxy Gemini API calls and keep the API key server-side.
• Persist fault history and diagnostic sessions using MongoDB Atlas.
• Add WebSocket-based streaming for true real-time telemetry updates.
• Replace simulated CAN bus data with a real OBD-II adapter integration (e.g., ELM327) for live vehicle testing.

---

Author

Created for Study Purpose