QFusion (The Future CultureLens)

Qloo + AI "Fusion" for everything culture and lifestyle.Covering global lifestyle: movies, music, dining, travel.

Comment

QFusion (The Future CultureLens) License: MIT

A web application that integrates Qloo’s Taste AI™ API with advanced Large Language Models (LLMs) like OpenAI GPT, Anthropic Claude, and Google Gemini to deliver personalized, culturally relevant recommendations across multiple domains such as movies, TV shows, books, brands, destinations, podcasts, and more.

This project was developed for the Qloo LLM Hackathon and demonstrates how taste and behavior data can be combined with powerful AI summarization to create intuitive discovery and recommendation experiences.

Table of Contents Features

Demo

Tech Stack

Installation

Running the Project

Environment Variables

Usage Guide

Project Structure

Contributing

License

Acknowledgements

Features Multi-domain recommendations: Explore insights about movies, music, books, brands, places, and more.

Dynamic filtering: Use detailed filters such as genres, popularity, year ranges, demographics, cuisines, and others to tailor results.

AI-powered summaries: Leverage multiple LLMs (Anthropic Claude, OpenAI GPT, Google Gemini, etc.) to generate rich, human-readable summaries and contextual insights.

Intuitive UI: Responsive React frontend built with Vite and styled with Tailwind CSS for smooth interaction, featuring tab navigation and clean card layouts.

Backend API proxy: Express server interacting securely with Qloo API and the OpenRouter API for LLM calls.

Error handling and feedback: Includes loading spinners, error messages, and accessible form controls for enhanced UX.

Demo Click here to view the demo video: https://youtu.be/JkXBwzYhFXg

You can try the live app here: https://qfusion-frontend.onrender.com

Tech Stack Frontend: React, Vite, Tailwind CSS

Backend: Node.js, Express.js

APIs:

Qloo Taste AI™ API

OpenRouter API (for Anthropic Claude, OpenAI, Google Gemini and more)

Languages: JavaScript (ES6+)

Installation Prerequisites Node.js (v16+ recommended) and npm installed

Valid API keys for Qloo Taste AI™ and OpenRouter (or your chosen LLM endpoint)

Steps Clone the repository

Set up the server

Edit the .env file with your keys and configurations

Start the backend server

Set up the client

Configure the client API URL

Start the frontend

Access the app:

For local development, open http://localhost:5173 in your browser (or the port Vite shows)

Or access the deployed app at https://qfusion-frontend.onrender.com

Running the Project Backend runs on port 5000 by default. Handles API requests to Qloo and OpenRouter.

Frontend runs on port 5173 by default, serving the React UI.

Both backend and frontend must be running concurrently for the app to work properly.

Environment Variables Server .env QLOO_API_KEY: Your Qloo Taste AI™ API key Example: zwVscAsY50zu7mVlwscQLzz73AMQ7DCArLOw3g8iL4Y

QLOO_API_URL: Base URL for Qloo API Example: https://hackathon.api.qloo.com

OPENROUTER_API_KEY: API key for OpenRouter LLM API service Example: sk-or-v1-examplekeyhere

Client .env VITE_API_URL: URL where backend API is running Example: http://localhost:5000

Usage Guide Select Entity Type: Choose from Movies, Books, Brands, Places, TV Shows, Podcasts, Artists, etc.

Set Filters: Available filters depend on the entity type, such as genre, popularity thresholds, release years, cuisines, and demographics.

Optional Message: Guide the AI to summarize results as you want (e.g., "Only summarize fashion brands").

Select AI Model: Choose your desired LLM for summary generation.

Submit: Click the button to fetch recommendations and AI-generated summaries.

View Results: Summaries and the list of included items appear below the form.

Project Structure qloo-tastebot client — React frontend application src — Source files for React components — Reusable React components (UI and logic) api — API utility functions for backend communication App.jsx — Main React app component App.css — Main stylesheet index.jsx — React entry point public — Static assets (favicon, index.html, images) .env.example — Sample client-side environment variables package.json — Frontend dependencies and scripts

server — Express backend API routes — API route definitions (Qloo, LLM, etc.) middleware — Express middleware (error handling, request parsing) utils — Utility functions (API clients, validation, etc.) index.js — Main server entry file .env.example — Sample backend environment variables package.json — Backend dependencies and scripts

README.md — Project documentation (this file) package.json / yarn.lock — Root-level dependencies and project metadata (if monorepo) LICENSE — License file (MIT)

Contributing Contributions are welcome! Feel free to:

Open issues to report bugs or request features

Submit pull requests with improvements or fixes

Suggest enhancements through discussions or issues

License This project is licensed under the MIT License. See LICENSE file for details.

Acknowledgements Thanks to Qloo for the Taste AI™ API and hackathon opportunity.

Thanks to OpenRouter and LLM providers for AI summarization services.

Inspiration and tooling credits to Vite, Tailwind CSS, React, and the open-source community.

Developed by Prateek Bajpai & Sarthak Gupta for the Qloo LLM Hackathon 2025

Built With

Share this project:

Updates