Transcription provided by Huntsville AI Transcribe
We do this about every other week.
On the off weeks, one out of every other off week, we do like a paper review. It is more of a in-depth in the weaves adventure is what I would put it.
But with that, tonight we’re talking about Replet.
Let me go. Share this back over So and you’ll just like that I’ll talk to this really quick and then Andrew over after that and I’ll share back after that get to show that cool. Let’s talk to this real quick. I see how I like this Yeah So yeah, so for today, we’re going to talk about replete agent. So to give you a little bit of background on kind of this presentation where it came from, I have a community of interest that I run internally at work. And one of the things we wanted to talk about lately was, we have a lot of people who are not as much, not really software developers, don’t have as much software background, but wanted to understand like how can I go out and build applications, right? Like what tools are out there? What tools are available to me?
to do that and that’s where this presentation kind of came from.
So I’ve augmented it a little bit because I know we’ve talked about agents a lot.
I’m not going to go into a ton on the agent part specifically. It’s going to be a little bit more kind of high level on the tool, kind of how you use it, where it’s beneficial. So for a lot of people in here who are very technical. Think of this more of like, you know, for people who you work with, you don’t have that strong software background. This is a tool that like they may be able to use to help build applications really quickly. That’s some of the feedback that I’ve gotten from people internally as well, is they’re like able to, you know, it’s a pathway from if I want to build these small applications.
So it’s a really good way of doing that.
So we’re going to start with this just kind of the.
kind of today you know if you wanted to go from an idea to a software application um right you know today um if you don’t have that software experience you don’t have like money and time That ends up being a pretty challenging thing because there’s just so many things that you need to have to get over that barrier from, I have some idea, want to build some software application. And so if you have the limitations there, you have to have that software engineering understanding. There’s not a ton of value in building hyper-personalized applications because you spend a lot of time learning, spinning out something to build this small application that maybe only you and a few people are going to use. It’s going to be more difficult to iterate quickly, especially if you don’t know as much. And then it’s going to be difficult to communicate what is technically feasible to non-developers. And that’s one of the big ones I know that we all, I’m sure, have struggled with.
It’s the difference between what is possible and what is not possible for someone who does not understand code.
It’s a very narrow line, it feels like, at times. So recently, there have been a lot of tools that have come out.
We’ll talk about replet, but lovable, and bolt, or two of the other ones. But they’re really geared at trying to help solve these specific problems. So from an AI tool perspective, the software engineering understanding is offloaded to an LLM. You’ll see later all of these tools use clots on it for, but it could be other LLMs as well.
You’re able to really quickly build those hyper-personalized applications.
So instead of having to spend hours or weeks trying to build a small app for just me or just my friends to use. I can use a tool like this to spin it up really fast.
In my opinion, one of the best use cases for tools like this.
We’re able to do very quick rapid iteration.
Again, if the LLM is generating all that code, if it’s doing that software piece for us, we can go through that really quickly.
But it also is going to allow non-developers to better communicate through prototype development.
Andrew’s going to talk to this a little bit later on how he and his team use it. So a little bit on a few kind of High-level things from differences, lovable, bold, and replete. Those are the three most common that are kind of like a AI tool as a service today. You can do similar things with GitHub Co-Pilot with Client.
You can do that kind of in development, but these provide kind of that full interface. They’re much easier to use from an initial user perspective. So lovable, it’s a credit-based system. Currently, it only supports JavaScript and TypeScript for the apps that you can build.
It’s $25 a month from the pro tier.
Bolt is pretty similar, but it’s just a token-based system instead of a credit-based system.
And then Replit, the one we’ll talk about today, it’s also a credit-based system.
It does support JavaScript TypeScript in Python as your back-end language that you can use.
It’s also $25 a month for the per-year.
And for Replit specifically, essentially that’s $25 in monthly credits for API costs, for deployment costs, and so forth. So you’re essentially just kind of like pre-paying for compute there.
A few things that all have in common.
They all use Klotsonic 4.
They all have quite a few different integrations, so Figma, Stripe, Postgres, different flavors of Postgres, generally SuperBase, GitHub, directed integrations to LLMs like OpenAI, to Gemini, to others as well, so you can build those into your tools.
There’s a lot of cross-contamination as well, so Bolt will allow you to import from Lovable, and then Repo will allow you to pull in from Bolt and Lovable, so there’s also easy ways to move back and forth, but that can also give you insights to where the tools are at today.
So for kind of replant agent specifically, it’s leveraging clots on it for with the idea really is to convert conversational prompts into working software. So I’m going to go ahead and I should have pulled this up on my computer first, but I’ll show you kind of a high level here and then we’ll jump into it. If I jump in and I want, it’s going to make me sign up. So I will show this on my computer. after I share after the expert. Sorry about that. But basically, the big benefits from a replica perspective and one of the things we were just talking about is a lot of times for building software applications, there’s a lot of stuff that you have to do to actually get to the coding part. That’s, you know, setting up your Python environment, you know, how to do, you know, get things compiled. All of those different things, replica is going to handle all of that for you. It has kind of all that infrastructure and deployment ready to go. So you can build an app and immediately deploy to AWS or I think they use GCP.
but you basically have that kind of right out of the box. You know, web apps that we built with natural language, we’ll see that here in just a second.
You can include things like authorization, databases, object stores, secrets, so you can really make this into kind of a full application.
And then a lot of like third-party integrations as well.
So what I’m going to do from there, so kind of Nicely, Andrew offered this, which is super helpful. So what we’re going to do, I’m going to let Andrew go over and talk. He and his team have used Replet for quite a while. I’m going to talk through kind of show an example of what he’s built and kind of how his team uses it.
Then after he finishes up, then I’m going to come back up and we’ll actually build a full app all the way through with Replet agent.
So with that, turn over to you, Andrew. Yeah, let me thank you, the host. And then you can share. Anyway, you said no, I have a couple more. Yeah. So the first question is, since it’s using cloud sign up for, do you have a separate account for cloud sign up for, or is it offering that underneath the left?
It’s all offering underneath that. And so the same thing for the GCP, that’s underneath it as well. For GCP, and I’ll talk to this a little bit later, you do pay, like part of your monthly credit would go to that deployment cost. And so you would be paying for the GCP part, but it’s paid through replete, it’s not paid through GCP directly. But I’ll talk to that a little bit later. I didn’t think about having to pull up my, pull up the replete thing before, but I’ll show that one after it presents and we’ll walk through it and if you want all your code. Yes, I assume you have to explain it for real. There’s direct GitHub integration and I’ll walk through that here in just a little while.
making sure it wasn’t black boxed or something.
It’s annoying.
You can never get it after you’ve created it. We’ve written it for work. We own it now. We’ve created it for the A&M company. You’re only renting it? Renting it. You have a license to use it as long as you’ve got a subscription? It’s a microphone. Like I said, I’ve seen worse. All right, so you can actually see this is my company’s team channel, so you can steal all our ideas, but So I’m the chief innovation officer for a radiology company, so I am not a developer I don’t know how to code.
I know how to create code.
So like people are like, oh, did you go that way?
Yeah, I created that I can read it I can mostly understand it and if I can’t I got hop into an LLM and I’m like hey explain this to me And it works.
But a large part of my job is trying to take idea to reality or idea to that’s a terrible idea.
Let’s not do that. And so replet has really been a huge key for our business.
And I got into it in agent version one.
So it’s now agent version two, which is a billion times better than agent version one came out September of last year.
So I got on right away. And, you know, this is vibe coding to the max, right? If you want to go there.
So I got on it when it was signed at 3.5. It was the first version of Agent. It was really exciting, but like the pit of despair immediately because everything would break. And as a person like me, I spent 20 minutes getting something cool and I spent two hours trying to figure out how to fix the errors, right?
Now it’s a lot better than that.
So we’ve actually created a team plan.
I have six people that are on it.
So I have a UI UX designer this time.
I’ve got two developers that are on it.
I have a sales person who’s interested in technology that’s on it. And you can see here’s kind of a list of things that people have been working on.
So I can see what it’s called the last time that was in there and I can go look at any of the stuff they’ve been working on.
So it’s really cool. I have this idea to check it out.
Okay, I can hop in, I can look at it, give some feedback.
I could even go and start prompting the agent on their account, which is really cool.
So I’m gonna show This is sort of the view of it you guys will see this when Jack builds something but basically you got file tree on the left You got some pains in the middle and then you got more pains over here. So this is my preview that I have open of my app This is a Portal for a referring physician. So that wants to send us business.
So this is my prototype that we continue to iterate on that I use as a way of taking people’s ideas trying to build them I take them back to the person and say is this what you’re looking for right because nobody has a clue how to give full requirements right we know that you know that okay so this allows it um so what we’ve done is we’ve changed our stlc to be Basically, a developer doesn’t see it until the prototype has been signed off by the business stakeholder, and like me or a partner of mine, who’s basically a gatekeeper to the developer. So we’re like, we don’t want a developer involved until we’ve gone through to make sure it’s what you want. So for me, a picture is worth a thousand words, and I think a prototype is worth like a thousand pictures. So it really forces the business to figure out how to communicate requirements because you know they don’t know how to and so this allows us to iteratively work through the requirements.
So a couple of use cases that I wanted to share were So first thing here is, okay, here’s my dashboard and somebody said, hey, I want to see details of a patient. These are fake patients.
We’re not violating it.
So I’ve got two versions.
So I’m like, okay, hey, I’ve got this version. Let’s take a look at it.
Is this along the lines of what you were thinking? Hey, I’ve got some statuses.
I got a tracker.
I’ve got details.
I’ve got all this stuff.
Like, oh, that looks cool.
And then I go back.
So that’s version one.
And then here’s version two.
Okay, same information in a different way.
So historically you’d use Figma or something like that, right?
But I mean, it’s pixel perfect.
You got to have a designer.
Figma is hard to use.
Right?
So I’m not conveying the end product. I’m saying, what do you like about option one? What do you like about option two? What do you, what did we miss overall?
Okay.
And then I’ll go back and I’ll create option three, right? And I can just, I can work my way through the all of that. But it’s more than just a picture, right?
So I’ve got I want to view this document.
Hey, it takes me to a document viewer, which is not actually the thing because we don’t have that hooked up.
I want to download the document. Hey, download it. I want to upload a document. Hey, here’s what an upload screen can look like.
Drop down menu, pull in things.
You see my thing opened up wrong, right? Because React sucks at figuring out how to do portals with ReploadAgent, right? It doesn’t matter. It’s like, OK, I got the idea. That’s a unique system. We can all this stuff to actually keep learning.
Business is like, oh my gosh, I can actually understand that.
Hey, can we try this?
Hey, can we try that?
Oh, sure.
What do you want to try?
And you just hop back to here, and I won’t do it live, but I’ve got my agent open. What do you want to try? And we can just try it together. They can learn and see how it goes. So I think that’s pretty exciting. Another way that I think that if somebody wants to help me on how to hide, like my share at the top, that’s okay. It’s fine. All right. So people are really scared about AI.
So another thing that I use for our business is, oh my gosh, every C-suite person is like, I just talked to this company.
They can do the greatest thing. And you’re like, okay, tell me about what can they do?
they can use AI analysis to analyze a report.
Really? Tell me more.
I’m like, and how much is that costing?
Oh, it’s, you know, it’s like 150 grand a year. Okay.
So just to confirm, you’re willing to spend $150,000 a year to do this? Absolutely. Okay.
Give me 20 minutes. I think this took me probably two days of absent-minded kind of working through, right? So I’ve got, okay, here, I’m gonna build this thing. I’m gonna build this analysis that looks at radiology report examples.
So I’ve got this thyroid ultrasound. I’ve got, I put in some reference documents that outline things to look for. I’ve got a fake medical report.
I can add other things because maybe they’re like, hey, did you think about this?
Well, no, but I can put it in there, right? And then analyze, right?
And I hit the analyze button. So I’ve got this hooked up to GBT40 Mini and Gemini 2.5 Flash, I believe.
I come down here.
Okay, here’s what I got back from the LLM.
So I’ve got Gemini said this, OpenAI40 Mini said this, they agreed.
Here’s what’s been recommended. Here’s how I utilize the documents that were attached.
You show this and it’s like their heads explode.
I had no idea. I still just use chat DPD to write my emails. I didn’t know AI could do this. So something like this is valuable to show the business what’s possible.
But also for me, it’s great for the developers. Because what I get to do would be like, guys, look what we can do. And I don’t even know how to code. I know you can do it because you know how to code.
And I just want to talk to an agent. That’s funny. I did a similar thing.
We got rid of Salesforce and we built our own CRM because, I don’t know, we’re just arrogant or what.
But I had to build a map.
What do you call it?
Polygon thing?
Hey, I want to select the section of a map and so you draw like a polygon thing and get it in there and it works, right?
So I showed to a developer and he’s like, if you came to me and said, hey, we need to create a map with this feature, I would have been like, oh man, I don’t know if we can do that.
He goes, but the fact that you just showed me, it’s like, now I can’t give you that excuse. I guess you just showed how it can be done, right? So it kind of got through the BS meter too of the development team. I go, I don’t know if we can do that, right?
And I’m like, well, Clearly you can.
Yeah, so I think that hit all the main points that I had. But other things that I’ve done on other apps that actually have that page is I will create pages that explain the full app. I’ll create pages that have all the APIs and how they work. I’ll create pages that outline the database diagram that are in there. So when I go meet with a developer, Here’s the APIs that I used.
Here’s the way I structured the database.
Here’s the way I made the app function.
And then they can just log into this and look at all the code while they’re developing the actual application.
The biggest danger, though, is what they will do is they will pixel perfect code what I created.
And I’m way not detail-oriented enough to have the time to go back and make sure it looks really good.
So they’ll show me something and I’m like, Ah, you created exactly what I needed. I really needed you to like take this like a little better than what I have done, right? So it’s an easy way out. It is a requirement.
Right? So I think the last thing I’ll say on the SDLC with this is we have a UI UX designer, young lady.
She’s absolutely phenomenal.
And she’s a figma.
She’s fantastic at figma.
But I have forced her to say, I don’t want you to go into figma. until it’s the prototype that’s proven to be insufficient for what we’re trying to deliver. Because is this perfect for a doctor to get into?
Probably not.
If this was an internal app for your development team, it’s so good enough. It’s fast, it works, it’s efficient. Could it be pretty or sure?
But you don’t really care because you’re going for a function. So I really had to challenge her to say, don’t over-optimize the design until the business has come back to say, this has to be better. If it’s good enough, it’s good enough. Anyways, any questions for me before I end up? The thing I’ve run into before with things like this, prototype tools, whatnot, are the unrealistic expectations. When you show this to somebody, they even think it’s done. I think it’s ready. Or they think, well, you just did it in two hours or two minutes or whatever. Why do you still need I’m going to have a team go write something that’s like actual, you know, you’re right into that. Oh, yeah. Yeah.
So then I get into like, well, there’s security and there’s air handling and there’s all these things that nobody thinks about.
It’s actually really important and logging and telemetry and blah, blah, blah. Right. And so basically I’m like, okay, yeah, I did this in two days, but this for our development team is four weeks, six weeks, whatever that is. One last thing I’ll say is that Getting to this point is really hard in the beginning. And so what we’ve done is we’ve created an actual template that everyone can reuse. So it’s already got all of the setup in there. It’s already got components built.
It’s got color schemes.
It’s got everything in there.
And so they don’t have to like work through that. It’ll just kind of reuse what’s already been set up for them. So that was a big project, but it’s made them all way faster in their ability. Is there a way to hook a design system up to it?
Like if I’ve used Figma, if I’ve used some other tools, and here’s my color palette, here’s the way I want these fonts to be, and these orders, and here’s my, you know, I mean, there is, I don’t know the actual answer to that.
Style sheets.
Style sheets, I can’t remember. Yes, I just don’t know. Okay.
You can bring in, my understanding, you can bring in Figma designs down to, or into Replet.
You also see, like, once you’re in Replet, you can go in the agent and click on specific elements within, like, HTMLs, within, like, the div or within subspecific piece, and be like, change this to this hex color, change this to this kind of style. So you can do things like that where you can go in.
I’m not sure from like a, if you just give it, Hey, here’s the design I always want you to use.
Um, I know that the replet.md kind of functions the same way as like a cursor rules and in this similar way.
So I think it would get pretty close to that, but I don’t know how guaranteed you got to be on that.
Always working. This is brand new in the last week, I think. And so before this day, I would just go nuts and it would change routers on you. So hopefully this is what grounds it, and this is actually pretty long. And this updates upon every checkpoint, which represents checkpoints.
It’ll come back and update this.
Here’s where the app is at.
Here’s where it’s changed, et cetera.
So front end, back end, data storage, components, routes, data flow, auth, dependencies, point of strategy.
And then here’s all the recent changes that, wow.
Right.
A few.
Just a few.
So anyways, that’s what I was thinking.
If I were going to use this to go build out a prototype focused on, let’s say a company that I don’t currently work with, I’m trying to think of. I don’t currently do any work directly with public. But if I was going to go build something for Boeing, I would first off like take an LLM and have it scrape all of their public stuff, then go ahead and back out their colors, their fonts, their whatever or whatever to put into this.
So that when I show it to them, it would look like something that already fits. Yeah. You know, and if that was something that would, you know, easy to tie in that.
You can attach files.
I mean.
My assumption is just drag your file of your style sheet in here and say update my style sheet.
You probably actually pointed it there.
You guys are beyond my skill set. I can just tell the agent what to do and yell at it. Since you actually use any of the code in rights, or is it just for reference?
Do people just look at it or do they actually pull the code in and use it?
Some, yeah. But I’m like, don’t use it unless you understand it, because I’m not looking at it, right? I mean, Jesus, take the wheel. That’s not true.
I understand just enough, but, but, you know, I mean, like I said earlier, I created all of this code, right? Like assets, servers, databases, the seeds.
I think it’s time to test. It likes to like test. I’m interested in your role and maybe what you see is a trend in companies where it sounds like you’re not the main tech guy there, but the main tech folks are not doing what you’re doing.
Our CIO is more worried about like security and all that crap. And so he’s let me take the reins on all the technology. So more like a chief innovation officer type role. That’s my role. But an interdisciplinary team. So someone is looking at medical ethics maybe, if it’s rheology, you’re pulling the team together.
Yeah, my background is really weird because I’ve been in the clinical side, I’ve been in the business side, I’ve been in the operation side. I can bridge the gap a lot of times across those.
But yeah, I mean, we’re smart about when to reach across the aisle for help on various different things, like the AI transcript of a radiology work.
Like that is super dangerous territory, right? And so we’re not doing anything with that other than, hey, Dr. So-and-so, there might be an important finding here for you to look at.
We’re not telling the patient, you know, we’re not.
We’re not saying this is definitely, we’re just saying you might want to look at this, right? So draw on that boundary.
Are you an attorney?
Chance.
I happen to be in that question.
Technology law, don’t litigate. I love you and I don’t. I feel like it’s mutual. Who’s this bro cowboy out here? I think it was Andrew Tuggle the first time we were in a, it was the first time an attorney had ever come to our group.
And we’re talking about something.
Yeah. Oh, you can’t use that.
You can’t use that. You can’t use that. What? It’s not the attorney’s role to tell you what you can use. Oh, I know. No, it’s not.
There were certain protected statistics things that we were looking at.
Anyway, it was it was an interesting.
He’s an export attorney. I don’t want to sell stuff overseas. He’s your guy. Oh, yeah.
So that was screen sharing, but it’s obviously not. It’s a reclaim.
Oh, reclaim the host chat. Well, let me stop sharing. Oh, there you are.
Zoom is hard.
We need an agent for Zoom.
OK, so what I want to do, and I’ll kind of walk through a bunch of kind of replete features as we’re doing this, but just to kind of give a background on what we’re going to build.
I’m glad Andrew was able to show because, obviously, given 30 to 45 minutes, there’s only so much you can build from a demo application, so it’s really cool to see.
Here’s really where you can go.
Here’s how you can use it. What we’re going to do for this is we’re going to do a daily workout planer. The workflow that I recommend, and Andrew, feel free to correct me here if you do something slightly differently, but I would say you’d probably be good to take your initial thought. then dump that into like a Gemini or a chat QPT to generate some software design documents. It gives you lots of things, and then you can start iterating through that.
So you say, hey, here are the colors I want.
Here’s how I want this set up.
So I have that.
I went through on Gemini 2.5, and here’s just an outline and design for a daily workout planner.
So it goes through, it does a lot.
The only restriction I gave it is I wanted it to use Python with Flask. The replant supports just because I know Python well. Being able to do it gave a lot of stuff. I’m just going to hit take this as it gave me. You can go through and use the Canvas feature and update and modify this as needed. But I’m just going to just drop this directly into Replet. So here, let me see. I’m going to make sure we’re going to select a web app with Python.
I’ve got this.
minimize this on the side. So a couple of things from the replet side, you have your apps on the side, the deployments, which we’ll talk about here in a little bit, your usage. So that’s kind of that monthly credit piece that we talked about. And then kind of the team’s perspective.
But once you do log in, kind of the main interface is this initial chat window.
These are all kind of potential apps you can build.
And then they give you a few different Options for web apps, if you’re going to use the agent, it does have to be JavaScript, TypeScript, or Python, kind of one of these view.
The auto generally will default to a JavaScript or TypeScript, more often than not TypeScript application.
But you can kind of go through that.
So I’m going to start the check here, paste it in that software design document. So what it’s going to do is it’s going to start with an implementation plan. And so here you go. I want to understand you want to build a daily workout planer. And so let me create a plan for this last space project.
One thing that’s nice that you’ll see, so it’s going to call this workout planer.
It’s actually going to give you an initial version along with like here are some additional features you could work on later on.
Here, in this initial version, we have, you know, they can select workout equipment, they can duration, display exercise needs.
Then it will give me some ideas.
Here are some things that you might want to add on later, but I’m not going to add it as part of the first deployment for this.
You can always, with other things, you could keep chatting and modify this, but I’m just going to go ahead and approve the plan and start.
While this is generating, this is going to generate through the agent on the side.
You’ll see some things pop up as we’re going through.
While that is running, I’m going to give you a quick overview of Replet and see the interface that most of you are using.
The preview on the side, this will load once the app is kind of at a point where it’s developed enough that it has something to show.
But on the side, there’s a few different options you have.
So you have a full console that you can use.
You can do kind of traditional console commands interact with the app in that way.
You have deployments.
So if I click here, you can set up various deployments, and I’ll show it in a little bit.
We can look through kind of from some pricing and stuff.
You can see kind of what I’ve used so far for some of these things.
You can do different types.
You can reserve an autoscale, a static page, or like a schedule.
So if you wanted someone time-based, like a cron job, like an advanced cron job through Replet, you can do that.
You can set up there.
And then there’s a bunch of other kind of additional things as well.
So you can add authentication to your app. If you do that, the preview part ends up being kind of weird. You have to open it in another tab, but in able to have that, you’re able to… kind of able to use that, can connect to a database or object store. If you want to, you can bring those in, so for persistent storage across.
And then in the workspace features, a few things, so secrets.
So if you wanted to connect to third-party applications that require secrets, so I have my open AI key saved as a secret so that I can use that, and I’ll show that a little bit later as we’re going through the demo. Also, it has direct integration.
So here you can see it started to add some of the files here.
And then what I can do, and let me, so I have those everywhere that are pulling up, I can go into here, I have my GitHub connected.
And so I can add in a work or a name, so workout planner, just be AI. Make the public create that repository on GitHub directly from Replet. Jump back in, it’s gonna ask me to confirm the passing GitHub credentials. And so now what I can do is once this initially runs, it goes through the first time, I’ll be able to stage and commit all the changes.
So now that GitHub repository lives right on my GitHub account. So I can always pull this code down locally, run it there.
Any changes that I make locally and push domain will be shown in Replit as well.
So I think David, to your question earlier, it’s not stored and not stuck behind Replit.
It is something that you can pull down and use.
So here, so that took, I think it took, or I guess it’s just finishing up now, but it would have taken just a few minutes for it to actually get to that initial. So three minutes of work to get to kind of this initial daily workout planer. So you can see on the side here, I have agent usage.
So this is 42 cents.
So that is my actual costs for kind of that action, which I believe my understanding that’s gonna be a combination of, or it’s gonna be kind of the costs on it for API costs. Plus, it seems to be a little bit of a markup on Replit, which makes sense. They’re trying to make money as well. But it will give you how many things it worked on, the number of actions it took, how much code was changed, and the agent usage.
So I can go over here and actually open the files.
So if I jump in to my app.py file, which is kind of the standard from a flask deployment, you can see it has a bunch of exercises that it’s added in.
So let me.
don’t have a typo to destroy the apps. It goes through and it’s going through and it’s got to generate a workout plan. It’s generated all this code for me and we can see that on the side over here. My main.py is just going to be that for a traditional flask just running that.
I’ve got my HTML created and you can see that on the side as well.
It’s also created some static assets as well from a style sheet and then from a JavaScript as well. If we jump into the preview directly, You can go through and say, you will just leave parameters here the same, but let’s say 30 minutes of body weight only and generating there.
I should take it, hopefully, be fairly quick.
But it’s going to go through based on what we’ve just provided and actually generate a workout for us. And we’ll see. Hopefully, it does not crash.
It could be funny. Let’s see.
One for it to go.
Yeah. It’s because I accidentally typed it up here. The one nice thing is if it is broken, Replicant is super good with like if there is an error that pops up, directly just putting that back into the agent and it will fix it for me.
Yeah, don’t worry.
So, sister, I will. I should meet you here.
Five coding 101.
It’s still not working.
It’s still not working. Which is funny because you won’t get into that a lot. The usage-based pricing is actually brand new. So Replet used to have agent in assistant mode, and agent was sign up for 535 or 37. It was 25 cents every prompt.
So if you’re like, James, let’s call her 25 cents. Move this. Thank you. 25 cents. The assistant was five cents per, but it was Not as intelligent. So it would also kind of be right. So it’s like, do I send five cents four times for 20 cents? 25 cents. But now they’ve moved to a usage-based pricing where it’s like, this is how much it just costs with a little bit of markup. So the transparency I think is a lot better on pricing. And so whether you agree or disagree kind of doesn’t matter. It’s just, this is what they’re going to charge you. Okay, so it looks like it was saying that there was an infinite loop when it was, if it ran out of workouts to provide, because we just provided body weight. Let’s see, so let’s try this again.
All right, there we go.
And so now it generated immediately for us, which is kind of what I would expect.
So here, I did not give it any sort of design recommendations, but it seems to be using a heart for more cardio-heavy things, and then a weight symbol for other ones as well. But it’s going to give me a recommendation on how long it gives me the sets, number of reps, and rest in between.
So I can go through, can generate any workout here, do that, can also print.
I’m curious if this actually does seem like it’s working.
It’s pretty cool. But one of the cool things, and Andrew kind of talked to this a little bit earlier, this really nice is that, so let’s say that I’ve now created this daily workout planner, but what if I wanted to expand this to a weekly workout planner? If you’ve gotten some feedback from users and they want to see that as another option, what I’m going to do is create, I’m sorry, here, create a new chat with the agent, and I’m going to say update this. this application to be a weekly workout planner, use OpenAI and GPT-40 to generate the weekly workout planner, not allow users to specify what goal they have for their weekly workout planner.
So here we have this initial application built But now we have something that’s changed. We want to test out some new feature.
It’s a replica that is very good at this.
So we’ll see after this goes through and kind of runs through, we will have kind of that weekly workout planar.
And you’re not fully changing from kind of what we have, but it should keep all of the same style that we have. We did not specify that, but you had specified that. So we’ll keep that going through. But essentially a very easy way to kind of rapidly prototype and update and check out that new feature.
If you don’t specify hdbt40, does it default to something?
I believe it actually defaults to 40.
But I’ve always just kind of recommended, or I’ve always just, when I’ve gone through this, I’ve done the 40.
But you can see here, so I have the secret save, I have that open API key saved in my account.
So I can do that, and I can just fill it to continue and leverage that.
So that way, I don’t have to go in and… provide that secret well I did to my account level but it’s still hidden if someone else was to go into the app which is cool. So a couple things while this is generating going to touch on so here you can see every time we make an action with the agent it’s actually going to make that get commit for us as if I go over here and open my GitHub. this one about the zoom window is killing me right now. All right, there you go. This was workout cleaner. So if I jump in here and I did not push it, sorry. I’m gonna push that to GitHub now for refresh. I’ll have all of the code here.
And so what I could do from here is I could go in, if you wanted to take, you know, go pull this into VS code or into cursor and then do additional stuff there.
You want it to make more fine tune tweets.
You can pull from here and anything that you push back to main, then we’ll show up and replete as well.
So for those who.
This is where I think from a more technical perspective, this is how I would probably end up using Replit is building that really quick prototype.
And then I have very specific things that I want to do.
So let me pull this down. Let me go through that with either GitHub Copilot or with Cursor or Client to be a little bit more fine-tuned and then push it back up. And I could see that. And so you have that option as well of pulling it down, doing it more. more standard kind of from like a technical workflow kind of way rather than leaving it all in Replet, which also is going to bring some additional costs with that.
But to me, that’s kind of the nice thing about a tool like this is that you can’t have kind of on both sides.
You can have that for the non-technical developer.
They can stay completely in Replet and use that.
It looks like we have destroyed the CSS at some point. It’s still working.
Okay, there we go. We’re still coming.
But for the more technical developer, you can get this upspent really quickly. Replet does host from an infrastructure and development perspective. So here, once I’ve created this app, I can always go back into this address and use this.
I don’t have to pay to deploy this.
This can be a completely free app that I use and host just personally.
But I can also pay, and I’ll touch on that here in just a second on what that deployment would look like.
But here we’ve got this weekly plan set up.
So let’s say I wanted to target weight loss, intermediate.
I’m going to do four days a week, and we’ll do body weight, kettlebell, and dumbbells.
And we’ll generate the weekly plan and see if it’s still going. Oh yeah, you’re right. My bad.
I’m jumping ahead. I always forget because the preview generally shows up so much earlier than the agent actually finishing. And so I forget you have to wait, so. Well, wait on that a second, but I guess while we’re writing on that, is there any questions on two of the chat, or one on the chat for Myron asking, can you hook this up to a client system to replicate a real world demo?
To a client?
That’s sure.
Yeah, I mean, you could, you can import, like, so if you had all of the code in GitHub, you could, you can import projects into Replet.
I’ve not done that though, and so I’m not sure how well that would work directly. Yeah, I don’t I don’t know generally it’s gonna be the other way going. It’s like from a replica perspective you’re building this prototype It’s like hey, here’s what we would like to show you build out. I’m not sure about copy other way might it might be It might explain some of itself when you get through the deployment Yeah, and how you deploy it how you share this with client or how you would you know something like that? Yeah, yeah Okay, so it looks like it is done now. So it’s turned into a weekly planner So let’s jump through, oops, intermediate, four days a week, body weight, kettlebells, and dumbbells. So we have AIs creating your personalized weekly workout plan. Should be sending it off to a band and then coming back with that generated plan. So give it just a second. One of the fun things that we did. Oh, here we go.
So for Monday, we’ve got upper body strength.
So we’ve got bench press, dumbbell row, overhead press, push ups, give you a warm up and cool down.
It’s telling me I need to Wednesdays or rest days since I’m doing 40s a week. So this will be on Monday, Tuesday, Thursdays, Fridays. But it goes through and it’s going to give you the specific pieces.
Here in blue, it’s giving you kind of a tip for how to do this. What you can do, actually, is prompt this for each exercise you generate.
Give me instructions on how to do it properly.
So I’ve gone through this a few times.
Sometimes it will do that automatically.
But again, this is the power of a tool like this where you can go through and very quickly iterate.
And hey, I want to get full instructions on each piece.
But it will go through and give you that.
Maybe the workout plan, we could go back and regenerate. We could even do things like, you know, expanding the available equipment and then asking it to expand, you know, it’s, you know, knowledge of exercises that I can use based on that as well. So you can go through very fast. I’ve found it to be very good.
Again, I’ve mainly just built simple apps. Andrew’s shown one that’s much more complex, but I’ve found it to be very good for, for building out very quick prototypes like this.
Yeah.
So the other thing you can do is like, Oh, hey, I tried opening this on my phone because you can do this on your phone on the app, right? And so like this, you would open up on your phone. It would look horrible, right? You just prompt it and you’re like, this looks terrible on my phone. Could you mobile optimize this? And it’ll go and it does a pretty good job just in the first shot to be mobile optimized. But on the contrary, if I do a lot of my work on my phone and then I go back to desktop and I open it up like, what the heck? You really have to be intentional about both desktop and mobile if you need to offer both of those. One thing you can do on the desktop version is the screen size option.
You can specify, like, hey, show me what this would look like on an iPhone 16 Pro.
And I think it will be clever to make a response. Yeah, a response. You might want to be slightly more specific. Yeah, like mobile response.
Design response between desktop and mobile. Oh, yeah. But you would probably think about that first, whereas I would think about that. When you see it. All the jury say, make it pretty high.
That’s why I like it.
That’s why I like planning stages asking, what have I not thought of that I should have? Yeah. But I think that’s a big thing too, with like replica tools like this is like. getting that like first like that software design document, getting that like first thing done and like being pretty close to what you want is really important because that just like sets the foundation for everything that comes after it.
If that is like super loose, then it’s going to be very difficult to kind of keep that going forward.
So here I’d asked it for instructions.
It looks like this is terrible from a readability perspective, but it does.
Here you’ll see the how to perform and it’ll tell you, you know, fly on your back on a bench. go through and do that. Here’s some tips for that. But again, for me, as someone who’s not super great at code, I do it as part of my job, but I’m not a software developer by trade.
This would have taken me probably weeks to do to get to even to this point. So that’s the point what Adrian kind of talked on is communicating, hey, I want these kinds of things or these specific things. You can do that just so much faster with this. And for people who don’t have that software background, this is a way for them to kind of go from that like idea to application, all right? And there’s still the security piece, there’s the logging, there’s all of the stuff you need to like productize the app, but it gets you to a point of like, hey, I can do this really quick. And if this was something that like only I’m using and it’s like hyper-personalized, sorry, I can just set that out and leave that on replete, have that, you know, make that a bookmark and then I can just use that personally, you know, as much as I want. So the last thing I was going to touch on is going back to, let me jump actually to the first page so that she can explain it. From a usage perspective, so I started before today or before the session, I think at $12.51. So I think it’s updated, but I think all in all, when I was 42 cents for the early run, it looks like it’s not updated here, but we used about $1.50 for the agent.
Again, so that $25 that I mentioned for Relic Core, that $25 per month, that you get in monthly credits.
And then so the agent usage, you pay usage face there. Daniel mentioned that you have the assistant that’s 5 cents per edit request. But then from your deployment, you can specify from a like a GCP perspective.
If you want this to be a true deployment and not just something that sits as an app inside of Reploit, like it’s a website you can hit for other people to hit, and then you can go through and specify all of these various parameters on your autoscale deployment size, on the number of CPUs, how big of a database you want to use, and then all of those get charged at that level. So the pricing there is a little bit, it’s not super intuitive unless you’re already kind of familiar on the cloud side.
which is annoying, but the one benefit is that, for example, for this workout planner application, I don’t actually have to deploy it to GCP and use it.
I can always go in and use this, but if I wanted other people to use it, then I would have to go through and deploy it, unless I have a team’s plan or something like that.
Will it recommend or pick those values if you just don’t know what to pick for the deployment?
Yes, it will.
If I go through and set up my deployment, it’ll recommend.
Recommend here. I’m not going to go through and do that.
You can, you can specify number of machines. It’ll tell you, you know, how much to compute usage and then go through and do that as well.
So you can, you can specify all those things.
It’ll give you recommendations.
But yeah. And when you do that, I’ll ask you what you want your website to be. So it’ll be like, Oh, J dash Francis dash workout dash planner at replica app. Something like that. So whatever.
And then now you have a published website that you can share.
So if you’re on the teams account and you’re doing this to give you a way to send a link to like an anonymous person that’s not on your team to log in and check it out or anything, or is it?
So you can do that.
So you can send the link, but you basically have to have this active and open for it to be reached. And so as soon as you close this down, know that link.
So yeah, you can, but that’s where like I’ll just deploy it.
You know, the deployments are cheap in that.
I’ll send it to them. What do you think? And then I’ll make changes, and I’ll just push a good point up. I’ve got the next Hudson Alpha Tech challenge in my head. Last time we did it pure AI, just using chat GBT, we actually dropped the challenge in and did everything it told us to do all the way through the thing. Yeah. I don’t even have to do that. Hey, build this. It says OK. I don’t know. And actually, I’ll try putting this in the In the chat, I’ll see if other people can access this. I’ve not actually tried this, but I think that when this is live, I believe that other people would be able to access that link through the dev site. So you can do that as well. But again, I think that link will change.
If I close the app and then reopen, it would change. No, the link stays the same, but it’s only active when you have it.
Okay. Okay.
Cool.
Yeah. I’m generating a weekly plan. I didn’t make this one dirty. So I don’t think there’s a button of your number to see if you can find his opening I key. Well, one thing that was funny, when I did this for like internally for my company, I asked people, I was like, Hey, what do you want to add to this?
And one guy was like, I want you to monetize the crap out of this.
And so we built this, actually, I’ll pull it up really quick because I thought it was funny.
I’ll leave. And you can see I’ve done this one a couple times.
I’ll leave this this one.
I’m sure if this doesn’t break your subscription. But for this one, so it like gave me, it went through and it added like all of these premium features. It had like an upgrade plan. Oh, it was bad. So you go through, I asked if it felt like initial strike integration because I didn’t have a strike key and it didn’t do that, but. You know, hey, you can cancel your subscription at any time.
They give you all of this great stuff on trying to monetize this as much as possible.
So there’s a lot of cool stuff that you can do with it. And it really ends up just becoming limited based on what you can imagine on computers from building out as a prototype.
It’s not an advertising spot for certain national gems. I’m sure that would have been the next thing they would have had is start integrating in ad space as much as possible. So it’s pop-ups where you can’t actually get to the thing you’re trying to do.
Yeah, exactly. The workout is clicking 30 pop-ups in 30 seconds. But yeah, so that’s pretty much all I had, but I’ll open up for any questions or thoughts anybody has for grandpa. So I’m guessing the usage, you know, you load in in-depth instructions. That was about 40 cents you had knocking all out. I’m guessing if you start from scratch, even though we wouldn’t do that anymore.
or a few cents each step. Yeah. And actually, yeah, it’s probably about the same, honestly, because it’s going to generate a similar plan. And then depending on your changes, it might be two cents, 12 cents, or, you know, I think that’s where the initial cost is just getting kept. Yeah. The initial cost is maybe a buck at the most. Yeah. So for the, for like adding the instructions, it was 17 cents.
And then for.
adding in the full weekly planer, that was 74 cents.
And that’s because it did do a lot more. So it did 33 actions. And that’s going to be, your number of actions is going to, it’s going to, what if we end up correlating most to kind of the cost that you’re spending there? Do you ever run into where it’s gotten stuck in a loop and not like 300 actions for no reason? I have not now.
I said 300 actions in a row that didn’t result in much.
I mean, there’s a lot of times where it won’t do what you want it to do. And then you have to go back and I’ve got to communicate this correctly. So my rule of thumb on this is if you get down a track and you’re getting in a bad place, your best option is to go back, roll back up. and start over and figure out what did you prompt and how am I going to change that prompt there to get on a better path because you can get in a really bad place. Trying to work your way out of that is really, really hard as opposed to just going back and starting at the checkpoint now so you can roll back. Yeah, so if I click roll back here it’ll take me back to the checkpoint and so here if I go back it’ll revert and it just uses get for that directly. But now if I go through and I did the, if I went through and did the full workout plan, it would not have the instructions anymore.
So it’s going to be on an exhibition with folks for going back forward again.
How do you, oh, you can’t do that. But it’ll also roll back your database too. So if you’re hooked up to the replica database, it’ll roll back your database to the same point if you want it to. That’s nice because usually it’ll crash.
That’s it. It was taught from a designer standpoint. What would you do with a statement?
I mean, you probably spent a lot of your life on the, like, design side, right?
Knowing that you could go from that into something that you could actually… You know what I mean?
I don’t think… Make you happy or sad?
A little bit, but… First things, show your responsibility. Make sure no matter what, if you’re wrong, this, this, that, no matter what, that… then go ahead and make sure about the actual database.
How it looks, how I feel, how the fonts, make sure about the numbers.
Set up everything so it’d be easily updated as a main style sheet, but within the style sheet, modify it to where you have variables for the color.
So just go in and I don’t like that fucking color. I’ll change it to this color and then change this to everything automatically. Wow. Yeah, and the product requirement, Dr. Robert, whatever Jack was talking about, like, you need to be mobile-responsive, and you try to get that in right away, and it’ll be in that replet.md file, and hopefully it’ll stick to that the whole way down. You probably throw a lot of accessibility stuff in here, too. Oh, I’ll be able to. There’s a whole other, you’re trying to add that on later? You can do internationalization, accessibility, testing. We can have it build tests as you go. That can be in your replete empties every time you do some math tests. But you’d have to specify. I mean, if you’re using a library, so hopefully it’s got that.
So, even consistent frustrations for either of you or the kids currently at, it’s like, you’re just like, just don’t try to get it to do this right now.
Insistent frustrations. The bigger your app gets, the more it struggles, and the more it starts doing weird things.
So it’s like that context.
It’s so huge. And then also in your chats, every time you’re going to change a con, like your contacts, start a new chat. Like just a fresh start is a couple of the really key things. If you guys try to tie two tools together in any way, you’ve made your effort by making this interactable with us. One thing that I did want to share really quick, if I go through using the element selector here, if I go through and click here, I can say things like change this to just say body weight.
And I have found this to work really well. But this is specifically targeting this label within HTML. And so you can go through and do that.
And kind of to your point earlier about the style sheet stuff, This will be one way of doing that.
It’s going to that specific selector.
Modifying here, I want to change this thing or this color scheme.
I go through it and update it that way.
Does it create inline styles or does it make style sheet?
It makes a style sheet. Here is the CSS that it generated.
We say that it’s style sheet, but we’re using all colors and fonts that have CSS variables.
Let’s see.
To use all colors as variables?
Use colors and fonts, reference using CSS variables.
So what it should do is on the very top of the CSS, you like to underscore variable name, call it, underscore what it has on the variable.
See, I will.
I had to change up the language as well, so I had to make it where they can change the logo, the color of the thing. Everything was hand-coded. Yeah, that’s how she used hand-coded. So we’ll see.
It’s made available for the things. Everything fucking works. Sorry. It looked like on the TypeScript side that it was using B. in the build system. So my guess is that they probably have something for all of the sort of normal stuff you’d have for compilation.
What about sess?
Yeah.
Sess. Sess is kind of scripting for CSS.
All right.
Sess.
I’m not sure.
Yeah.
So that’s what I was thinking. Probably sess. The standard React side of that will almost always use tail end for CSS.
Pretty standard.
Can it go out fine?
So you can use web search. So on your manage agent, you can use web search, tell them where to go and go here and pull this. Use extended thinking, which is new or the extended thinking or high power model. So if you want to use a opus and pay a bajillion dollars, you can.
So here, well, actually, oh, there’s your deployment.
Let’s do that auto scale.
I was close.
Workout dash planner. Yeah. Yeah. So it will, every once in a while, it’ll be like, Hey, do you want to add in this thing that will cost more money? Which is always fun. It’s called upselling.
Yeah. So here, yeah.
So I can actually go through and you can further. Yeah.
For the CSS, you can actually go through on the get side and see the full depth.
So here it did give all these ads as variables and updated in that way.
Have you tried loading in a partial project from something else and saying, Hey, here’s where I’m going with this.
Start here and continue.
I have it with replet.
I have with like a copilot and things like that.
And it has worked well there.
So I would expect replet to do well on that also, but I’ve not done it. Yeah. So when you’re building this prototype, do you have like, all the files of the prototype into context at the same time or only some of the files in the context.
So Replet handles that all behind the scenes.
And I’m not a hundred percent sure on how they do that.
My best guess, until your app gets big enough, I do think that they pull, they pull a lot of stuff into context, but then I think that’s what really the Replet MDE file has become. It’s like, it becomes that like memory of like, it hears like a, essentially a scratch pad of all the things that I’ve done and it can use it, but I’m not sure exactly how they handle that behind the scenes.
There’s a lot of grab actions going, trying to find stuff. But what else? If it’s erroring a bunch, I’ll ask it, where are you looking to update this?
And I’ll actually open the file tree and try to find it.
And sometimes it’ll create dashboard and dashboard one.
And it’s constantly updating dashboard one, and you’re looking at dashboard one. And so it does stupid things like that. You have to just know to go look at.
I’ll take the dashboard. I did it. It doesn’t look any different.
It’s dashboard and new. Exactly. It’s dashboard and new. It’s more simple. Yeah.
Any other thoughts or questions before you wrap up? This is awesome. I’m going to go waste a lot of time. So we did it in about $25. So you did mention there’s two or three that are very similar to this.
Did you all pick this over the others or have you compared to both?
Yeah, so I did for the presentation internally. I spent some time playing around with all three of them. Personally, I didn’t find a huge difference between three. I was building pretty small apps though.
So once it scales up bigger, there may be a difference. I know that.
A lot of people are using lovable.
That does seem to be kind of the most popular one.
The reason I’ve gone with Replet is because I can generate things in Python with last on the back end.
And that’s what I know best.
I don’t know TypeScript puts as well.
So for me, it’s a lot easier for Replet generating something for me.
That’s all Python essentially on the back end.
And I can go in and modify and update that.
And I know more clearly what’s going on.
So that’s the main reason for me picking Replet. But it seems like all three of them are very good at what they do.
And it ends up just being, if you know TypeScript, probably can pick any of the three and use them, but they all seem to, they all seem to be pretty good.