Wasp with Matija Sosic and Martin Sosic
The WASP framework creators demo their GPT-powered web app generator that builds full-stack React and Node apps from simple text descriptions.
Episode Description
The WASP framework creators demo their GPT-powered web app generator that builds full-stack React and Node apps from simple text descriptions.
Episode Summary
Matija and Martin Sosic, twin brothers and co-founders of WASP, join the JavaScript Jam podcast to discuss their full-stack JavaScript framework and its AI-powered app generator. WASP uses a domain-specific language to tie together React, Prisma, and Node, handling boilerplate like authentication, RPC, and type safety so developers can focus on business logic. The conversation explores why they chose a language-based approach — aiming for a declarative, technology-agnostic way to describe web apps — and how they balance innovation with approachability, since the "language" label can intimidate developers. The bulk of the episode centers on their GPT web app generator, which takes a plain-text description and produces a working full-stack codebase. The team explains how they use GPT-4 for high-level planning and GPT-3.5 for grunt work, keeping per-app generation costs to roughly ten to twenty cents. They walk through a live demo generating a plant-watering tracker app, revealing the prompt engineering behind it, including feeding GPT a markdown-formatted explanation of WASP itself. The demo surfaces a small hallucination bug — a missing function definition — illustrating both the power and limitations of AI code generation. The episode wraps with discussion of future improvements like in-browser iteration, preview options, and potential fine-tuning with open models like Llama.
Chapters
00:00:00 - Introductions and What Is WASP
Scott and Anthony welcome twin brothers Matija and Martin Sosic to JavaScript Jam. The pair introduce WASP, their full-stack web framework built around React, Prisma, and Node, explaining that it includes a domain-specific language designed to simplify common tasks like authentication, RPC, and email support. Martin shares his background, including internships at Google and Palantir where he was among the first to work with AngularJS.
The conversation touches on how the "language" aspect of WASP can scare developers away, drawing a parallel to how GraphQL intimidates some Redwood users. The brothers clarify that WASP feels like a regular framework in practice and that the DSL is a small, declarative layer rather than a full programming language. Anthony and the guests discuss how specific architectural choices can be misunderstood when people project past negative experiences onto new tools.
00:05:02 - Why a Language? The Design Philosophy Behind WASP
Matija explains that the motivation for a language-based approach came from repeatedly rebuilding apps as frontend technologies shifted from Backbone to Angular to React. They wanted a declarative, technology-agnostic way to express business requirements so that the underlying stack could change without rewriting everything. Martin adds that describing the high-level structure of a web app doesn't require a Turing-complete language — something simpler and purpose-built is more appropriate.
The name WASP itself is revealed to be an acronym for Web Application Specification Language, reflecting the original vision that building a typical web app should feel more like writing a specification than wiring up low-level framework details. The hosts and guests joke about where this acronym lives in the docs and reminisce about the project's earliest commits, which were originally written in C before switching to Haskell.
00:08:50 - Introducing the GPT Web App Generator
Anthony steers the conversation toward WASP's AI-powered app generator, which lets users describe a web app in plain text and receive a complete full-stack codebase. Matija explains how this differs from tools like SmolAI or GPT Engineer — it's specifically tailored for web apps, runs from a polished web UI rather than a terminal, and generated nearly five thousand apps in its first week. The discussion addresses whether those numbers are real engagement or bot traffic.
Martin breaks down the cost efficiency: because the generator is purpose-built for WASP apps, it can use GPT-4 only for the planning phase and delegate the bulk of code generation to GPT-3.5, keeping costs between ten and twenty cents per app compared to one to two dollars with general-purpose tools. The specificity of the use case — knowing exactly what kind of output is expected — allows for targeted error correction and fewer iteration cycles.
00:14:27 - Temperature, Prompts, and How the Generator Works
The group examines the generator's UI settings, particularly the creativity level slider, which maps to GPT's temperature parameter. Martin and Anthony explain temperature to the audience: lower values produce more deterministic output while higher values introduce more variation and potential hallucinations. They note that above 1.5, GPT can start outputting in random languages or producing nonsensical results.
Anthony shares his screen showing the generator interface with its templates and settings. After a brief outage on Fly.io forces them to switch to Martin's local setup, they dig into the actual prompts being sent to OpenAI's API. The prompt structure uses markdown formatting, starts by telling GPT it is an expert WASP developer, then provides a condensed explanation of the WASP framework before instructing it to generate the app — essentially giving GPT the WASP pitch and then asking it to produce code that matches.
00:24:20 - Live Demo: Generating and Running a Plant Watering App
Martin kicks off the generation process for "My Plants," a plant-watering schedule tracker. The logs show GPT-4 creating a high-level plan — identifying queries, actions, data models, and pages — before GPT-3.5 takes over to generate each component. The team explains how built-in heuristics catch common GPT mistakes like incorrect import paths, automatically fixing them before delivering the final output.
After generation completes, Martin downloads the app, runs a Prisma migration with SQLite, and launches it locally. The app boots with a login page powered by Passport, and they successfully create a user, add plants, and explore the interface. A small bug surfaces: the water-plant button doesn't work because GPT forgot to define a handler function — a classic hallucination where the code references something that was never written.
00:35:49 - Debugging, Future Plans, and Closing Thoughts
The team inspects the generated code in an editor, tracing the missing function to a simple omission rather than a conceptual error. They discuss how GPT-4 reduces these mistakes but at ten times the cost and speed, reinforcing the value of the mixed-model approach. Scott suggests pasting the broken code back into ChatGPT to fix it, highlighting the iterative potential of AI-assisted development.
Looking ahead, Matija and Martin outline plans for in-browser interactivity, preview options via Gitpod or Replit, and iterative prompting so users can refine generated apps without downloading them first. They also mention exploring Llama for fine-tuning and cost reduction. On the WASP framework side, they tease upcoming full-stack TypeScript type safety, improved LSP support, and a major restructuring to make WASP projects feel more like standard JavaScript npm packages. The episode closes with invitations to follow WASP on Twitter, join their Discord, and star the project on GitHub.
Transcript
00:00:04 - Scott Steinlage
We're live. What's up Everybody? Welcome to JavaScript Jam. As y' all know, I'm Scott,
00:00:12 - Martin Sosic
co
00:00:12 - Scott Steinlage
host here at JavaScript Jam, technical community manager at Edgeo and Anthony.
00:00:18 - Anthony Campolo
Hello, my name is Anthony Campolo. I am a developer advocate at edgeo and we have two exciting guests for you from wasp. Thank you, thanks for joining us guys. Introduce yourself.
Hello, my name is Anthony Campolo. I am a developer advocate at edgeo, and we have two exciting guests for you from wasp. Thanks for joining us, guys. Introduce yourselves.
00:00:30 - Matija Sosic
Hi Anthony and Scott. Yeah, super excited to be here. I was actually on one podcast with you before, Anthony, but I also brought my twin brother and my co-founder, Martin. Super shortly about us, and then Martin can also say a couple of words. About two and a half years ago, we started making our own web framework, which is called wasp. It has a bit of a fun twist, which is that it is actually a language, but it is not like a full language like JavaScript or C. It is a domain-specific language. So something more like Terraform, or at this stage it's like a smart and nice JSON, which basically ties together React, Prisma, and Node, and makes it super easy to get all the boring stuff out of the way like auth, RPC, email support, type safety, and similar things. So we just kind of want to make it super, super, super easy to develop full-stack web apps with React and Node. And yeah, one of the cool things that we did lately was kind of plug in the AI part to the story.
00:01:29 - Matija Sosic
So we developed our own GPT coding agent that uses wasp, React, and Node, and now we are getting close to 10k applications generated in about a month. So that was quite fun and got us a lot of new users. I think that's going to be something fun to cover. And super shortly about Martin and me before we go on, we are both kind of studying computer science, and we worked at multiple startups and bigger companies. For example, Martin was at Google and Palantir before we started doing our own stuff. So that combination of projects we did before and that work motivated us to start thinking about how we can make web development simpler. I think we are all kind of familiar with the issue here.
00:02:11 - Anthony Campolo
Yeah, you said you worked at Palantir, Martin?
00:02:15 - Martin Sosic
I was doing internships in both companies. I also got a full-time offer at Palantir, I remember, but it was still during college, and I wasn't ready to jump out of college. But an interesting point: at Palantir, I was one of the first people doing Angular, Angular 1, AngularJS. Exactly. Actually, my internship was to move the app from Java to Backbone, and then in the middle of it they were like, oh, now there is Angular, so let's try Angular. And then I was kind of doing it, like discovering Angular. It was super fun. And it's weird now to look at it because it sounds very old.
00:02:53 - Anthony Campolo
Yeah, it's one of those companies that I always, like, hear about in, like, Silicon Valley lore. And, like, a lot of people have, like, kind of different opinions about it, but it's not like it was like a company that had very legit, like, technical chops, is the sense I always got.
00:03:07 - Martin Sosic
Oh, yeah, yeah, yeah, exactly. Oh, by the way, I wanted to say, Scott, loved your sound effects at the beginning. I just wanted to quickly add to what Matija said. I mean, we kind of had the same biography, so not much to add on my side, but what Matija said about WASP is basically, it's a full-stack framework for JavaScript, so that's about it. It has superpowers due to it being a configuration language on the side, but you don't need to know much about it. It's kind of like you realize at some point, oh, one part of it is a language, but the rest is really, I would say, more like Ruby on Rails for JavaScript.
00:03:40 - Matija Sosic
Yeah, it feels like using a regular framework, you know, with some stuff made easier.
00:03:44 - Martin Sosic
Yeah, I mean, I'm saying this because we realized some people get scared when we say it's a language and they don't really even need to know its language. So then it's more of a.
00:03:53 - Anthony Campolo
It's much more a framework than a language. It's a framework that has a specific language for a specific part of it.
00:03:59 - Martin Sosic
Exactly. Oh, yeah, Anthony, you would know. Exactly.
00:04:02 - Matija Sosic
So developers, don't get scared. Don't get scared of the lang part. We'll kick that out probably at some point. So just come to us.
00:04:09 - Anthony Campolo
That's really funny, actually, because you guys know that I work on Redwood, which is another full stack JavaScript React kind of framework. And there's like, in both cases, people get scared by GraphQL with us, and then people get scared by the language idea with you guys. And with both of them, it's like, no, those are like specific architectural choices that were made to make the larger thing easier. So it's like they get hung up on previous DSLs they've used or previous GraphQL projects they've been in, and they're like, okay, that previous thing I Did was really hard. That must mean this current thing is going to be really hard too. And it's like, well, no, because like we're using it in a different way than you were using it. We're doing it for a different purpose. And so there's probably a lot more thought put into it. Like you, you, you obviously like put a lot of thought into how the language fits into the larger framework. I'm sure. So what was the decision to build a language instead of just using a JSON blob?
00:05:02 - Martin Sosic
Exactly.
00:05:02 - Matija Sosic
Yeah. I think one of the big motivations, especially for us, our experience, was we had to rewrite. I mean we had to develop several bigger apps, let's say one or two years distance. And every time there was a new thing coming out. First it was backbone and then Angular and then the next thing was React and first we use Java for the backend and use node and similar. We just felt like every time there is a new technology and way, way before we use php, so we even use that.
00:05:32 - Martin Sosic
There was also just jQuery somewhere in the middle. I mean, solid.
00:05:36 - Matija Sosic
We just felt like there should be kind of abstract way which does not depend on specific language or technology for you to express your business requirements, at least to some extent.
00:05:46 - Martin Sosic
At least the basic ones, at least
00:05:47 - Matija Sosic
the basics, some CRUD stuff. Data models and similar things.
00:05:50 - Martin Sosic
So.
00:05:50 - Matija Sosic
So that's why we opted for language approach, kind of to be more technology agnostic, plus to get rid of some of the usual boilerplate you get with library calls and similar.
00:06:00 - Martin Sosic
Yeah, I think that the main idea was that to describe the high level of your app, you don't really need a Turing-complete language. You need something simple, right? Kind of like CSS and HTML. They're doing their job.
00:06:15 - Matija Sosic
Something declarative.
00:06:15 - Martin Sosic
Yes, the idea was to have something declarative and really made for that task of describing the web app. So I think you can maybe still find in our GitHub repo, or in older commits in the README, that we say WASP is a language that understands what an app is, what authentication is, what a page is, and stuff like that. So if you have that baked into the language and all these things kind of understand each other, then the idea was, yeah, we can have a very nice way to express stuff without being directly dependent on the underlying technology. So I don't know, maybe you could use it with React, you could use it with Vue, Svelte, who knows, right? I mean right now it's just React because we need to get something to 1.0, but in the future the idea is to have multiple frontend and backend technologies.
00:07:06 - Matija Sosic
Yeah. Even the name WASP comes from that. WASP means Web Application Specification Language. Actually, the whole idea was that writing a typical web application should be more similar to writing out the specification in human language than going deep into all the properties, React Hook Form, or whatever.
00:07:26 - Anthony Campolo
That's funny. Is that in the docs anywhere that that's actually an acronym or originally was an acronym. I don't know if I've ever heard that before.
00:07:33 - Martin Sosic
That's a good point. It was.
00:07:34 - Anthony Campolo
That's just a hidden secret.
00:07:36 - Matija Sosic
Kinda. Kinda.
00:07:37 - Martin Sosic
It was a part of a landing page before. I think it was flushed out from the landing page. I think you can find it somewhere in the docs. But now we also have the new
00:07:44 - Matija Sosic
docs, but it's mostly restructuring.
00:07:47 - Scott Steinlage
Yeah.
00:07:47 - Martin Sosic
So potentially somewhere in the docs.
00:07:50 - Anthony Campolo
One thing that I like to do is go back to the very first commit on a very old and well-starred GitHub repo and look at what it looks like. So I would be able to find it if I went through the history.
00:08:02 - Matija Sosic
Yeah, I give it a look.
00:08:03 - Martin Sosic
I think the first commit might even be C.
00:08:08 - Matija Sosic
I managed to get Martin out of using C. Yeah, silly idea. I mean, you opted for Haskell, but still now.
00:08:16 - Martin Sosic
Much better, Much better.
00:08:17 - Matija Sosic
You know, but I think, you know, it's always this duality kind of between trying to, you know, impress people with your cool language approach and how it's going to be abstract and support multiple stuff. And then on the other side you want to be as simple and as familiar to them as possible. So, you know, that's kind of why we flushed out some of the language stuff from the beginning, because it was kind of sounding scary and let's say a bit too innovative. So I think the main ideas are still all there. It is just a matter of how and when do we present them. So that is something that we are daily kind of discovering.
00:08:50 - Anthony Campolo
Awesome. Yeah. So let's talk a little bit about your GPT web app generator project. This is really cool because AI is something that is coming up a lot in a lot of different places for a lot of different reasons, a lot of different use cases. And usually what I see is there's of course things like Copilot, like I think Copilot, you know, came way before GPT and developers kind of got a taste of this before the general public really, because they're already using Copilot, which had GPT embedded within it. So you could actually use Copilot to have a conversation like you would with ChatGPT. If you did all like comments, like you're a comment and then a comment responding to a comment. You create a chatbot like within your editor. It was like a very, very strange experience, you know. But then when ChatGPT came out, you had like a nicer interface, but people realized you can feed ChatGPT code and it would give you code back and they can understand code. And it was like code literate, which is a really incredible thing. Then people started creating companies that kind of integrate it and what you've done.
00:09:55 - Anthony Campolo
I'm sure other people have done this, but I haven't really seen it much. It asks it to write you a project, so not just pieces of code but like an entire project. Is that right, this web app generator? So that's kind of my idea from the title.
00:10:09 - Matija Sosic
You know, I mentioned we tried a couple of similar coding agent tools, like SmolAI. We were playing with it. Somebody was trying GPT Engineer and similar tools. I think maybe the main difference is that we made the WASP AI, or GPT generator, specifically for developing full-stack web apps. One other big difference is that you could run it from the UI. So it is actually a nicely designed web page with a simple form. You just say what kind of app you want and you get it out. All the other tools I saw, you had to run them in your terminal and type everything in and see the changes locally. It was a bit more cumbersome to use, and I guess you needed a bit more technical prowess to use it successfully. So we had a lot of applications built. I think in the first week it was almost 5k applications.
00:11:01 - Anthony Campolo
Don't you have to worry though, because you could just generate it. So it's like, what if that was just like a thousand bots? Were you actually seeing people tweeting these things? You know, there's people building things that they're actually using in some sense, right?
00:11:15 - Martin Sosic
Yep.
00:11:15 - Matija Sosic
I mean, another point actually Martin can tell more about this is, you know, the price also, you know, when we compared like, you know, using small AI for generation of an app versus doing it wasp, it was a huge difference. So I think, you know, the numbers roughly Martin, Sure.
00:11:28 - Martin Sosic
No, I mean just on the topic of the, of the.
00:11:30 - Anthony Campolo
So real quick, so you're saying that there's a cost. Is that because you're using the API, the OpenAI's API, it will cost more depending on how big your app is?
00:11:41 - Martin Sosic
Yeah, sure. I mean to. Sorry, they're answering, I guess you're answering two questions at the moment. So I got Jen. So basically on one hand, yeah, there is the. So we are using directly OpenAI API chatgpt. So we have their rate limits and we have their costs. I think what Matthia was mentioning is that actually our magic app generator is less expensive to generate the whole app than, you know, maybe some other solutions out there like Small AI or GPT Engineer, which is mostly because it's so well tailored for the use case is doing. I mean, basically the main thing about our magic app generator, I'll just call it Generator from now on. The main thing for our generator is that it's tailored exactly for building web apps. It was. Right. So it's a trade off in the sense that you are less flexible. You can produce any kind of software like I don't know, Chrome extensions or maybe. Yeah, it's not good for video games in Unity or you know, it can't even produce a web app that's using next. But it's, it's very good in producing web apps using WASP and it. And actually compared to other tools, it will give better, more rounded, full working web app from the first shot actually, while in other tools you're kind of, you know, you get something then you iterate multiple times and it's still, it's still not there.
00:13:01 - Martin Sosic
But as I said, it's, it's a, it's a trade off.
00:13:04 - Matija Sosic
I mean the main kind of trick, you know, let's say, which Martin said, you know, it's. So it's so tailored for the use case of web apps is basically, you know, we could use GPT4 for the more complex stuff, you know, like design the plan for your application, you know, figure out what you need to generate. But then we could use GPT 3.5 for the majority of the grunt work. And you know, that's what made it so cost effective, I think in the end, you know, like, I mean, the
00:13:27 - Martin Sosic
other tools are also using something similar. They do get best performance with GPT4 or anthropic or something. But we also have all these iterations because it takes less for us to get to something that works.
00:13:42 - Anthony Campolo
Scott, can you pull up my screen so we can Start looking at this while we're talking.
00:13:46 - Scott Steinlage
Absolutely. I was waiting.
00:13:48 - Martin Sosic
Cool.
00:13:50 - Anthony Campolo
This is magic.app.generator. was lang.dev exactly. First, let's find you a domain right now.
00:14:02 - Martin Sosic
We had some lengthy discussions about the domain name and we ended up with lengthy domain name, I guess.
00:14:07 - Anthony Campolo
Okay, so this should be WASP GPT. Yeah, that's what this should be.
00:14:17 - Martin Sosic
I think I was pushing for Wasp AI. Right. Okay.
00:14:19 - Scott Steinlage
Yeah.
00:14:20 - Anthony Campolo
Wasp AI. Even. Even shorter. You want. You want Wasp, Wasp AI. That's. That's what you want.
00:14:27 - Matija Sosic
Like 20K probably.
00:14:29 - Scott Steinlage
Probably,
00:14:31 - Anthony Campolo
yeah. Okay, so GPT web app generator. So I was looking at this and you have a way to generate one. You also have some templates. I'm going to start with a template and then we can kind of generate more from there because I want to see what it is like just doing this. So you have an app name description, app brand, color. So let's talk about this. What does creativity level mean? I think this is probably based around temperature.
00:14:55 - Scott Steinlage
Right? That's what I was thinking too.
00:14:57 - Martin Sosic
Yeah. Basically it's adjusting temperature. We are using two different temperatures, one for fixing the cold, one for producing.
00:15:03 - Anthony Campolo
So let's explain. We all know what temperature is, so. Good. Let's explain what temperature is to the audience.
00:15:11 - Martin Sosic
Sure, that's a good point. Do you want me to take that?
00:15:15 - Anthony Campolo
Sure, go for it. Yeah.
00:15:17 - Martin Sosic
I mean, temperature is basically just a parameter for GPT, you know, telling it how creative to be. The higher it is, the more crazy it gets, though.
00:15:24 - Scott Steinlage
So he starts hallucinations.
00:15:27 - Anthony Campolo
So that's. This is true, but also I feel like describing it that way, it will be confusing to people because turning up or down creativity, like that's a very abstract concept was what. So what it's doing and why we say that is because it turns up or down how unique its response is, in the sense that if you turn it really low, it's going to give a response that's more similar to what is already in the data and in the responses. Whereas as you turn it up, it will generate newer, stranger, more abstract, more creative things that are not present in the original data set.
00:16:05 - Martin Sosic
Sure.
00:16:06 - Scott Steinlage
Right. And the original data set is what you're feeding it here and also what's in the back of your agent, you know, and all that creation.
00:16:13 - Martin Sosic
Right. So makes sense.
00:16:16 - Anthony Campolo
And so it also makes it more likely to create hallucinations, which then can be a problem because that's what it's doing. Doing things that don't actually correlate with the code itself or the real world.
00:16:26 - Martin Sosic
Yeah, exactly. I Mean you can't really avoid them anyway. Like you will get them for sure.
00:16:30 - Scott Steinlage
So what's your highest temperature on. On these levels here on creativity level? From 0 to 1 obviously is the temperature.
00:16:36 - Anthony Campolo
So what do you.
00:16:36 - Martin Sosic
Yeah, actually now it's zero to two.
00:16:38 - Scott Steinlage
Oh, did they change it?
00:16:39 - Martin Sosic
Okay, yeah, I think they changed it change it at some point. I know now it's because I also remember it being from 0 to 1 before. I think now it's certainly 0 to 2. Recommended default is 0.7 from them. So we are also using that to generate.
00:16:51 - Anthony Campolo
Yeah, I'll be 0.8 for summarization. So yeah, that sounds about right to me.
00:16:56 - Martin Sosic
Yeah, so we use 0.7 for the balanced approach there. But if you go for creative, I think it's 1.2 and the conservative one. Core conventional
00:17:07 - Anthony Campolo
OpenAI needs better docs on this. This is their entire response for how to set the temperature parameter.
00:17:13 - Scott Steinlage
Yeah, this should be like a page. Honestly.
00:17:16 - Anthony Campolo
Lower values for temperature result in more consistent outputs while higher values generate more diverse and creative results. See their, their explanation. I have the same critique with them as your guys. Like the temperature value based on the desired trade off between coherence and creativity.
00:17:32 - Martin Sosic
Yeah, I mean I think a technical level basically comes down to, you know, because each. Each time you have a GPT do a prediction, it basically chooses a bunch of words and then picks the one with the highest probability. Right.
00:17:45 - Anthony Campolo
I like this. Setting it to zero makes it mostly deterministic.
00:17:50 - Martin Sosic
Yeah, exactly. So basically to choose the one with the highest probability. But I think if you give higher temperature then it kind of goes, you know, like okay, I will choose a different thing this time and you get fun stuff. I know above 1.5 I used to get like, I don't know output in French assembly. It would quote some pieces.
00:18:08 - Anthony Campolo
It really wants to express itself in the lingua franca. It's. It demands.
00:18:14 - Martin Sosic
Becomes like a modern, modern art, you know. By the way, I would recommend for the demo maybe going with one of other two examples to do or my
00:18:25 - Anthony Campolo
plans just because I want to make a block.
00:18:32 - Martin Sosic
Let's do my plans just because it will be easier to get it to work. It will do less mistakes.
00:18:38 - Anthony Campolo
This is you to do. You can't go wrong to do but you're embarrassed to do GPT.
00:18:44 - Martin Sosic
My plan is also.
00:18:45 - Matija Sosic
Yeah, 2 DF is boring. My plans boring.
00:18:57 - Anthony Campolo
So I'm going to choose to do conventional because I wanted this to not break. Since you're doing it, is that a good trade off?
00:19:04 - Martin Sosic
It's a good choice. Yeah, yeah, yeah.
00:19:07 - Anthony Campolo
Thank you.
00:19:09 - Matija Sosic
I mean, even if it breaks, it's not. It's not a big deal.
00:19:12 - Anthony Campolo
Okay, so. And then.
00:19:16 - Matija Sosic
Yeah, it's just a clickbait.
00:19:17 - Martin Sosic
Yeah. It is a promise of future. Yeah.
00:19:23 - Anthony Campolo
I'm clicking Generate app. Nothing's happening.
00:19:25 - Matija Sosic
Oh, let's see what's happening. You press generate. It's not starting. Okay, wait, so let's wait.
00:19:31 - Anthony Campolo
Refresh.
00:19:32 - Martin Sosic
No, it usually starts immediately, so I'm actually surprised it's not yet working. I'm sure you clicked it, right.
00:19:41 - Matija Sosic
Yeah, it said start. It says starting.
00:19:43 - Martin Sosic
You know what? We actually had the outage, the thing crash. I saw it crash yesterday.
00:19:49 - Anthony Campolo
Shouldn't done that.
00:19:51 - Martin Sosic
No. Fly was good to us so far. Is it possible it actually created [unclear] right on our side?
00:19:57 - Matija Sosic
Yeah. Let me try.
00:19:58 - Anthony Campolo
If you're running this thing in a Docker container on Fly, then you never know. Fly is great. I'm a big fan of the Fly team. I actually know them personally, and they're great dudes, and they have network challenges that they're very transparent about.
00:20:13 - Martin Sosic
Yeah, I think they just have a great influx of users and, you know, it's.
00:20:18 - Anthony Campolo
Yeah, no, they're great. Yeah, exactly. It's a great service. So it's like. It has issues. So many people are using it, so that's good for them.
00:20:25 - Martin Sosic
But amazingly, it's actually down. Yeah, of course. Typical demo, right?
00:20:34 - Anthony Campolo
That is too funny. Can I spin it up locally and. Right.
00:20:38 - Matija Sosic
We can also share some of the runs that we run before, so you can easily check it out. I think that's actually.
00:20:44 - Anthony Campolo
So let's do this. Let's do this. Let's look at the code.
00:20:47 - Martin Sosic
I can't believe it's not worked. Yeah.
00:20:50 - Matija Sosic
Wait, I also have something to show it. I would just share the link with
00:20:53 - Anthony Campolo
you because we could literally run it in a Docker container on my own computer. This should be possible.
00:21:01 - Martin Sosic
It could run locally. It's just that you will need to set up a couple of variables, I think. You also need to connect.
00:21:07 - Anthony Campolo
Do you guys want to do that on your computer?
00:21:11 - Matija Sosic
You could run it locally, maybe. Martin.
00:21:12 - Martin Sosic
Yeah, I was on vacation for two weeks and just came back today, so.
00:21:18 - Scott Steinlage
Welcome back.
00:21:20 - Anthony Campolo
Okay, let's take a pause point then. Right here. Sorry, we had some technical issues right there. We're restarting right here. This is now we're sharing with Martin. He's got GPT web app generator up and go ahead. And what app are you going to generate here?
00:21:37 - Martin Sosic
Sure, sure. Here it is. So we have some example apps here. It's easier to pick from these guys. By the way, these are like three levels of complexity for the app: the simplest one, intermediate complexity, and the blog is kind of a bit harder. Most people get it right, but it often gets a couple of small mistakes you need to fix manually. So let's maybe go with, I mean, each of them has potential for mistakes, but blog is the hardest. My Plans is maybe the best choice.
00:22:07 - Anthony Campolo
So it has a schedule.
00:22:09 - Martin Sosic
Exactly.
00:22:10 - Anthony Campolo
Does that mean there's going to be triggers at certain points in the future?
00:22:16 - Martin Sosic
Yeah, so sorry, you said what? Watering points in the future.
00:22:19 - Anthony Campolo
So I'm just saying, like when it says there's a schedule. So what does this app do?
00:22:24 - Martin Sosic
Right? Yeah, it came. It was inspired by, you know, situation in the office where basically, you know, I forgot to water the plants. So.
00:22:31 - Anthony Campolo
So to remind you on a schedule in the future, that's like what I'm getting at.
00:22:35 - Martin Sosic
Exactly. Exactly. Yeah, that's it. You will provide your plants. You say, this guy needs watering every couple of days and every four days. And you know, then every four days you can check the status of your plants and see, you know, when you water it last time and stuff like that.
00:22:49 - Anthony Campolo
Yeah, that sounds very useful. That sounds like an actual useful app.
00:22:54 - Martin Sosic
It's actually useful app. That's a good point. I mean, as you can see, explanation is it's not one sentence, but it's also not very technical. It's kind of like, hey, I want this. I want one page with this button and stuff like that.
00:23:07 - Anthony Campolo
So this has written a prompt for you?
00:23:10 - Martin Sosic
Yes. I mean, you could write your own
00:23:13 - Anthony Campolo
prompts, but what I'm saying is the description is the prompt.
00:23:19 - Martin Sosic
I see what you're getting at. Yeah. This will be part of the prompt for GPT.
00:23:23 - Anthony Campolo
So what is the prompt and are you able to see the prompt?
00:23:27 - Martin Sosic
I can actually, since I'm.
00:23:29 - Anthony Campolo
I want to see the prompt. Scott knows what a prompt is. The prompt is what you tell the oracle, what you tell the Oracle of Delphi: give me the answer to the universe.
00:23:42 - Martin Sosic
Right, Exactly.
00:23:45 - Matija Sosic
Maybe just zooming in.
00:23:46 - Martin Sosic
I'm just looking at this since I'm running it locally at the moment. I will actually be able to.
00:23:51 - Anthony Campolo
Yeah. Find the exact text. There'll be a text blob somewhere. Or this is being inserted in that text blob.
00:23:58 - Martin Sosic
Exactly. I will actually be able to probably show the prompt. Basically, what you're doing is based on this. We will make multiple prompts to our GPT and tell it to build, I don't know, page by page, make initial plan, build page by page and then at the end fix some stuff, wrap the whole thing up and there you have an app. So it will be like maybe 10 prompts, maybe I can just kick start it and then we can see the fast day.
00:24:20 - Anthony Campolo
Yeah. So generate. Let's see what happens.
00:24:23 - Martin Sosic
Sure. Let's do the generation part. Yeah. We are in the lobby and there we are. Magic starts.
00:24:33 - Anthony Campolo
So is this feeding you the fly output right now?
00:24:36 - Matija Sosic
Sorry, is this like what we're seeing
00:24:40 - Anthony Campolo
right now, is this the output from Fly or just something you're generating right now that's connected to where this is actually deployed?
00:24:50 - Martin Sosic
So I'm running this locally at the moment. So this is all local.
00:24:54 - Anthony Campolo
Right. So if this were connected, this separate. Like what is this output? Where it says generating plan. Like what, where is the plan generated usually?
00:25:03 - Martin Sosic
Sure. Basically generating plan means we are. We just asked GPT to give us a plan of what this app will look like and we are waiting a bit for it to respond. It actually, it actually takes it like, oh, there, there it goes.
00:25:16 - Matija Sosic
We could even check it out how it looks like.
00:25:17 - Martin Sosic
Yeah, we can even check it out in the, in the logs.
00:25:21 - Matija Sosic
It's moving fast.
00:25:22 - Anthony Campolo
There's like a CLI embedded that's like running these commands kind of.
00:25:27 - Martin Sosic
Kind of. Exactly. We're actually interacting directly with the, with the OpenAI API. Right. And you're asking GPT questions, you're getting answers.
00:25:34 - Anthony Campolo
So what is this editor looking set up? How is this generated? Is this just like a. Kind of like this is like an iframe basically.
00:25:42 - Martin Sosic
Yeah, this is actually some kind of. We code it manually. This is a cool library for displaying files as a tree. And here we are, we are just showing the files as we are generating them. It's all manual.
00:25:55 - Anthony Campolo
Interesting. Be curious if you'll be able to do this in the ultimate would be doing this in GitHub Actions and then you could just have it right in your GitHub and then use their dev kind of thing. That'd be epic.
00:26:09 - Martin Sosic
I think that's a possible alternative.
00:26:11 - Anthony Campolo
Or gitpod. I don't know if you ever looked at gitpod, but this would be a cool tool for that too.
00:26:15 - Martin Sosic
Exactly. I've even discussed, I know internally we discussed going with GitHub code spaces or replit or similar. Yeah, this is just a bit simpler for the end user.
00:26:24 - Matija Sosic
No, it could be a cool next step. This is more like. More just for seeing what's being generated live or Easily.
00:26:30 - Anthony Campolo
Yeah, so the idea is you wouldn't edit the app in this. This is just like a way to kind of visualize it and display it and look at it.
00:26:37 - Matija Sosic
Yeah, exactly.
00:26:38 - Martin Sosic
You can actually see what's being generated live here.
00:26:41 - Scott Steinlage
Did you guys. Did you guys index something that is. That it's referencing so that it can structure this more easily?
00:26:50 - Anthony Campolo
Or are you just like just throwing a straight prompt at GPT4 saying, Give me an app?
00:26:55 - Scott Steinlage
Yeah, that's a great question.
00:26:57 - Martin Sosic
Yeah, let me show you, maybe this kind of answers it. So basically, the important thing about GPT is it has no memory, right? So every conversation is a new conversation. Yeah, exactly, stateless. It doesn't look like that in ChatGPT UI, but actually in the background, it's always resending everything. So we are doing the same thing here. Maybe just zoom in a bit.
00:27:21 - Anthony Campolo
Yeah, zoom in on your. On your font. So this is. So this is just like a. What. What is this right now that we're looking at.
00:27:31 - Martin Sosic
Yeah, exactly.
00:27:33 - Anthony Campolo
And you're. It's still. It's. And also you don't have syntax highlighting or anything.
00:27:37 - Matija Sosic
It's not terminal. But let's.
00:27:39 - Martin Sosic
I'm just looking how to quickly zoom in so you guys can have a nicer. Yeah, I'll do this. I know there is a nicer way to do it, but this is the fast.
00:27:48 - Anthony Campolo
But like, if you're actually working on this yourself, you would do this without syntax highlighting. Like how. Like this is markdown, isn't it? Just get some markdown syntax highlighting.
00:27:58 - Martin Sosic
I think I get.
00:27:59 - Matija Sosic
I mean, this is not an editor. This is like purely what we are getting.
00:28:02 - Scott Steinlage
Yeah, this is the return from the server.
00:28:04 - Anthony Campolo
It's really returning your whole thing right now. So it's just giving you this whole fat markdown file.
00:28:10 - Martin Sosic
Right.
00:28:11 - Anthony Campolo
What are we looking at right now?
00:28:14 - Martin Sosic
What you're looking at is basically the. So the app I'm running, the WASP AI app, you know, it's communicating with GPT asking it prompts and so on. And while doing that, it's basically printing what is doing. So this is actually the vp.
00:28:25 - Anthony Campolo
So this is. So these are logs. This is like the logs of what
00:28:28 - Martin Sosic
you're doing, which is exactly. Logs. You just said this. So these are logs from the.
00:28:35 - Anthony Campolo
Yeah, sorry, I missed that. My bad.
00:28:38 - Martin Sosic
Probably. I didn't emphasize. So. So these are logs from the WASP app. WASP AI app, Magic Generator. This is server basically telling us stuff and they're saying Stuff like, you know, as quickly it's saying, you know, it's just us, GPT, it sent it a message.
00:28:53 - Matija Sosic
I think this shared message is way.
00:28:54 - Anthony Campolo
So you're also, it looks like you're using ChatGPT 3.5.
00:28:57 - Scott Steinlage
Yeah.
00:28:57 - Anthony Campolo
And not four.
00:28:59 - Martin Sosic
Yeah.
00:29:00 - Scott Steinlage
Conventional is 0.5.
00:29:01 - Martin Sosic
It looks like we're using both. So basically we are using four for the first step, which is making a plan for the no support. Explain the whole web. It's like, okay, it will have three pages. It will have, I don't know, two entities, like data models. Right. It will have these functions, these RPC methods and so on. Once that plan is generated, you can
00:29:17 - Matija Sosic
actually see the logs in there.
00:29:19 - Martin Sosic
You can actually see the plan here. So this is the plan. Look, it says, okay, I only have one query. Get user plans, two actions. Create plan. Water, plant. Yeah. Okay, we have user plant and you know, two pages at the end. So cool. We have a high level overview and then it goes about, you know, building each of those. It's like creating this action, that action and that's. Yeah. And this all is 3.5. This step is GPT4.
00:29:48 - Anthony Campolo
Interesting. Okay, so because you want the first one that generates the initial structure to be smarter and then the details aren't as important.
00:29:57 - Martin Sosic
Right, Exactly. I mean we tested, we tested with both, of course, using GPT4 and everything gives some better results.
00:30:02 - Anthony Campolo
But have you tried Claude?
00:30:06 - Martin Sosic
No, I read about Claude. I think so.
00:30:10 - Anthony Campolo
Claude is public now. Claude was not public until a couple weeks ago. I would recommend looking into it.
00:30:16 - Martin Sosic
The thing is, Claude is using 100k context. That's cool. But I don't think it's smarter than GPT 3.5.
00:30:23 - Anthony Campolo
And to be definitely smarter, if it's as smart as that is better.
00:30:27 - Martin Sosic
Yeah, yeah. But for example, at the end, the problem we had wasn't really context. It was like, I mean, I would
00:30:34 - Anthony Campolo
say with a giant app, context isn't a problem. That kind of surprises me.
00:30:38 - Martin Sosic
Because GPT 3.5.
00:30:39 - Anthony Campolo
Because your apps are small.
00:30:41 - Martin Sosic
Yeah, they're small. But you know, even with those small apps, you still like 16k context was a new thing when we were doing this. It's a lot for the smaller apps. And still, Even at that GPT 3.5 starts being silly. Right.
00:30:55 - Anthony Campolo
So it's just, it's just not as far. It's just kind of dumb.
00:30:58 - Martin Sosic
Exactly. Which I think CLAUDE is great for, I don't know, summarizing huge documents or something like that. Right. But for this you need both big context and it needs to Be smart enough to be able to work with such a big context, and it just can't. So even 16k was too. Too much for us.
00:31:15 - Anthony Campolo
Interesting.
00:31:16 - Martin Sosic
Yeah. So, yeah, super short. That's about it. You know, by the way, the important thing is that GPT4 is much slower and much more expensive 10 times. So, you know, this balance of. It gives a nice, Nice experience, I think.
00:31:29 - Anthony Campolo
Yeah, you want to split the difference between the two because that allows you to have margins, essentially.
00:31:36 - Martin Sosic
Sorry, the margins like margins.
00:31:38 - Anthony Campolo
It allows you to cost. Like you can kind of decide, okay, we want this part of the app to be cheaper and this part should be more expensive because if you just do the whole app on the most expensive thing, you're always doing the most expensive thing. Whereas if you have some sort of way to separate the smart part from the less smart part, the less smart part, you can kind of increase and make it more of the process and make it cheaper. If you want any point by switching to a different model, you want that.
00:32:03 - Martin Sosic
Exactly.
00:32:05 - Anthony Campolo
Being smart, then you're a person who made decisions. They ain't paying money to a thing. So AI hasn't taken your job, which is also great.
00:32:13 - Martin Sosic
Right? So, yeah, that's very.
00:32:15 - Scott Steinlage
Lots of benefits.
00:32:15 - Matija Sosic
I think we kind of measured. I think, like a single app is about 0.$1, right?
00:32:20 - Martin Sosic
Yeah, single, single typical app is 0.1 to 0.2.
00:32:24 - Matija Sosic
So like 20 cents.
00:32:25 - Anthony Campolo
0.1 dollars. So 10 cents.
00:32:28 - Martin Sosic
Yeah, sorry, 10 to 20.
00:32:30 - Scott Steinlage
10 to 20.
00:32:31 - Matija Sosic
Yeah. And I think we tried small AI and similar. It was more like, you know, like $1 or $2 to generate the.
00:32:37 - Anthony Campolo
Interesting. Okay. Yeah. So how do we get that 2 ascent?
00:32:48 - Scott Steinlage
Anthony's always pushing the envelope for sure.
00:32:51 - Martin Sosic
I actually might have an answer for that. An interesting step would be using, I think, Llama, right?
00:32:58 - Anthony Campolo
Llama, Right, Exactly. You run the model yourself and then you have the model. So then you're not running a model that costs money every time you run the model.
00:33:06 - Martin Sosic
That's one very big advantage. The second advantage is that with Llama, we could, if we have our own, we could actually do some additional training like fine tuning or what is the name? Right. To teach it about wasp so we don't have to repeat it in every prompt. We can reduce the number of tokens. So that could be quite a big improvement.
00:33:26 - Scott Steinlage
Yeah, you could index a lot of things for WASP in there.
00:33:29 - Anthony Campolo
So let's take this app. Could we actually run this app that you've generated?
00:33:33 - Martin Sosic
Exactly.
00:33:34 - Matija Sosic
Yeah. I just thought you could go to the logs quickly and just so how you're trying multiple times to actually fixing some errors and stuff. I think that is.
00:33:40 - Martin Sosic
You mean these logs, right?
00:33:41 - Matija Sosic
Yeah, these logs. So what's happening here? You know, we kind of try to encounter. Because we know that GPT might make some mistakes. So you know, we detect it several times before actually giving you the output and retry some of the things we know failed. So, you know, this is kind of how we, let's say, diminish the number of mistakes in the. In the final app.
00:34:00 - Martin Sosic
Yeah. It is the reason why, you know, the generator is able to get very close to something fully working or almost working in, in one shot. Right. Because, for example, it's, you know, it's a resistance to generator returning to GPT returning email address. And you also try to fix stuff. You know, we know, we know mistakes that are often done by GPT and then we just kind of tell it to fix it or we fix them manually. I mean manually with heuristics. Right. So we have these additional fixing steps. But I mean you get. We get this because we know what we are building. We know we are building a web app. So that is that additional kind of power you get with this angle.
00:34:37 - Matija Sosic
Yeah, I think it was like mostly messing up some imports. Like it would import like relative path instead of episode path or just like default import versus specific import and similar.
00:34:46 - Martin Sosic
Yeah, yeah. You can see imports in page pages. Fixed. Yeah, I mean GPT is great, but some things like you can tell it 10 times to not do something, it will still do it. So it's amazing in that regard. Yeah.
00:35:02 - Anthony Campolo
I heard one person describe it as like ChatGPT is like a very stupid grad student.
00:35:11 - Martin Sosic
Yeah, it's like, I would say it's like a genius small cube.
00:35:18 - Matija Sosic
That's good.
00:35:19 - Martin Sosic
Doesn't care about some stuff. You tell it right. So that's.
00:35:22 - Scott Steinlage
I like that better.
00:35:23 - Matija Sosic
It knows all the effects, but doesn't care about what you want.
00:35:28 - Scott Steinlage
This is what I want. Yeah, I want.
00:35:31 - Martin Sosic
I want. I want. It's also getting smarter every day as kids are. So that's true.
00:35:36 - Matija Sosic
Getting more evil.
00:35:38 - Anthony Campolo
Sucking all of our brains out of the technosphere. Taking our thoughts and becoming. Becoming the new consciousness. Fascinating.
00:35:49 - Matija Sosic
That's going to work. Finally. We are waiting for that. Yeah.
00:35:52 - Martin Sosic
Okay, cool.
00:35:53 - Matija Sosic
Shall we try to run it locally?
00:35:55 - Martin Sosic
Yeah, sure. Just to show quickly. So basically you can see the whole thing here already tailwind.
00:36:01 - Anthony Campolo
So good job.
00:36:02 - Martin Sosic
It's using tailwind. Exactly. We told it in the prompt. We tell it, you know, use tailwind. Right. Yeah, of course.
00:36:08 - Scott Steinlage
Otherwise it would Use whatever stack it wanted to.
00:36:11 - Martin Sosic
Exactly. Which we don't want. Right? Yeah. So you can see the whole code here. You know, it actually generated this get user plane stick thing.
00:36:18 - Matija Sosic
It's.
00:36:18 - Martin Sosic
It has, you know, something to water the plants and it has something to create a plant.
00:36:24 - Anthony Campolo
Question, question, question. React server components or no.
00:36:28 - Scott Steinlage
Oh boy. This could go into 30 minute conversation.
00:36:31 - Martin Sosic
Yeah, it'll be short because we don't have them yet in vos. So. Yeah, that's it. I think we are exploring them. They will probably kind of joining WASP at some point.
00:36:42 - Anthony Campolo
I was like, could you tell ChatGPT or tell the model to generate one with REACT server components?
00:36:49 - Martin Sosic
I could tell you to do it, but it's building this app in WASP and WASP doesn't support it.
00:36:55 - Anthony Campolo
Okay, but is it WASPS using REACT to. How can it not support it?
00:37:02 - Martin Sosic
That's a good point. But WASP is kind of a wrapper around react, so you know, it's so.
00:37:08 - Anthony Campolo
Because the way you have it set up work hooks into the server and the database. You're not using REACT server components.
00:37:14 - Martin Sosic
The actual front end right now is like an spa. So it's not.
00:37:19 - Matija Sosic
Yeah. I think it's similar to how Redwood introduced server components recently. We have to do the same work to support it.
00:37:27 - Martin Sosic
Yeah, it's not terrible. It's not terrible amount of work. It's just we need to do it properly.
00:37:30 - Matija Sosic
So we are waiting for others to kind of find the optimal way of doing it.
00:37:35 - Anthony Campolo
I was waiting for next to do it so they just copy what they did. But that's not really going to work for either WASP or Redwood because their products are more complicated.
00:37:43 - Martin Sosic
Yeah. Yeah. There's still some learnings to be headed there. I think so. Yeah. Maybe you could wait a bit.
00:37:47 - Scott Steinlage
I would love to see the prompts on all this though. Geez. It would just. I love seeing how it works.
00:37:53 - Martin Sosic
You know, I can quickly show you some prompts. So for example, let's see.
00:37:58 - Anthony Campolo
Got to increase your font a little bit more once you find it.
00:38:02 - Martin Sosic
I'll do that again. No worries.
00:38:03 - Matija Sosic
Yeah, zoom in like for at least two notches because there is no.
00:38:07 - Martin Sosic
Funnily enough, I'm just increasing the font. Yeah. Maybe this. Yeah, go.
00:38:12 - Scott Steinlage
Yeah, that's better.
00:38:12 - Martin Sosic
How about this? This is nice, right? Yeah. Cool. I'm just looking for GPT4 because. I know. Then we are doing the planning part still. 3.5. Come on. There is four. I think this one will be. Wait, I think I'm coming close. No, I could search at once. We are in the terminal. I don't want to press the wrong button. Give me just a. You're almost there. The anticipation of it. Yeah, almost there. You see how much work is getting done, right?
00:38:47 - Matija Sosic
I mean, any prompt is fine because, you know, it has all the context and stuff.
00:38:50 - Martin Sosic
Okay, let's. Let's let this last one. Let's see the last one. I think this one. Okay, I'm just. Let's go from here. So you can see a prompt here. It always starts. So basically this is a conversation with the GPT. Right. Okay, here is 3.5, 16K temperature. Right. 0.7.
00:39:05 - Anthony Campolo
And then the. The role and the content is the important part. You have the role of system and then the content is the prompt.
00:39:11 - Martin Sosic
Exactly. Here it is. Right. As you said. So here's the role. The system thing is basically you're just. It's like the most important message. Right. And it, you know.
00:39:19 - Anthony Campolo
Yeah. So let's, let's really hone in on this because where it says role equals system, role is something people can look up and figure out. And then content equals, and that's the prompt. The prompt starts at content equals. So if you're using ChatGPT and you're talking to it, you would start right there. That's what you would plug into the input.
00:39:37 - Martin Sosic
Exactly. This is what you would actually write in GPT.
00:39:40 - Anthony Campolo
So it started by saying you are an expert WASP developer. That's the very first thing you say to it.
00:39:44 - Scott Steinlage
Perfect.
00:39:46 - Anthony Campolo
Exactly. And helping implement a new WASP to
00:39:51 - Martin Sosic
boost the confidence a bit. Right?
00:39:52 - Matija Sosic
You can do it.
00:39:53 - Martin Sosic
Yeah, you can do it. Basically, here is very, very guess. Interesting. Here is like, you know, you write.
00:40:00 - Anthony Campolo
So this is where the. This is why I've seen Markdown before. You write markdown for. You give it like a readme.
00:40:06 - Martin Sosic
Yeah, it looks like a markdown. You're right.
00:40:08 - Anthony Campolo
It is marked out. It's dash, dash, dash, wasp. And then the thingy. This is markdown. We're looking at Markdown right now.
00:40:15 - Martin Sosic
That's a good point. To be honest, I use all markdown. I use this everywhere. So I even forget it's markdown. So I didn't.
00:40:23 - Anthony Campolo
Yeah, no, that's the thing is because. Because GPT understands Markdown. So developers who know Markdown speak markdown to it. It gives markdown back. No one who doesn't know Markdown has any idea what the hell we're saying to it.
00:40:35 - Martin Sosic
That's a good point. I mean, yeah, GPT understands everything really. So. So that's a nice, nice part. Sure. And here, here basically is what you are kind of typing into the. You know, into GPT. Right. So all this thing is a prompt. It's you. It's kind of user. Right. And you're telling. Basically what they do is they tell it. We give it a quick intro of what WASP is, you know, full second data framework with its react important features. So that's.
00:41:00 - Anthony Campolo
This is so fascinating. So you give GPT the WASP pitch and then tell it to generate an app for you that looks like a WASP app. You can't handle a WASP app. And then explain the WASP app and then tell it to give you a wasp.
00:41:15 - Scott Steinlage
It would go so far.
00:41:16 - Anthony Campolo
This would be. You could, you could take this prompt. You could do this with other.
00:41:19 - Scott Steinlage
That's what I'm saying. Yeah, yeah. That's why I wanted to see the exact cool.
00:41:24 - Martin Sosic
No, no, I mean, it's not like you could do it with other stuff. By the way, one thing you should
00:41:28 - Anthony Campolo
have like a do in this project store that kind of explains the prompt. I might help you with this because this is like super interesting, but this would be like very useful for people, I think, to understand like what.
00:41:39 - Scott Steinlage
Yes. And then it would help people to build other super cool apps for, you know, because maybe they don't understand the whole prompting process and what, what goes through and into it. You know what I'm saying? Like, there's a lot of information out there, but the more of it, the better. Right. Is what I think
00:41:55 - Martin Sosic
we actually have a blog post where we described in details how we built it, so you can even see the prompts. This is all open source, so you can see the whole source. It's relatively simple, to be honest. It's in Haskell, but it's really easy to read, I think.
00:42:10 - Scott Steinlage
I mean, I've tried prompting, putting prompts in some things and having it, and then feeding it information on the front and then having documents that it can search through inside of a vector database and stuff like that. And it did not work. I wanted to do it. Ended up completely terrible. I'm like, oh my gosh, how can I iterate this any better?
00:42:33 - Anthony Campolo
Can you pull up that blog post? I think I know what you're talking about. Is the one that's GBT web app generator, let AI create a full stack react, no code base based on your description. So what you're talking about.
00:42:43 - Matija Sosic
Oh yes, it's another one. This one is more like general intro and the other one is like how we built it, I think more like
00:42:48 - Anthony Campolo
can you pull the one you're talking about then? Because that's the one I'm finding when I Google it.
00:42:51 - Matija Sosic
Can you pull it up, Martin?
00:42:53 - Martin Sosic
Yeah, you can. Actually the first one, the one you're looking at should contain the link for the second one. It's like, you know, if you want more technical details. Right, yeah, just not block.
00:43:02 - Anthony Campolo
Oh, I see, yeah.
00:43:03 - Martin Sosic
Oh, you found it. Okay, good.
00:43:05 - Anthony Campolo
So basically it's how we built a GBT code agent that generates full stack web apps and reaction node explained simply.
00:43:13 - Martin Sosic
Here it is. Exactly. I would say it's perfect if you want to learn more about prompting. It even has like the tips, you know, how we handle different problems. A lot of stuff I'm also talking about here. Right. So it's.
00:43:26 - Anthony Campolo
Well, I think because as you said, you know, this is WASP specific.
00:43:29 - Martin Sosic
Right.
00:43:29 - Anthony Campolo
So I think a lot of people are going to see us, they're like, okay, this is cool, but how do I do this like a non wasp? I think some people get have that thought, you know.
00:43:38 - Martin Sosic
Exactly. No, and you could certainly do it, I mean in the. I think it's a bit hard to say because the whole space is developing
00:43:46 - Anthony Campolo
very fast and there's a lot of kind of implicit knowledge you need to have about how these things work and know what a prompt is, what a role is, what temperature is. There's terms, there's concepts, and it's like all of us are deep in this, so we're already immersed in all these things, but the average developer is just like, what AI, huh? I love it.
00:44:08 - Martin Sosic
Exactly. I mean it's still much more approachable than AI before. You don't need to know any ML.
00:44:13 - Anthony Campolo
Oh yeah, yeah. I tried to learn Python and run models back in the day. This is the way to go.
00:44:20 - Martin Sosic
It's amazing. Amazingly simple. What I also wanted to kind of mention is that interesting future would be the future where each web framework has their own kind of code agent. So no framework, also something like this. And then so basically what you have here is. It's not magic. Basically you have GPT which at every step is embedded with information about what. So suddenly you get GPT which knows about wasp. You could have the same thing for other frameworks. It requires doing something like this.
00:44:48 - Matija Sosic
Yeah, I mean this is like a smarter SaaS starter for your CRUD app, right? It's not like the thing where you pay a hundred dollars and download the template. It has your data models, basics, your basic CRUD tailored to your domain. So yeah, typically just like a smart CRUD starter.
00:45:07 - Martin Sosic
Yeah.
00:45:10 - Anthony Campolo
So can we run this app.
00:45:13 - Martin Sosic
Let's run it. Do you want me to quickly show the end of the rest of this prompt or should we go on?
00:45:18 - Anthony Campolo
I think we're going on the prompt. So we should show the app.
00:45:21 - Martin Sosic
Okay, let's go on. Let's show the cool stuff. Let's run the app. Give me just a second. Okay, so we have it here. Now we go run the app locally. We can download it. Okay. What is it? My Plans. Cool. I download My Plants. Let's see. Okay. Extracting it. Going in. Right, this is looking good. Okay, just, I will now kill the Wasp AI app. Let me just go to Downloads. Oops. Right, so My Plans. Okay, so this is basically the WASP app we generated. And I think we don't have to do anything smart. We can just.
00:46:21 - Matija Sosic
Just migrate and run.
00:46:22 - Martin Sosic
That's about it. Yeah. So.
00:46:24 - Matija Sosic
Oh, you want to.
00:46:24 - Martin Sosic
I guess first we do first quick DB migration.
00:46:29 - Matija Sosic
And this is even SQLite or not?
00:46:32 - Martin Sosic
This is SQLite.
00:46:33 - Matija Sosic
Yeah. Okay, so you don't need to run DB.
00:46:35 - Martin Sosic
Exactly. It will even tell me that if I try to do it. So basically now we're just installing, doing npm install in the background. Pretty much, right? Because at the end it is a React Node.js app. Yep. It has these motivational messages here, you know, to make sure you're entertained.
00:46:59 - Anthony Campolo
I like it.
00:47:00 - Martin Sosic
Yeah. If you want to see more, you know, you need to provide slower Internet connection. Okay. Right. So the database migration right now is running.
00:47:11 - Anthony Campolo
It's running a Prisma migration right now. So this is setting up your database tables so you can have the app set up. And it's doing it all with SQLite. So you don't have an external database set up somewhere else.
00:47:21 - Martin Sosic
Exactly. It did all the Prisma stuff in the background. Basically it called Prisma in the background. And that's it. Now you can start your web app. Let's see. So there's a chance it generated with no mistakes, or maybe it did some small mistakes. You never know with GPT. So let's see what it actually did. Okay, so we have something here.
00:47:43 - Anthony Campolo
We got a login. So question. Where does. So where does. How does the login work? Is it just like you have your own crypto libraries in here?
00:47:56 - Martin Sosic
Yeah, yeah. Basically it's Passport in the.
00:48:00 - Anthony Campolo
Ah, Passport.
00:48:01 - Martin Sosic
Okay.
00:48:01 - Anthony Campolo
Yeah, old school.
00:48:03 - Matija Sosic
Yeah, no need for third party services, I think.
00:48:06 - Anthony Campolo
Have you guys gotten a clerk partnership?
00:48:08 - Scott Steinlage
Yeah, I was going to ask about that earlier.
00:48:10 - Martin Sosic
Yeah, I was like, how are you
00:48:12 - Anthony Campolo
guys using auth for your clerk would be really nice. Right Here for real?
00:48:17 - Scott Steinlage
I was thinking the same exact thing.
00:48:18 - Martin Sosic
It could be an interesting addition just for sure. I mean, for now we have this kind of local solution. So you know, you certainly have to the local.
00:48:26 - Anthony Campolo
So it's nice because you have a whole self-contained app. This is how I learned to code in my boot camp. You have a self-contained Node app running on your computer.
00:48:33 - Martin Sosic
Exactly. Which is kind of like the old fashioned way, right?
00:48:37 - Anthony Campolo
Yeah, it's nice and it makes a lot of sense.
00:48:40 - Martin Sosic
Exactly. Okay, let's create some. We just need to create a user. Let's call it plant owner. Very imaginative. Password test1234. Oh, it's suggesting the same weak passwords. Okay, let's sign up. Oh, okay. Still working so far. That's good. By the way, we can see the logs here, right? So we can see what's happening. Yeah, responding nicely. Let's add a plant. Oh, nice. Okay, so, I don't know, hibiscus. Why not? I missed something, right? I missed one field.
00:49:15 - Matija Sosic
No, that's fine.
00:49:15 - Martin Sosic
Yeah, this is fine. Okay. And this is the number of. Okay. It would be nice if it said,
00:49:21 - Matija Sosic
you know, I think if you delete 0, it will show the label.
00:49:24 - Martin Sosic
Ah, it does. Okay. Nice watering interval. Only this.
00:49:28 - Matija Sosic
So sometimes it adds labels on top and sometimes it adds, you know, it just leaves it as placeholder. Yeah, depends.
00:49:35 - Martin Sosic
I'm still amazed. Amazed it does anything.
00:49:40 - Anthony Campolo
Right. The fact that it does the CRUD in the first place is so mind-blowing. It's like people with AI, they have this thing where they immediately jump to, like, it did this tiny thing wrong. But it did the thing at all. That's mind-blowing. The first time I started writing books and I'm like, computers write books now. People are like, whatever, like you wrote a book.
00:50:02 - Martin Sosic
But you know, it has mistakes. Right. It's amazing how we raise our standards very quickly.
00:50:07 - Matija Sosic
But, you know, it doesn't solve my whole life.
00:50:10 - Anthony Campolo
Right.
00:50:11 - Martin Sosic
So let's see. I just clicked plant and there you go. There you have it. It's a plant.
00:50:15 - Anthony Campolo
That's amazing. That's absolutely amazing.
00:50:18 - Martin Sosic
I have no idea like what's happening. It's taking over, by the way. You can see how, you know, the requests are being done. Made the request for the plant.
00:50:27 - Scott Steinlage
Yeah.
00:50:28 - Martin Sosic
New data. I have to admit, I have no idea what the details will do.
00:50:31 - Scott Steinlage
All right, let's find out. This is exciting.
00:50:33 - Martin Sosic
Yeah, I think it's one did we saw it. Yeah.
00:50:36 - Anthony Campolo
It just. It wants to give you just Another thing connected to the thing to give you one more thing to do. Because it's like it doesn't want to give you just the thing that is
00:50:45 - Scott Steinlage
typical of ChatGPT, that's for sure.
00:50:48 - Martin Sosic
It's pushing us forward. Right?
00:50:50 - Scott Steinlage
Yeah.
00:50:50 - Martin Sosic
I mean, you can also check it in the code.
00:50:52 - Anthony Campolo
But this is where. If you were. If I was interacting with ChatGPT and I said, hey, spit this app out for me. I could be like, hey, make a Details.
00:51:02 - Scott Steinlage
Details page. Right?
00:51:03 - Anthony Campolo
And then Details page.
00:51:05 - Martin Sosic
Yeah, yeah. So for example, that's something we will be adding into the generator, like multiple steps.
00:51:12 - Anthony Campolo
Right.
00:51:12 - Martin Sosic
Because it makes perfect sense. We just.
00:51:14 - Scott Steinlage
It's iteration.
00:51:16 - Martin Sosic
Yeah, we just. Yeah, exactly. Doing. Having iterations. Right? Yeah. Main reason we didn't do it so far is just because, you know, we. He didn't have time. So.
00:51:24 - Scott Steinlage
You know what's funny is that's interesting because this is. This is a great point. Like, who was it? What's the thing that's like Pipe Dream, Anthony, that we just did? Val. Val Town. Right. So Val Town.
00:51:40 - Anthony Campolo
Right.
00:51:40 - Scott Steinlage
Like they. You weren't able to like iterate on things, right? Just like in Pipe Dream and their chat or Chat GPT. Sorry, I guess it was Pipe Dream, they have an AI thing where it can spit out code for, you know, different things inside of Pipe Dream for creating connections to APIs and stuff. Right. And. But they didn't allow you to iterate on it. And so like, basically it gave you this thing and then you'd have to like manually iterate it yourself instead of going back and forth through Chat gbt, which is kind of cool. So it's like, I feel like that's the next big step for many people that are creating these different things is. Is the iteration piece because you need that human interaction to be able to go back and forth and correct it or help it or whatever.
00:52:18 - Martin Sosic
Yeah, it brings a lot more value on top. Right. This is a nice start here, but it gets to the whole new level. The thing is, I think just when we were building this, right, at this point, you already had something that was good enough to evaluate people. So it was like, yeah, let's push it. But mvp. But I agree.
00:52:39 - Scott Steinlage
No, it's cool.
00:52:40 - Martin Sosic
Much further.
00:52:41 - Scott Steinlage
This is amazing.
00:52:43 - Martin Sosic
Thank you. We can water it. And there we go. Ah, it doesn't water. Why not? And now we can check it, actually. Let's see.
00:52:53 - Scott Steinlage
Well, at least the buttons there. It knows it needs water.
00:52:56 - Martin Sosic
I'm looking at the button. I see it's not. It's just triggering anything. Not Trying hard. I mean, but you know, this is. Now, of course, we can just. You can take a quick look at it and see why that's not working. Let's open it in here. My plans. Right. So let's say source.
00:53:18 - Matija Sosic
I mean, just open the root and
00:53:21 - Martin Sosic
we can open the page. Right. We have a. Oh, sorry, yeah, I forgot I'm opening the.
00:53:27 - Matija Sosic
So we can easily explore it.
00:53:28 - Martin Sosic
I forgot I'm opening the project.
00:53:31 - Anthony Campolo
I don't know.
00:53:31 - Martin Sosic
Don't. Is this too small? Yes, it is. I trust myself.
00:53:38 - Matija Sosic
This command plus, can I maybe Control
00:53:40 - Martin Sosic
plus make this bigger? Yeah, there we go. Maybe Much better. Much better. Right, so you can see what's app. We have clients, we have pages. Let's quickly see homepage. What is that? Getting back in a little bit here. It's a react app. Tailwind. Right. It has. Atlantic has a water.
00:53:58 - Scott Steinlage
Nothing. Yeah, Water plant.
00:54:02 - Martin Sosic
Water plants function. Yeah. And then there is a use action. Water plant. Okay, so it's not. That's looking good actually. So let's see. We have one.
00:54:11 - Scott Steinlage
It is an importing water plant. It looks like.
00:54:14 - Martin Sosic
Yeah, yeah. And we have lost actions here. Yeah. So there it is. Here's the water plant thing, which does what defines a plant and then sets. This is actually. To be honest, this is actually looking good. So I guess we need to do some debugging.
00:54:34 - Matija Sosic
We didn't see any requests.
00:54:36 - Martin Sosic
Yeah, there are no requests happening, being triggered.
00:54:38 - Matija Sosic
Or maybe you just.
00:54:39 - Martin Sosic
I'm still clicking on it.
00:54:40 - Matija Sosic
Maybe because you are zoomed in too much in your terminal.
00:54:43 - Scott Steinlage
Now all you got to do is copy that code, go paste it in ChatGPT and tell it to fix it.
00:54:51 - Martin Sosic
But it's just here. Handle Water plant is not defined. Okay. I think it's just. So this is like as a submission kind of GPT hallucinations. Right. So look here. It says water plant function.
00:55:04 - Matija Sosic
Right? Search for handle.
00:55:06 - Martin Sosic
Where's the handle? Yeah. What am I doing wrong now? Who knows what I'm.
00:55:15 - Matija Sosic
What I'm clicking or in the action maybe.
00:55:17 - Martin Sosic
No, there is some small mistake here. I'm just not my.
00:55:21 - Scott Steinlage
Is that where I said it was? I didn't even read it.
00:55:24 - Martin Sosic
Yeah. Wait, what does it say? It says, hello, water plant is not defined when I click add plant page. Oh, there you go.
00:55:31 - Scott Steinlage
So it was in the app plant page.
00:55:32 - Martin Sosic
So we are here. I wonder why does it have two pages? To be honest?
00:55:36 - Anthony Campolo
Yeah,
00:55:38 - Martin Sosic
it seems like it went a bit.
00:55:40 - Matija Sosic
Oh, this is handle. Create plant. And we should also have handle.
00:55:42 - Scott Steinlage
There's watering right there. Well, that's interval Never mind.
00:55:45 - Martin Sosic
Sorry. There it is, right in the water point.
00:55:48 - Scott Steinlage
There you go.
00:55:48 - Martin Sosic
And it seems like it just forgot to write it. Yeah. So that's a. That's GPT. But fine. Like. So now the solution will be to kind of add that and it should work. Yeah.
00:56:01 - Matija Sosic
Even the action is already ready. So you should just call it.
00:56:03 - Martin Sosic
So just a small part missing. Should we bother with it now?
00:56:07 - Matija Sosic
No.
00:56:07 - Martin Sosic
Maybe. Maybe that's not.
00:56:09 - Matija Sosic
So you can see.
00:56:11 - Martin Sosic
Yeah. We can add one more plant.
00:56:13 - Scott Steinlage
I'm so curious.
00:56:16 - Martin Sosic
Sorry, Rose.
00:56:17 - Matija Sosic
Let's make it a real plan.
00:56:18 - Martin Sosic
By the way, for example, for. For. For the my plants thing, it is actually able to generate it. Ah yeah. So it actually has two pages. So it's actually able. GPT is actually able to generate these things even without mistakes. I would say every second try, every third try. If you go and you want to make something bigger, like a blog post. Sorry, blog. Whole blog. Right. With posts and comments and followers and stuff. There's. That's almost guaranteed that it will have some mistake every time.
00:56:45 - Scott Steinlage
Sure.
00:56:45 - Martin Sosic
But it's still silly mistakes like this. So it's not like some conceptual mistake. It's more like you hunting wrong names and stuff like that. And this is for example, where GPT4 does somewhat better. Yeah. Awesome.
00:57:04 - Anthony Campolo
Is there anything else you want to talk about?
00:57:07 - Matija Sosic
Yeah, I think some interesting points. As Martin said, improvements for the future. I think a big feature is going to be actually enable interactivity before you download the actual application. I don't know. The simplest way to do is just to allow for debugging. Basically you see something is wrong in the file. You can just say, hey, this file and the missing function, for example.
00:57:28 - Scott Steinlage
Or. Preview option.
00:57:29 - Martin Sosic
Yeah.
00:57:29 - Matija Sosic
Or you can just regenerate that part of the code.
00:57:33 - Martin Sosic
Yeah. Preview option would also be.
00:57:34 - Matija Sosic
Preview option is also just go to gitpod replit or something. That's going to be fun. I think those are the main features we had in mind for the next releases.
00:57:44 - Scott Steinlage
Super cool.
00:57:46 - Martin Sosic
Yeah, awesome.
00:57:47 - Anthony Campolo
Is there anything else about WASP in general you want to talk about?
00:57:51 - Matija Sosic
About wasp? I mean, besides the AI part, which is going to be improving. We're always building new features. I think just recently we have full stack type safety for TypeScript. We added like. We are improving the LSP. It's much easier to use now. It's almost like, you know, regular ID stuff is working as you would expect. And we'll have a new launch by the end of September, you know.
00:58:12 - Martin Sosic
Yeah. Some big changes are coming. We're doing a bigger restructuring of wasp, which should make it kind of, I mean, right now WASP is using a lot of the JS ecosystem, but it's still a bit closed in a couple of places. It's all kind of going to open up now, so it's going to look much more like your normal JavaScript npm package project. So yeah, that's also pretty exciting.
00:58:35 - Matija Sosic
So, yeah, I would say stay tuned, follow us on Twitter and join our Discord. Discord is the best way to stay in touch. Plus, you know, stars on GitHub. If you like the project, that's the best way to show your support and
00:58:46 - Martin Sosic
to make Matia happy.
00:58:47 - Matija Sosic
Yeah.
00:58:48 - Martin Sosic
Awesome.
00:58:49 - Anthony Campolo
We'll include all those links in the show notes. Thank you so much, guys, for joining us and running through this. Thank you again. A lot of technical things to figure out to get this to work, but we got there. Really, really impressive.
00:59:00 - Martin Sosic
Yeah, it's the original developer experience, right? So that's super cool.
00:59:05 - Matija Sosic
That's how it looks in the real life, you know.
00:59:06 - Martin Sosic
Yeah. Thank you guys also for having us.
00:59:10 - Scott Steinlage
Yeah, awesome. Thank you so much, guys. Greatly appreciate it. All right, everybody, thanks for watching and we'll see you in the next one.
00:59:18 - Anthony Campolo
In the next one. In the next one.
00:59:21 - Matija Sosic
Peace.
00:59:23 - Martin Sosic
Okay, bye, guys.