Transcription
I get asked a lot how I build my full-scale AI agents, so I recently kicked off this miniseries showing you my entire process. In this series, we are building a GitHub agent that can consume entire repositories for code Q&A.
In the last video, we integrated our agent with the live Agent Studio Agent Zero platform to quickly give our agent a polished front end, and we said goodbye to the ugly terminal. Now, in this video, we are taking that and bringing it up a notch by rolling our own fully custom front end with the help of a couple of AI coding assistants, including our very own Bolt DIY, which we as a community are building to be the best open-source AI coding assistant.
I love using AI coding assistants to help me with any app that I create, but they all have their pros and cons. Bolt DIY is open source, and you can use any large language model, many of which are completely free to use. However, since we're so focused on working with many different LLMs, we don't have the opportunity to optimize for just one, like Lovable or Bolt New.
So oftentimes, these platforms will actually give you better performance when you're starting an app from scratch. Then we have our AI IDEs like Wind Surf or Cursor, the ones that run on your computer instead of in the browser. They are phenomenal for making more directed changes with your applications, but the in-browser editors like Bolt are still much faster at getting you started with your project.
If only there was a way to combine all of these tools together to get the best of all three worlds! We want something that is powerful, free to use, and easy to work with throughout the entire process of creating our app. Well, in this video, I'm going to show you exactly how to do that.
We're going to combine these tools together. We'll use Lovable, Bolt DIY, and an AI IDE like Wind Surf or Cursor to create a front end for our GitHub agent, complete with conversation and chat history. Sound like a lot? Well, it's actually super simple to use all these platforms together, and I'll show you exactly how to do that and explain my reasoning behind using these different tools throughout the video.
Super exciting stuff, so let's dive right into it!
Now, this is the live Agent Studio, the platform that I've been pouring my heart and soul into over the past few months to build up this place for us to collaborate on open-source AI agents together. You can build your agents with any platform, like with Python, n8n, or Voice Flow, and publish it here for the world to try out.
So we can just work on pushing the industry forward together, building incredible AI agents. Obviously, to build an agent for this platform, you have to follow some specific guidelines so that it is compatible, and that's what we went over in the last video. We followed this guide that I have here on the live Agent Studio that walked us through the exact process of building an agent for the studio.
It's not like I'm just showing you how to build an agent only so it can go on this platform. This really teaches us best practices about turning our agent into an API endpoint so that we can hook it into any front end. That's what we're going to do in this video: take the exact same code.
I'll even show that quick. This is what we worked on in the last video; we turned our Pantic AI agent into an API endpoint. Without even having to change this at all, we're going to use AI coding assistance to build a front end that can hook into this API, just like we did with Agent Z.
So this is Agent Zero, the platform that we hooked our agent into last time. Now we're going to use all of these AI IDEs to build our own front end. Of course, we could just leave our agent here on the studio and build it for the studio. I mean, that's what I built this platform for, after all, to be an open-source repository of AI agents.
But we really do want to go and build our own front end now, so that is what we're going to do with the exact same code that we worked with for our agent in the last video.
Now, what does our process actually look like for using all these different AI coding assistants to build a front end for our GitHub agent? Well, we're actually going to start with Lovable, which I have never covered on my channel before, even though it is a fantastic platform. I've been so focused on Bolt with Bolt DIY, and really, you could use either Bolt New or Lovable here to get started.
These platforms are both optimizing for a single LLM, and you generally get the best results starting your project and getting a solid foundation. So honestly, Lovable and Bolt New are pretty comparable; they do better at certain things, though. I actually find that for that style of applications, like what we're going to build right here, Lovable does a bit better, and then Bolt New does better at other things, like building landing pages, for example.
So that's why I'm using Lovable, and it has free credits to get started, which is why I can say it's free. When we start with a solution like Lovable, we're going to lay the strong foundation with a single prompt that I'll show in a little bit, get our project started, which you could do with Bolt New as well if you wanted, so that still is an option.
Then we're going to take that project that we build for free with the free credits that we initially get with Lovable or Bolt New, and then we're going to move over to Bolt DIY. The reason we want to do this is because with Bolt DIY, you can run it yourself and use completely free models.
So we can take our initial project from Lovable or Bolt New and then tweak it to our heart's content completely for free. One problem that people run into a lot using a solution like Lovable is their initial project turns out great; they just use a few credits, but then they want to tweak something. They want to add a light theme, there's a little button that's not working, or they want to change the UI, and they slowly use more and more credits as they're making these changes.
Then they hit their limit and can't continue. That is the problem that Bolt DIY solves. Even though it might not give as good of a performance creating that initial foundation, you can use it for free to continue making more and more changes and never run out of usage. That is the beauty.
So essentially, we're going to build in Lovable, publish to GitHub, pull into Bolt DIY, make our changes there, and then we will download the project. We can bring it into an AI IDE like Wind Surf, for example. This is what I'm going to be using; you could use Cursor as well. There are free credits that you get for Wind Surf too.
By the time we bring in this project into Wind Surf, it'll be pretty much finished, and we can just use an AI IDE to make some of those last touches. We run it on our computer anyway because that's how we're going to deploy it within the rest of this AI agent series.
So that's everything that we've got. Now let's dive into the prompt to get started with this app using Lovable.
All right, here is the prompt that we're going to be feeding into Lovable to create the foundation of our front end for our GitHub agent, and I'm going to cover all of this right here. Now, a lot of this is going to make more sense if you saw the last video where I created the API endpoint around the agent because we need to be very clear with our agent here how you actually communicate with it.
Lovable needs to know the inputs, the outputs, and how we handle the messages because it has to read all this in the front end to display the conversations and the chat messages. Starting off, I'm actually quite general with the UI itself. I just tell it to make a beautiful dark theme using some of these colors. You could specify specific hex codes if you wanted to as well.
Then I give a URL for the agent; this is going to dictate the entire flow of the application, obviously making sure that it's connected to the right API endpoint. This is what I had set up in the last video. I literally have my terminal running this agent right here, so once this is built in Lovable, we're actually going to be able to start talking to it immediately.
Then I specify the input schema, so this is the payload that has to be sent into the agent through this API endpoint. I also clarify what all of these parameters are. Most of this prompt is really just telling it how to work with the API. I don't even specify much with the front end because that is where I really need to get specific.
These tools like Lovable do a fantastic job making user interfaces even without much direction; it's more the specifics, the functionality, that you really have to get specific with. So things like the output schema as well, being specific with that.
Lovable does have a direct Supabase integration, but I find it even more simple for what I'm building here to just have it bake the Supabase URL and public key right in the code instead of creating that .env file that it likes to do when you set up Supabase integration. So I just tell it right here, and you can paste these things in because they're not private.
You're not putting your Supabase secret key here; you're just putting your URL and your public key. Then also specifying here the schema for the messages table in Supabase because it's going to have to know what it pulls from in the table to display the conversations and the chat messages.
Actually, even before I go through the rest of this prompt, let me go over to Supabase and show you these things really quick. Here we are in Supabase. I just want to really quickly show you how to get that project URL and anonymous key, and then also that messages table and talk about that just a little bit here to give you some extra context, which is going to be very important for Lovable. We include that in the prompt as well.
So first of all, to get your project URL and public key, go down to the project settings in the dashboard for Supabase and then go to the API section in configuration. You can just copy your URL right here as well as your public key. Again, both of these things you can paste right into the prompt to the LLM, even if it is not a local LLM.
The service role key is the only thing that you would really want to keep secret and probably never give to a prompt for an LLM, but these two things are okay, and you can even have these published in a GitHub repo; they are public information.
Then the other thing, if I go to the SQL editor, in the last video in the series, we ran this SQL right here to create the messages table that our AI agent is using to store all of the messages in the conversation. Obviously, we need to interact with this correctly within the front end as well.
So everything that I ran right here, which created this messages table, that is what I'm pasting in as the schema for the Lovable prompt as well. Back over to the prompt, let's finish this off really quick here.
So yeah, we specify the schema for the table that I just covered, and we also specify here that we have real-time enabled for this table because we're actually going to subscribe to changes to the messages table, able to immediately pull new messages that are coming in from our agent.
In the developer guide that I have on the Automator Live Agent Studio, I have instructions on how to set up everything, so you can literally just copy all of the SQL that I just showed running in Supabase to set up your messages table here.
We also have this line right here to enable real-time communication for the table. That means that our front end can watch for changes to the table, as in new messages that come in. So that's very important to specify for our prompt right here because we need Lovable to know to set all of that subscription stuff up to watch for changes to this table.
Then I also specify for the messages here the content and the type, so it needs to extract this information to display things about the messages correctly. Finally, I just have a random list of requirements here that I have for my application.
This is usually what I'll do for all of my prompts to AI coding assistance like this when I'm starting a new project. I'll just kind of have the end be a dedicated section to dump a bunch of random requirements that didn't quite fit into anything else above. Things like making sure it can handle markdown, I want there to be a loading indicator when we're getting the response from the AI agent, a lot of the UX stuff specifically that I focus on right here.
Then also, I want to have Supabase authentication enabled with email and password. When you have your Supabase project set up, there's nothing more that you actually have to set up for this to be possible, which is super neat. So it's just this single line right here that I add to the bottom of the prompt, and we'll have authentication with Supabase fully set up in our Lovable app after we run this prompt.
So speaking of that, let's go over to Lovable and run this. Now this is the fun part! I copy the prompt, go over to Lovable, just paste it in, and let it rip. Just make sure that you give your Supabase project URL and public key in place of those placeholders, and that's it.
So I can just go ahead and hit enter, and then boom! It's going to immediately start creating my app for me. So neat! This is the kind of thing that would take days and days to work on and tweak, like what we're going to do with Bolt DIY in a little bit here, but it's just so fast with these AI IDEs now.
So yeah, amazing! I'm just going to let it go and pause, and come back once Lovable is done creating my app.
All right, look at this! We have a full front end built already with Lovable. Now, there's one little tweak that I had to do right here, just a few suggestions that I gave as kind of a second shot prompt here to make it more presentable to show you what Lovable can really do.
But for the most part, it was just a single shot prompt, and it built this full front end. We got Supabase authentication. I have a test account that I already have created here in my Supabase account, so I'll just log in with that really quick here.
Then boom! Look at this! We already have the conversation history pulled. I can view all my old messages that I have in the messages table, start a new conversation, I can collapse this, and I can log out. I mean, things don't look perfect here, so we are going to do some more tweaking. We'll do that with Bolt DIY, but this is already looking phenomenal.
So yeah, I've got my agent running locally right here. Nothing's happening in the terminal yet, but I'll show you that when I actually talk to it here. It's going to work. So I'll say, "Hi, how are you?" and, uh, looks like I can't hit enter to send the message, so I might want to fix that as well.
So I'll just click Send, and there we go! Boom! We got the message on the front end. It's talking to our agent; we can see the prompt coming through right here. We got a response in real time. Look at that! This is beautiful!
I can even continue the conversation here. Just, I mean, random question, but yeah, look at that! This is super neat! Just basically one prompt to Lovable, and now we want to take the UI and UX and make it a little bit better.
So we're going to push it to GitHub and then pull it from GitHub in Bolt DIY. So let's do that now and really start to refine our app that we've been building for free so far.
All right, let's get this published to GitHub. So I'm going to click on Edit Code in the top right, click on Transfer Repository, and then I'm already signed in, but it's going to have you go through an authorization flow very quickly if you haven't already.
But I'll just go ahead and click on my account, and then boom! It is immediately going to create a GitHub repository that has all of the code that we just created within Lovable. So I'm going to click on this link, and here we go! We got our repository.
It is private by default, which you can bring into Bolt DIY as a private repo if you sign in. The other option is you can just make it public, so you don't even have to sign into GitHub in Bolt DIY. Since I want to share this with you anyway, I'm actually going to go ahead and make it public right now.
So just go to Settings, then scroll down and change visibility to public. I want to make this public. I understand all the effects. Boom! There we go! Then I have to authorize. Let me do that, and I'll come back once I have this as a public repo.
Repo is published! Now we can go ahead and install Bolt DIY and bring in this project in just seconds. There are a lot of resources on our Automator Think Tank on YouTube for how to install Bolt DIY because you're actually going to run this on your computer, unlike Lovable or Bolt New.
So it runs in the browser, but you run it on your computer, and then you just visit your localhost URL to access it, like we're seeing right here. If you go to the main Bolt DIY homepage of the repo here, which I'll have linked in the description, you'll see a ton of really helpful instructions to install it.
You can install with Node.js, with Docker; there's even a button just to download the zip for all the source code right here. I'm just going to show you the easiest way that I found to install it with Node.js. The requirements here are that you have Node.js. You just go to nodejs.org, download, and install super quick.
You also want Git so that you can clone the repository and bring all the code for Bolt DIY onto your machine. You just go to git-scm.com, and there'll be a button here automatically to install it for your operating system, Windows, Mac, or Linux.
So that's how you install all the dependencies here. Now we just want to clone the repository. I'm actually going to do this from scratch right now in just like a minute to show you how easy it is to get up and running with Bolt DIY, even though you do have to run it on your own computer.
So go to the repo, click on the code drop-down right here, copy the URL to your clipboard, and then I'm going to another terminal here on my screen. So let me bring that over to this monitor, and I'm going to do git clone and then the repo link that I just copied.
So it's going to bring this all in super fast. It's a pretty lightweight app overall. So I clone the repository from scratch, and now I'm going to change my directory into it. Now all I have to do to install all the dependencies for Bolt DIY is run the command `pnpm install`.
This is going to take a little bit to install all the packages, so let me pause and come back once that is done.
All right, took like 3 seconds! Honestly, I paused and came back in like 3 seconds, and now we got everything installed. So now we can run the command `pnpm run dev`. Again, all these instructions are in the readme here in the repo.
So I'll run this, and it will just, after a couple of seconds here, start Bolt DIY on localhost port 5173 by default. You can copy this URL and go into Bolt right here. So it's going to refresh; I'll give it a little bit of time here, and you can go to the terminal and see things that are happening.
Right here, it's registering all the providers that we have for Bolt DIY. You can use basically any large language model that you could dream of. Again, many of them are free, which is the beauty of using Bolt DIY to iterate on this project that otherwise you would have had to pay a lot of credits for to continuously iterate on within Lovable.
To set your API key, there are instructions no matter the provider that you select. If I select OpenAI and I want to use it, well, I guess it's a bad example because you don't have to set an API key. But if I'm using Google or if I'm using Anthropic, whatever, you can click on this button, and it'll show you how to get the API key.
Once you have your API key for Google, I'm using Gemini 2.0 Flash in this case. There are so many cool models you can use, like Deep Seek through Open Router, for example. But I'm going to use Gemini 2.0 Flash, which is completely free. I got my API key, so I'll just click on the edit button right here, paste it in, click check, and then boom! I got my API key set for Google, and I am ready to go.
It is that easy! You don't even have to set your API keys in the .env file, so I have to do nothing to mess with the actual code, go into VS Code or anything like that. Now we can go ahead and import our Git repo and start playing around with the project right here in Bolt DIY.
To bring the GitHub repo into Bolt DIY, just click on the "Clone a Git Repo" button. You have to enter a URL here, which I just copied for what Lovable published for me. If this is a private repo, you will have to sign in; otherwise, since this is public, it is instantly going to bring in everything for me here and even run the commands to install all the dependencies and start the site up for me.
So in just a second, once it's done here in the terminal installing all the dependencies and running it, we're going to see the exact same app that we had in Lovable because at this point, we haven't changed anything.
Now that we have it running here in Bolt DIY, we can use Gemini 2.0 Flash to tweak everything that we want, that our heart could desire, with the UI and the UX to make this app perfect. We can do it completely for free.
Right now, it's still loading things up right here, so I'm giving it a little bit of time. There we go! All right, so now we have it up and running, and we can even test this. So I can log in here just like I did with Lovable, sign in, and we can see that everything is exactly the same with this project right here.
Now, one thing I will say is that chatting with the agent will not work within Bolt New or Bolt DIY because the web container actually blocks requests to the localhost agents here. So Lovable is a bit better in this way just because it doesn't block those requests.
Right here, we're just going to be working with the UI and UX, and then we'll download it, bring it into an AI IDE like Wind Surf, and continue there and run it there.
What I'm going to do right here, I'm just going to do this off camera. I'm going to do a bunch of little prompting here to tweak certain things. It's not going to be super interesting for you, so I'll pause, make a ton of little changes to make this look nice just as a good example, and then come back once that is done.
So here we are with a much better version of our front end using a bunch of tweaks with Bolt DIY. It's a little boring to just go through this with you, which is why I did it off camera. But yeah, you can see the full chat here. Everything that I did with Bolt DIY would have taken quite a few credits in something like Lovable.
The main thing that I want to give as a piece of advice here is just request it to add one thing at a time. That makes it so much easier for the LLM to just understand what you're doing and implement it correctly. Gemini supports images, and so does Bolt DIY.
You can click on this button right here and literally drag what you want to take a screenshot of, share your screen, and it'll add it as an image here, which is super neat because I can share context around what doesn't look good and actually have it reason about it visually, which is so, so cool.
So yeah, we've got a header here; the logo button looks better. We've got our chat that we can now hit enter to send, and if I click into an existing conversation, it looks so much better. We even got this little toggle here for our theme, which it's not too much different, so I might want to tweak that more later as well.
But yeah, this is just so awesome! Going back to Lovable, which again, this was phenomenal for our starting point, it's already much, much better. This is what we got with Lovable that we built on top of with Bolt DIY.
Like the logout button looks bad, the messages look bad here, we can't hit enter to send a message. It's just amazing now!
So now, going back over to Bolt DIY, all we have to do to download it to then bring it onto our computer to take it forward is just click on this button right here, "Download Code." That is it! It'll download a zip file that you can then unzip and then just run the same commands that it ran initially, like `npm install` and `npm run dev` to install it and run it all on your computer.
So I'm going to go ahead and do that right now. So I unzip the file that Bolt DIY downloaded and then put all the contents in this folder right here. It should look very similar. This is exactly the file structure that we had in Bolt DIY.
Now I have a terminal that is open up to this folder right here, and I can just run the same exact commands that the LLM ran in Bolt DIY. So first, I start with `npm install`. This is going to install all of the packages, the Node.js packages for our front end.
After it does this, you can see it created the node_modules folder, so we're installing all of our dependencies. Then we can run it after with the `npm run` command, and that's it! We will now have our website up, ready for us to play around with, just like we were doing in Lovable and Bolt DIY.
So I'll do `npm run dev`, start this up. Boom! It is now hosted on localhost port 8080. So I'll actually go back over to my browser here and open that up.
So localhost port 8080, and boom! There we go! Now it looks like it changed. I didn't realize it changed the login here; it's a little funny, so I'd probably want to fix that. That looks pretty bad.
But yeah, let me log in and actually get into the real thing here. So I'll sign in. Boom! There we go! So yeah, that's something important to keep in mind: make sure that you're aware of what the LLM is changing. I was already logged in the entire time it was editing, so I didn't see that, but it'd be easy to fix that anyway.
But yeah, look at this! This interface just looks so clean, and obviously, it's just the bare bones. This is very much a proof of concept, but now you can take this so much further. You could continue to tweak it in Bolt DIY, or you could actually go into an AI IDE like Wind Surf or Cursor and keep editing it from there.
Again, I love using AI IDEs like Wind Surf and Cursor to make more directed changes. I use the in-browser editors to get me started on the project and make those initial larger scale tweaks, and then I take it into an AI IDE.
So that's my general process. I'm not going to show bringing it into Wind Surf or Cursor because I've already made a video on Wind Surf on my channel, and I think it's pretty intuitive overall.
But yeah, let's actually test out this agent now. So I've got my terminal open here to my agent. I'll start a new chat and I'll just say hello, and we'll see if everything is working.
So we got the hello in the top right here. I guess you can't see it because my screen is fully zoomed in here. So yeah, hello, and then I get the response from the agent. If I open up my terminal, boom! There we go! We got that new response just now.
I can say test, and there we go! We got our request! All right, it is working perfectly!
So the next step would definitely be to bring it into something like Wind Surf to continue making changes. Generally, I love doing that because a lot of these in-browser editors kind of get stuck after a while when you're making tweaks.
So yeah, bringing it into an AI IDE to make those more directed changes. Also, this fully updated UI I will push into GitHub as well, so you can check it out if you want. I'll also have the AI agent, the GitHub agent, linked in the description of this video as well.
If you're curious about how to use something like Wind Surf, I'll have a video right here that you can check out. A lot of cool tips that I have there for how to use something like Wind Surf.
But again, I'm not going to cover it here because it's pretty intuitive overall, and we already have something that will take us into the next step of continuing to improve and test our agent and then deploy it, which is what we're going to do in the rest of this series.
With that, our AI agent now has a fully custom and slick front end built with the help of a few AI coders and the open-source power of Bolt DIY. I know that it seems like a lot of moving parts with these different AI coding assistants, but I hope that this video makes it very clear for you how you can use them together very easily.
Using them in tandem gives you the perfect blend of free, flexible, and fast. Really, I use this process for building all of my front ends. In the next videos in this series, we're going to be testing out our agent and refining it more with the help of this front end, and then finally deploying our AI agent.
We are on the home stretch now for actually productionizing our AI agent and turning it into something that you can monetize if you build it yourself. So stay tuned for that! I'm super excited for the rest of this series.
If you appreciated this content and you've learned a lot from building AI agents in this series already, I would really appreciate a like and a subscribe. With that, I will see you in the next video!