Web AI Spotify DJ

How to use this demo?

Use the circular Web AI Agent microphone button in the center above in a push to talk style. That means when you click on the button and hold it will listen to your voice, and when you let go, it stops listening. Think what you want to say before you push the button so you speak fluently for best results. Let go when you have finished talking!

For example try asking something like: "Make a playlist for coding or deep work" or "Create a playist for 80s music"

To play full length tracks you must be a Spotify member and generate a custom Client ID and Client Secret and authenticate using the side panel on the right of the demo. Otherwise you will hear previews only.

Where can I learn more about Web AI?

Glad you asked - check out this YouTube course that goes from zero to hero!

Spotify Auth for API

Make a new app on Spotify developer and then be sure to set redirect URL to be:

https://spotify-web-ai-agent-dj.glitch.me/index.html

Then locate and enter your Client ID and Client Secret below for your app and click auth - you will just need to do this once

Agent configuration

HCI Persona

Simulate chat

Agent thinking output

Agent thinking for the curious folk will show here

How does this work?

This demo, created by Jason Mayes at Google, uses Web AI large language models to power this experience to provide Agent like behaviours. That means the AI model is downloaded to your machine in the browser and run entirely locally - so no calls to the cloud - keeping costs to zero and your privacy is preserved.

Specifically the Google Gemma 2, 2B parameter model, is downloaded and executed powered by the MediaPipe Web LLM library.

Please wait: Loading 2.5GB Agent Web AI Model file.

While you wait for this to finish, watch this 5 min video (click play and expand full screen) to see the demo in action so you know how to use it once it has downloaded!