Nuvue

The user gives a descriptive prompt based on the vibe they want to go for their TV, then the platform gives a theme and applies it.

🎯 Inspiration We were inspired by the idea of making digital interfaces, particularly for larger screens like TVs, more dynamic and personalized. Traditional UIs often feel static. With the advancements in generative AI, we saw an opportunity to create an experience where the application's visual theme could adapt intelligently based on user preferences, making the interface feel fresh, relevant, and more engaging. The core question was: "Can AI help us instantly craft beautiful and suitable visual themes for an application on the fly?"

🧠 What it does Nuvue is a Next.js web application that showcases an AI-powered theme generator. Users can input a text prompt describing a desired visual style (e.g., "dark and futuristic," "warm and cozy," "minimalist and vibrant"). The application then uses a Genkit flow, powered by the Google Gemini API, to generate a cohesive theme, including suggestions for primary, background, and accent colors, as well as font family, icon style, layout, and animation style. The user can then apply these generated color themes to the Nuvue application itself in real-time, instantly changing its look and feel. The interface is designed with a Full HD (1920x1080) resolution in mind and features remote-control-friendly keyboard navigation for the theme generator.

🔧 How we built it Nuvue is built on a modern web stack:

Frontend: Next.js (App Router, Server Components) with React and TypeScript for a robust and type-safe user interface. UI Components: We utilized ShadCN UI components, which are built on Radix UI and styled with Tailwind CSS, allowing for rapid development of accessible and aesthetically pleasing elements. Styling: Tailwind CSS was used for all styling, with dynamic theme application managed by updating CSS HSL variables via client-side JavaScript. AI Integration: Genkit serves as the backbone for our AI functionality. We defined a Genkit flow (generateThemeFlow) that takes a user's text prompt, interacts with the Google Gemini API to generate theme properties, and returns a structured Zod schema. Server Actions: A Next.js Server Action (handleGenerateThemeAction) securely calls the Genkit flow from the client. Remote Navigation: Keyboard navigation (arrow keys, enter, escape) was implemented on the client-side for the theme generator component to simulate a remote-control experience. Color Handling: We implemented utility functions to convert hex color codes (generated by the AI) to HSL values, which are more flexible for dynamic theming with CSS variables. The core visual guidelines for Nuvue (saturated blue primary, dark grayish-blue background, violet accent) are set as the default theme in globals.css and can be overridden by the AI-generated themes.

🧱 Challenges we ran into

AI Output Consistency: Ensuring the AI consistently returned valid hex color codes and adhered to the desired output schema required careful prompt engineering and schema validation. Dynamic Theming Logic: Implementing the JavaScript logic to correctly parse AI-generated colors (hex to HSL) and update all relevant CSS variables for a seamless visual change was intricate. We had to debug issues where invalid colors or NaN values would break the styling. Keyboard Navigation: Making the remote-style keyboard navigation intuitive and robust (handling focus correctly across input fields and buttons, especially after dynamic content updates) took several iterations. API Key Management: Securely managing the GOOGLE_API_KEY between local development (using .env) and preparing for deployment (requiring environment variables on the hosting platform) was a key consideration. Error Handling: Building in user-friendly error messages for when the AI generation failed or returned unexpected data.

🏆 Accomplishments that we're proud of

Successfully integrating the Google Gemini API via Genkit to create a functional AI-powered theme generator that responds to natural language prompts. Building a clean, responsive, and visually appealing UI using Next.js, ShadCN, and Tailwind CSS that dynamically adapts its entire color scheme. Implementing intuitive remote-control-like keyboard navigation for the core theme generation feature. Designing a robust system for applying themes by updating CSS variables, allowing for instant visual feedback. Setting up a clear project structure that separates UI components, AI logic (Genkit flows), and server actions.

📚 What we learned

The power and flexibility of Genkit for defining structured AI flows and integrating them with Next.js Server Actions. Effective prompt engineering techniques and the importance of well-defined Zod schemas for reliable AI model outputs. Practical approaches to dynamic theming in a React/Next.js application using CSS custom properties (variables) and JavaScript. The nuances of creating accessible and user-friendly keyboard navigation, especially for TV-like interfaces. Best practices for secure API key management and configuration for different environments. The importance of robust error handling and providing clear feedback to the user, especially when interacting with AI services.

🚀 What's next for Nuvue

Expand Theme Customization: Allow the AI to influence more aspects of the UI beyond colors, such as font weights, border radiuses, or even component variants based on the fontFamily, iconStyle, layoutStyle, and animationStyle suggestions. Save & Manage Themes: Implement functionality for users to save their favorite generated themes and switch between them. Theme History: Allow users to see a history of themes they've generated. Contextual Theme Suggestions: Explore ideas for the AI to suggest themes based on (hypothetical) content being viewed or time of day. Image Generation for UI: Potentially use Genkit's image generation capabilities to create background patterns or abstract visuals as part of a theme. Add More "App" Content: Build out other screens or features for Nuvue beyond the theme generator to demonstrate the themes in a more complete application context.