VisionTV AI — Your TV, Reimagined with Generative AI

Inspiration

We were inspired by the idea of making television more intelligent, interactive, and personalized. Traditional TV interfaces often require users to browse through endless content to find something interesting. We wanted to create an experience where viewers could simply ask questions and discover content through natural interaction.

What It Does

VisionTV AI is an AI-powered smart TV experience concept that makes content discovery more conversational. Its key features include:

• Ask Vision: An AI companion that answers questions and helps users explore topics.
• AI-Powered Discovery: Uses Google's Gemini API to generate responses to user queries.
• Mood Studio: Lets users explore content based on their mood and interests.
• Voice Search: Supports voice input through browser speech recognition.
• Personal Collection: Allows users to save content they want to revisit.
• TV-Inspired Interface: Features a futuristic interface designed around a smart television experience.

How We Built It

We built VisionTV AI using React, TypeScript, and Vite for the frontend, with CSS for the visual design and interactive content cards. We developed a Node.js and Express backend to connect the application to Google's Gemini API. The Ask Vision interface sends questions to the backend, which processes them through Gemini and returns AI-generated answers to the frontend.

We also implemented browser-based speech recognition for voice input and interactive components for mood-based discovery and saved content.

Challenges We Faced

One of our main challenges was connecting the frontend and backend reliably. We had to configure API communication, troubleshoot connection issues, and set up a development proxy. Protecting the API key was another important consideration, so we stored it in an environment file rather than embedding it in the frontend code.

We also worked to make the interface feel like a smart TV experience rather than a conventional website.

What We Learned

Through this project, we learned how to integrate a generative AI API into a React application, build an Express backend, manage environment variables, and troubleshoot communication between frontend and backend services. We also gained experience designing interactive interfaces for AI-assisted content discovery.

What's Next

We plan to improve remote-control navigation, expand personalized recommendations, enhance voice interaction, and adapt VisionTV AI for the target Fire TV platform. Our long-term goal is to make television experiences more intuitive, conversational, and personalized.

VisionTV AI — Your TV, Reimagined with Generative AI.

Built With

• css
• express.js
• generative-ai
• google-gemini-api
• javascript
• node.js
• react
• typescript
• vite
• web-speech-api