Transcription
I get asked a lot how I build my full-scale AI agents, so I recently started an exciting miniseries showing my entire process. In the series, we are building a GitHub agent that can consume entire GitHub repositories for code Q&A.
In the last video of the series, we took the n8n prototype for this agent and turned it into a polished agent built with Pantic AI. However, we were still limited to interacting with our agent in the terminal, and let's be real, that is far from ideal if we want to share our agent with the world and make it useful in the long run.
So, in this fourth video of the series, we are taking our agent and giving it the ultimate glow-up by making it into an API endpoint and then hooking it into a beautiful front end, complete with conversation and chat history. We're going to do it in a matter of minutes!
How are we pulling it off this fast? Well, in the Live Agent Studio, which is my platform made for us as a community to build and showcase open-source AI agents, I've created a brand new tool within it as a celebration for the hackathon event called Agent Zero. Imagine being able to build and run your AI agents locally and then instantly hook them into a front end for free—no complicated setup and no third-party hosting required. That is what Agent Zero offers you.
Now, let me be clear: there are a lot of ways to build a front end for our AI agent, and that's what I'm going to be covering in the next video in this series. We'll use Bolt.DIY, which is our community-driven open-source AI coding assistant, to build a fully custom front end for our GitHub agent. The API that we build here for the Live Agent Studio is going to work for that custom front end as well.
But I specifically wanted to start by making our agent compatible with the Live Agent Studio because I made the Live Agent Studio for exactly this purpose: as a guide for us to build our AI agent into the real world, following a lot of best practices. So, it just makes sense. It's a super concise and still powerful intro into building our AI agent into something that can actually be productionized as an API endpoint with a front end.
Agent Zero is your ticket into using the Live Agent Studio instantly for free. Agent Zero is unlike anything else out there—it's free, 100% local. You can even host Supabase to make that local as well, and you avoid a lot of the hassle of working with other frameworks like Open Web UI that are surprisingly complicated to get your custom agents working in a front end.
So, if this sounds good to you, let's dive right in because this is where we really take our GitHub agent and start to turn it into something that we can use in production. Let's get started!
All right, just like with every other video in the series, I want to start off by going over where we are currently at in this AI agent roadmap, which we are following for the series. Then we'll dive into the Live Agent Studio and the super exciting hackathon that we've got going on. After that, we'll get into turning our GitHub agent into an API endpoint and hooking it into the studio with Agent Zero.
If you came here specifically to learn how to build a Python agent for the Live Agent Studio, you can skip to this timestamp right here. Otherwise, let's dive into this roadmap and see where we are currently at.
So, the first step in building any agent is to do some planning up front, and this is what I covered in the first video in the series. In the second video, which was actually a super exciting live stream that I did a couple of weeks ago, we prototyped our agent with n8n. We also did a little bit of step three then, which is setting up our database, and we did that with Supabase.
We're also going to be working with it today, doing some more database setup for the Live Agent Studio and making our agent compatible with that, while following a lot of best practices that we'd want to use in general, regardless of whether we're making it for the Live Agent Studio.
In the last video in the series, the third one, we moved our agent to Python using Pantic AI. We took our n8n prototype and converted it into Pantic AI, so it has basically all the same functionality, but we added some enhancements and got it ready to be more production-ready.
Now we're on to step number five in this process: creating our front end. I've got the Automator logo here because this represents the Live Agent Studio, which is what we're going to focus on right now. In the next video in this series, we'll be using Bolt.DIY to build a custom front end for our agent. I'll also talk about some other honorable mentions, like building a front end with Streamlit as well.
But right now, we're going to be building for the Live Agent Studio. This is the Live Agent Studio, the platform that I have been pouring my heart and soul into over the last three to four months to make it the perfect place for us as a community to build and showcase open-source AI agents.
You can go to studio.automator.doai right now, sign up in the top right, and you'll instantly have access to all of these agents that you can try right now and view the source code over in GitHub to learn how to implement it yourself. This is community-driven; you can learn how to build an agent for the Live Agent Studio right now and submit it, and I'll host it for you. It is that easy to showcase your agent to the world.
In this video, we're building an agent specifically for the Live Agent Studio. Now, it's important for me to say that in this video, I'm not just showing you how to build an agent for the Live Agent Studio. You're not going to be stuck to this platform; it's actually more the opposite. You can think of it as I built the Live Agent Studio to show you how to best build an agent that you can use anywhere because you can turn it into an API endpoint and then hook it into really any front end.
So don't take it as me just pushing you or shoehorning you into this platform. This is just an awesome starting point, kind of like I was saying in the intro here. You can build an agent for the studio right now; you just have to follow this developer guide, which is a bit long, but it's only because it is so comprehensive. I have so much here as far as resources to get you started building an agent with some awesome samples that you can use as a template as well.
Then you build it here, and you can submit it on this page right here, just following this form, and then I'll host it for you. That is it! That's also all you have to do to compete in our hackathon competition.
We have a $6,000 prize pool sponsored by Voice Flow and NN, and also Open Router students are going to get some free credits for Open Router when you register. It's a super exciting event that's going on from the 8th of this month to the 22nd. We'll have a community voting period as well, so you can contribute to who actually wins this competition.
The premise is so simple: you just build an agent that's compatible with the Live Agent Studio, and you can use Python, like what I'm going to show in this video, n8n, Voice Flow, Flowise—anything that you can put in a Docker container as an API endpoint. There are just so many options available to you, so it's just an awesome event for you to showcase your AI mastery to the world and win some cash prizes.
We have some awesome prizes here. You can check out all these pages on studio.automator.doai. But yeah, $6,000 prize pool with a lot of different prizes, so you don't even have to be first place to get something pretty sweet out of this event.
We have a timeline as well, so you can see everything that goes into this event and when things are happening. So yeah, register for the hackathon. I'll have a link in the description of this video and a pinned comment as well.
With that, we can get into Agent Zero because this is what we're going to be building our agent and testing with in this video. We're going to build our agent into an API endpoint.
If I click on the settings model right here, this is what you're presented with when you first go to Agent Zero. These are the only four things that you have to give the Live Agent Studio, give to Agent Zero, to make it so that you can instantly start talking to your agent with this front end, with your agent hosted locally.
You just have to give your Supabase information, including your public key, so you're not even giving your super secret Supabase key—it's just your public key. Then you give your agent endpoint and the bearer token as well, which is optional for authorization for your agent.
I have a guide as well; if you click on this question mark, it shows you exactly how to set everything up for Agent Zero, and that's going to be following the developer guide, which we will do as we build our agent.
With that being said, we're going to dive first into getting our Supabase set up, and then we will turn our GitHub agent into an API for Agent Zero.
All right, so this is the code for the GitHub agent that we built in the last video in the series with Pantic AI. We've got Deep Seek V3 for our large language model that we were using through Open Router last time, and it was just so easy to set up our dependencies, our system prompt, our agent—all the tools. Everything is working very, very well with Pantic AI.
In the last video, we built this little CLI script right here so that we can interact with our agent in the terminal. But this is the main problem right now: this is just so ugly. It works well; I can test my agent and everything, but it just isn't very pretty.
So that's what we're going to be doing now: building this into an API endpoint and using it with the Live Agent Studio. It's very, very meta, but this exact agent that we're about to build into an API endpoint, you can try it right now. If you go to studio.automator.doai and sign in, you can view the Pantic AI GitHub assistant and try it out, even without having to download all the code or replicate what I'm showing you how to build right now. You can just go right to the studio and try it out, which is super neat.
That's again what I'm going to be doing with a lot of my guides going forward: all the agents I show you how to build, I'll have them available on the studio for you to try instantly. That's one of the benefits of having this being an open-source platform for all of us to contribute to, including myself, for the content for you.
So with that, we're going to go into the developer guide here because we're going to follow this to help us build our AI agent right now.
Starting off, we have a lot of stuff that has to do with the inputs and outputs for our agent, and we're going to get into this in a little bit here. But the first thing that I want to focus on is getting our Supabase set up because it's really important that we set up our database for conversation history for our agent.
To show you how to do this completely from scratch, I have this old Supabase account up right now. I'm going to create a brand new project and create the messages table in there and then use that for the agent in this video. So it really is going to be creating something completely from scratch with you right now.
I'll say this is going to be "YouTube Test"—that's my project name. I'll just use the smallest compute size, and then my database password doesn't really matter. I'll just use a strong password and copy it. Then I'll paste it somewhere else on another monitor just because it doesn't really matter. I'm going to get rid of this instance after this video because I'm going to show you my API keys and stuff as we're moving forward with this.
I'm going to go ahead and create a new project, and it'll take a little bit to spin up this Supabase project. So what I'm going to do is pause and come back once it is done with the setup.
Our Supabase project is now set up, and we can go ahead and create the messages table. That's the only thing we have to do in Supabase to manage the chat histories for our agent.
Going back over to the developer guide in the Live Agent Studio, it gives us all of the SQL that we have to run, so we don't even have to think about how we want to set up our messages table or manage conversation history. That's one of the benefits of building an agent for the studio: it guides you through that entire process.
We'll copy the SQL right here, go back over to Supabase, and go to the SQL editor tab. We have all of the SQL that we need to run pasted right here. The only other thing I want to add is if you take a look at this note right here, it says if you're using Supabase, you'll also want to enable real-time communication with the messages table, which is how we get that instant feedback in the front end for the studio and with Agent Zero.
So I'll also paste that in at the bottom right here and go ahead and run this. There we go—success! No rows returned because we're just creating a table. If I go back to the tables here, we now have this messages table that's completely empty. Also, row-level security is disabled, which we want to keep for now because that's how we can make sure, without authentication, we can access this table in Agent Zero.
But yeah, we're good to go; we have our table now. We can also go down into the project settings in the bottom left here and go to the API tab. This is where we're going to get our project URL and our anonymous API key, our public key, and then our service role. This is our secret key right here, so these are the credentials that we need for the rest of this video. That's how you find it within Supabase.
With our Supabase setup, we can now dive into the code for creating an API endpoint around our GitHub agent. We've got a completely blank slate right here; we're going to be building this from scratch, following the Live Agent Studio developer guide. Everything that we're going to build right now, I'm going to have a link to it in the description of this video to the GitHub repo where you can see all of this that we're building right now.
Before we actually dive into the developer guide, let's open up the env.example file because we want to set up all the environment variables that we need for our agent. In the last video, we covered our Open Router API key, which you're going to need to access large language models. You could set up something else through OpenAI or Anthropic if you want; we're just using Open Router right now.
Then you can define the large language model that you want to use. For example, this is what you'd set it to if you want to use Deep Seek V3 like we did in the last video. Also, you'll need your GitHub token so the agent can interact with repos.
Now we have these new three environment variables. Now that we're managing conversation history in Supabase, we need our Supabase URL, our project URL, and then also that service key—that's the hidden secret key below the anonymous one in the project settings that I just showed you. You get both of these from that same place that I just showed you in Supabase in the project settings.
Then this API bearer token is how we're going to protect our API endpoint that goes into our AI agent. Obviously, we don't just want to have our agent out in the cloud as an API endpoint that anybody can hit because that's going to use our large language model credit. So we want to protect it with a bearer token, and I'll show you how to use this later. But right now, you can literally just set this to whatever you want because this is your own pass that you're creating—basically as a password for the gateway to your agent.
That's everything in the environment variables that you need to set. Now I'm going to go back to the developer guide here because we're going to walk through our sample that we have. If you click on this button right here, "Sample Python Agent" in the developer guide, it's going to take you to the sample Python agent folder.
If I click on "Sample Supabase Agent.py," this is the template that we're going to be using to create our agent compatible with the Live Agent Studio as an API endpoint. Basically, everything that we're about to create is following all this logic right here because it sets up FastAPI for the endpoint, defines your request and response schema that follows exactly what we're expecting here for input for the studio agents and the output—all that's defined here.
We have a function to fetch the conversation history to feed into the agent, a function to store messages for both the user messages and the AI responses, and then we have our actual endpoint here where we verify against the bearer token that you define yourself. We fetch the conversation history, and then we format the messages in the way that works for our specific framework. I'll show you how to do that with Pantic AI specifically.
Then we store the user message, and then kind of in the middle here, this is the big empty space for you to fill in with all the logic for your agent. This is where we call our GitHub agent based on the user's latest message, and then we store the response from the AI in the database and handle some errors. That's about it.
So we're going to be using this template. Going back to the code here, we're going to start from scratch but still mostly using what we have there. If you want to build your agent, even if you're not building the GitHub agent here, you just want to build something else and you want to do it with Python using Pantic AI or Crew AI, whatever, use this as your starting point. It takes care of so much for you, so the only thing you really have to bother with is converting the messages into a format for your framework and then actually making the call to your agent.
So let's go ahead and do that now. First things first, this is going to be an API endpoint, so we're using this Python package called Uvicorn, which is going to serve our endpoint on our localhost using port 801. This is going to be really important because later when we hook this into Agent Zero, we need to make sure we have the port right so we have the complete URL to our agent running locally.
Then we can import all of the packages that we need here, most of which we saw in the sample Python agent in the GitHub repository that I just showed you. The only thing that's a little different here is we're importing a lot of the different message types from Pantic AI because we have to do some of that custom logic to massage the conversation that we pull from the database into the format that our GitHub agent built with Pantic expects.
After that, we can load our environment variables—everything that I just showed you how to set—and then we'll initialize our FastAPI app. This is what we're going to build the endpoint into. Then we're going to use HTTP Bearer security again to verify against that bearer token that you set so that your agent is protected.
Then we're going to add some CORS policies here. Now, this is pretty basic; I'm not going to get too fancy with allowing just specific URLs and things like that, but it's important to have this set because you need Agent Zero to actually be able to talk to your agent hosted locally. If you don't have this code right here, if it's gone, the CORS policy is going to block automator.doai, my platform, from connecting to your agent with Agent Zero.
So you need to have this. After that, we'll set up our Supabase client to connect to our project just based on the URL and the service key. Then we're going to create the schema for our request. Just like I showed in the developer guide, there's a specific format in input that is given into your agent. You have the query—that's the user prompt—you have a user ID, which you won't always have to use, same with the request ID. These are just available to you if you want. The request ID is a unique identifier for that specific request to your agent, and then the session ID represents the ID of your conversation, essentially.
A lot of times, you will want to be using the session ID. So that's everything that's going to come into the payload for your agent as an API endpoint. The only thing that it has to return is a JSON with a single parameter, and that is a true or false for the success of the call to your agent.
The reason why we're not returning the AI response is that we're storing that directly in the database as a part of this, which we'll show in a little bit here. So your actual response to the API call is very, very basic.
Then we have a function to verify the bearer token. It's pretty much just checking to make sure that the credentials that are given through the header of the call to the API actually match the expected token based on that environment variable that you set. So we'll use this as the entry point to our API endpoint to make sure that we are protected.
Then we have this function right here to fetch the conversation history, and you can kind of tweak this limit how you want. We're going to pull right here by default just the last 10 messages. Generally, you don't want to pull the entire conversation in case it's super, super long. You don't want your LLM cost to be through the roof because you have a 1,000-message conversation.
So we're pulling the latest 10 and then just executing the Supabase command to get these messages from the messages table that we have already set up in Supabase. Then we're reversing the order right here because we want to actually get the right chronological order where the latest messages are the last one in the list.
Then we have this function right here to store messages, and this is going to be both for user messages and the AI responses. We basically just build up the object here, and then within the Supabase messages table for that specific session ID—remember, the session ID is basically the ID of the conversation—we're going to store this messages object, and that's going to contain the type of message, like if it's an AI or human, and then also the content of it as well.
There are going to be some default values set, like the timestamp for the message as well. Now we can define our API endpoint. This right here helps define the URL for our agent, so it's going to be localhost, like HTTP://localhost, port, and then our port number right here, like port 801.
This is our URL, so it's going to be /api/pantic/github/agent, and we're expecting this payload to come in. We're saying we are expecting these parameters to be available to us, which we'll use throughout our agent.
Then we are authenticating based on this verify token function that we created right here. So before anything happens in the API endpoint, we go through this layer of protection. First, we want to fetch the conversation history based on the session ID that's passed into our endpoint.
Then we need to create the messages in an array that's in the specific format that we need for Pantic AI. The way that we do that is mostly this line of code that's doing all the work. I'm not going to get into the detail of why it looks like this exactly. If you want to go to the Pantic AI documentation, you can take a look at how the conversations are formatted with model requests and model responses.
Then we have the user prompt right here—these are all of our human messages—and then we have our AI responses, which are just called text part. Not sure why they named it like this exactly, but yeah, basically, we're just setting up an array of all of the human messages and the AI responses.
Now, it's important to note that this doesn't cover any tool calls or tool responses; that part is missing from this because I want to keep it very, very simple. But later on in this series, I will actually expand this to store everything related to tool calls in the message history as well, so the AI can have that context for the conversation going forward.
But yeah, just keeping it very simple right now with just the user and AI messages. Now we can store the user message in the database that just came in through the API call, just using the function that we defined above.
We'll initialize an HTTP client because this is what we're going to give to our agent so that it can make requests to the GitHub API. This is going to be one of the dependencies for our agent, and so we set up our dependencies right now. Again, this is very similar to what we did in the CLI.
If I actually go to this right here, just as an example, when we initialized our agent in the CLI, we set up our dependencies in just the same way. Our agent needs an HTTP client to interact with the GitHub API, and it needs the GitHub API token. So we're setting up both of these in the dependencies here and exactly the same way.
Then we're going to interact with it also in a very similar way. So in the CLI, we have this line of code right here, and then in our endpoint, it's basically the same. We get the query that came in from the API request, so this is going to be exactly what we stored as the user message right here.
Then we have the message history that we pulled and then the dependencies that we set up right here. This is going to invoke the agent; the agent will call any tools that it needs to analyze the GitHub repo or specific files in any way, and then it'll return the response to us right here.
We're just going to store that in the database as the AI message as the response to the user's request—super, super basic. Now we're going to just return the agent response, and again, because we're storing the AI message here, we don't actually have to return the AI's response as a response to the API call.
We just say if success is true, which it is in this case, and then obviously when success is false, that's when we encounter any error that we have to handle. That's what we do right here. If there's any exception when processing the agent request, we store an error message in the database so the AI can actually let us know that there was an error, and we don't just see nothing happen in the front end.
Then we return the same agent response, but this time success is false. That is everything! That is all it takes, and most of this is just following that template that I showed you earlier that was in the developer guide for building an agent for the Live Agent Studio and Agent Zero.
So super easy! Now we have this agent, and the only thing we have to do now is run it in the terminal. We have it running locally; we have this endpoint hosted locally, and then we'll go over to Agent Zero and play around with it there.
So now, over in the terminal, we're going to actually start our FastAPI endpoint for our GitHub agent. The way that we do this—first of all, change your directory to the same one that has all the code that we just wrote. Now it's just like running any Python script: so it's Python and then GitHub agent endpoint.py.
This will instantly start up our endpoint running on localhost. This is synonymous with localhost, by the way, with all the zeros, and then our port is 801, just like we specified right here. That is it!
Now we can go over to Agent Zero and hook this up. Going back over to my browser here, you just have to go to studio.automator.doai, log in in the top right, and now we can head on over to Agent Zero completely for free and hook up our agent.
Once you click right here, I've already got the page open with my configuration. When you haven't set your configuration yet, you'll immediately be presented with this page where you can enter in all of your information that you need for Agent Zero.
The first thing we need is our Supabase project URL. So going back to Supabase here, I will just copy my URL. Let me bring that in right here. Now we need our anonymous key, otherwise known as our public key, so I'll copy that and bring that in as well.
Then we need our agent endpoint URL, and so this is going to be HTTP://localhost:801/api/pantic/github/agent. I'll copy this, go back over, and paste that in. Boom! That is the endpoint for our agent.
Then the bearer token—you just have to set it to whatever you set for your bearer token right here. I have this one hidden; it's set in my .env file, and I don't want to show this right now, so I'm going to pause and come back once I have the bearer token copied and pasted into Agent Zero.
All right, so I've got my bearer token pasted, and as long as this is exactly the same as what you have in your .env file, that will work. The other thing that you want to make sure is that your Supabase project URL is exactly the same as the one that you have set in your .env file right here.
You need your service key in the agent and then the public key in the front end. These don't have to be the same, but you have to make sure that this is the service key and then this is the public key from the same Supabase project.
That's how we can make sure that the front end is talking to the same messages table that your agent in the back end, running locally, is also talking to. So I'll go ahead and save all of this, and it'll refresh the page and get your credentials set, which you can click on this little gear icon in the bottom left to change your settings or view them, whatever.
Now we are in a new conversation, and yeah, you can also view the setup instructions. I showed this earlier in the video as well, but this is everything you need. A lot of it goes along with the developer guide that we saw here as well.
You can view this guide as well if you want; there are some troubleshooting steps as well, but that's pretty much it. Now what we can do is talk to our agent, and it's going to actually run locally. I'll even show the terminal when we make a request; we'll see the requests come through on my agent running locally right here in my terminal.
I'm going to copy a GitHub URL. I'm actually just going to copy this one, so the same GitHub repository where we saw this Python template. I'm going to use this, so I'm going to paste this in and say, "Describe this project."
All right, boom! There we go. Then I'm going to go over to my terminal here, and look at that! We are making requests from our studio, from Agent Zero, to our local agent that we have running using FastAPI, and we got a response.
It's a repository by me, and it is hosting all the open-source agents for the Automator Live Agent Studio—Python-based, very, very small, 112 stars. Hopefully, a lot more to come! Created on December 2nd, so perfect, and last updated today because I'm always making updates to this thing, I promise.
So yeah, perfect! This is working beautifully. We have our agent turned into an API point that we can use instantly with Agent Zero to have this wonderful front end. We also have conversation history and chat history.
It's not showing any of this right here because I changed my database, but if I start a new conversation here and say hello, I get a response from my agent, which we'll see in a second. I can now toggle between these conversations. I can refresh my page, and I'll still have these conversations, so everything's very permanent.
Yeah, this just takes care of so much for us with all the conversation and chat management. I mean, it's not trivial, so super, super helpful.
I hope that you found this useful, and in the next video in the series, we're going to take this so much further, building a fully custom front end using the same API endpoint for our agent.
Just like that, we have turned our humble terminal-bound GitHub agent into a full-fledged API endpoint with a polished front end, all using the Live Agent Studio and Agent Zero completely for free. This has been a massive step towards building our AI agent into something that is production-ready.
At this point, you could literally take what we made just now and submit it to the Live Agent Studio to share it with the world and compete in the hackathon. That's all that it takes!
We're not stopping here either. In the next video in this series, we're going to take the API endpoint that we built around our agent and hook it this time into a fully custom front end that we're going to build with Bolt.DIY, which is our community-driven project that we are building to be the best open-source AI coding assistant.
This is going to be your ticket into building something truly custom if the Live Agent Studio is maybe just a starting point for you. So if you appreciated this video and this series has already taught you a lot about building AI agents, I would really appreciate a like and a subscribe.
With that, I will see you in the next video!