Cómo v0 de Vercel crea webs y apps desde Slack (Full Transcript)

[00:00:00] Speaker 1: It's time for the next installment of our work operating series, Today with Vercel. Check this out. Welcome back to Slack School. My name is Mike Reynolds. I'm your host. I'm part of the Slack team here at Salesforce, and I'm excited today to show you Vercel's vZero agent. This is going to be a great way for me to do some partner coding. Actually, for Matt to do some partner coding with me, and then we're going to check it out and see exactly what it looks like using Slack as an operating system. Let's get after it.

[00:00:35] Speaker 2: Hey, Matt, how's it going? It's going great, Mike. I'm really excited to join you again here on Slack School. As a quick reminder, I'm Matt Justice. I work with partners every day as a part of the Slack team, and I'm super excited to talk to you guys today about Vercel's vZero agent in Slack. I got to play around with this for the first time back at Dreamforce last year, and we did some really exciting things from building old Flash video games, to custom steering design system tools. People got really creative on the different ways that they could vibe code different solutions, web applications, and web pages with vZero. So super stoked to talk to you guys about this today. So we're going to take a more pragmatic approach than some of these other ideas we've had around building a web page. So vZero can build web applications and web pages really easily just from natural language. So as you can see here in our demo, we've got Steven and Mike chatting back, and forth on some of the requirements that we have around building this web page. So I'm going to consolidate all those into one prompt for vZero and ask it to go do work. So what we're looking at here are these basic requirements, and we're saying, hey, vZero, build a demo web page for a modern, visually stunning market landing page for an outdoor experiences company. So we have some basic requirements around the header image, some descriptions, why this company makes sense to go and do your thing, different experiences. You know, social proof with, with some different customer testimonials and a basic CTA. So I am going to send vZero off to do that work now. And here in just a moment, we'll see it start to respond.

[00:02:13] Speaker 1: Oh, that's awesome. I can see, I can see vZero is thinking right now. That's fantastic.

[00:02:19] Speaker 2: So this may take some time. So vibe coding and coding agents in general take some time to go and do work, but you can see this initial prompt that vZero is off doing the work. So we'll talk about that. I'm going to toggle off here very quickly. This isn't something that we'd have to do, but it's something that we could go out and check out and kind of see the progress that vZero is making. Now, similar to our last installment where you can see all of the different agents on the side that are working vZero has the same sort of experience here. So you can see some of the different applications and web pages that we built, and you can see the different steps that vZero is going through now to actually go out and build the web page. Now, once this is finished, you'll actually see a preview here in just a moment on what this web page will actually look like. All right. So we saw a little preview of what actually happens in vZero, but you don't actually have to toggle out to there to that workspace at all while it's building. So now we can see a summary here. vZero has sent back into Slack saying it built the page. It's got all the requirements. So let's go check it out. So here you can see what has actually happened in vZero. Here, here is the web page that it built for us. You can see we can book an experience. We can go explore different trips. We can see why us. So here's the sort of different requirements that we had around why Coral Clouds, some of the different trips that are available, customer testimonials. So it's met all the requirements. Awesome. Now, usually what would happen in a situation like this is we wait a little bit, see how things actually go on the web page. We may get feedback from the team internally, or there may be some things that we want to change. What's really cool about vZero is it can look at this sort of multiplayer engagement that you would have in a thread from different teammates providing feedback, synthesize all of that into one prompt based on the conversation that's happened and actually go and implement those requirements. So there's a handful of different things that we want to change.

[00:04:19] Speaker 1: I've got some ideas on things that we should add. Can I just put these in the chat here?

[00:04:23] Speaker 2: Yeah. So go ahead and put some of the comments that you may want to have changed. Uh, in the chat. And I'll do the same on some of the opinions that I have on things that we may want to want to make a little bit better. And we don't have to have this in any structured order. So just start peppering in your comments. So now you'll see here on the right, we have a bunch of different comments from Mike. We have a bunch of different comments from me, Steven Lee, and all we have to do is say at vZero, can you make all of these changes? Now, vZero will read this through. You can see all of the different comments, all of the different things that we want to change, synthesize that into one prompt and go and make those changes in vZero.

[00:05:08] Speaker 1: I think this is really where it starts to come together when we see natural conversation in a thread. And then I don't have to do any summarizing. You didn't have to do any summarizing. We just said, Hey at vZero we've already talked about this. Now go make it happen. That's so easy.

[00:05:28] Speaker 2: It's so easy. And what's really cool is when you work for a company that may have like brand requirements or documents that sort of synthesize all of the different requirements, you can actually upload those into this thread and vZero will be able to read that since it has access to the thread, make all of the required changes to meet those brand guidelines or those web requirements. So it's very cool, very easy to use and sort of that multiplayer experience in a conversation.

[00:05:54] Speaker 1: Oh, I just realized that vZero actually reacted to your message. With the eyes, which is great because that means that vZero is taking a look at it.

[00:06:04] Speaker 2: Exactly right. The emoji should change here once the task is completed as well. So it's very cool to be able to see that it's actually started the work and we'll be able to see when it's done and we can go check out what it's finished. That's super slick. All right, perfect. So here you can see vZero is done. It's added this AB light switch toggle so we can see the difference between the original and the new beach theme for version B. It's got a switch. It's got a summary of adding the 60 second sub headline. There's a new CTA. So all of the all of the different things that we had asked it to do, it has summarized here that it has gone out and done. So let's again go check out what it's finished. Make sure that those changes make sense. Awesome. Here we go. So now you can see here at the bottom right, I've got a little AB toggle test so I can see what the new view is. So Mike wanted to have a little bit more of a beachy theme, relative to what we have up. You can see there are now free tacos on Tuesday, which is very exciting. I think that'll bring a lot of folks in our new coral button. Our new coral color button is here and that has been changed. There's a new little fire limited spots this weekend. So it looks like it got all of our changes.

[00:07:17] Speaker 1: So we should build the app now.

[00:07:20] Speaker 2: Yeah. So one of the things that we have run into here on our web page is the only way that you can actually contact us is via email here. So I think it makes sense for us to probably have like an easier way for people to schedule. So let's see if V zero can help us out with that.

[00:07:35] Speaker 1: I mean, there's no way it's going to build a whole app, right?

[00:07:40] Speaker 2: So there's only one way to find out. It absolutely should be able to do that. Let's give it some of the requirements. I'll put in, I'll start a thread here where we're having a conversation. I think we need a better way to have customers book on our, on our website. Now, again, I think if we just put in our requirements here on what we want this sort of experience to look like, we should be able to ask V zero to build this web app and connect it to that main CTA, but now, because this is a demo, we want to put in mock data. So this looks like a realistic experience. Uh, and you know, as we go through and do sort of our internal testing, want to make sure that everything looks up to snuff. So here are the different requirements that we have, and we're going to come in and ask V zero to build this web app. So add V zero. Can you build this web app based on the requirements listed above and connect it to the main CTA? And again, you can see V zero immediately reacts with the eyes emoji to let you know that it's working. All right, V zero is finished. Let's see what this new booking experience looks like on our web page. So again, here's, here are the differences between our two version a version B. So we're looking at version B we've got our excellent taco Tuesday reference here. So let's click on, see what's near you. And this is the new web application that has been booked or that has been created that allows us to book. Uh, different experiences. So let's go through, I feel like Mike and I are pretty rugged, so we're going to go for more advanced experiences. So it looks like a coral clouds has two different options available available. I think we would go to the top of Mount Rainier. Sounds like a great idea. So let's book that now. It's going to be for two people and let's see what dates are available. We probably don't want to go in the winter cause we die. So let's pick a, this upcoming Wednesday. And we're going to confirm and book. Now this would be where we'd actually collect payment. Uh, you can see our excellent promo code taco Tuesday would give us a slight discount, but all of this was built all from that context, all from those three different page descriptions and the navigation context that Mike and I had that conversation in Slack. Pretty impressive. V zero. Nice work.

[00:10:19] Speaker 1: I mean, it's, it's really a genuinely amazing multi-layer experience of being able to have a couple of people, as many people as you need all working together on the same thing again, in the same place, looking at the same thing, engineers working with a tool that is going to dramatically accelerate the speed to design and results. It's amazing.

[00:10:42] Speaker 2: Totally agree. Thanks for having me on today, Mike, uh, really excited that we were able to chat through the experience with multiplayer vibe, coding with V zero and looking forward to next time.

[00:10:53] Speaker 1: Well, there you have it with Vercels, V zero, V zero agent, Matt and I were able to build a complete website and a booking app in a few minutes. Honestly, kind of blows my mind. You think about what we could do. If we start adding in other tools to that, we can see the code base with GitHub. Maybe I'm using Jira or Atlassian for my tickets. I could bring all of these solutions right into the same place and have my entire development team, my entire development organization, all looking at the same thing, seeing the same stuff, participating together, distributed workforce doesn't really matter. Slack's going to make all of that super easy all because it is a work operating system. Really, really brilliant. Let us know what you thought of the episode by jumping into the Slack community at slackcommunity.com. Head over to the Slack school channel and let me know what you thought or give me an idea for a future episode. We'll see you next time. Oh, hey, great job today. Very important to do free tacos.