Community Session: Build Smarter Prototypes in v0 with Sanity MCP
VVercel
Computing/SoftwareSmall Business/StartupsInternet Technology
Transcript
00:00:00[BLANK_AUDIO]
00:00:30[BLANK_AUDIO]
00:01:00[BLANK_AUDIO]
00:01:14>> Hi, everyone, it's nice to see some of you here already.
00:01:20Welcome to this week's Versailles community session, really glad to see you here.
00:01:25If this is your first time joining us, hi,
00:01:28I'm Pauline Navas from the community team here at Versailles.
00:01:32You've probably seen me lurking around our community platforms answering questions.
00:01:37And well, now you get to put a face to the name, which is always very exciting.
00:01:44So yeah, before we kick off, drop a message in the chat and
00:01:48let us know where in the world you're tuning in from.
00:01:51We've got folks joining from all over, and
00:01:53it's honestly just one of my favorite parts of these sessions.
00:01:58So today, we're diving into something really cool.
00:02:02Has anyone here heard of Sanity?
00:02:04[LAUGH] So today, we're gonna be building smarter prototypes in V0 with the Sanity MCP.
00:02:12We're going to be talking schema generation, real content,
00:02:16querying it all from your app live in real time.
00:02:20Whether you're already using Sanity or completely new to it,
00:02:24there's something in this for you and for everyone.
00:02:28So without further ado then, let's get into it.
00:02:33I'm super excited to see some of these chat messages coming through.
00:02:37So definitely keep them going throughout.
00:02:39We'd love to hear from you.
00:02:41And yeah, I'd love to welcome the Sanity team here with us.
00:02:46Hey folks, how are we doing today?
00:02:48>> Hello.
00:02:50>> Hi. >> How are you?
00:02:51>> Good, thank you.
00:02:52It's so nice to chat to you.
00:02:54And obviously, we really love doing this with our partners and
00:02:58folks that we collaborate with in the community.
00:03:00So yeah, really excited to have you here.
00:03:02I will get off stage now and let you two kick it off.
00:03:09>> That's great.
00:03:10All right.
00:03:12So yeah, hey, hey, Evelina.
00:03:16You're calling in from our brand new London office, right?
00:03:20>> Yeah, I am in our London office.
00:03:23As of today, we have this office here, which is very fun.
00:03:27So that's where I'm tuning in from.
00:03:29>> And I am calling from my not brand new home office in Oakland,
00:03:34in the Bay Area, but we also have an office in San Francisco.
00:03:38So we have that interesting little bit of time lag,
00:03:41which makes us maybe kind of interrupt each other, but let's see how it goes.
00:03:46So yeah, let's, yeah.
00:03:51So we're from Sanity, and we should probably start with unpacking what Sanity is,
00:03:56if you haven't heard of it.
00:03:58So Sanity is a content backend, which means you can define content models
00:04:03in code or via MCP, as we are gonna see pretty soon.
00:04:07You can store everything as structured data in hosted API.
00:04:12We call that Content Lake, which is like a database for content, basically.
00:04:17You could query that content with something called Grok,
00:04:20which is like a query language for JSON.
00:04:24And then you can have typed curable content wherever you need it,
00:04:30like in a v0 project.
00:04:32And I think maybe I should take a little bit step back and talk about how,
00:04:38if you have built with v0, you probably have seen that it will put your content
00:04:43in Markdown files or maybe in JSON files in your project, which is kind of fine
00:04:48if you're doing a quick prototype or something that's simple like a blog or something.
00:04:54But when it's time to get a little bit more serious and use something that should end up
00:04:59in production somewhere or be a little bit more complex in terms of the user experience,
00:05:06that Markdown stuff starts to be a little bit of a hassle.
00:05:11What I've noticed, not just because I'm working at Sanity,
00:05:14is that when I do these projects myself, agents will kind of start to struggle
00:05:18keeping things in sync when it's spread over different files and so on.
00:05:22So you have to coax it to do that.
00:05:25It would be nice not to have to do those things and spend those tokens
00:05:28on actual building cool things, right?
00:05:30So that's where Sanity comes in.
00:05:34And we're going to show you a demo, or Lina is going to show you a demo of what you can do with it.
00:05:38But before we dive into that, I feel like maybe I should show you how to add Sanity to v0.
00:05:45So if we can get my screen up.
00:05:46So this is v0.
00:05:48This is my personal account.
00:05:52We have made sacrifices to the demigods.
00:05:55So hopefully this will go well.
00:05:56But how you add Sanity should be pretty simple.
00:06:00So if you have this chat box, you can go in here on the plus,
00:06:06and there's something called MCPs.
00:06:07And MCP is like a plug-in for agents, like the way you connect an agent to another service.
00:06:15So if you push the add new button here, you get this list.
00:06:19And we are here, down here on us, Sanity.
00:06:23And now we should be able to just push this.
00:06:26And we have the configuration ready.
00:06:29So authorize.
00:06:31So this-- I am already logged in, probably.
00:06:34No, actually not.
00:06:35So you have to log in to account or make a new one.
00:06:41Let's go with this thing.
00:06:45And then you can-- let's see.
00:06:51I have a lot of organizations and stuff.
00:06:54You won't have that if it's the first time.
00:06:57But you can authorize with your account and stuff, and then you're back.
00:07:01And now it's connected to Sanity.
00:07:03So what the MCP server can do now is to create a new project for you.
00:07:07It can create contents and documents and content models and all of that stuff.
00:07:13And it also comes with skills and so on.
00:07:16So the agent can tap into those for best practices and so on.
00:07:20And that's it.
00:07:22And now we can say, make a new Sanity project for my blog.
00:07:29And it will go and do that.
00:07:33So that's how you get started.
00:07:35But let's go into the exciting stuff and see what we can build.
00:07:39And this is where you come in, Evelina.
00:07:41This is where I come in.
00:07:42Yeah.
00:07:43And what's cool is Evelina joined us from a place called Love Holidays, which
00:07:48is a travel-- like travel as a--
00:07:52It's an online travel agency.
00:07:53Yeah.
00:07:54Yeah, it's a travel agency as a service.
00:07:57So it's this fairly complex application with a bajillion landing
00:08:02pages for all the hotels and whatever.
00:08:05You use Sanity as the configuration store for that service.
00:08:12Yeah.
00:08:13We use Sanity at Love Holidays to power actually our home--
00:08:17like both our website and our app.
00:08:19So we basically stored everything and did a lot of work
00:08:21both in Sanity, which is super cool.
00:08:24And Evelina, you built this stuff in a team with Sanity
00:08:29before we had agents do all of the code.
00:08:31So you come from this old world of hand typing this code.
00:08:37And then what you're going to show us now
00:08:39is your first proper run with v0 and Sanity MCP.
00:08:44So it's super exciting to hear your perspective
00:08:46on how does this feel versus the old way of doing stuff.
00:08:53But I'll shut up now and let you have the screen share
00:08:57and take it from here.
00:08:59Awesome.
00:09:00I'm going to head in.
00:09:01Let me know.
00:09:02I'm going to switch screens now.
00:09:03But let me know if you can see everything fine as I do that.
00:09:07Am I showing the v0 because I can't see you?
00:09:09Yes.
00:09:10Looks great.
00:09:11Awesome.
00:09:12Well, yeah, you're right.
00:09:13So what I did was that I wanted to try this,
00:09:18try what it looks like to use v0, not hand type anything.
00:09:25So I decided to be very much on theme.
00:09:27So I'm in London.
00:09:29We just opened a London office here.
00:09:32And I thought, all Londoners, a lot of people love the pubs.
00:09:38And there's so many of them.
00:09:39So I thought, what if I build a pub crawl and a pub crawler?
00:09:43So we'll see in a second.
00:09:45Maybe I'll just show what it can do first.
00:09:48And then we can go into some more details.
00:09:51But yeah, this is what I built. I spent probably three hours
00:09:55on Friday, three hours on Monday.
00:09:57So I haven't spent a lot of time on it.
00:09:59But I used the Sanity MCP.
00:10:01So everything is powered through that.
00:10:02I haven't actually written any code.
00:10:04I've asked it to iterate on things with me, of course.
00:10:08But you can explore London.
00:10:09So you can explore London through the different areas
00:10:12if you're familiar with London.
00:10:13I'm a North London person.
00:10:15So this would be my favorite area.
00:10:17I don't really like South.
00:10:18So I like what it did here.
00:10:20South does its own thing.
00:10:21Hot take.
00:10:22Yeah, hot take here.
00:10:24And then I have these we're obsessed with.
00:10:26I have these different pubs here.
00:10:29I have a little email subscription here.
00:10:32I have areas here.
00:10:34I have actually a little quiz here
00:10:36that we can go into in a second.
00:10:37And I also have this thing which you can build your own crawl,
00:10:41which is super exciting.
00:10:43And then, yeah, this is similar.
00:10:44This is just about--
00:10:47that's a bit more information.
00:10:48But that's kind of it in a nutshell.
00:10:52So this is super cool.
00:10:53And what I'm seeing here is it's a lot of ways
00:10:58into the same content, right?
00:11:01Yes.
00:11:03All these different user journeys.
00:11:06You're like your typical listing stuff.
00:11:08And then there's almost like a quiz journey
00:11:15and build your own crawl.
00:11:16And I assume that you are using the same pub content in a way.
00:11:21Exactly.
00:11:22So what I did throughout this-- maybe
00:11:25I'll just start with how I started.
00:11:27So maybe I'll go through the first prompt that I did.
00:11:30So I asked an engineer when I used
00:11:32to do engineering full time.
00:11:34I was very much someone that liked
00:11:35to plan a little bit ahead because I think
00:11:37you can catch things early then.
00:11:40So I planned.
00:11:40I iterated together with Claude and just planned
00:11:44the kind of prompt.
00:11:46So I can just go through what that looked like first.
00:11:48That is not the finish date.
00:11:50But I thought it would be interesting to see
00:11:52my thought process there.
00:11:54That's interesting.
00:11:54So you had a little chat with Claude
00:11:59to tailor that first prompt before going to v0.
00:12:02Yes.
00:12:04I know, obviously, you can just vibe, right?
00:12:06You can just go ahead and do it.
00:12:08I quite like to just take a step back and think ahead
00:12:10of what I actually want to achieve.
00:12:12So to not get ahead of myself and, I guess,
00:12:15not over engineer things or not do too much thing at once.
00:12:18I definitely want to--
00:12:21I have so many ideas.
00:12:22So I think taking a step back to plan
00:12:25is something that I enjoy doing.
00:12:26So I'll just go through the--
00:12:28That's a pretty smart pattern.
00:12:30Plan the plan in a way, right?
00:12:32Plan the plan.
00:12:33I think as an engineer, again, I used
00:12:35to understand the problem.
00:12:37What am I trying to do?
00:12:38Plan.
00:12:38And then you actually code.
00:12:40And what I liked about this is that I actually
00:12:43got coding quicker.
00:12:44I wasn't stuck in the plan mode.
00:12:45But I'll just share quickly.
00:12:48This is what it did.
00:12:51It prompts different homepage, design system.
00:12:54It's a Next.js application.
00:12:56It's using chat's CN UI.
00:12:59Some design direction.
00:13:00I wanted it to be very on theme, so different primary colors
00:13:04and all of that.
00:13:05Again, this is probably a little bit over engineer anyway.
00:13:08But I quite like to go a little bit deeper.
00:13:11And there's some typography.
00:13:13And then there's the components to build.
00:13:14So as I go through this, you'll probably
00:13:17see that not all of these are actually there yet,
00:13:19like there anymore, because I iterated on it.
00:13:23But yeah, homepage, these different sections.
00:13:27And you will also notice that for what I did first
00:13:32was actually just to have some placeholder content.
00:13:34So that was actually not insanity.
00:13:35But as I did throughout, I actually
00:13:38used MCP to kind of reteach myself
00:13:41all the best practices that are actually just provided
00:13:44by the Sanity MCP.
00:13:45So yeah, that was kind of it.
00:13:50Cool.
00:13:51And how did it go?
00:13:54Well, it's working right.
00:13:55It's working.
00:13:57No, it was really fun.
00:14:00It's weird to not be in so much in control.
00:14:02I think that was a step that had to be like, oh, actually,
00:14:05I'm just going to sit back and guide it.
00:14:09But it was fun to see how much I could get done.
00:14:13And I feel like how quickly I can untangle the mess that's
00:14:17in my head sometimes to actually be something useful instead
00:14:22of sitting and planning.
00:14:23So should we look at some code maybe?
00:14:26Let's zoom into what did it actually
00:14:29do after that prompt, right?
00:14:30And how does it use sanity?
00:14:32I guess that's what we're here for.
00:14:35So yeah, I'm not sure if you are able to--
00:14:38are you going to show the chat?
00:14:41I can show the chat.
00:14:42I was thinking if we can show some code as well.
00:14:44But sorry, swiping that way.
00:14:51I actually think it will be maybe interesting to show
00:14:54the last kind of thing I did.
00:14:56Because like I said, I iterated on this.
00:15:00I asked it to kind of--
00:15:02as I scaled it, as I added images,
00:15:04as I added more text and all of that,
00:15:06I didn't want anything to be hardcoded.
00:15:09I'm thinking of this as kind of like a long-term project,
00:15:12even though it's a prototype right now,
00:15:14to set myself up for more success later
00:15:17for collaborative approaches.
00:15:19Like I'm thinking of this as like this is me and my friends
00:15:21that are kind of managing this.
00:15:23And everyone has different tastes and everyone
00:15:25has different things that they want to say.
00:15:27So I kind of did it like that.
00:15:30And at the end, I made sure that I didn't
00:15:33want this to be hardcoded, like I said.
00:15:36And instead of being like, OK, I'm
00:15:37going to go through all the code and do that or iterate,
00:15:40I kind of said, can you use the sanity best practices?
00:15:43So that's kind of what I did here.
00:15:46Rhetorical question.
00:15:47Where do you find the best practices for sanity?
00:15:51Well, you can find it--
00:15:52I actually have it here.
00:15:56You can find it here if you want to read what it is.
00:15:59It's in our agent toolkit here.
00:16:03But you can also just ask.
00:16:04So I just basically asked in the chat to say,
00:16:07can you use the best practices?
00:16:09Yeah, and I think the MCP server kind of has those on tap.
00:16:13So you can bring in those in the chat.
00:16:15Exactly.
00:16:16So yeah, sorry, I should have said that.
00:16:17You don't actually have to go outside.
00:16:19You are just inside.
00:16:20Like I did everything exclusively inside.
00:16:23But if you do want to bring this elsewhere, you can-- yeah.
00:16:25But also do print out the skill and read through all the skills.
00:16:28Like, right?
00:16:30Yeah.
00:16:30No, but I think it's valuable to read it, though.
00:16:33That's what I did.
00:16:35Like I said, I kind of went through what I was doing.
00:16:39And I was like, OK, cool.
00:16:40Yeah, it's doing this, and this, and this.
00:16:42So you learn from this as well.
00:16:44That's just like, I like to learn as I do it.
00:16:46Yeah, I was kidding.
00:16:47But it's actually pretty interesting
00:16:49to read skill files and see what are people--
00:16:53how are they thinking about what best practices, right?
00:16:55But yeah.
00:16:56All right, cool.
00:16:57But we can go through a little bit more,
00:16:59I think, maybe looking at what this looks like, I think.
00:17:01So for example, if we look at the code here, like I said,
00:17:07we have the app part.
00:17:09So that's obviously the Next.js app,
00:17:10where it's like querying all the data.
00:17:12And then we also have the sanity part.
00:17:15So we can look at the schemas and what that looks like.
00:17:18So we have the area schema.
00:17:20We have the home page schema, pub.
00:17:24And all of these have different fields.
00:17:26And yeah, this is kind of--
00:17:29some of them are probably--
00:17:31yeah, sorry.
00:17:31So what is a schema?
00:17:33Like, what is the job that a schema does for us here?
00:17:36Well, you basically-- the idea is to not--
00:17:40you have to structure your code in a way
00:17:43so it can be reused in many places, right?
00:17:45So instead of having things hard coded, for example,
00:17:49like I have structured what is a pub.
00:17:51Like, a pub has certain elements.
00:17:53So pub has a name.
00:17:54Pub has a slug.
00:17:55A pub has areas.
00:17:57So all of these things are just like structured ones.
00:18:00And then I can pull that into different places
00:18:02in the application.
00:18:03So for example, the area, these are East London,
00:18:07all of these things.
00:18:08These are neighborhood.
00:18:09Some of these are required because they should always
00:18:12be there.
00:18:12Some of them aren't required because they shouldn't always
00:18:15be there.
00:18:17You can have an array of--
00:18:20a list here.
00:18:21So the features-- they have doc-friendly.
00:18:24They have live music.
00:18:25They have all of these different things.
00:18:28So yeah, it's all in code, which is amazing for then
00:18:33you can power more things than just your application.
00:18:37Yeah, and I guess if you're familiar with TypeScript
00:18:40and so on, these can be used with the Grok query
00:18:43to make types in applications.
00:18:44So is it easier for agents to understand if, oh, am I
00:18:49bringing in the right data?
00:18:50And am I implementing it the right way?
00:18:52Or will I have TypeScript errors that I have to fix, right?
00:18:55Yes.
00:18:56And another interesting thing, we won't show this in this demo,
00:18:59but this schema can also be used to make editorial interface,
00:19:05a place for humans to work with this content as well.
00:19:10We call that Santa Studio.
00:19:12You can check out our docs and so on to get up
00:19:14and running with that, but yeah.
00:19:16But you can also just use the MCP for this.
00:19:18That works really great, especially
00:19:20when you're building alone, right?
00:19:22When you're building alone, I think the MCP
00:19:24works equally as well.
00:19:26And then when you want to collaborate with others,
00:19:28setting up the studio.
00:19:30So this is all--
00:19:31you mentioned earlier, this is all in content lake right now.
00:19:33So this is all structured in there.
00:19:36Once you want to have a studio, you just
00:19:37pull it into there instead.
00:19:40So if you go back to the visual mode,
00:19:43I think you had an areas pub listing.
00:19:46Yes.
00:19:48North London, which is your favorite.
00:19:51Yeah, we picked North London.
00:19:52It's my favorite part because I live there.
00:19:54If you scroll down a little bit.
00:19:57Yeah.
00:19:57So yeah, here.
00:19:58And here we have filters.
00:20:00And I don't know about you, Evelina,
00:20:04but those tend to be a pain to implement
00:20:06because there's so many things to think about.
00:20:09They tend to be a pain.
00:20:10I have worked with filters a lot before.
00:20:13I think search and filters are just a pain.
00:20:16There's a lot to think of.
00:20:18So I'm super curious, too, how does that
00:20:21work with this relatively short session?
00:20:24And how does the data querying look like?
00:20:27Yeah, we can look at that.
00:20:28Let's just see to just show that it's actually working.
00:20:31I think that's kind of nice.
00:20:33You have the different vibes.
00:20:35You have the different features.
00:20:36You have all of these.
00:20:37These can obviously be extended.
00:20:40But we can look at that here.
00:20:42God, now I'm like, where is this actually?
00:20:46So I think this is just pub query.
00:20:50Live coding isn't my favorite thing or live showing.
00:20:53So but--
00:20:55Today I learned there's a search feature in V0.
00:20:58That's very useful.
00:20:59Yeah.
00:21:00As a VS Code girl from the start,
00:21:03this is very useful for me to just kind of search for things.
00:21:07And you can see here that we're kind of importing
00:21:10these different queries from queries.
00:21:12This is from Sanity.
00:21:14And we are querying--
00:21:16sorry, this is not what we're going to go through.
00:21:18We're going to go through the filter.
00:21:21No, that's fine.
00:21:22But what we see here is that the data fetching part is like--
00:21:26it's not a lot of code.
00:21:27It's basically a couple of lines with this Grok query.
00:21:32So what you're looking at here is like the Grok syntax.
00:21:36So this is how we are pulling this data down
00:21:38from Content Lake, right?
00:21:40Exactly.
00:21:40So we have all these different queries.
00:21:43And the good thing is that these queries can be very specific.
00:21:46So you're kind of like not over-querying or under-querying.
00:21:49You are actually creating the exact thing
00:21:51that you want and doing that in the optimal way.
00:21:54And yeah.
00:21:57And then, yeah, we were looking at the filters or something.
00:22:01Oh, yeah.
00:22:01Sorry.
00:22:02I've actually not looked at this code myself.
00:22:04I do want to say it's been very fascinating to just do this.
00:22:08And I'm sure there are some parts where
00:22:12I can optimize this, right?
00:22:15Yeah.
00:22:16But it actually uses--
00:22:18it looks like it uses query params and stuff.
00:22:21Yes.
00:22:22That is using query params.
00:22:25Here we have some--
00:22:28yeah, sorry.
00:22:29Oh, no, sorry.
00:22:29It wasn't here.
00:22:30Yeah.
00:22:31And then some interesting use state patterns.
00:22:35It feels like fairly--
00:22:37we have seen this type of rect code before.
00:22:40Yes.
00:22:41Definitely.
00:22:43There's a lot of--
00:22:45this can probably be optimized.
00:22:46So if people are scrutinizing this code,
00:22:49I haven't optimized for it.
00:22:50I'm very particular about doing these things as well, but--
00:22:53We're vibe-coding, I believe.
00:22:54We are vibe-coding.
00:22:55I know.
00:22:56But I like to look at code, and I'm like, oh.
00:22:59But it's pretty cool to see how little code
00:23:03it is for what it is, I would say.
00:23:07All right.
00:23:07I guess we're like, time is flying.
00:23:11Oh, yeah, time is flying.
00:23:13Can I show this?
00:23:14I feel like it would be cool to just go through--
00:23:16I didn't really show this in detail,
00:23:19because this one is actually--
00:23:21I would say it's not very accessible, so don't do that.
00:23:24But what you can do is you can just add these paths,
00:23:27and then you have your little roof here.
00:23:30And all of this is also stored in Sanity.
00:23:32So we have your location and all that.
00:23:34So you can actually store these things in Sanity
00:23:37and just pull it in.
00:23:38And you have this cute little print.
00:23:40I'm not going to do that, because it's open and things.
00:23:42I thought some people, like my father,
00:23:44would want to have something in paper.
00:23:46So I thought I'm going to add something
00:23:47for the more older generation.
00:23:52This needs to be a paid feature for stag and hen parties, right?
00:23:56I think so.
00:23:57I think this would be--
00:23:58it's cute.
00:23:59So you can filter by board games.
00:24:02In the summer, it's going to be the World Cup.
00:24:04So maybe you want to filter by World Cup showings, right?
00:24:08I think that would be cool.
00:24:09And if I can just quick ado, I'm proud of all my features,
00:24:12I guess.
00:24:13Go for it.
00:24:14The quiz is also something that's set up more
00:24:17for the future.
00:24:17You go through this.
00:24:19And I'm capturing the data up front in a structured way.
00:24:23But I am setting this up for more editorial success
00:24:26later to have this in Sanity Studio
00:24:29and have more outreached emails.
00:24:31So it would be a bit more editorial.
00:24:36So yeah, again, this is just another way
00:24:39to get to the same listing of pubs.
00:24:45Yes.
00:24:46Although this one is a bit more curated.
00:24:49You will actually get a curated list,
00:24:51so you won't actually get pubs here.
00:24:54And you can also imagine you can make a pub agent on top
00:24:58of this, right?
00:24:59So you just talk to the agent, and the agent
00:25:01will recommend something.
00:25:04Exactly.
00:25:05We have agent context, which is very new.
00:25:07And you can basically spin that up,
00:25:08and then you can just have that chat interface instead.
00:25:11If you prefer just not chatting to humans,
00:25:14you can just be like, hey, I'm looking for this.
00:25:18That is very, very easily done thanks to agent context.
00:25:22And that ships with the skill as well.
00:25:27Yeah, and I guess you had a map thing.
00:25:31How is it placing the pubs on the map?
00:25:36So I am actually--
00:25:39let's look at the map more specifically.
00:25:47This is-- I think this is also [INAUDIBLE]
00:25:50But it seems like it uses coordinates.
00:25:54Yes.
00:25:56So this is all using coordinates that's also
00:25:59queryable from Compton Lake.
00:26:03Like this was-- it's almost like we planned this, right?
00:26:05But yeah, like Grok has--
00:26:08this is one of the not too known features of Grok.
00:26:12It has geolocation queries.
00:26:15So you can say, hey, find the pubs that's one mile from me.
00:26:20Yes.
00:26:21Express setting Grok, which seems also pretty useful
00:26:23in an application like this.
00:26:25For sure.
00:26:26That would probably be a next feature of being a little bit--
00:26:29this is kind of pulling in the pubs that are already there.
00:26:31But you can probably just be like, oh, I'm here,
00:26:34like pulling these things.
00:26:37Oh, yeah, you can use your geolocation marker, right?
00:26:39Or something like that.
00:26:40Yeah.
00:26:41I feel like you could just give it, right?
00:26:42Like you could literally just give it.
00:26:44Maybe you give it to the chat interface,
00:26:46and that will actually do it for you.
00:26:50That's pretty cool.
00:26:51Yeah.
00:26:52Did we want to do--
00:26:54are we going to do some live webing--
00:26:58web live coding?
00:27:00We can try.
00:27:03You said earlier, like live web.
00:27:04No, but we could do that.
00:27:05I know there's one feature that is not working at the moment.
00:27:08For example, if you filter kind of like this,
00:27:12this is something that shouldn't work, right?
00:27:14Like you shouldn't be able to get to this state ideally.
00:27:17It should kind of just like filter it out.
00:27:23Or did you have something else in mind?
00:27:25Yeah, I also know--
00:27:26I know this because I've looked at it before.
00:27:28But I think the pub entry doesn't
00:27:33have a rich text description field or something, right?
00:27:36True.
00:27:37True, true, true, true.
00:27:39I haven't added it.
00:27:40No, you're right.
00:27:40You're right.
00:27:41And I'm not sure if vibe demo gods
00:27:44are more benevolent than the good old programming demo gods.
00:27:48But it would be interesting to see if the v0 and the agent
00:27:53can pull this off.
00:27:55So how would we do the prompt here?
00:27:57We want a rich text description field for pubs, right?
00:28:02I did kind of prepare this a little bit
00:28:05because I was going to--
00:28:06I thought it was nicer.
00:28:09We do want a rich text description, right?
00:28:11Like we do want to pop out more.
00:28:12So I kind of did do that.
00:28:14And we have this thing called portable text.
00:28:16So I think something I learned and what I like to do
00:28:19is add it to one thing and then scale it as you go.
00:28:23Not everyone does do that.
00:28:25But just to kind of make it quickened and populated.
00:28:28So maybe we shouldn't actually do that here
00:28:31because I don't know which one.
00:28:33How do we change this into the pub schema and populate pubs?
00:28:37OK, I was like, just YOLO it, Evelina.
00:28:40I know.
00:28:41You can always go back.
00:28:45OK, let's YOLO it.
00:28:46OK, let's YOLO it.
00:28:48Can you tell I don't like YOLOing in front of me?
00:28:51I can tell.
00:28:55I think we have the more responsible approach.
00:28:58But I'm always curious.
00:29:01How much can we throw at these agents?
00:29:04Are they able to kind of like test it out?
00:29:06And very often they are.
00:29:07And I'm surprised.
00:29:09They are.
00:29:10I think that's been something, like I said earlier,
00:29:12just letting go of control, which was actually nice when
00:29:16I did it, when I realized it was just doing its own thing.
00:29:18Like I didn't actually-- I could do something at the same time.
00:29:21I was like, you know, so let's see what it's doing.
00:29:24So it's finding the portal text package, which is good.
00:29:28It's already installed.
00:29:29I think I had--
00:29:30Yep.
00:29:31Sometimes agents want to just write that themselves,
00:29:34which is like a waste of tokens.
00:29:39Oh, so it updated the schema.
00:29:43It deployed it as well.
00:29:45All right, cool.
00:29:47So I don't have to say that I need to do this.
00:29:49It's kind of just doing it on its own.
00:29:51I do have to allow it, though, certain things I think that--
00:29:55Which makes sense.
00:29:56Yeah, you want to be still in a little control.
00:29:58At least I do, so.
00:30:02Yeah, so like every kind of destructive action,
00:30:05it will look like ask for your approval first.
00:30:07Like are you sure you want to do this?
00:30:09And I think there's like always allow
00:30:11if you know that like we're just webbing here.
00:30:13Like it doesn't matter.
00:30:16But when you are like in prod, you probably
00:30:18want to be a little bit more circumspect.
00:30:22Definitely, but it's, yeah, it's reading, it's adding.
00:30:29It's quite nice that you also see what it's doing, right?
00:30:32OK, then I know like, OK, these are the files
00:30:34that I'm going to look at next if I want to look at it.
00:30:40Because like we talked about this before.
00:30:42It feels like these tools are like just very powerful
00:30:47and they are like enabling people
00:30:49who haven't touched code before to build pretty cool things.
00:30:53But it turns out like knowing a little bit about code
00:30:56and like software engineering is very useful, right?
00:31:01So like do be curious about what the code is
00:31:06and try to understand it.
00:31:07And you can probably also just ask the agent to explain it
00:31:09if it doesn't make sense, right?
00:31:12Yeah.
00:31:13Did it manage to do it?
00:31:16I'm looking at it now.
00:31:18Yes, there's the portable text here.
00:31:22There's a block.
00:31:24So portable text maybe--
00:31:26portable text is a block content specification.
00:31:30So this is like in Notion and stuff.
00:31:32You have like different blocks you can insert.
00:31:36Portable text lets you do the same basically, including
00:31:40like rich text formatting.
00:31:41And then since everything is stored as data,
00:31:43it's very easy to take that content
00:31:46and implement it here in React or in a native app
00:31:49and stuff like that.
00:31:51So yeah.
00:31:52Did it--
00:31:53Yeah, there's a bunch of these.
00:31:54Sorry.
00:31:55Did it also actually add the content to like--
00:31:58This is what I actually probably should check, right?
00:32:01Yeah.
00:32:03I'm not so sure it's added.
00:32:04Maybe we can just ask it to make it for this pub specifically.
00:32:08Oh, yeah, you're right.
00:32:09I actually am not sure.
00:32:11And you add some content to this here.
00:32:22Very exciting.
00:32:28Thought it's thinking--
00:32:30Folks, I just wanted to jump in here, actually.
00:32:33[INAUDIBLE]
00:32:34It's doing its thing.
00:32:36It's so nice that people are still
00:32:38watching and clearly very curious about how
00:32:41Sanity and v0 work together.
00:32:43I did have a question, though, around the build process.
00:32:46So Evelina, you mentioned that you spent six hours in total.
00:32:51How much of that was like prompting versus reviewing
00:32:55output versus iterating?
00:32:59Oh, wow.
00:33:01I feel like--
00:33:02I was like, I don't know how much time was spent on it.
00:33:05I would say I kind of--
00:33:08I started with like bigger prompts, right?
00:33:11And then I was like, oh, actually, I
00:33:13think it would be better to scale it down.
00:33:15So then I kind of just iterated.
00:33:17I did spend a little bit of time with the permissions, which
00:33:20would not be an issue for other people,
00:33:21but because I have also many Sanity instances, right?
00:33:25And I also kind of let our product team
00:33:27know this can happen.
00:33:28So it was kind of like troubleshooting at the same time.
00:33:32I would say I spent probably most time iterating together with it,
00:33:37but it was like a fun exercise.
00:33:39I guess iterating on like, oh, I want this feature.
00:33:41No.
00:33:42And I realized, actually, this feature
00:33:44makes sense here instead of here.
00:33:45It wasn't like iterating because it was wrong.
00:33:48It was iterating because I kind of unlocked
00:33:52new possibilities of what the content could do.
00:33:55And then as I was done, like I said, I kind of said, OK,
00:33:58now we're kind of done.
00:33:59Let's look at it.
00:34:00Let's delete some code.
00:34:02Let's optimize it to be better.
00:34:05Let's not have anything hard cut.
00:34:06All of these things that I wouldn't want,
00:34:08that wasn't important in the beginning,
00:34:10but that's important for more of like an end state.
00:34:12So I was thinking of this as like a finished product
00:34:14that I can just give to people, right?
00:34:15Yeah, yeah, yeah.
00:34:16That makes a lot of sense.
00:34:17Nice.
00:34:18Yeah.
00:34:20Oh, it's giving me a little warning.
00:34:23This is the one.
00:34:25I think this is fun.
00:34:26Yeah, this is-- we're going to allow that.
00:34:29Are we good on time, Pauline?
00:34:30I realize--
00:34:30Yes.
00:34:31--maybe, I don't know.
00:34:32Absolutely, yeah.
00:34:33We've got about like 10 minutes.
00:34:36So feel free to show more of the demo.
00:34:37I think I'll just hang out and then
00:34:39jump in with questions as V0 is thinking, like now actually.
00:34:44Yeah, a question I had was you talked about--
00:34:51you used to work at Love Holidays,
00:34:53and you had a lot of like landing pages.
00:34:57So when-- yeah, so like loads of landing pages.
00:35:02But how does like sanity prevents drift in terms of scale,
00:35:08scalability, if that makes sense?
00:35:11In terms of-- sorry, can you repeat that?
00:35:14So in terms of--
00:35:16So I was curious about how it's this scale.
00:35:20So for example, at Love Holidays, you said
00:35:23you had tons of landing pages.
00:35:25And then in this--
00:35:26yeah, how does sanity prevent drift?
00:35:30I hope I asked that question.
00:35:32Yeah, no, sorry.
00:35:32I think I have--
00:35:34yeah, or sorry, do you want to go?
00:35:37Maybe like drift of what?
00:35:38Like the content?
00:35:39The content, yeah.
00:35:42So for this, for example, I have defined what a pub is.
00:35:47I have defined what an area is.
00:35:49These things are just like documents, right?
00:35:51Like these are documents with types.
00:35:54And I could-- I'm going to-- that's like one source of truth.
00:35:58So like let's say I wanted to build a separate landing
00:36:01page that has these pubs and areas,
00:36:04but displayed in a different way.
00:36:05Like I could easily do that by just asking you to do that.
00:36:08It's not going to duplicate the code.
00:36:09It's actually just going to use the same thing.
00:36:11And if I-- now I'm doing it with the sanity TCP, right?
00:36:15But if I had the studio, I could just up it in one place.
00:36:18And that will kind of go to all the pages.
00:36:20So it will flow into the right.
00:36:22Yeah, OK, that makes sense.
00:36:24Yeah, yeah.
00:36:24I guess like the deeper technical side of this
00:36:26is like Content Lakes supports something called references.
00:36:30So it's a one piece of content.
00:36:32You can say, hey, I want to reference this pub entry.
00:36:35So when you encounter it, just pull that document in.
00:36:38So that's how you avoid having duplication of the content
00:36:42all over the place.
00:36:43And that's also what makes it easier for the MCP server.
00:36:45Like, oh, I'm updating the glory.
00:36:48The glory, that's the document.
00:36:50I'll update it here.
00:36:51And then wherever we are using this description,
00:36:54that will be updated too, right, from one place.
00:36:55Yeah, exactly.
00:36:57Yeah, OK, OK, great.
00:37:01Look.
00:37:02Wow.
00:37:02Yay, look at that.
00:37:05Yay, why it's not special?
00:37:06Oh, why it's special.
00:37:07I thought it was not special.
00:37:08I was like, what?
00:37:10I didn't ask you to do that.
00:37:13Yeah, this is amazing.
00:37:15It's cool to see it happening in front of you.
00:37:18Yeah, I guess as you've been doing this process,
00:37:22what do you think you still need a human for in terms
00:37:28of reviewing this whole process end to end?
00:37:34Yeah, I mean--
00:37:35Oh, big question.
00:37:36Such a big question.
00:37:37Sorry about that, guys.
00:37:38Such a big question, Seth.
00:37:39What is it?
00:37:397.32, we're in London.
00:37:42Was it the agent that asked that, or?
00:37:46All me, all me.
00:37:47I think, I mean, this is kind of--
00:37:51I am reviewing it as I go, and it's
00:37:53being able to do so much so quickly,
00:37:55but I am also thinking about this as something
00:37:58that I'm sharing with others.
00:37:59I like to have some sort of human input.
00:38:02So when it comes to the more editorial side of these things,
00:38:06that's where I like storing it in one place,
00:38:10but then having some sort of like, OK,
00:38:12maybe AI has auto-generated some text,
00:38:15but maybe I want to add something specific to what
00:38:17I know about London.
00:38:18That's just special to me because I've lived here for six years.
00:38:21These things, I think, are nice touches
00:38:23to sites like this that are supposed to be very personal.
00:38:28Personal software.
00:38:29Yeah.
00:38:30Yeah, 100%.
00:38:32I guess following on from that, do you
00:38:34folks at Sanity use vZero for your day-to-day,
00:38:39or any AI agent tools, I guess?
00:38:44This is what's my--
00:38:45I'm honest, this was my first time using vZero.
00:38:47Yeah, I've been meaning to use it.
00:38:50It's just like my day-to-day now is more on the marketing
00:38:54community side of things.
00:38:55So I have been leaning towards that for the past year,
00:38:58and I've been really enjoying getting back to some coding.
00:39:01And now I can go from nothing to this very quickly and showcase.
00:39:06So I'm starting to think of how I can do this more every week
00:39:10to showcase certain things.
00:39:12So I'd like to do it too.
00:39:14Yeah, I think we can safely say that at Sanity, we
00:39:17use most of the things.
00:39:22Partly for our own work in development,
00:39:25but also we have MCP server support for vZero.
00:39:29So we should probably use vZero to understand
00:39:33if it's working well and so on.
00:39:35So it's very important for us to use these different tools
00:39:40to understand what our users are also experiencing, right?
00:39:44Yeah, and that's-- when I said earlier,
00:39:47that's where I took my time to also understand it
00:39:49as I was doing it and not really rushing in the beginning
00:39:52because I wanted to see how is MCP responding to this
00:39:56and then let people know.
00:39:59Yeah, OK, that makes a lot of sense.
00:40:02OK, cool.
00:40:03I did have a question here.
00:40:05Is there a point in the workflow where you would drop out
00:40:10of vZero and go manual?
00:40:14I guess this is your first time, Evelina, you using this,
00:40:18but I guess so far from your experience,
00:40:21have you felt like, oh, OK, I've done this now.
00:40:24This is enough from vZero.
00:40:26I'm going to take this out and then take a look.
00:40:29I think there's probably a world where
00:40:32I would do that because I think it's fun to do some handling.
00:40:37Wow.
00:40:38You never hear that in this case.
00:40:40I kind of miss it now that I'm working on this sort of things.
00:40:43I like having some focused time and solving some areas,
00:40:46but I didn't really feel the need here.
00:40:48The only thing I did jump off was ideate in Cloud
00:40:53just because I have, I don't know, skills set up.
00:40:56I have things there where I'm my workflow.
00:40:58I like going in between things.
00:41:00But I don't see myself necessarily dropping out.
00:41:04I can just switch, and I can just change the code in the code
00:41:07mode.
00:41:08So I can do that if I want to.
00:41:11But yeah.
00:41:12I guess vZero connects to GitHub as well, right?
00:41:15So you can also have a repo for it.
00:41:17Yeah.
00:41:18Yeah, so you can easily drop in and out for sure, yeah.
00:41:21But it's really weird because we have a mix in the community who
00:41:24are purely--
00:41:26once they're in vZero, they never get out.
00:41:28And it becomes their whole--
00:41:30it's their editor.
00:41:31That's how they develop software moving forward.
00:41:34But then you have folks like me.
00:41:36I prefer doing a bit on vZero because vZero
00:41:39is very good at design, and then taking it out after I
00:41:42get the good design, the kind of skeleton I want,
00:41:46and then coding the rest of it myself.
00:41:48Because I'm similar.
00:41:50Sometimes I do miss actually going through the code
00:41:53and cleaning stuff up and writing it.
00:41:56So yeah, it's always really interesting to me how
00:41:59people think about these things.
00:42:00And I guess if you want to collaborate with someone else,
00:42:03maybe share the GitHub repo, there's
00:42:04elements of that where someone takes over and, you know, so.
00:42:09Yeah, no, this is cool.
00:42:11You can't collaborate in vZero as well, right?
00:42:15I know.
00:42:16You can share.
00:42:18You can share.
00:42:18But I think once you share, you have to duplicate the chat.
00:42:23Like, it's almost like a new branch.
00:42:25Yes, yeah.
00:42:26Whoa, that's a good one.
00:42:27That would be fun.
00:42:28We could be, like, bifurbing at the same time.
00:42:30Yeah, like little Google Docs or something.
00:42:32Yeah, that sounds good.
00:42:35Awesome.
00:42:35Is there anything else you folks are going to show us
00:42:39from the community today?
00:42:40I don't know.
00:42:41Like, is it obvious?
00:42:43I guess we showed how to add the Sanity MCP.
00:42:48Yeah.
00:42:49So if you missed that, you should be able to go to our docs
00:42:52and find, like, the MCP server and all of the instructions
00:42:56there or just, like, just ask the agent.
00:42:58Like, how do you get Sanity?
00:42:59And we should be able to tell you.
00:43:01This is what I did, right?
00:43:02I did ask just, like, what is it doing and, you know.
00:43:05Yeah.
00:43:06And then, yeah, let us know how it goes.
00:43:10You can probably ask things in the Vercel community.
00:43:13We also have a community.
00:43:15You can join all the communities, right?
00:43:17Yeah.
00:43:18But it's a thing that drives--
00:43:20yeah, it's a thing that drives these dev tools forward,
00:43:23right, community, everything.
00:43:25For sure.
00:43:26Yeah, we're on Discord.
00:43:27So you can kind of, like, drop things there.
00:43:29We have a separate channel for the MCP,
00:43:31for example, with engineers that are hanging out
00:43:33that can probably answer all the very intrinsic--
00:43:36intrinsic, is that a word?
00:43:37Very detailed questions you might have.
00:43:39Detailed, yeah.
00:43:40Intrinsic.
00:43:41That's the one.
00:43:41That's--
00:43:42Yeah.
00:43:43Yeah, it's hard sometimes.
00:43:44We also find Evelyne and I on social media,
00:43:48like, LinkedIn X, Blue Sky, whatever.
00:43:50We're probably there.
00:43:52Even Instagram.
00:43:53Even Instagram.
00:43:55Incredible.
00:43:56Well, thank you both so much for your time.
00:43:58This was fantastic.
00:43:59And again, folks who have been joining,
00:44:01love the change of the hat there.
00:44:04We should have started with that.
00:44:05I'm so sorry.
00:44:07Forgot to switch.
00:44:08Where's my hat?
00:44:08I didn't get a hat.
00:44:10We'll have to do another, like, 40 minutes, I guess,
00:44:13because you have the real hat now.
00:44:16No, this was fantastic, folks.
00:44:18Thank you so much for joining.
00:44:20And yeah, I'm sure we'll have you on here again
00:44:22as, like, Sanity develops and we see
00:44:24more of these, like, collaborations between Vassal
00:44:28and Sanity.
00:44:28But thank you both so much for your time.
00:44:32Thank you, everyone.
00:44:35Amazing.
00:44:36How fun were they?
00:44:37Absolutely love these partners session.
00:44:43I think they're my favorites because I really
00:44:45love to see how people use V0 on ad stuff,
00:44:49like layers on top of it, to make sure that, yeah, you can
00:44:54literally just build anything.
00:44:55Absolutely love that.
00:44:57So we have a few more community events
00:45:01coming up pretty much every single week.
00:45:04So definitely tune into those.
00:45:06If you go on community.vassal.com/events,
00:45:09you should find a list of both our online and in-person events.
00:45:13And also next week, if you are in React Miami, I will be there.
00:45:17So hopefully, I can see some of you there as well.
00:45:21But yeah, thank you so much, everyone, for joining.
00:45:24And yeah, we'll see you here next week.
Community Posts
No posts yet. Be the first to write about this video!
Write about this video