DEV Community

Cover image for Building VibePlaylist AI: Turning Everyday Moods into AI-Curated Playlists | 10 Days of Building AI Agents on AWS | Day 8
abdullah haroon
abdullah haroon

Posted on

Building VibePlaylist AI: Turning Everyday Moods into AI-Curated Playlists | 10 Days of Building AI Agents on AWS | Day 8

10 Days of Building AI Agents on AWS | Day 8

Tag: #agents

Have you ever had a very specific mood but could not find the right music for it?

Maybe it is a late-night drive after a long day, a quiet evening when you are feeling nostalgic, a study session that needs focus, or simply a moment that feels difficult to describe with a normal playlist.

That is the idea behind VibePlaylist AI.

VibePlaylist AI is a generative AI application that turns a user's situation, feeling, memory, place, or activity into a personalized themed playlist.

Instead of manually searching through hundreds of songs, users can describe what they are experiencing, choose a vibe, and let AI curate a musical concept around that idea.

The Idea Behind VibePlaylist AI

A user can enter something like:

Late-night drive through Islamabad after a long and exhausting day.

They can then select a vibe such as:

  • Chill
  • Romantic
  • Sad
  • Energetic
  • Dreamy
  • Nostalgic
  • Focus

After clicking Create Playlist, VibePlaylist AI generates:

  • A playlist name
  • A short description
  • The selected vibe
  • Eight song recommendations

For example, the result could become Midnight Miles, with a description inspired by quiet roads, city lights, and reflective thoughts, followed by eight songs that fit the atmosphere.

The core experience is simple:

Your Moment → Choose a Vibe → AI Curates → Discover Your Playlist

The application is not intended to replace music streaming platforms. There is no music playback or Spotify integration.

The creative part is the curation itself.

A simple sentence from the user becomes a complete musical concept that they can explore on their preferred streaming platform.

Building the Experience

For this project, I deliberately kept the scope focused.

The application has one primary purpose: turn a feeling or situation into a themed playlist.

Almost every part of the interface supports that single interaction.

Frontend

The frontend was built using:

  • HTML5
  • CSS3
  • Vanilla JavaScript

I chose a lightweight frontend because the application did not require complex state management or a large component system.

The visual design uses a cinematic black-and-gold theme with clean typography and simple interactive elements.

The main interface contains:

  • A text input for describing the moment
  • Vibe selection buttons
  • A single Create Playlist action

Once the AI response arrives, the playlist is displayed in a dedicated result section containing the playlist name, description, vibe, and track list.

The AI Behind the Playlist

The AI layer is powered by the Groq API.

The backend sends two important pieces of information to the model:

  1. What the user is experiencing
  2. The vibe they selected

I designed the prompt so the model behaves more like a music curator rather than simply returning random song names.

The AI is instructed to:

  • Create a suitable playlist title
  • Match the requested mood
  • Generate exactly eight tracks
  • Avoid duplicate songs
  • Create a relevant playlist description
  • Return a predictable JSON response

The request flow is:

User describes a moment
          ↓
User selects a vibe
          ↓
Frontend sends request
          ↓
AWS Lambda processes it
          ↓
Groq analyzes the mood
          ↓
AI creates playlist JSON
          ↓
Frontend displays the playlist
Enter fullscreen mode Exit fullscreen mode


`

Why Structured AI Output Matters

One of the practical challenges was making sure the AI response could be reliably consumed by the frontend.

AI-generated text can be unpredictable.

Rather than asking the browser to interpret a large block of generated text, the backend requests structured JSON containing information such as:


json
{
"playlistName": "Midnight Miles",
"description": "A soundtrack for quiet roads and reflective thoughts.",
"vibe": "Nostalgic",
"tracks": [
{
"title": "Song Name",
"artist": "Artist Name"
}
]
}

This makes the response much easier to:

  • Validate
  • Process
  • Display
  • Handle when errors occur

It also keeps the frontend logic simple.

This project reinforced an important lesson for me:

A good AI application is not only about the prompt. The format and reliability of the response matter just as much.

Keeping the API Key Secure

Another important consideration was API security.

The Groq API key is never placed inside the frontend code.

The browser does not communicate directly with Groq.

Instead:


Browser

AWS API Gateway

AWS Lambda

Groq API

This keeps the AI API key away from client-side JavaScript.

The serverless backend handles communication with the external AI service.

AWS Architecture

VibePlaylist AI uses a serverless AWS architecture.

There is no traditional server that needs to remain running continuously.

The main AWS services used are:

  • Amazon S3 for storing the static frontend
  • Amazon CloudFront for global delivery and HTTPS
  • Amazon API Gateway for exposing the POST /generate endpoint
  • AWS Lambda for running the Node.js backend
  • AWS IAM for permissions and access control
  • AWS CloudFormation for defining and provisioning infrastructure

The complete architecture looks like this:


USER


CloudFront


Amazon S3
HTML / CSS / JavaScript


Create Playlist Request

Amazon API Gateway


AWS Lambda
Node.js


Groq API


Playlist JSON


User Interface

Infrastructure as Code

One of my goals was to avoid manually building the AWS environment through the console.

The infrastructure is described in an AWS CloudFormation YAML template.

This includes:

  • AWS resources
  • Permissions
  • Service connections
  • API configuration
  • Stack outputs

This makes the infrastructure part of the project itself.

Instead of manually recreating the environment, it can be provisioned from the template.

Managing Multiple AWS Accounts

For deployment, I used a dedicated AWS CLI profile named account2.

Because multiple AWS accounts were configured on my development machine, I added identity verification to the deployment process.

Before creating or updating resources, the workflow checks the AWS identity being used.

This helped prevent deploying infrastructure to the wrong AWS account.

The deployment process follows this idea:

Verify Account → Deploy Infrastructure → Confirm Outputs

It is a small safeguard, but useful when working across multiple AWS accounts.

What I Learned

Building VibePlaylist AI gave me practical experience with the complete lifecycle of a small AI application.

Designing Frontend and Backend APIs

I learned more about designing communication between a frontend and a serverless backend, including:

  • Sending JSON requests
  • Handling asynchronous responses
  • Validating generated data
  • Managing API errors
  • Displaying results cleanly

Working with API Gateway and Lambda

The project helped me better understand the serverless model.

Instead of running a Node.js server continuously, the Lambda function is invoked when the application receives a request.

The flow is event-driven:

Request arrives → Lambda runs → AI is called → Response is returned

Infrastructure as Code with CloudFormation

CloudFormation was another important learning experience.

Defining the AWS environment as YAML changed how I think about deployment.

Instead of treating the AWS Console as the place where the application is built, the infrastructure becomes part of the project.

That means it can be:

  • Versioned
  • Reproduced
  • Updated
  • Deployed consistently

AI Responses Need More Than a Good Prompt

One of the biggest lessons from this project was that the prompt is only one part of an AI application.

A complete application also needs to consider:

  • Response structure
  • Data validation
  • Error handling
  • API security
  • Frontend integration
  • User experience

Generating good output is important.

Making that output reliable and useful inside a real application is equally important.

Keeping the Product Focused

Most importantly, VibePlaylist AI reinforced the idea that a creative AI application does not need dozens of features.

A simple idea, a focused interface, and one useful AI interaction can create an enjoyable experience.

The entire application revolves around one question:

What does this moment sound like?

The user provides the moment.

AI creates the musical direction.

Final Thoughts

VibePlaylist AI is a small experiment in turning everyday moments into musical ideas using generative AI.

A late-night drive, a difficult day, a nostalgic memory, a study session, or any other feeling can become the starting point for a curated playlist.

By combining Groq with AWS serverless services, I built a simple workflow:

Describe Your Moment → Select a Vibe → Generate a Playlist

This project demonstrates how AI can take a simple piece of human input and transform it into a creative experience.

It also gave me more hands-on experience with serverless architecture, API design, structured AI responses, CloudFormation, and secure backend integration.

Sometimes, a creative AI application does not need to do everything.

It only needs to do one thing well.

Try VibePlaylist AI

Live App:
https://d1u2qhbqs932dd.cloudfront.net/

Top comments (0)