WEBVTT 1 00:00:05.120 --> 00:00:09.199 Hey, folks, welcome back to another episode of JavaScript Jabber. 2 00:00:09.599 --> 00:00:12.679 This week, on our panel, we have Steve Edwards. 3 00:00:13.000 --> 00:00:14.240 You had to think about which one you were going 4 00:00:14.320 --> 00:00:15.560 to go to their first second, didn't you. 5 00:00:16.440 --> 00:00:19.160 Well, I didn't want to say dad Joker. Oh sorry 6 00:00:19.160 --> 00:00:20.199 what my brain said? 7 00:00:20.399 --> 00:00:22.679 Oh well that's what most people think. I'll do my 8 00:00:22.760 --> 00:00:25.000 age as yo yo yo, come in at you live 9 00:00:25.039 --> 00:00:26.920 from cold and rainy Portland. 10 00:00:28.120 --> 00:00:29.839 We also have Dan Shapier. 11 00:00:30.359 --> 00:00:33.799 Hi from a freezy tel Aviv at fifty degrees fahrenheit 12 00:00:34.240 --> 00:00:38.119 nine degrees celsius, which is, you know, literally freezing for us. 13 00:00:38.359 --> 00:00:40.920 That's freezing. That would be that's above where I'm at 14 00:00:40.920 --> 00:00:42.000 now in the middle of the day. 15 00:00:43.039 --> 00:00:45.759 Yeah. I'm Charles Maxwood from top Ed Devson. Yeah. 16 00:00:45.799 --> 00:00:48.880 It's it's forty some degrees here. Yeah, and I went 17 00:00:48.920 --> 00:00:50.320 for a walk, so. 18 00:00:50.759 --> 00:00:52.240 Yeah, I know it's far better for us. 19 00:00:52.439 --> 00:00:52.640 Man. 20 00:00:53.039 --> 00:00:54.600 Yeah. 21 00:00:54.640 --> 00:00:57.479 We also have Lee Robinson. Lee, welcome back. 22 00:00:58.439 --> 00:01:01.840 It's good to be here. It's fifty eight degrees fahrenheit here, 23 00:01:01.920 --> 00:01:05.359 which is like a sauna because it was negative fahrenheit 24 00:01:05.519 --> 00:01:06.400 like last week. 25 00:01:06.680 --> 00:01:11.079 So yeah, I was gonna say when I come out there, 26 00:01:11.120 --> 00:01:12.719 but if you're getting negatives, forget it. 27 00:01:13.239 --> 00:01:16.200 Yeah, that's classic Midwest. It's very cold. 28 00:01:17.120 --> 00:01:17.560 Yeah. 29 00:01:17.599 --> 00:01:20.159 So it's been what a year or so since we 30 00:01:20.200 --> 00:01:21.879 had you on What's New. 31 00:01:23.000 --> 00:01:26.000 A lot, there's lots we can talk about through next Yes, 32 00:01:26.159 --> 00:01:29.599 per Sell, V zero and AI, all sorts of fun stuff. 33 00:01:30.319 --> 00:01:32.280 Yeah, sounds like you're mostly doing the same kind of 34 00:01:32.280 --> 00:01:33.519 thing that you were doing last time. 35 00:01:34.480 --> 00:01:35.920 Yes, Yes, definitely. 36 00:01:36.760 --> 00:01:39.840 I was saying before we started that it's pretty amazing 37 00:01:40.079 --> 00:01:43.959 to me that such a small company relatively speaking, of course, 38 00:01:44.040 --> 00:01:46.640 because you're a multi billion dollar company with a few 39 00:01:46.719 --> 00:01:51.439 hundred employees, but it's still relatively small, is able to 40 00:01:51.480 --> 00:01:54.920 have such a huge impact on web development. Like it 41 00:01:55.000 --> 00:01:58.040 seems like everything is kind of revolving around you these 42 00:01:58.120 --> 00:01:59.599 days in one way or another. 43 00:02:01.280 --> 00:02:03.040 One thing that I think has worked well for us 44 00:02:03.239 --> 00:02:06.400 that Ghermo likes to call recursive founder mode, which I 45 00:02:06.400 --> 00:02:08.120 think is kind of funny if you've see in all 46 00:02:08.159 --> 00:02:11.280 the discourse about founder mode, is trying to hire former 47 00:02:11.319 --> 00:02:14.639 founders or people who have that energy and then giving 48 00:02:14.680 --> 00:02:18.039 them ownership and agency over a domain and letting them 49 00:02:18.319 --> 00:02:20.719 kind of run with it. So a good example of 50 00:02:20.759 --> 00:02:24.000 this is just last week we released a flags SDK 51 00:02:24.240 --> 00:02:27.240 for feature flags, an open source toolkit you can use 52 00:02:27.319 --> 00:02:30.719 to implement feature flags correctly in your app using the server, 53 00:02:30.919 --> 00:02:34.080 preventing layout shift with any feature flag provider that you want. 54 00:02:34.479 --> 00:02:36.719 And this is kind of a founder led thing. We 55 00:02:36.759 --> 00:02:39.439 have Dominic who is really owning this project from end 56 00:02:39.439 --> 00:02:41.639 to end. It's a very small team working on this, 57 00:02:41.759 --> 00:02:45.000 but small teams can do amazing things when empowered and 58 00:02:45.080 --> 00:02:46.960 given the right direction and resources. 59 00:02:47.360 --> 00:02:50.599 I was curious if it's based on edge computing. 60 00:02:51.479 --> 00:02:56.479 So we do really recommend people to use the server 61 00:02:56.680 --> 00:03:01.479 in general because most of the jank that you see 62 00:03:01.479 --> 00:03:04.360 in websites that have feature flags is because they wait 63 00:03:04.400 --> 00:03:06.639 for the initial document to get on the page, the 64 00:03:06.680 --> 00:03:10.080 first bundle of JS to load, and then they're evaluating 65 00:03:10.159 --> 00:03:12.520 what feature flags are on and you get that weird 66 00:03:12.840 --> 00:03:16.039 shift of maybe one experiment and then the other. Or 67 00:03:16.319 --> 00:03:18.719 you also see this with authentication, like the logged out 68 00:03:18.759 --> 00:03:20.919 state and then it switches to the logged in state. 69 00:03:21.000 --> 00:03:25.039 So we are strongly pushing for server side experimentation server 70 00:03:25.199 --> 00:03:28.840 side flagging, and to do that, generally you want to 71 00:03:28.840 --> 00:03:32.319 put your flags close to where your database is, so 72 00:03:32.360 --> 00:03:34.759 it's not necessarily that the flags need to live at 73 00:03:34.800 --> 00:03:37.680 the edge. Generally, they'd live at origin by your database, 74 00:03:38.080 --> 00:03:41.159 but you can still do some things early in the 75 00:03:41.240 --> 00:03:44.159 routing layer at the edge. Maybe that's redirects or rewrites. 76 00:03:45.240 --> 00:03:48.759 Maybe that's pre computing multiple different variants of the page 77 00:03:49.039 --> 00:03:51.840 and putting the static shells of those pages at the edge, 78 00:03:51.879 --> 00:03:54.479 like at a CDN layer, so you can fetch those early. 79 00:03:54.800 --> 00:03:56.400 So it's kind of a bit of both. We want 80 00:03:56.439 --> 00:04:00.639 to use the edge layer for the static assets, uh, 81 00:04:00.759 --> 00:04:04.759 and then put your data next to your compute at origin. 82 00:04:05.599 --> 00:04:09.319 Yeah. What some people actually do to reduce shift in 83 00:04:09.400 --> 00:04:13.199 these scenarios when they use client side is to actually 84 00:04:13.400 --> 00:04:17.319 intentionally put render blocking scripts at the very top of 85 00:04:17.360 --> 00:04:20.639 the page. But that obviously comes at a very high 86 00:04:20.680 --> 00:04:24.560 cost for coor vitals Totally. 87 00:04:24.720 --> 00:04:29.160 I think the biggest offender that I see is teams 88 00:04:29.240 --> 00:04:32.360 who don't realize that they're actually leaking all of their 89 00:04:32.399 --> 00:04:35.600 flags on the client side. They're using client side experimentation. 90 00:04:35.759 --> 00:04:38.399 But if you inspect the dom or you you know, 91 00:04:38.439 --> 00:04:41.000 do some magic in your deb tools, you can actually 92 00:04:41.079 --> 00:04:44.600 see every single experiment or every single flag, and you know, 93 00:04:45.079 --> 00:04:46.120 for the you. 94 00:04:46.160 --> 00:04:48.000 Know, it's not necessarily bad. 95 00:04:48.680 --> 00:04:52.639 It's not it's not necessarily bad. Although sometimes I think 96 00:04:53.720 --> 00:04:56.480 maybe on a large enough team. The developer thinks that 97 00:04:56.680 --> 00:04:59.360 is a secret value, and in reality it is not. 98 00:05:00.040 --> 00:05:02.160 They don't realize that they're actually exposing that to the 99 00:05:02.439 --> 00:05:05.040 client side. So it can be fine if you know 100 00:05:05.079 --> 00:05:08.879 what you're doing. I've just seen it misused a few times. 101 00:05:09.759 --> 00:05:12.319 Don't put credentials in feature flex. 102 00:05:12.519 --> 00:05:18.120 Yes, yes, definitely, don't put credentials in your source code 103 00:05:18.160 --> 00:05:18.480 at all. 104 00:05:19.240 --> 00:05:19.839 Yeah. 105 00:05:20.000 --> 00:05:21.959 One thing that I want to just touch on here 106 00:05:22.000 --> 00:05:26.839 because I love the idea of kind of the internal entrepreneur. 107 00:05:28.480 --> 00:05:31.560 I have to say that when I've worked like contracts 108 00:05:31.720 --> 00:05:34.920 or full time jobs, a lot of times it's we're 109 00:05:34.920 --> 00:05:36.639 going to give you features and then you're just going 110 00:05:36.720 --> 00:05:41.000 to implement them. And I really like that open feeling 111 00:05:41.120 --> 00:05:46.720 of hey, we need this solution, go make it like that. 112 00:05:46.720 --> 00:05:49.079 That would kind of be if I didn't want to 113 00:05:49.120 --> 00:05:52.439 take the entrepreneurial risk, that would be my ideal job. 114 00:05:53.160 --> 00:05:57.560 So Yeah, we like to think about empowering startups within 115 00:05:57.560 --> 00:06:00.759 a startup. So another good example of this is our 116 00:06:00.759 --> 00:06:04.639 productvzero dot dev, which allows you to very quickly build 117 00:06:04.680 --> 00:06:08.319 websites and web applications with AI or just better understand 118 00:06:08.399 --> 00:06:11.120 how to use web tools like next yess and react 119 00:06:11.240 --> 00:06:15.319 through AI, and that team is very small and it's 120 00:06:15.399 --> 00:06:19.000 led by a former founder who really understands how to 121 00:06:19.000 --> 00:06:21.720 build great products and has been given you know, a 122 00:06:21.759 --> 00:06:25.360 budget autonomy to build this product into end and really 123 00:06:25.399 --> 00:06:29.240 monitor success and own their numbers. And it's it's working 124 00:06:29.279 --> 00:06:29.759 pretty well. 125 00:06:30.360 --> 00:06:35.319 So, since you didn't mention, V zero and AI seems 126 00:06:35.360 --> 00:06:37.040 to be a fairly popular topic. 127 00:06:37.720 --> 00:06:39.639 Yeah, not around here. 128 00:06:40.279 --> 00:06:41.639 Yeah, what does AI stand for? 129 00:06:42.480 --> 00:06:48.040 Okay, Apple Intelligence? I think there you go. Yeah, anyway, anyway, 130 00:06:49.439 --> 00:06:53.519 what can you tell us about V zero? I mean 131 00:06:54.040 --> 00:06:57.439 I've seen it, I played with it. It's really cool, 132 00:06:57.639 --> 00:07:01.120 but you know what, what can you tell us about it? 133 00:07:01.800 --> 00:07:05.839 Yeah? So we've been working on vzo for over a 134 00:07:05.920 --> 00:07:09.800 year now. The first version that we released was kind 135 00:07:09.800 --> 00:07:14.680 of our first experimentation into the generative UI space, taking 136 00:07:14.720 --> 00:07:16.800 these new large language models. At the time that we're 137 00:07:16.839 --> 00:07:19.639 getting really really good at being able to produce code 138 00:07:19.839 --> 00:07:22.879 and figure out how we could help them better craft 139 00:07:23.439 --> 00:07:27.240 the front end, you know, do animations, do CSS. And 140 00:07:27.439 --> 00:07:30.839 over time we've just been slowly and slowly adding more functionality. 141 00:07:31.160 --> 00:07:34.680 So vzero now supports building full stack applications. You can 142 00:07:34.759 --> 00:07:39.600 integrate through databases through Purcell, you can add secrets or 143 00:07:39.720 --> 00:07:42.920 environment variables through for sell to connect to any external services, 144 00:07:43.199 --> 00:07:46.319 maybe some AWSQ service you want to use, could be 145 00:07:46.360 --> 00:07:49.680 really anything. And we've also launched a community that has 146 00:07:49.720 --> 00:07:53.439 published many different VZO generations that you can fork and 147 00:07:53.519 --> 00:07:57.040 get started with. So what once started as a very 148 00:07:57.079 --> 00:07:59.879 small tool to allow you to quickly build some UIs 149 00:08:00.319 --> 00:08:03.959 is now this kind of full featured prototyping and app 150 00:08:04.040 --> 00:08:07.680 building platform that allows devs to take an idea, whether 151 00:08:07.800 --> 00:08:09.959 something they want to build from a screenshot or a 152 00:08:09.959 --> 00:08:13.920 prompt or a pre existing kind of template, take it, 153 00:08:14.079 --> 00:08:17.720 fork it, prompt it, turn it into something that they 154 00:08:17.879 --> 00:08:19.800 would like to build or they would like to use, 155 00:08:20.199 --> 00:08:21.959 and then deployed to purcell and just a couple of 156 00:08:22.000 --> 00:08:24.800 clicks and have that thing actually live on the internet 157 00:08:24.839 --> 00:08:27.279 to share. And since we've been slowly adding more of 158 00:08:27.279 --> 00:08:31.000 these features, the growth trajectory of Vizerra has been it's 159 00:08:31.040 --> 00:08:34.039 been really wild to see. Obviously, AI is very popular 160 00:08:34.080 --> 00:08:36.360 right now and lots of people are interested in getting 161 00:08:36.399 --> 00:08:39.039 excited in how these tools can help them kind of 162 00:08:39.159 --> 00:08:42.279 level up their careers as developers. But I think more 163 00:08:42.360 --> 00:08:47.320 interestingly bring in a whole new group of people into 164 00:08:47.519 --> 00:08:49.960 what it means to be a developer. It's less about 165 00:08:49.960 --> 00:08:52.919 writing the code for these people. It's more about they 166 00:08:52.919 --> 00:08:56.039 have great ideas and they now have tools that actually 167 00:08:56.080 --> 00:08:59.120 allow them to build those ideas. So think about, for example, 168 00:08:59.159 --> 00:09:02.159 the product market is the product managers, maybe some of 169 00:09:02.159 --> 00:09:05.879 the designers who don't have as much coding experience, A 170 00:09:05.879 --> 00:09:08.240 lot of them are being able to use tools like 171 00:09:08.279 --> 00:09:11.039 the Zero and actually build and publish their ideas. 172 00:09:11.519 --> 00:09:13.639 So I have a ton of questions about that. So 173 00:09:13.720 --> 00:09:16.200 first of all, do you want to start? 174 00:09:16.919 --> 00:09:19.720 No, go ahead, Actually let me. 175 00:09:20.919 --> 00:09:23.600 I'm gonna get in. So I don't worship at the 176 00:09:23.600 --> 00:09:27.840 react alter myself. I'm a view DV myself, and so 177 00:09:28.200 --> 00:09:29.879 I tend to work more with you and Laura Vellen, 178 00:09:29.919 --> 00:09:33.919 Nursha and stuff. So I've heard Burssell talked a lot 179 00:09:33.919 --> 00:09:38.080 about but I don't really know it, and I suspect 180 00:09:38.080 --> 00:09:39.639 there's a lot of people listening who might not know 181 00:09:39.720 --> 00:09:40.279 it as well. 182 00:09:40.840 --> 00:09:41.519 So before you. 183 00:09:41.519 --> 00:09:45.159 Dive anymore into Dan's question that I was wondering if 184 00:09:45.200 --> 00:09:48.360 you could just give an overview on what Brossell is 185 00:09:48.840 --> 00:09:51.759 and who it's target audience is, I guess. 186 00:09:51.639 --> 00:09:55.399 Yeah, absolutely, Bricell is a developer cloud. So we're trying 187 00:09:55.440 --> 00:09:58.200 to give you, as a developer all the tools you 188 00:09:58.240 --> 00:10:03.240 need to build websites and applications, from hosting and managing 189 00:10:03.320 --> 00:10:08.879 your react or view or Spelt applications, to having observability 190 00:10:08.919 --> 00:10:14.200 into your production infrastructure usage, integrating with databases or other 191 00:10:14.279 --> 00:10:18.120 back end services and other cloud providers or hyperscalers, bringing 192 00:10:18.159 --> 00:10:20.600 all of these tools into kind of one place that 193 00:10:20.639 --> 00:10:22.720 you can use as you know, you put all your 194 00:10:22.759 --> 00:10:25.120 lego bricks together to actually be able to build your 195 00:10:25.720 --> 00:10:29.639 your amazing piece of art. And that's that's Brissell at 196 00:10:29.679 --> 00:10:30.840 a fifty thousand foot view. 197 00:10:31.120 --> 00:10:34.600 So now you just mentioned VT. I'm sorry you mentioned View, 198 00:10:34.679 --> 00:10:37.759 but I'm looking at your supported frameworks docs and I 199 00:10:37.759 --> 00:10:39.120 don't see you listed anywhere. 200 00:10:39.759 --> 00:10:44.559 Yeah, we Next and Sevelt. I see Next, and now 201 00:10:44.559 --> 00:10:48.799 we support Next is the primary way we see people 202 00:10:48.799 --> 00:10:52.039 deploying view applications to Rosell, but we also support doing 203 00:10:52.279 --> 00:10:55.240 a more traditional just client only view application as well. 204 00:10:55.639 --> 00:10:58.840 Generally we like to recommend NEXT. I think they're building 205 00:10:58.840 --> 00:11:01.240 something really great with the framework. But also if you 206 00:11:01.279 --> 00:11:05.600 want to use a like VT and view application for example, 207 00:11:05.600 --> 00:11:06.519 that's also supported. 208 00:11:07.519 --> 00:11:12.600 Okay, So going back to V zero, first of all, 209 00:11:13.120 --> 00:11:16.639 V zero V one. 210 00:11:16.240 --> 00:11:18.960 Yeah, right, it's like, Okay, as we continue to iterate 211 00:11:19.039 --> 00:11:22.159 on it, do we bump above the version number? No, 212 00:11:22.600 --> 00:11:25.399 the naming it's it's kind of funny. 213 00:11:27.320 --> 00:11:27.440 One. 214 00:11:28.159 --> 00:11:30.879 Yeah, yeah, yeah, I didn't expect this to happen, but 215 00:11:31.080 --> 00:11:33.639 we've seen a lot of people have a play on 216 00:11:34.399 --> 00:11:37.120 the name of V zero. So we saw an email zero. 217 00:11:37.840 --> 00:11:41.320 I think there's a YC company now doing a zero 218 00:11:41.679 --> 00:11:43.840 or something like that. So it's been fun to see 219 00:11:43.879 --> 00:11:47.000 other people take this idea of gen ui and apply 220 00:11:47.000 --> 00:11:50.879 it to other domains, emails, mobile apps, et cetera. But really, 221 00:11:50.919 --> 00:11:54.159 the whole intention behind the name was you can get 222 00:11:54.240 --> 00:11:58.120 started here. It's not necessarily saying it's gonna replace your 223 00:11:58.240 --> 00:12:04.039 production code. It's not going to, you know, prevent the 224 00:12:04.080 --> 00:12:06.559 need from still writing a lot of code. It's helping 225 00:12:06.600 --> 00:12:08.639 you get started quickly and building something great. 226 00:12:09.519 --> 00:12:13.320 By the way, there's the void zero that's even us 227 00:12:13.399 --> 00:12:14.080 in your company. 228 00:12:14.519 --> 00:12:18.200 Yeah, yeah, it was funny. I think that name was 229 00:12:18.279 --> 00:12:21.559 after V zero, but then it's pretty pretty similarly named, 230 00:12:21.559 --> 00:12:22.399 which is kind of funny. 231 00:12:22.639 --> 00:12:23.000 Yeah. 232 00:12:23.080 --> 00:12:27.840 So the fact that it's V zero kind of and 233 00:12:27.919 --> 00:12:30.440 also looking at the demos that you primarily show, it 234 00:12:30.480 --> 00:12:33.519 seems to indicate that what you're building is literally version 235 00:12:33.679 --> 00:12:40.480 zero of a product that it's taking either an idea, 236 00:12:40.799 --> 00:12:44.720 a concept like you said, maybe an image or a screenshot. 237 00:12:46.080 --> 00:12:48.960 Does it also support Figma or something like that. 238 00:12:49.679 --> 00:12:52.279 Yeah. Yeah, you can paste in a Figma link and 239 00:12:52.840 --> 00:12:55.559 it can understand your design system, colors and what's on 240 00:12:55.600 --> 00:12:58.360 the page and then start building an UI from there. 241 00:12:58.879 --> 00:13:04.600 Yeah. And basically it turns that into code that interactively 242 00:13:04.679 --> 00:13:07.639 replicates the design that you gave to it, correct. 243 00:13:08.240 --> 00:13:11.759 Yeah. Yeah. And the big difference in the way to 244 00:13:11.840 --> 00:13:15.559 think about this versus a no code or a low 245 00:13:15.600 --> 00:13:18.919 code tool is generally with the previous generation of tools 246 00:13:18.960 --> 00:13:23.039 kind of pre AI was the code that you got 247 00:13:23.080 --> 00:13:25.759 out from the low code or no code tool was 248 00:13:25.799 --> 00:13:29.559 not necessarily production quality code. It was not code that 249 00:13:29.720 --> 00:13:32.039 was using the popular frameworks of the world that you 250 00:13:32.080 --> 00:13:34.919 could then take and kind of eject and actually start 251 00:13:34.919 --> 00:13:38.399 building your application into something that was a real app. 252 00:13:38.440 --> 00:13:41.720 It was more so like maybe just a big blob 253 00:13:41.759 --> 00:13:45.440 of HTML with some JS in there. It wasn't using 254 00:13:45.480 --> 00:13:48.679 the ecosystem of the MPM libraries that we have today 255 00:13:49.039 --> 00:13:52.080 versus kind of rebuilding everything from scratch, and it wasn't 256 00:13:52.120 --> 00:13:56.519 also built on top of reusable accessible component primitives, which 257 00:13:56.559 --> 00:13:59.840 is something that zero does use. Which is a component 258 00:14:00.000 --> 00:14:03.440 distribution system called chad cyn ui M. 259 00:14:04.240 --> 00:14:09.879 Yeah, I'm familiar of course with chat CN. Chats chad CN. 260 00:14:11.080 --> 00:14:15.519 It's a component library UI component library popular one, probably 261 00:14:15.879 --> 00:14:16.679 popular one. 262 00:14:17.279 --> 00:14:19.840 It's a it has a unique approach because the traditional 263 00:14:19.879 --> 00:14:23.480 way of distributing component libraries, you know, think about maybe 264 00:14:24.159 --> 00:14:26.600 material UI is a very popular one, for example, from 265 00:14:26.720 --> 00:14:30.960 from Google. They build these abstractions that are very good. 266 00:14:31.480 --> 00:14:34.240 They get published as MPM packages, and then you pull 267 00:14:34.279 --> 00:14:36.159 them down and you use them in your app. But 268 00:14:36.240 --> 00:14:38.440 what happens when you want to take that and kind 269 00:14:38.440 --> 00:14:42.240 of transform it to your own design system, your own brand. Well, 270 00:14:42.279 --> 00:14:45.480 you can extend them to an amount, but you don't 271 00:14:45.519 --> 00:14:49.080 control the code. You're using the substraction through MPM, and 272 00:14:49.120 --> 00:14:51.240 you can't go in and actually modify the source code 273 00:14:51.639 --> 00:14:54.840 very easily. Of course, there's hacks, right. What chadzyen is 274 00:14:54.840 --> 00:14:56.960 trying to do is it's more of a component library 275 00:14:57.759 --> 00:15:00.679 distribution system or a way for you to build your 276 00:15:00.720 --> 00:15:03.879 own component library. So it gives you all of the code. 277 00:15:03.960 --> 00:15:06.600 You can effectively copy paste it into your you know, 278 00:15:06.639 --> 00:15:09.600 into your editor, into your project tweak all the tokens 279 00:15:09.639 --> 00:15:13.200 and the design system colors, and install packages, delete packages, 280 00:15:13.720 --> 00:15:15.720 and then there's a nice CLI that helps you add 281 00:15:15.759 --> 00:15:17.440 new components as as you need them. 282 00:15:18.720 --> 00:15:20.440 I gotcha, I have to say. 283 00:15:20.480 --> 00:15:22.600 I went on there and I mashed the button for 284 00:15:22.639 --> 00:15:27.360 a landing page, and uh, it gave me a next 285 00:15:27.399 --> 00:15:31.840 st app and then I clicked preview and it said 286 00:15:31.840 --> 00:15:34.159 it couldn't load because I could find the CSS file. 287 00:15:34.600 --> 00:15:38.240 But I mean, the code looks good. Is Yeah, it's 288 00:15:38.320 --> 00:15:41.720 just a little but it's a I and it generates 289 00:15:41.759 --> 00:15:43.519 and sometimes misses things I've seen. 290 00:15:43.799 --> 00:15:45.559 Yeah, you should try the Is there a fixed button 291 00:15:45.600 --> 00:15:50.480 in the bottom left. Ideally if there's an air thrown, 292 00:15:50.519 --> 00:15:52.159 there will be a little fixed button. Which is a 293 00:15:52.159 --> 00:15:54.919 good time to talk about the general philosophy of these tools, 294 00:15:55.080 --> 00:15:56.759 part of the reason why we called it V zero two. 295 00:15:56.799 --> 00:16:01.639 With with these you know, non determinis AI systems, they're 296 00:16:01.639 --> 00:16:03.960 going to get things wrong right there. It's never going 297 00:16:04.039 --> 00:16:04.639 to be perfect. 298 00:16:05.360 --> 00:16:09.679 And our generative it predicts the next word or in 299 00:16:09.720 --> 00:16:11.600 this case, the next token of your code. 300 00:16:12.039 --> 00:16:13.399 Yep, and so it'll miss stuff. 301 00:16:13.480 --> 00:16:16.679 Yeah, totally. So one thing we've tried to do from 302 00:16:16.799 --> 00:16:20.639 the unbounded space of you can generate any code in 303 00:16:20.679 --> 00:16:23.759 the world. To try to narrow that down into something 304 00:16:23.799 --> 00:16:28.000 that's predictably outputting consistent UI is we try to add 305 00:16:28.039 --> 00:16:30.759 a lot of systems and pieces in place to narrow 306 00:16:30.799 --> 00:16:34.039 in and improve the quality ratio, because ideally, at the 307 00:16:34.080 --> 00:16:35.799 end of the day, as a consumer of this product, 308 00:16:35.840 --> 00:16:39.240 you want quality generations, both in the UI itself but 309 00:16:39.279 --> 00:16:42.679 in getting working functional code. And the biggest lever that 310 00:16:42.679 --> 00:16:45.240 we've done to do that is really focusing in on 311 00:16:45.279 --> 00:16:48.960 our niche, which is React applications. That's the pipeline where 312 00:16:49.000 --> 00:16:52.000 we're reviewing and ensuring that the data that goes into 313 00:16:52.039 --> 00:16:54.519 the system is really high quality, and also reviewing the 314 00:16:54.519 --> 00:16:57.519 output if somebody has a bad time. So, yeah, I'm 315 00:16:57.519 --> 00:16:58.360 curious if that works for you. 316 00:16:58.840 --> 00:17:03.519 So questions about that, First of all, which model are 317 00:17:03.559 --> 00:17:04.039 you using? 318 00:17:04.880 --> 00:17:07.799 There's a bunch. Actually, generally you can think about it 319 00:17:08.200 --> 00:17:12.799 as a big decision tree. Because the user puts in 320 00:17:12.799 --> 00:17:15.480 a prompt. That prompt, we first kind of have to 321 00:17:15.480 --> 00:17:17.920 classify what they were even trying to do. Were they 322 00:17:17.960 --> 00:17:21.079 trying to just ask a knowledge question, were they wanting 323 00:17:21.119 --> 00:17:23.880 to generate some code. There's a lot of branches that 324 00:17:23.960 --> 00:17:25.880 can go down and then even as it goes down 325 00:17:25.960 --> 00:17:28.880 the branches, we might want to flip between models on 326 00:17:28.920 --> 00:17:32.759 the fly depending on the quality of one model, or 327 00:17:32.799 --> 00:17:34.799 maybe a new model comes out. I think the new 328 00:17:35.200 --> 00:17:38.559 claud model was just released today, for example. So we 329 00:17:38.680 --> 00:17:42.000 try to make this system that helps us get the 330 00:17:42.000 --> 00:17:45.200 best quality output, and then we abstract away everything else 331 00:17:45.200 --> 00:17:47.599 in the middle and just focus on having really high 332 00:17:47.680 --> 00:17:51.079 quality data in and evals or tests to ensure that 333 00:17:51.319 --> 00:17:52.480 the quality is predictable. 334 00:17:53.400 --> 00:17:55.880 Or you could use deep sick if you don't mind 335 00:17:55.920 --> 00:17:58.839 a bit of Chinese propaganda on your page. 336 00:18:00.079 --> 00:18:04.079 Well maybe, but you can also run deep seek. I 337 00:18:04.079 --> 00:18:09.599 think it's unbiased on like a lama or something, and 338 00:18:09.640 --> 00:18:11.680 then you don't have all the filters in front of it. 339 00:18:11.720 --> 00:18:14.440 I mean, they still trained it on their own data, 340 00:18:14.519 --> 00:18:16.960 and so if you ask it questions about. 341 00:18:17.640 --> 00:18:19.160 History that are inconvenient, it. 342 00:18:19.240 --> 00:18:21.759 Just doesn't give you a correct answer because it has 343 00:18:21.799 --> 00:18:22.599 no idea. 344 00:18:22.799 --> 00:18:25.880 But yeah, I think a lot of the enforced were 345 00:18:25.920 --> 00:18:29.960 coming at the inference time compute. The test time compute 346 00:18:30.000 --> 00:18:32.480 was where they were doing a lot of the cloud 347 00:18:32.480 --> 00:18:34.160 hosted version of deep seq was where they were doing 348 00:18:34.240 --> 00:18:37.359 a lot of the biasing towards the answers that they 349 00:18:37.400 --> 00:18:40.519 didn't want to answer. So the open source models definitely 350 00:18:40.519 --> 00:18:42.400 in the training data, they are still biased in a 351 00:18:42.400 --> 00:18:45.960 certain direction, but you can get you can get better 352 00:18:46.000 --> 00:18:47.960 results by doing it that way. Which I've already seen 353 00:18:48.000 --> 00:18:50.559 a few models on hugging Face, and I think there's 354 00:18:50.599 --> 00:18:52.799 like a Lama distilled version as well. 355 00:18:53.599 --> 00:18:55.799 So yeah, I've played with I've played with deep Seek, 356 00:18:55.839 --> 00:18:57.119 and I've played with some of the other ones and 357 00:18:57.440 --> 00:18:59.880 it is really it's really good in a lot. 358 00:18:59.720 --> 00:19:04.319 Of So the name v zero seems to indicate that 359 00:19:04.400 --> 00:19:07.440 the focus on the product is on the initial generation 360 00:19:07.880 --> 00:19:13.880 and less so about taking an existing app and modifying 361 00:19:13.960 --> 00:19:17.480 it or adding capabilities into it. Is that correct or 362 00:19:17.599 --> 00:19:19.039 is that just my interpretation? 363 00:19:19.960 --> 00:19:22.400 That was definitely where we got started. As we've added 364 00:19:22.480 --> 00:19:25.000 more functionality to the product, we're now getting to a 365 00:19:25.000 --> 00:19:27.519 point where you know, in the future you'll be able 366 00:19:27.599 --> 00:19:30.680 to connect to a get repo and bring in the 367 00:19:30.680 --> 00:19:34.000 code you already have in your application and make changes 368 00:19:34.200 --> 00:19:37.519 from there. So I think in the future V zero 369 00:19:37.599 --> 00:19:40.920 will evolve to be more of your general purpose AI 370 00:19:40.960 --> 00:19:43.880 assistant that you can use for many different things, or 371 00:19:44.000 --> 00:19:47.480 is trying to incrementally get there as we tackle one 372 00:19:47.519 --> 00:19:49.880 problem and hopefully do it well before kind of moving 373 00:19:49.920 --> 00:19:51.519 on and expanding scope. 374 00:19:52.039 --> 00:19:54.680 So if that's the case, how is it different from 375 00:19:54.720 --> 00:19:59.440 something like Cursor or co pilot or or something like that. 376 00:19:59.799 --> 00:20:04.039 Yeah, totally. I think of Cursor and Windsurf and some 377 00:20:04.200 --> 00:20:09.200 of the AI enabled IDEs as tools for I'll call 378 00:20:09.240 --> 00:20:14.319 them professional programmers or professional coders who are primarily you know, 379 00:20:14.400 --> 00:20:17.519 in their ide in their editor all day. You know, 380 00:20:18.079 --> 00:20:21.400 they're fantastic at that. And I use z personally, which 381 00:20:21.440 --> 00:20:26.680 also has AI tools, but they're all incredibly good at this. Versus, 382 00:20:26.680 --> 00:20:29.200 I think the market for v zero and other tools 383 00:20:29.200 --> 00:20:33.079 doing more of the generative UI space is more so 384 00:20:33.160 --> 00:20:36.720 I think for the kind of adjacent folks who are 385 00:20:36.799 --> 00:20:41.279 now getting into development. Certainly, obviously I'm a professional programmer 386 00:20:41.279 --> 00:20:43.240 and I still use v zero, but I've seen a 387 00:20:43.279 --> 00:20:47.200 lot of people either learning to build products through v zero, 388 00:20:47.759 --> 00:20:49.440 or maybe they had an idea and they weren't really 389 00:20:49.480 --> 00:20:52.240 sure how to build it yet, all using v zero 390 00:20:52.319 --> 00:20:54.160 as a starting point to kind of kick off that 391 00:20:54.279 --> 00:20:58.799 knowledge where it's more about the design and the ideas 392 00:20:58.799 --> 00:21:01.759 and the product experience is just the code itself, and 393 00:21:01.759 --> 00:21:03.519 of course you can still view the code It's still 394 00:21:03.559 --> 00:21:06.680 important that you can observe the code and modify the code, 395 00:21:06.880 --> 00:21:09.440 but first and foremost is the actual thing that you're building, 396 00:21:09.440 --> 00:21:12.279 which is kind of just a different model than the 397 00:21:13.000 --> 00:21:19.240 professional programmers the IDEs, just a different different model. 398 00:21:19.599 --> 00:21:21.680 So I'll challenge you a bit about this, if you 399 00:21:21.720 --> 00:21:25.559 don't mind. I've been told that I sometimes ask tough 400 00:21:25.640 --> 00:21:31.680 questions and hopefully you're you're fine with it. Yeah, okay, 401 00:21:33.799 --> 00:21:37.000