Tuning Into Your Music Tastes with the Power of AI

Next.js, React, React-Query, Material UI, TypeScript, Spotify, OpenAI, ChatGPT


The concept of sharing music with friends and receiving their curated recommendations inspired me to start a project I called "Concierge." Designed as a personalized tool for Spotify users, Concierge's main goal is to help you better understand your musical preferences and discover new tunes according to your tastes.

What is Concierge?

At its core, Concierge is a tool designed to provide insights into your music-listening habits. It taps into your Spotify data, analyzes your top tracks and artists across various time spans, and provides you with an informative summary of your musical patterns using ChatGPT.

The application is still under development. It currently displays your top artists and tracks and provides analysis of those lists. I plan to have this app feature playlist analysis and will recommend new music based on customizable filters, such as genre, mood, and energy. The whole idea is to help you explore music based on your tastes and maybe find your new favorite artist or song along the way.

Want to Try Concierge?

To use Concierge, you must be given permissions in the application's registry on Spotify. To get whitelisted, send me the email you used to sign up with Spotify Premium, and you'll be all set! The terms of Spotify's API requires that applications must register with it in order to use it, so tech-savvy users can clone the repo, install it, and register it within Spotify's developer platform and run the code locally. Unfortunately because it integrates with OpenAI's API, they will not remove the user permissions requirement.

Want to Run Concierge Locally?

Running the application locally requires some setup. You'll need an .env.local file with your specific Spotify client ID and secret, along with an OpenAI API key. If you wish to deploy on Vercel, there are some additional environment variables you need to set up within your project dashboard. I hope you enjoy using it as much as I enjoyed building it.

Behind the Scenes

The construction of Concierge involved Next.js, React, and Material UI to ensure a seamless user experience and a visually appealing interface. For the authentication part and session management, the application leverages Next Auth. As for the data retrieval and analysis, it uses Spotify's Web API and OpenAI's Chat API (gpt-3.5-turbo), allowing for an interesting combination of music data and AI commentary.

Here's how the /learn page, which renders all of the user's top items and their analyses, is drawn out:


Before using the app, please note that your interaction with these services is governed by their respective privacy policies. Therefore, it's crucial to familiarize yourself with Spotify's and OpenAI's policies.