Vercel’s Developer Frameworks with Ary Khandelwal and Max Leiter

23:10The first is like ShadCN is not a static utility that once you use it once, you want to use it exactly the same every single time you use it. So typically you want to import a package when it's like, hey, you know, this is a date formatter. It will work exactly the same way every single time. And I want it to work exactly the same way every single time. If there are changes and updates on their end, I actually want to get those changes and updates. So that's the second piece. It's like typically it's, A, I want it to work the same way every time. And if there's a change, I actually want to get that change and be able to use the new version of it.

23:39for a design system typically like both of those are not true a you don't actually want to use a component the exact same way every time components change and grow over time it ends up being a block for you if you're like hey i actually need to modify this component slightly and suddenly i like no longer have the ability to do so because i'm importing it from some package i have to wrap it and like use a wrapper for it instead and then change the wrapper it ends up getting kind of complicated and the second is you don't necessarily want all of the updates from like shad cn you You know, like if he releases a new component, you can just use that new component, copy paste it.

24:13But if he changes the interface by which you interact with an existing component, you don't necessarily want to see that, like get that upstream change. And so that's why it's actually, you know, our thesis is that it's actually better for this kind of design system use case to not have it be a package that you import and like consistently keep updated. Yeah, I think the key there is that you're able to change the components. So you really are. Once you install them, they're the default ShadSan components. Then you can customize them. as you're building your app or building your website, you start changing the border radiuses, you start changing the colors, and all of a sudden it's yours now.

24:43It's no longer really standard chat. The approach here reminds me a lot of what you were talking about with regards to higher level abstractions in your AI SDK, where you're not providing, here's an installable thing with skimming all these things you have to do. You're like, here's a building block. Go, create. Right, and I think that's all because we're building it for ourselves. Like this is what we would want and we would get upset if we couldn't change our button styles or if we couldn't modify how our rack works. So bringing back a little bit to the AI SDK, we talked about core, but there was also SDK UI.

25:16Is that related to ShadCN? They're completely distinct. They play nicely. Like what is the relationship there? Yeah, they're completely distinct. The way to think about UI is like, it is utilities for you to use on the front end to do basic parts of AI applications. So a very good example is the most basic thing that people are building with AI is still chatbots, right? There's a lot of parts of a chatbot that are shared across every single chatbot that's ever been made. You have to have some kind of messages. The messages are either, like there's a role for what those messages are. They need to be rendered on the front end and they have to be, like typically the AI messages get streamed in from some third party, like from some API.

25:55So those are shared across every single chat application, no matter what. The thesis with UI was like, hey, we don't really need you to come up with these abstractions from scratch every time you want to build an AI application. We know that you're going to build some kind of message object. We know you're going to render that message object and we know you're going to need it to be streamed in. Why don't we give you like good abstractions for a message, for example, that you can use out of the box. And that way you can get started with an AI application really, really fast. And the goal, again, the balance here is like we're giving you these abstractions and the goal is to keep them as low level as possible such that you can customize them and use them at basically at will, while still giving you the benefits of like, some abstraction where you're not worrying about the low level of how am I streaming in content and rendering it in the UI optimistically or not optimistically.

26:45UI kind of does that part for you. Got it. And for both of these libraries, you mentioned that the team works very closely with the v0 team. Are these going to be community projects at some point? Or is Vercel more or less run them top to bottom? I mean, AISDK is an open source framework. Anybody can contribute to it. We have a lot of community contributors to it already, especially when new providers come out and new models come out from new providers. The community typically builds providers for the AISDK for those. So AISDK, totally open source, already very community-driven. V0 right now is a Vercel-branded, Vercel-run product.

27:22It is built upon ShadCN, which is itself another open source. you can open a PR to chat CN today if you wanted to. And that's kind of how Vercel thinks about all of its products. Even it's our managed, you know, paid products are built on top of very, very strong open source foundations. It's like built into Vercel's DNA. That's awesome. So looking now at these things, and you mentioned one source of changes, new models, things like that. You also said that, you know, as you uncover needs often from VCR or other things, you know, those get sort of baked down into the AI SDK, where would you say kind of the growth edge is for these libraries?

28:01Like, what are the pieces that aren't quite where you want them to be yet, or where, you know, these libraries are really evolving? I know something we're actively thinking about a lot, there's an RFC still, I think, on the GitHub, if anyone's interested in poking their head in there, is agents and OpenAI release swarm, and how do you coordinate multiple models together, and then also render those outputs on the front end in a nice streaming-friendly manner, perhaps. So that's a lot of where our headspace is at right now. I think models have gotten so good, you can now let them kind of do their own thing for a little bit.

28:31You can give their outputs to other models. And we need some kind of tools to help pair those together a little bit more. Is that thinking advanced enough you could sort of explain a little bit? Like, how is the AISDK thinking about agents? Or how do you at vZero think about agents? That is a loaded question, because I know there's a lot of discourse right now about what is an agent. Hot take. What is an agent? I have put a lot of thought of this. I still haven't convinced myself fully. I go more on the second. It's not just giving you an output. So when you are having it do tool calls to third party services or having it make decisions besides what to respond, I feel like that's agentic.

29:08You have multiple steps and it has to make decisions. and that's already fully supported but now it comes into this like multi-model agent where you have this whole graph of all these different things calling each other and that's a really fun problem that I don't think I have a great answer to on if I consider those more agent or not, I guess. Yeah, I think people typically think of agents like there are two requirements. It must be able to do something, right? It must do something that is not just return text and the second is it must be able to take multiple steps to do the thing that it wants to do.

29:39So typically, I would say if it satisfies both of those criteria, we call it an agent. There's obvious questions about, okay, if a single call can do multiple round trips of a tool call, is that agentic behavior? Maybe. I think that's where the discourse gets super granular and very in-depth. But I think in general, it's like, okay, if you're taking multiple steps and it is doing something that is not just returning a text response, we would call that an agent. so you described in in v0 having for example loading different types of contexts doing making decisions about doing things deterministically doing other stuff would you call v0 an agent yes again some people might argue about that but it is definitely an agent yeah i think the way people typically think about agents is that oh like if i if v0 generated a ui and then fixed it and then added a bunch of features like one after another all without any human intervention.

30:34That's what they imagine when they think agent. We already do a lot of steps for every generation that you get behind the hood that are hidden from the user. And v0 does a lot of things that are not just generate text response. So I think we probably fit those two criteria. Although I know when people say they want an agentic v0, they typically mean I want it to take multiple steps and generate a bunch of UI all at once. And it can take longer going to do that. But yeah. So how do you think about how v0 plays into the product development process? And I know this is an active conversation all over the place of like, okay, what sets of things do you do with a v0 or replet or something like this, where you're like, generating something from scratch and kind of an agentic way?

31:18And then when do you export it out and handle it a different way. I'm curious, what's your perspective? And since it sounds like you dog food everything, how do you all use v0? So the easy answer to this is that we have found that people use v0 for everything. Internally at Vercel, we have a channel on our Slack called How I v0, which is just people posting how they're using v0 for various different things. We have found that people use it for way crazier things than us on the product team ever would have imagined. In general, I think we've seen three to four big, like large use cases. The first is early in the product development process, when you're still at the ideation feature definition stage, typically people spend a lot of time writing feature requirement docs or trying to build like low-level mock-ups or some way get across whatever that product vision in their head is.

32:10V0 is a super easy way to get that across. And we've had multiple features at Vercel start as a V0 generation by some, you know, maybe non-technical person and then actually make it to production because it was very clear what that was intended to be. The second thing we've seen is people start with designs and they want to get like an 80 % way there very, very fast. They don't want to spend three days like scaffolding out what this design is going to look like to build the front end for it. V0 is very, very good at getting 80 % of the way there once you have a like given design. And the third, the most V0 pilled way to use V0 is use it as a quasi-IDE, basically, where you start the process there, you brainstorm, you kind of work with v0 to define what this is going to look like.

32:55Then you build out the business logic. v0 can write full stack Next.js code. You can build out the business logic in v0 itself. And then at some point when you're ready to deploy, v0 allows you to deploy to Vercel super, super easily. So you can really do the full product development process all within v0. and that's the like, yeah, most v0-pilled way to go about it. The final thing I'll quickly mention is that we've seen a lot of just like non-app development use cases as well. So things like our marketing team, when they have to build visuals for data that they have, they give v0 the data and ask it to build really pretty charts.

33:30They can customize that. It's all backed by code. V0 can execute Python and execute in a Node.js environment. So people are actually running, creating scripts and running scripts, doing SQL queries, all that kind of stuff on vZero as well. So there's a whole fourth category of non-application development use cases that we found people use vZero for. And I would just throw out that I think a surprising amount of vZero has been built, at least at the beginning, with vZero. It is such a good tool for, I'm someone that I love writing code. I'm not great at writing CSS or styling my websites. vZero is a fantastic tool for me.

34:04I do all the implementation myself where all of vZero started. I give it the implementation and I'm like, make a UI. and it is fantastic for that. And I think for people that know how to code but don't know how to build front ends, it is an amazing tool right now. Let's maybe dive into a little bit of that back and forth. You said, okay, I give it my code and ask it to build a front end. What does that management of code process look like? Sure, I'll preface this with we're actively exploring this. We would love to be able to have you plug in Git Repos and sync it with Vercel and that is on the roadmap.

34:35Right now, I will take my schema file or my whatever file I'm working in, paste it right in. I might have a chat already where I made that file. So I just go back to that chat and be like, all right, now I'm working on this part of it. I think those are the two main ways you start with v0. And as you use v0 more, you have chats about the things you're working on. So you can go back to those chats. You can fork your old block and you can have a lot more of your kind of like a git message, but it's a whole chat now. So you have all this context about how you got from point A to point B stored in this chat.

35:04I think that's super powerful. so if i'm hearing you correctly right now it's not directly connected to git so if i wanted to go all the way v0 pilled and i wanted to build my whole application with this but i'm you know a seasoned perhaps burned a few times engineer and i want to make sure that i'm committing things along the way and things like that am i copying and pasting is there an export if not an import like what does that look like right you can copy and paste going back to shad cn that's like we always want to support the copy and paste. We also have the ShadCN CLI. That's a tool that ShadCN wrote that lets you easily update and install your ShadCN components.

35:41You can also give it URLs to your chat or to your v0 block, which is the website in that. And it will pull the dependencies, it will pull the files, and it will make sure it's installed and integrated nicely in your project. Oh, so that's interesting. So I can have a chat with v0, end up with a component of some sort, and then use the ShadCN CLI to pull that down into whatever repo I happen to be working in? Exactly. And then you can edit that file if you want, or you can go back to v0, keep working on it, and run the command again to update it, or copy and paste. That's really interesting. And it's cool that, not super v0 related, but we're seeing more products around the web pick up this ShadCN CLI support.

36:18It's an open source. You can make your own registry. So one big one is Framer Motion, or motion.dev now. They have open in v0 buttons and ShadCN blocks. So you can use the registry to pull motion components into your React app. So that's one way, again, we're taking this V0 feature and we're trying to share it with more of the open source community. So one of the things that I think we're all, all of us in software are grappling with right now is how these tools change what our job looks like. And y 'all are not only building the product that's changing our jobs, you're using it to build itself and kind of doing that.

36:51So how do you think about what software development looks like in this LLM world we're in? For me, it really is you can just build more. instead of you working on one thing at a time now, kick off three V0 chats, I'll tab between them, and I'll be working on three things at once while another page is responding. And I think as we go down an agent route and all these models start doing more multi-step things, you'll have more time to wait while your output is being done, which gives you more time to do more things. So maybe it's naive of me. I really am thinking it's like a force multiplier, and that's how I've seen it help me.

37:23I just am able to produce more code. I might have to review it a little more carefully if V0 wrote a lot of it, but that's still faster than me sitting there and writing it off by hand. I think it also lets you work at a higher level of abstraction, especially when you're working with syntax that you're not super, super familiar with. So when you're working with new APIs, new functions, new languages, anything like that, AI makes it really easy for you, as someone who understands computer science and principles behind development, to build things really, really fast without having to spend the time going through and making sure your syntax is accurate and like looking through documentation to figure out what functions to call and stuff like that.

38:02So very frequently what I'll have V0 do is like I will give V0 a like tech plan of sorts where it's like, hey, I need to load this data in a server component, pass it down to a client and like write these hooks, which is like in my head how I plan out what I have to build. And I'll just say like, okay, you go build that, you know? And so the architecture decisions are still being made by me, but the implementations, I don't have to worry about because those are like relatively straightforward already given the architecture decisions. And it certainly helps if you're technical. So maybe, you know, you can guide it a little bit on debugging or what to use.

38:34We see a lot of people using v0 that are not technical. And we just try to make it really easy for them. Like you might get an error screen if v0 writes wrong code or you visit a page that doesn't exist. We give you a nice little button that says fix with v0 and you hit that and now your error message is sent to v0. So trying to streamline the development process also makes it easier for us. So we don't need to copy and paste the error message and people that don't know what an error message is. And I think that's been really powerful for the adoption of Vercel and then for all sorts of people at companies to be able to use it, not just the engineering or product teams.

39:03In fact, the top user of Vercel is not an engineer. Actually, I think the top three people who use Vercel are all not engineers. That's kind of interesting. What would you, and you have this whole internal channel of made with Vercel or whatever, like what are some of the most novel use cases you've seen for this? Some interesting ones that are maybe not super novel, but were not things we were thinking of, is our sales engineering team will use vZero to build customized demos for prospects. So instead of coming with a slide deck, they will come with a demo of whatever it is that they're trying to explain to the prospect, which works way, way better.

39:43And what they can do then is live during a customer call, they can modify the demo based on things that the prospect is saying. So this is never like not something we had thought about at all when we had built VZero in the first place, but we've seen like tremendous usage among our sales engineering team to make that happen. I think one of the coolest demos I've seen was I think Guillermo, our CEO, was giving a presentation. Oh, yeah. Some talk. And he gave the presentation using Google Slides and everything. And at the end, he had escaped and it was Google Slides built entirely in VZero. The UI matched.

40:14It was started with a screenshot. You could add slides, edit your slides and hit present all in this VZero generation. I love talks that do that. I thought it was really cool. And it actually we keep using that we keep forking the block and changing it for different things, because it's just it's such a fun way to build a presentation. No, that's really interesting. And I think one of the things that these tools are enabling is that much more rapid iteration, right? Of like, okay, I'm building a demo, then I'm talking to them, then I'm changing it, then and it's evolving. And that lets you really explore much more quickly.

40:44I am curious on the productionization side. And this is the classic engineering concern, right? Of like, okay, it's great to build a demo super fast. And the CEO says, all right, that's great. We're shipping it next week, right? What does the productionization path look like? You alluded to this a little bit, but like how much work does there tend to need to be to get it from the 80 % demoable version to the 100 % I can sell this to customers version? I think it depends on a few things. One is your experience and your ability to code. We have people that have 200, 300 versions of their block in v0 or their generation.

41:21And those will often be 20, 30 files. It'll have suba base. It'll have login and auth. And those are effectively production ready. People hit deploy and they deploy them to Vercel. It took a lot of prompting for them to get there, but they got there. If you're trying to beat a deadline and you're an engineer, you might want to pull it out of v0, put in your code base and start working yourself. And those are both fine. and we've seen both happen. I think what's key is that by giving v0 the up-to-date knowledge on how to use Next.js, how to use React, web standard best practices, all this knowledge we have at Vercel that we've given v0 to try to make it the best web development agent or LLM, that all pays off in dividends when you actually go to deploy your application and like, hey, it added rate limiting to the server route or it properly didn't block on this really long request or something like that.

42:08Yeah, it is interesting. I find particularly like some of the models from Anthropic, like Sonnet, they write better code than I do when I prompt them correctly. Right. And like if you can code some of that prompting knowledge into your application layer of V0, like, dang, you get good stuff out. Yeah, absolutely. I think one thing we had on the original V0, which we didn't talk on, but that was not a chat app. You gave a prompt, you got generations, no chat. We gave you three versions of something. And that's because models were a lot worse then. So we kind of had to try it three times and hope that one of them worked really well compared to the other two.

42:40And I don't know, I think still there's something there about giving people the choices and the ability to kind of pick and choose. Well, I think that is one thing that's key in all of this use of LLMs for stuff is like you can't turn your brain off, right? Like you need to be engaged. You need to be checking. Is this actually doing what I wanted? You know, you need to look at it and approve it or correct it. But yeah, it makes that in-between process of I have an idea to let me see a first version of it just goes so fast. I would say the analogy I often use here is that it's like a higher level programming language.

43:14It doesn't mean you need to stop programming. When you stopped writing assembly and you started writing C, it didn't mean that you stopped programming suddenly. It meant that you were still just using programming concepts at a higher level of abstraction. You still have to be able to do that in some capacity here. And this is just another higher level of abstraction that you're now able to work at. Now, you all said you started this project, if I recall, it was like summer 2023. something like that. So we're now a year and a half along. If you project forward six months, a year, a year and a half, what do you see happening in this space in general and with VZ, VZero in particular?

43:54Yeah, I think we can maybe talk about what's happened since we started and then what happened in the future. So as Max mentioned, when we started VZero in October of 2023, it was like OpenAI's 3.5 model class and 4K context window, which now seems like the craziest set of assumptions to begin with. So a few things have changed. One, models have gotten like 10x smarter, and we expect that that will continue. So the cool thing about building applications as a layer on top of like base LLMs is that when LLMs get better, the applications we build get better. The AI SDK makes it super easy for us to keep using the state-of-the-art model as it comes out.

44:37So the number one thing we expect is models will get better, our code quality output will get better, and LMs will get better at coding. The second thing is that context windows are increasing. So at first, you could only give the LLM a little bit of information alongside your prompt to make it do whatever it is that you wanted it to do. You can now give it probably 10x that amount of information. And in fact, Gemini has released models that have an infinite context window. You can give it as much information as you want. So the ability to get custom personalized answers is getting better. Obviously, there are infinite context windows are not as good at dealing with all that context as shorter context windows.

45:17There's like more abstractions and more work to be done there. But in general, you're getting more personal, better responses. And the third is that we're getting better at just building the software 1.0 layer here of like building good web applications around AI. We're getting better and better at being able to do that. So things like being able to do some things deterministically, being able to use different models for different pieces of our generations, and things like that, those are all only going to get better. And I think it's really clear now that all the major model providers are, they're aware of the V0 style or Anthropic Artifact style use case of generating code, probably React and ChatCN and Tailwind.

45:57So now we're expecting models to get even better at maybe that subset of technology because it's so popular right now and it's so good for us as developers. So I'm going to push a little bit more because yes, we can expect the models to get better. What do you see missing right now in V0? Like what would you want to build or what are you already building that's going to make this? I would say like one interesting case is let's talk about error rates, right? So given an LLM output, there is let's say an X percent chance that like that output has some kind of error in it. Right now, our problem is when we want to do more complicated tasks, we can't stack those on top of each other because we compound error rates over time, right?

46:39So if we have a 10 % error rate on one generation and we have four to five different generations happening, you now have like a, you know, one minus X percent to the nth power, like chance of that being wrong, which compounds very, very fast. So right now with the error rates that we see in models, even a three to five step process is not something you can trust the LLM to do because even in just five steps, you're at a 50 % success rate. So just a tiny increase in the success rate of base models allow us to stack model outputs and feed in the output of one LLM into another LLM in a much more agentic fashion and just do more complicated things as a result.

47:21And small increases in accuracy dramatically affect our ability to do that because of the fact that these errors compound over time. So I think that's one example of at least something I'm super excited about, is that as models get better, even slightly incrementally, we can suddenly stack a lot more of those together without seeing a huge, massive increase in our error rates. And I think we'll also see LLMs get better at using just modern technology they're not necessarily trained on. A big thing documentation sites now are doing is they're exposing LLMs.txt. So you can visit this.txt file and it has all of the docs in one file.

47:55So you can copy and paste those to an LLM or run your rag and chunking on them. And I think tricks like that are becoming so much more popular. Anthropica's MCP, which lets models connect to basically integrations. So V0 lets you use environment variables from your Vercel projects. So you can connect to anything your production website can. I think we'll see a lot more of these integrations and third-party experiences kind of merging. So why can't you render part of your super-based dashboard and be zero? I think you will be able to soon. And I think part of it is like, you know, we've been talking about changes that model companies and like, you know, at the AI layer, what's going to change to get better.

48:31But the world is changing to adapt to how people use AI. And I think the llms.txt is a really, really good example of like documentation sites are changing how they do things to be better ingested by LLMs. One of the reasons, for example, Shad Cien works so well with LLMs is that the styling and the component structure are co-located. You have inline styles, like Tailwind class names styles, where the structure of the component and the styles for the component are in the same place. And one of the reasons why this is so good for LLMs is that they no longer have to keep track of two different files and try to keep them together.

49:05So more people are adopting Shadzia and more people are adopting React, more people are adopting Tailwind because LLMs are good at this kind of thing. So basically the world is also changing to reflect what AI is very good at. Yeah, absolutely. We're learning how to use these incredibly powerful tools and we're building all those connecting tissue. I love the idea of being able to pull in your dashboard from Supabase or whatever, run it in your V0. We were talking about import my Git project, make these changes by chat, export it, deploy it, do all these different things. That's an exciting world.

49:41So we're getting close. to the end of our time together, are there any things we haven't talked about that you all want to make sure that people take away, knowing about V0, the AISDK, ShadCN, any of these different pieces? I think I would say that we are building faster and faster all the time, largely in thanks to V0 and AI. So I would expect that to be true for a lot of LLN applications, but they're only going to get so much better from here at a much quicker rate. We're all figuring out what works, what doesn't. people are writing about it and sharing. And I think that V0 and AI applications, if you've used them like a year ago, revisit them, try them again.

50:20Everything is just so much better now. You can get started using all of them for free. You can just go to V0.dev and try out some prompts, like play around with it, see what comes out. The AI SDK is totally open source. Now you go to SDK.vrcell.ai, you can see the docs and start building applications with it right away. And Vrcell has a lot of great templates to actually get started with all these kinds of technologies. V0 also has templates to like get started with building really cool designs. So basically there's no excuse to not be coding. Regardless of if you're a coder. Yeah, exactly. Everybody can ship.

50:56Everybody can cook. I love it. That's a great place to stop.