👋 Welcome to the AI Engineer Challenge

🤖 Your First Vibe Coding LLM Application

If you are a novice, and need a bit more help to get your dev environment off the ground, check out this Setup Guide. This guide will walk you through the 'git' setup you need to get started.

For additional context on LLM development environments and API key setup, you can also check out our Interactive Dev Environment for LLM Development.

In this repository, we'll walk you through the steps to create a LLM (Large Language Model) powered application with a vibe-coded frontend!

Are you ready? Let's get started!

🖥️ Accessing "gpt-4.1-mini" (ChatGPT) like a developer

1. Head to this notebook and follow along with the instructions!

2. Complete the notebook and try out your own system/assistant messages!

That's it! Head to the next step and start building your application!

🏗️ Forking & Cloning This Repository

Before you begin, make sure you have:

1. 👤 A GitHub account (you'll need to replace YOUR_GITHUB_USERNAME with your actual username)
2. 🔧 Git installed on your local machine
3. 💻 A code editor (like Cursor, VS Code, etc.)
4. ⌨️ Terminal access (Mac/Linux) or Command Prompt/PowerShell (Windows)
5. 🔑 A GitHub Personal Access Token (for authentication)

Got everything in place? Let's move on!

1. Fork this repo!

   

2. Clone your newly created repo.

   # First, navigate to where you want the project folder to be created
   cd PATH_TO_DESIRED_PARENT_DIRECTORY
   
   # Then clone (this will create a new folder called The-AI-Engineer-Challenge)
   git clone [email protected]:<YOUR GITHUB USERNAME>/The-AI-Engineer-Challenge.git

   Note: This command uses SSH. If you haven't set up SSH with GitHub, the command will fail. In that case, use HTTPS by replacing [email protected]: with https://github.com/ - you'll then be prompted for your GitHub username and personal access token.

3. Verify your git setup:

   # Check that your remote is set up correctly
   git remote -v
   
   # Check the status of your repository
   git status
   
   # See which branch you're on
   git branch

4. Open the freshly cloned repository inside Cursor!

   cd The-AI-Engineering-Challenge
   cursor .

5. Check out the existing backend code found in /api/app.py

🔥Setting Up for Vibe Coding Success

While it is a bit counter-intuitive to set things up before jumping into vibe-coding - it's important to remember that there exists a gradient betweeen AI-Assisted Development and Vibe-Coding. We're only reaching slightly into AI-Assisted Development for this challenge, but it's worth it!

1. Check out the rules in .cursor/rules/ and add theme-ing information like colour schemes in frontend-rule.mdc! You can be as expressive as you'd like in these rules!

2. We're going to index some docs to make our application more likely to succeed. To do this - we're going to start with CTRL+SHIFT+P (or CMD+SHIFT+P on Mac) and we're going to type "custom doc" into the search bar.

   

3. We're then going to copy and paste https://nextjs.org/docs into the prompt.

   

4. We're then going to use the default configs to add these docs to our available and indexed documents.

   

5. After that - you will do the same with Vercel's documentation. After which you should see:

   

😎 Vibe Coding a Front End for the FastAPI Backend

1. Use Command-L or CTRL-L to open the Cursor chat console.

2. Set the chat settings to the following:

   

3. Ask Cursor to create a frontend for your application. Iterate as much as you like!

4. Run the frontend using the instructions Cursor provided.

NOTE: If you run into any errors, copy and paste them back into the Cursor chat window - and ask Cursor to fix them!

NOTE: You have been provided with a backend in the /api folder - please ensure your Front End integrates with it!

🚀 Deploying Your First LLM-powered Application with Vercel

1. Ensure you have signed into Vercel with your GitHub account.

2. Ensure you have npm (this may have been installed in the previous vibe-coding step!) - if you need help with that, ask Cursor!

3. Run the command:

   npm install -g vercel

4. Run the command:

   vercel

5. Follow the in-terminal instructions. (Below is an example of what you will see!)

   

6. Once the build is completed - head to the provided link and try out your app!

NOTE: Remember, if you run into any errors - ask Cursor to help you fix them!

Vercel Link to Share

You'll want to make sure you share you domains hyperlink to ensure people can access your app!

NOTE: Test this is the public link by trying to open your newly deployed site in an Incognito browser tab!

🎉 Congratulations!

You just deployed your first LLM-powered application! 🚀🚀🚀 Get on linkedin and post your results and experience! Make sure to tag us at @AIMakerspace!

Here's a template to get your post started!

🚀🎉 Exciting News! 🎉🚀

🏗️ Today, I'm thrilled to announce that I've successfully built and shipped my first-ever LLM using the powerful combination of , and the OpenAI API! 🖥️

Check it out 👇
[LINK TO APP]

A big shoutout to the @AI Makerspace for all making this possible. Couldn't have done it without the incredible community there. 🤗🙏

Looking forward to building with the community! 🙌✨ Here's to many more creations ahead! 🥂🎉

Who else is diving into the world of AI? Let's connect! 🌐💡

#FirstLLMApp