UrbanMind AI

Urban environments are becoming increasingly complex, with challenges such as traffic congestion, pollution, inefficient energy usage, and lack of real-time decision-making tools. The inspiration behind UrbanMind AI came from the need to create a unified system that not only visualizes a city but also understands it.

The idea was to combine 3D visualization + artificial intelligence into a single interactive platform where users can simulate, analyze, and predict urban conditions in real time. Instead of static dashboards, UrbanMind AI brings cities to life through an immersive environment that responds dynamically to data and user input.

What it does

UrbanMind AI is a 3D smart city intelligence system that:

Renders a fully interactive 3D city with roads, buildings, and environment Allows users to simulate scenarios such as traffic patterns, pollution levels, and energy consumption Uses AI (Gemini API) to analyze inputs and generate insights Provides an AI-powered control panel for querying, modifying, and understanding the city Displays real-time metrics through a clean, non-intrusive UI overlay How we built it

The project was built using a modern full-stack architecture:

Frontend: React with Tailwind CSS for UI and layout 3D Rendering: Three.js for creating the interactive city environment Animations: Framer Motion for smooth UI transitions Backend: Node.js (Express) for handling API requests AI Integration: Gemini API for generating insights and predictions

The 3D scene was structured as a modular system where:

Buildings and roads are generated procedurally Camera controls allow users to explore the environment UI overlays are layered above the canvas without obstructing the view The AI panel communicates with the backend to process user queries and return structured outputs Challenges faced

One of the main challenges was balancing UI usability with full 3D visibility. Ensuring that panels and controls did not obstruct the city view required careful layout design using transparency, positioning, and responsive scaling.

Another challenge was integrating AI responses into a structured format that could dynamically influence both the UI and the 3D visualization. This required designing a consistent JSON schema for communication between the AI and the frontend.

Rendering performance was also a concern when dealing with complex 3D scenes. Optimizations such as limiting geometry complexity, efficient lighting, and proper camera controls helped maintain smooth performance.

What we learned

This project helped us understand:

How to integrate AI into real-time interactive systems 3D rendering fundamentals using Three.js Designing user interfaces that coexist with immersive visuals Structuring full-stack applications with clean separation of concerns Handling dynamic data flow between frontend, backend, and AI models

Next we will advance this with real world satellite data and take it to investors.

Built With

• css-frontend:-react
• express-ai-api:-gemini-api-animations:-framer-motion-tools/platforms:-vs-code
• html
• languages:-javascript
• tailwind-css-3d-engine:-three.js-backend:-node.js