Verdent : AI Coding with Parallel Agents — Full Demo!

Julien Simon · Intermediate ·🌐 Frontend Engineering ·6mo ago

Key Takeaways

The video demonstrates the use of Verdant AI for coding with parallel agents, building a full-stack LLM benchmark dashboard with FastAPI backend, pytest tests, and React frontend. The demo showcases the capabilities of Verdant AI in handling parallel tasks and creating autonomous agents.

Full Transcript

Hi everybody, I am Julian. In this video, I'm going to demo a new AI coding tool called Verdant AI. Verdant lets you run multiple AI agents in parallel, each in its own isolated workspace. So no stepping on each other's code and no code merging nightmare at the end. In the next 101 15 minutes, I will build a full stack app live backend, front end, unit tests all at the same time. Let's get started. A lot of us are using AI coding tools at the moment and they're awesome. They definitely add a lot of uh productivity. Uh most of the time we start working on a feature prompting the agent waiting to see results testing and then finding a bug or something we don't like and and switching to you know fixing that and then we move to another thing and then another thing. So we have those long conversations that uh evolve over time and you know context gets lost uh or becomes irrelevant and it's making uh it's making it harder for the agent to actually do a great job. You know files are reloaded. We need to explain what we were doing five minutes ago etc etc. Um and um the reason for that is because you know this conversation is singlethreaded right um and um and every time we switch to something you know we lose uh relevance we lose context so um how about trying to do things in parallel uh in isolated tasks and uh and that's really what uh what Verdant is trying to solve. So we're going to work with multiple agents. Each one is running in its own workspace, its own context, and they're completely parallel. So obviously um we focus each agent on a particular thing and they're running in parallel. So hopefully we get more things done in the same amount of time, right? We just assign the tasks to uh to the agent and we let them run. Okay. So, let's see if this really works. Uh, and uh, and using Verdant, I'm going to build a small app. And I've decided to build a a a mockup for uh, an LLM benchmark dashboard. Okay. So, we're going to build a backend with APIs, and we'll use fast API for that. uh we'll use a a front end with React and uh I can't write any React code so I'm hoping the agent will do a good job here and of course we'll need unit tests with pi test. So three agents and three workspaces running all at once. Okay, so let's switch to the Verdant app and set up the workspaces. Okay, so my starting point is um an empty project. Okay. Um, everything lives in that verdant folder. I initialized git. I have a first silly comet just to create an empty readme file and there is a single branch called master. Okay. So that's where we start. So now looking at Verdant uh we're going to create the three workspaces uh front end, back end and tests. Okay. So let's just go and do that new workspace. Um this one let's just call front end and well I guess we'll start from master. Okay, that's the only option right now. Okay, let's do the same for the back end and let's do the same for unit tests. Okay, so I haven't done much so far. Just created those. Okay. So once I've created the three workspaces, I can see that Verdant has automatically created branches for that. Okay, so that's pretty cool because it can then work automatically with those. Okay, so here's my backend prompt. Build a fast API backend for an LLM benchmark dashboard. Um, I want a main script with two endpoints slashmodels, a list of models with meta data slashbenchmarks, benchmark scores. Okay, so we'll use mock data. Um, but we could easily add actual scores in a database. Uh, and you know, we'll just use some well-known models with that mock data. And these are the benchmarks I want to see. Uh, I want a health endpoint, basic errors, etc., etc. Okay, so nothing too fancy. Uh, now let's uh take care of the front end prompt to build a React dashboard that displays the benchmarks. Uh, we're going to retrieve the data from the two backend APIs we just discussed. I want to see those numbers in a table. I have uh a simple bar chart for comparison. um you know just something nice simple clean you know it's the first version nothing weird single page etc etc okay um so that's it for our front end and of course we need tests so these are uh our requirements for the test I want pi test I have my three endpoints models benchmarks health and I guess at this point I want simple tests making sure the APIs work making sure the return JSON is correct etc etc. I want to use pi test httpx uh and keep everything nicely organized. Okay. Um so we're ready to run those uh and as you can see we could pick from a long list of models right the uh cloud models the uh Google models and the openi models. So, I'll just stick to uh Opus45, but feel free to go and uh experiment and uh we could use uh agent mode which is what we're going to go for directly and I'll show you later plan mode uh which you know you may already be familiar with here. You know, we have decent uh prompts. We've done the homework and we're ready to run that stuff. Okay, so let's just fire them up. So here they go starting to work on their uh individual task. We can see here uh the front end is obviously going to install a whole bunch of packages and dependencies. Okay, I don't need to worry about that. And I see the back end again is busy creating uh the app. It might actually be done with that already. Um and yeah, the tests are happening as well. Okay, so this is really cool. And again, all of that is happening independently in different branches in different work trees. That's nice. Okay. So, the front end is being built. Looks like the back end is done. Yes. Okay. Well, that's a simple app, but still um we can go and look at the code. Fast API class benchmarks. some bogus data, but that's what we wanted. And the three uh the three APIs and requirements looks fairly reasonable to me. We could ask for a code review. Okay, why not? Let's ask for a code review whilst the other agents are working. Let's see the thinking code here. So, let's see what happens. Okay, so here's the code review. Must fix nothing. Okay, good. should fix uh some Python um syntax here. Uh course. Okay. All right. Well, nothing nothing too bad. Okay. So, we'll just leave it at that. But hey, that's pretty cool. We can have this code review in place. Uh I think the front end is over. Okay, the front end has been created. Okay, a whole bunch of files that I clearly do not want to open. I just want to see that the app works and unit tests. Unit tests are complete. Okay. And yeah, we have simple tests. That's what we wanted. Uh and they seem to pass. The all three agents did what they were supposed to do. Um, apparently everything worked out and uh I guess the isolation is uh is important here and it took you know about two 3 minutes max. Um how much time would it have taken me to do this? Okay, the back end not too long for sure. uh but certainly longer than three four minutes and the front end would have taken me yeah even with an AI assistant I don't know way too long right and the tests nobody likes to write tests right so this is quite fast uh it looks very very productive to me so now that the agents are done um we should merge those branches into uh into master and run the app okay so I just asked uh verdant in the bay workspace to start the The back end has been started and the front end has been started to um let's see that it works because on top of everything uh this is uh of course an AI system right and we could ask Opus here to go and run some tests and make sure things are okay. Okay, back end works. Front end seems to work. Okay, now we can try opening the app. Fingers crossed. Wow. Okay, that's what I wanted. It's very simple, but okay, that's what I wanted. Um table and um and a benchmark. Uh we only have three models here, so let let's add a few more. and this is a nice UI, but maybe we can make it look a little nicer. Uh so let's uh let's try and build something. So let's try to have a slightly sexier UI here. Uh maybe a heat map, maybe some colors. And because we have existing code, you know, let's be careful. Well, I'm going to switch to plan mode here. Let uh the agent think about how it's going to build it. Uh and uh if it's convincing, then we'll go and build it. Okay, let's run this. And while it's doing that, okay, uh we have more models. So, let's go. Yeah, nice. Okay, looks a little busier. Again, all those scores are bogus. Okay. Ah, so we're getting a question here. Should this replace the dashboard or should I create it a separate project? Yeah, let's have both, right? Let's just do both visualizations. Okay. Okay. So, here's the plan. Some new components, some colors, and a toggle. Yeah, let's go build it. Okay, it's done. We can merge. All right, that looks pretty sweet. That's what I wanted. Okay. And well, we could keep iterating for a while. Uh but hey, I've got a way to create UI code now, which is awesome for me. And uh and generally, I think it's a it's a nice tool. Uh, I like it. I like the isolation. I like the fact that we can create uh the different workspaces and have autonomous agents building in their own git environment um not stepping on each other's toes and then when I'm happy with the result, I can just merge the branches and and test the app. So there you go, verdant.ai. um go and uh and download uh the application and uh you have a free trial which uh which is always good and uh yeah curious what you're going to build with it right uh happy to answer questions in the comments section I hope you liked it I certainly had fun uh testing Verdant and my friends until next time keep rocking

Original Description

Can AI coding tools actually handle parallel tasks without breaking everything? I put Verdent to the test. ⭐️⭐️⭐️ More content on Substack at https://julsimon.substack.com ⭐️⭐️⭐️ In this video, I build a full-stack LLM benchmark dashboard — FastAPI backend, pytest tests, and React frontend — using three AI agents running simultaneously in isolated workspaces. No conflicts, no context switching, no waiting. Try Verdent: https://www.verdent.ai/?ots=youtube&id=JulienSimon 🚨 USE THE JUSI01 PROMO CODE TO GET 60% OFF YOUR SUBSCRIPTION 📂 Demo Project - Backend: FastAPI with /models and /benchmarks endpoints - Tests: Pytest suite with async client - Frontend: React + Tailwind + Recharts dashboard #Verdent #VerdentAI #Vibecoding #AIcoding @verdent_ai https://www.youtube.com/@verdent_ai
Watch on YouTube ↗ (saves to browser)
Sign in to unlock AI tutor explanation · ⚡30

This video demonstrates how to use Verdant AI for coding with parallel agents, building a full-stack LLM benchmark dashboard. The demo showcases the capabilities of Verdant AI in handling parallel tasks and creating autonomous agents. By following this tutorial, you can learn how to build complex LLM applications with ease.

Key Takeaways
  1. Create multiple workspaces for frontend, backend, and unit tests
  2. Initialize Git and create a new branch
  3. Create a new workspace for each task
  4. Set up the workspaces in Verdant
  5. Build a FastAPI backend for an LLM benchmark dashboard
  6. Create backend APIs
  7. Install dependencies and packages
  8. Run tests on the app
  9. Merge branches into master
💡 Verdant AI allows for parallel agents to work on different tasks in isolation, making it easier to build complex LLM applications.

Related Reads

Up next
How To Build A Twitter Clone - React Next JS - Appwrite Crash Course
Adrian Twarog
Watch →