How Roboto Studio ships faster with v0

I can see that we've got a couple of people already tuned in to this stream, so yeah, welcome everyone to our very first Vercel community live session. My name is Pauline and I work in the community team here at Vercel. I'm joined by Amy from the team as well, and you may have actually seen our faces in the community forum. Together we're here to just support you with everything, any questions that you have in the Vercel ecosystem. We're really excited to finally have this session up and running. This is what we hope to be the start of a series of consistent live gatherings happening right here in our community platform. Just to understand what you can expect, this is the space to be if you want to become a Vercel expert and learn everything you can about building, deploying, and optimising with Vercel. We're really looking forward to bringing guests from our customers, our broader community, and even our own team here at Vercel to share these insights and tips and tricks and just experiences. It's also a really great opportunity to see kind of like the faces behind Vercel, which is super exciting. I can see there's already a few of you in the chat, it's so great to have you here. Let us know where you're actually tuning in from and feel free to say hello. If you are watching this and you're like, I don't see a chat, it should actually show up on the right hand side. Just make sure that you're logged into our community platform and click the button. You can see it down below, it's like a little event box. Make sure that you click going on the event page and the chat functionality should appear for you. Amazing. Well, I will pass on to Amy who will talk a little bit more about our code of conduct. Hi, I'm Amy, also part of the community team, as Pauline said. I just want to remind everyone there's a link down below to our community code of conduct, and I just want to make sure that we all honour that and keep this a respectful and positive environment. We want to keep doing these events and that relies on all of us being respectful toward one another. So, very excited. With that, I want to introduce our guest, Jonathan Alford. He's the CEO of Roboto Studio. He's a Vercel customer, fan of v0, you've seen him in the community, I'm sure. So I'll pass that on to you, Jonathan. Hey, how's it going, folks? Thanks for the intro, Amy and Pauline. Yeah, I'm Jono, I'm the founder at Roboto Studio. We build websites that are extremely fast, very editorial experience focused, and they're really, really scalable, and they use the bleeding edge technologies. Today I want to talk mostly about how we basically ship faster with v0, and I've got something really cool to show, so two seconds. Hopefully everybody can see this. This is something that I want to show. This is one of the tools that we actually built completely from scratch using v0, which is Logal. Now Logal is kind of a very creative name because it uses the naming of Toggl, the, what is it called, a time tracking app, and it uses Linear, so we combined the two of those, and we wanted to build this as an internal tool. Now the really cool thing here is that we haven't actually had the opportunity to build an internal tool for quite a long period of time because it's very, very time consuming. But because v0 came along, we've actually been able to build the full app with v0, which is nuts. There's so much inside of here that basically is functionally built with that. But most importantly, something that I thought was a little bit of a tall tale when I first heard it was this concept of being able to build completely without a UI. Now everything here actually has been built inside of v0, and you can see we have things like empty states in here, we have things like loading states, we have a giant chart section here. All of this stuff is actually built with v0, which is nuts. So it's something that's cut down the development time of something like this from what used to be, you know, 10, 11, 12 weeks easily, right down to probably a couple of weeks realistically. And I want to show you something else that's really cool in here. The reason why we built this tool is because essentially Linear is an incredible tool for project management, but it lacks a little bit when it comes to individual client visibility. So we have this second view called the Linear project view, where we can actually show the tasks that are currently in progress, and again, everything on here was actually built using v0 without any kind of wireframe. This is a very, very early work in progress version, but again, a lot of the functionality that you see here is just completely built through prompts, which is crazy. Now the next one is kind of an interesting one, which is Sonati. This is a project that we took on about roughly three or four months ago, and it's a website build for some of the folks that are founders. They're an incredible team. But I really want to show you something neat. When you first look at the website, you get hit straight away with this cool falling block effect, which is kind of neat. Now this is using a tool called Matter.js, which is a 2D physics engine, and it actually has some really fun things, so you can actually pull these blocks about and shift them over the page like that. Now, as you might imagine, if you're trying to build something with Matter.js, it's going to take you a long time to build, because you have to learn how a 2D physics engine works and how that actually is implemented correctly, and then you have to try and figure out, one of the trickiest parts in here was actually getting it to be like a semicircle with a little notch out of it. So that's very, very difficult, and believe it or not, the entirety of this falling block was actually originally built inside of v0. The only things that have actually been done outside of v0 is this text effect on the top, and essentially just scaling it up at different screen sizes. The other part of this is that every block you actually see on this page, including the little animations and things like this, these are actually all built in v0 again. So the foundational functionality, the foundational framework, the layout, everything, even the typography inside of here, how it changes between them, it's all built using v0 from the very start. It's really cool because, what you can do, and something that's a really nice tip if you're looking at building something like this and you're looking at putting this into a headless content management system, is that when you're actually writing prompts, you can ask to put the data, the JSON or whatever, in a separate file. What that means is that when you actually get the component, you get the props bounded to that component, and it makes it very, very easy to use something like, for example, this one's built on Sanity, to integrate the two of those and make them work together. If you're really clever, you can even actually generate the schema itself using v0, which we have done a couple of times. Something else that's kind of neat if you're using images inside of v0, like here, you can see how part of the effect is the actual hover state, and this hover state and these images are actually stored originally in Vercel's Blob storage, which is really cool, because it means that you don't really have to think straight away where you're going to actually store all the media. You can actually get a mockup that looks closer to the real thing. It's a really, really nice way of doing things. And I want you to pay attention to this particular one as well, because I'm going to talk about something in a second related to this, but this again is all part of that same fundamental, the foundational components, the blocks that make up the page, all built in v0. So let me show you this. Remember this one? We have this thing called the early animation in v0, so I actually wanted to do a throwback to the chat inside of v0, so you can kind of see. And believe it or not, to get the correct, I forgot what they call it, it's not a ticker, they used to call it a different name, marquee I think it was, this like marquee style where they both go in alternating directions, believe it or not, and you can see it on the left hand side, this took three prompts to get to, which is cool. And again, we basically pivoted and changed, and the original, so this one was slightly based on a high fidelity design, which you can see here. We ended up pivoting on this actual design and using more of a cohesive message with the actual branding of Sonati. So if we go back to the website, you'll notice that we now use this, where you're going to see a star coming at some point. There we go, "what opportunities excite us", and you can see we show a star amongst all the rest of them. But the core foundation, the animation in this case, and the actual layout, all built in v0. And then finally, I want to talk about something that I'm going to complain about heavily until we bring it back, which is the customisation, the theming. So if anybody used early v0, and this really was the early v0, you would have seen that they had a theme customiser like this. It was really, really cool, because you could put an AI prompt and it would create all of the shadcn/ui themes. And so for example, on this one I'll show you a couple of them. This does a client side retheming of the page in real time, so you can see there's teal and plum, there's sky blue, there's green innovate, and my favourite on this is sunshine, which is this one. So you can see how the colours look, and if you think, for example, oh, this sunshine colour is not so good, you swap the background. I like it, I like it a little bit darker. There we go, perfect. So this used to be a v0 thing. I think we're going to end up rebuilding it and actually using it for ourselves and open sourcing it. But this was really, really cool, because I thought the idea of being able to build tokens, where you can actually put those design tokens back inside of v0 and use them to create projects, that was really, really neat. But yeah, this whole website again, completely, the foundation built in v0. And again, we talk about a couple of different things: the colour picker stolen from old v0 theming, and obviously data as an object is very, very important. If you basically put the object separately, it makes it way easier to work with props and make it kind of usable by a headless CMS. And now I want to talk about something that's really neat, that's a client that we've got. Essentially, the client isn't a developer, and they have built every single one of these demos that I'm about to show you. The only thing that we've actually done in this is wire them up inside of Sanity. So I'll start with the first, and they're going to get progressively cooler and more interesting, in my opinion. Most of the website outside of this, again, very similar system using v0, but this in particular, you can see that we have all of these different fields, and again, there's a lot of accessibility in here, so if we tab through, you see nice tab targeting, nice accessibility. Say a home price at 250k, which is a little bit ambitious these days, and we say that the loan start is from 2025. We've got a down payment, you've just seen the validation come in there as well, by the way, which is kind of cool. We've put a down payment of 20,000, and the interest rate is definitely not going to be 3.5%, let's say five, and loan terms, 30 years. Now this is the cool bit. As soon as you hit calculate, you're going to get a full graph that generates all the information about everything that's in here. We've even got a little extension bit where it says optional, so you know, taxes, insurances, HOA fees. But this was completely built, like I said, by somebody that isn't a developer, and you can build these things yourself. And why it's so important is because, from an SEO perspective, in the old days these things used to take, I don't know, probably a couple of days, at least three, four days for a developer to build a calculator, and they were very, very good if they got picked up. But if they didn't get picked up, you've just wasted four days' worth of developer costs. However, nowadays you can build these things in like 30 minutes and pass them on to a developer who will integrate them within your headless content management system or whatever tools you're using, and the costs drop dramatically. And the organic SEO for people finding these sorts of things, like, you know, "mortgage loan calculator", this is a perfect example, and you can integrate this not just within a singular page, you could integrate this within a blog. You could reuse this content again and again and again. It's really cool. So let's go on to our second, which is neat. This one is a Chase rewards calculator. This is really cool, and again, he's built the same thing with this. We've built a couple of different things in here that match in with the colour scheme of the page, but you can see how these help you to enter the number of points, so you can go 25, 50k, 100k, and you can see how it changes. So for example, with the Chase Sapphire Reserve, there's a cash back of $1,000 if you just do it as cash back. However, if you go through transfer partners, there's the potential of up to 300% more cash back that way, which is really neat. And again, you can swap between cards, you can see these different cards, and you can see it adjust on the graph independently. But the fact that you can build these so fast is just wild. And finally, my favourite one, which is the calculator example three. This one is really special. So it is a retirement saving projection. Let's be realistic and put zero current retirement savings, an annual contribution, maybe $500 at best, and desired retirement age, sorry. So, got to be a bit realistic here, so I'm probably going to be working till I'm 80, and life expectancy, and again, if you see all these bits and pieces, you can see how we have like tab targeting and accessibility and all of that. Investment growth rate, and let's be very, very pessimistic, so inflation rate of 5%. You can see how this chart is built. Now here's a really cool thing. Let's compare this to a more sensible scenario. Current age 30, well, I'm 31, but we'll go with 30. Current retirement savings, let's just pretend we have that much in retirement funds. Annual contributions, $10,000, all this stuff, and again, you can put additional factors in. But with all that in, watch this. You hit this add scenario, and you see how it makes this one look very depressing, actually, but you can see how powerful compound interests are, and this is really exciting and interesting if you actually are the sort of person that gets interested in retirement funds. But the really cool thing, and this is the bit that I would never ever have predicted that people could do, essentially without a developer, is building the PDF. Now if you've used PDFs, or you've actually created PDFs before inside of React, you'll know this is no small beans, to be able to build something like this. This shows you the exact kind of metrics that you need to hit to be able to get to your retirement funds and everything else. But I want to reiterate, this wasn't built by a dev, this was built by somebody that was basically trying to work on the marketing side, so this is huge. And again, one more reason to start looking into v0 and start looking into being able to build these applications yourself, because you absolutely can build them. And again, I want to take the most important app that's on here today, which is the Victorian cat generator. So if you've read our blogs, you've probably seen that we have a whole bunch of AI generated cats, and this is no different. We realised we were spending far too much time generating these cats, and to be frank, I didn't want to have to pay for a $20 a month ChatGPT subscription just to generate cats. So instead, we actually built a tool to be able to generate these things. So let me show you this. We have this, these are all the toggles, and on the right hand side, I think you might like that, that's the original version of the cat that I drew with Microsoft Paint. But let's say British Shorthair, and you can adjust the weight of the cat, so you can be all the way from skinny mini to boy he thick, and we can put a monocle on the cat with monocle. And you won't believe this, so we hit generate portrait, and bear in mind, at the time of building this, I hadn't spent that much time on image generation with OpenAI, with any of these tools, actually building tools and taking those API keys and making it work. And hopefully, beautiful. You can see how powerful this tool would be, because all of the idea that I'm trying to tell with this particular tool is, something that is the future of companies is not just essentially building these huge behemoth monolithic tools. It's going to be a lot of tiny little tools that you use to speed up very specific processes. And this is obviously a bit of a ridiculous one with the Victorian cats, but this could be applicable to a whole load of different things. So just off the top of my head, you can think of something like, for us, we could very easily build something like a Sanity schema generator to be able to encourage people to start building with that tool. Or, for example, something that we are thinking about doing is open sourcing the old v0 theme generator, because it's great to be able to get your first shadcn/ui set of design tokens. All of these things are really, really powerful. You want to keep thinking about how you can build value and reduce, I guess, time to shipping inside of your companies with v0 and all of these other tools, because there's never been a lower barrier to be able to build things like this, which is an amazing situation to be in. And finally, one of the last things I want to talk about is the fact that we actually built this entire thing, so all of this, you know, the open graph image, all of the content on here, literally three hours before this talk, with the whole team. We were all throwing our weight at it, so thanks everybody, by the way, on the team, it was a great effort. And I've included the good, the bad and the ugly of the prompts in here at the bottom, which I will link at the end of this call, but essentially this shows you exactly the process we went through, and you can see how we prompted to it. I think it was about 50 prompts in total, but it was worth it, so it was good fun. So yeah, I hope that makes sense, and thanks everybody for seeing the different tools that we've built. So yeah, I think, I was muted. Hello, can you hear? Okay, great. I have like a mute button on my actual microphone, which is why I sometimes get confused there. Amazing, that was so incredible, Jono, thank you so much for going through all of that. I feel like it's just helpful to see how people create their v0 prompts and what can actually be built from v0, so this is really great that you can really see the value of using the tool. So we have a few questions, we'll try and get through them because I know we've got 10 minutes. The first question is, someone in the chat, I believe they are, I want to say, sdb23, they asked: looks cool, when I tried designing my app I had issues editing and creating new files in the v0 code editor. How was your experience, i.e. creating a file outside the app folder? I think, so, I have encountered this issue once or twice, and I'm not sure whether this may be the same thing that you have had. So there is another tool that we're actually building behind the scenes at the moment, and basically, when I uploaded significantly large images and it went into Blob storage, sometimes there is issues relating to that. Now the way that we kind of got around that was by forking the actual project and then starting again, because I think, at least from what I can understand, it's something related to the size of the, what do you call it, like the clipboard or whatever you want to call it, the locally stored images. That was our problem, our specific issue. As far as I'm concerned, I know there is the functionality where you can now right click and just delete files, which obviously I would say use sparingly, because if you know that it's reliant on something, you may end up getting an error, which, again, the beauty of v0 is you can feed that error back in to try and fix it. Check as well, so something else that's worth looking at is the app directory. Sometimes, occasionally, a file gets generated outside of there, but that's very, very rare. We've only encountered it twice in the entire time of using it, over, you know, tens of, even potentially hundreds of different chats, if that makes sense. So I would definitely look into whether it's generating dual, so for example dual pages on dual roots, or whether it's generating something like a Tailwind config or something outside of the main directories. But if you want to shout us, we can give you a hand with it. Just get in touch and we'll see if we can help. Great answer. I don't have anything else I want to say for that. Amy, do you want to take the next question? Yeah, another question, actually from the same person: during iterations, how are you handling secret API keys? So this is a good question. When we first started, it was a little bit cowboy-esque, so obviously, they're internal tools, before we say any more. So for example, the Victorian cat generator, I'm guessing somebody's going to see if they could absolutely rinse my API key. That one is hidden behind one of the Vercel, basically a Vercel account, so the authentication comes up. But if you're talking about more generally now, if you're using, I believe it's the pro tier and above, in fact, it may even be on the free tier, actually, I think there's five on the free tier that you can get for the projects, you can actually put the environmental variables per project and keep them as like hidden storage. So depending on what you're using, that should be more than enough. It's obviously come a long way, so some of the ones that we showcased today, so for example Sonati that we showed today, comes from really, really early v0, so back when it wasn't even multiple files or anything like that, it was just like the real early stuff, but it's still, you know, totally feasible, providing you use the environmental storage. But just be super careful with environmental keys. Really good reminder, I think, especially when speaking to v0. Oh, we have another question that's just popped up in the chat by Riz. She says: hey Jono, repping Nottingham, you okay? Which is great, fantastic, another Nottingham. Yeah, did you have any issues with file management for v0 iterations? I tend to fork many, many times while iterating and end up having to do a lot of memorisation of my chat names. That's a really good one, yeah. I will say, so the way that we have gotten around it is we've been ultra specific with projects, with those specific, you know, the chats that are inside of those projects. So my advice would be to go more granular than you would expect, to essentially say, you know, for example, we have not just a Roboto Studio project, we have a Roboto Studio apps, we have, you know, like a Roboto Studio website, marketing, etc. So making sure that you kind of break it down to more projects is really useful. The only other thing that I can think of is, obviously, something that's really neat, and I know this is going to be kind of a tool inside of a tool, but you can very easily, similar to what we built today, you can very easily actually build a list of items inside of there. And one thing that I would love to give as a piece of advice on this is, markdown and MDX is extremely powerful with AI. I didn't mention it actually in the talk today, but we use markdown and MDX files, and this is a little bit of a private tool, but I'm more than happy to share it if you're interested. But essentially, you can use markdown files and something called a Nextra docs site, which is actually, one of the Vercel folks did actually build this originally, but you can use things like that to document things that are going off, like for example v0 chats. And more specifically, if you're doing a lot of marketing and things like that, you can use these to generate a lot of content for those things. So if, for example, you have, you know, 10 files, and inside of those 10 different files you have 10 different marketing things that you want to talk about, it's very easy to use a tool like that to generate content back into v0, if that makes sense. Give me a shout if you want more tips on this. I'm more than happy to kind of share our process, because we already use this quite a bit with v0. Amazing, awesome. We have a bit more time. Hey, Amy, do you want to ask a question? Just pass on to you. You're muted, by the way. Great, okay, unmuted. Yeah, I just want to ask, just what types of projects does Roboto Studio typically work on, in addition to, you know, the kinds of examples that we saw? But, you know, what does your team usually work on? Absolutely, yes. So we work with a whole bunch of different projects, everything from web apps to ecom to websites. One of the things that I was given as a tip as well that's worth mentioning, when I was at one of the conferences for v0, one of the biggest things that I didn't think about using, and this is something that we actually use and we have recently used, is v0 is an awesome, awesome migration tool, because you're basically getting all of the knowledge from that tool, that is pretty much all of the folks from Vercel, all of the best developers, basically all of that information is inside of v0. So if you're looking to migrate from platform X to platform Y, that is a great solution, and that is something we've been doing a lot recently. So as well as doing sort of websites, web apps and ecom, we've done a hell of a lot of migrations where they're really complicated, from certain tools and certain versions, and honestly, and this is no word of a lie, v0 has been so, so helpful in a 600k page migration we've done recently, because there was so many things that were so niche to specific Next versions and specific tools that were used in the original website, to basically make it worthwhile, and it's got that knowledge inside of it, especially for the latest versions. So yeah, it's really good for that. Yeah, that's a really, really good shout. I know we're like nearly at time, but before we conclude, I have one more question, because I feel like the v0 team would like this question to be asked, and that is: if you could give like maybe a wish list of maybe two features that you would love to see the v0 team ship next, what would that be? I think everybody knows what it is going to be. So one of them is definitely the theme generator. You took away my baby. I love the theme generator, so I hope they bring that back. It was really, really cool. If anybody got the opportunity to see it originally, what you used to be able to do is you used to be able to put in like AI themes, so in other words, you would type the prompt, you would say, oh, I want to have a theme that shows it's very modern and cool and uses the primary colour of orange, for example, and you'd get like the whole theme would show up beside it. This is more when there was kind of like a focus on just individual blocks. So that's definitely one, I would love a new version of the theme builder back. And then the second part of this, and this kind of ties in actually pretty nicely, so there is the ability to add files to an environment, but I think one of the biggest missing links in all of this, so for example, when people talk about Figma and v0 and the handoff between designers and developers, is this concept, I think if somebody would just build like an open sourced design tokens, where everything can basically digest those design tokens, that would be insane. So in other words, like, you just have a way of saying, oh, this is the Roboto purple, so I know I can use it in my Figma designs, and it will sync up with my v0 designs, and it will sync up with, you know, like my local GitHub environment or whatever. Something like that, some sort of design token storage, would be amazing, because I think that is the missing link between all of these tools. But yeah, just keep shipping incredible stuff, and I was really happy because you got the Figma plugin recently, which I was really happy about. But kind of ironically, at the same time, we actually have become a little bit less dependent on Figma, which is quite funny, because it's, you know, something I never thought would happen, is the idea of not necessarily starting with a design, which we've done on a couple of different projects, and especially for internal tools, it's very, very good. That's really great. Well, Jono, we're going to take that snippet and we'll make sure we send that to the v0 team so they can take that into account, so thank you so much for going into detail there. So I'm going to wrap us up now. Thank you everyone in the chat who has been engaging throughout the session, thank you for joining us. Actually, if you're looking for more v0 content because you're super inspired after this session today, we have, I think about an hour from now, we have the v0 team, they're hosting a webinar called what's new with v0, and they are talking about the new Figma plugin and everything like that. So you can sign up and find the details, actually, I will just share in the chat here, feel free just to sign up via the link there. And yeah, we'd also love to see you at our next community live session, so if you want to get involved, share some ideas, take the stage and share what you're building in the Vercel ecosystem, then let us know. Get in touch with the community team, like Amy or I, like, we are happy to try and get you in the calendar. But yeah, thank you again. We would love to hear also your feedback, so please let us know in the community platform, and with that, I will leave us, I will stop this stream, and yeah, thanks again, Jono, for joining us. Thanks for having me. Have a great day, everybody. Take care.