Creating music can be a tedious process — it’s an art form that requires a lot of dedication and hard work. In the world of music creation, creative blocks are one of the most dreaded issues.
It can be difficult to come up with new and innovative ideas, especially when it feels like every idea you have has already been done before. But what if there was a way to fast-track your music creation process and get over those creative blocks?
Why tf did I build this?
I was heavily inspired to build as soon as I finished the AI writer project. If you haven’t checked it out, make sure to join the next kickoff below!
I’m currently working on Musixverse, where we are developing tools for artists to help them in the music creation & monetization process. As a result, this idea popped up in my head.
Even though I myself had the desire to create music for quite a while, I couldn’t ever get started just because I can’t write a complete song. It’s just too damn hard for me lol. I come up with some lines, but then it is really difficult to compose an entire song around that. So, I decided to create MxLyrics for this purpose. Now it isn’t even a problem. And guess how tf it works?
GPT-3 to the rescue!
GPT-3 can help you break through creative blocks by providing you with a variety of ideas and inspirations to work with. It can generate everything from melodies and chord progressions to complete compositions. You can then use these ideas as the foundation for your own music and add your own personal touches. Pretty insane right?
What tf are we going to build?
Before we get started, check out what we’ll build here. Pretty insane right?
You don’t need any AI knowledge to build this, however, having previous web app development exposure would definitely help. Fundamentals in HTML, CSS, JS, and React suffice.
Come along with me and in an hour or so you’ll have a web app that’ll have the ability to generate and autocomplete lyrics for you that you can then edit and use!
Here’s what it’ll look like:
Important
Let’s get tf started!
Here’s an overview of what we’re gonna do:
- Explore the OpenAI Playground to understand prompt engineering and figure out what prompts are most effective for you.
- Build a web app on top of this — a UI that takes user input and a backend that makes a call to OpenAI’s API and returns the result. (easy-peasy, especially if you’ve worked with React/Next.js before)
Alright, let’s get started!
Understanding prompt engineering
Head over to the OpenAI Playground. Sign up for a new OpenAI account if you haven’t already.
If you have also never worked with GPT-3 before, make sure to check out this note by a fellow builder!
Try out some prompts to generate lyrics now. Just ask GPT-3 to generate some lyrics for you.
Once you’ve figured out a prompt, we’re ready to build! 🔧
Building your slick web app
I’m going to build this in Next.js but feel free to use anything else you’re comfortable with.
When shipping anything quickly, you shouldn’t spend too much effort on unimportant tasks like creating a new Next.js project or writing a tonne of custom CSS, at least in the beginning. Focus on creating that one standout feature and gtfol!
Fork and clone locally this starter repo from the good people at Buildspace.
I’m going to assume you know how to set up a repo and are familiar with a code editor and basic commands. If you don’t, please check out the AI writing assistant full project by the people at buildspace-
Also, I’ve used Tailwind CSS, but you are free to use any other CSS framework. Even vanilla CSS rocks!
Follow this guide to setup Tailwind- https://tailwindcss.com/docs/guides/nextjs
Once you had your repo cloned, open up a terminal and cd into the project directory. Install the npm packages and then start the development server.
npm install
npm install openainpm run devYou should see this on localhost:3000:
Open up the project directory in an IDE. VSCode is good. Add the code for the title, subtitle, inputs, submit button, and output area to the pages/index.js file. Your pages/index.js file should look like this. Please take care of all the imports and the project directory structure.
If you need to take a reference at some point, here’s the final project repo-
Create a new folder under “pages” called “api” and another sub-folder named “mxlyrics”. Inside api/mxlyrics, create a new file “generate.js”. We can write our logic for the /api/mxlyrics/generate endpoint that we’re calling from our frontend code here.
Add the following code to your generate.js file:
Don’t forget to play around and change the model, temperature, and max_tokens values to whatever worked best for you on the Playground.
Also, feel free to add your own personal touch by changing the prompt!
Still with me?
Great!
But wait, if you were paying attention, you might have noticed that there’s a variable that hasn’t been defined yet: process.env.OPENAI_API_KEY
Create a file called .env in your project directory and paste this:
OPENAI_API_KEY=<INSERT_YOUR_API_KEY_HERE>You should be able to get this from OpenAI. I’ll let you figure that out.
🚨 Remember to keep your API key safe and secure. Make sure you never commit it to GitHub or share it with anyone else.
Taking it one step further
GPT-3 can also be used to help you finish unfinished ideas and compositions. By using AI-generated content as a starting point, you can quickly develop and finish a piece of music without having to struggle with creative blocks. It can come up with lyrical ideas, compose melodies, and even produce full audio tracks.
So, we’re going to add another feature to let GPT-3 autocomplete our lyrics! Sounds cool?
You would be able to enter just a few lines and GPT-3 will generate an entire song around that. That’s pretty sick!
Go on to create another file in the api/mxlyrics directory named autocomplete.js and add the following code snippet to it:
Again, don’t forget to play around and change the parameter values to whatever feels the best to you, and please try changing the prompt to make the model work even better!
If you had the project already running, restart your terminal. Run npm run dev again so that Next.js picks up the environment variable.
And voila! You should be done! Head over to localhost:3000 and give your app a spin!
Here’s the final look again. Check out the site.
Please take reference from my project repo in order to add styling and if something breaks while you’re building.
What’s next?
Congratulations, you’ve shipped an app on top of GPT-3! What comes next is… entirely up to you.
Don’t have ideas? Here’s where you can go next with this:
- If you want to create a downtempo electronic track, you can provide GPT-3 with the tempo, genre, and any other details that you want it to incorporate into the song. Within minutes, you’ll have an entire track that is ready to be mixed and mastered.
- If you hadn’t played around much with the prompt, try different temperatures, input texts, etc.
And gtfol! I’ll leave this one up to you. Go and figure it out. I know you can do it!
Deploy to Vercel, Netlify or Replit. Just ship it!
Don’t just build, ship!
Just creating projects won’t do you any good. Until and unless you get it out there and have real people using your product it doesn’t even matter! Build in public and see where it takes you 🚀
Ultimately, just ship whatever you can. You’ll be shocked at the progress you’re able to make in just a few days!
I hope you had fun building this little project. Looking forward to seeing what you ship.
May the force be with you!
