26:29Jack Roberts · Tutorial
Claude Code + Stitch 2.0 Destroys Web Design
A 26-minute screen-recorded walkthrough of the DRIP framework: from Stitch vibe mockups to a deployed React app with Supabase auth and Stripe payments.
March 24thThe argument in one line.
Claude Code can now build both the website and the content management system that lets clients edit it safely, turning a one-time build into a scalable service without needing to touch the code again.
Read if. Skip if.
READ IF YOU ARE…
- You build websites for clients and are tired of fielding every copy-change request yourself.
- You are already using Claude Code for small builds and want to understand how to productize and hand them off.
- You want to give clients editorial control without risking structural damage to the underlying code.
- You have basic familiarity with Claude, GitHub, and Vercel and are comfortable following screen-share tutorials.
SKIP IF…
- You need enterprise-grade security, user management, and audit logs -- the presenter describes this as v1 beta.
- You are building a complex multi-team content workflow; this system is scoped to single-site or small-agency use.
- You have no prior exposure to Claude Code -- the presenter points to a separate masterclass for absolute beginners.
The full version, fast.
The standard Claude-built website breaks client relationships because clients cannot edit it without the developer. This tutorial teaches a three-step pipeline: build a visually polished site using design reference screenshots and Firecrawl for style extraction; deploy it free via GitHub and Vercel in one Claude prompt; then bolt on an AI-powered CMS backed by MongoDB Atlas that gives clients a password-protected editor with guardian validation, SEO controls, version history, and multi-page management. Every client edit is validated by AI before going live, every publish creates a versioned snapshot in MongoDB, and the developer never needs to touch the site again.
Free for members
Chat with this breakdown — free.
Sign in and you get 23 free chat messages on us — ask for the hook, quote a framework, find the exact transcript moment, generate a markdown action plan. Bring your own key when you want unlimited.
Create a free account →Where the time goes.
00:00 – 00:55
01 · The CMS Problem Solved
Core tension: clients need to edit, developers do not want to be on call forever. Frames the CMS as the fix.
00:55 – 02:37
02 · What The CMS Does
Walkthrough of the Claude CMS landing page and one-dashboard-per-client architecture.
02:37 – 05:23
03 · Live CMS Demo
Real-time demo of editing copy, changing prices, toggling mobile view, and the SEO panel inside an existing CMS build.
05:23 – 05:46
04 · Grab Claude And Start
Step 1: Claude desktop on the 20-per-month plan, or online alternatives like Base 44.
05:46 – 06:36
05 · Pick A Design Reference
Screenshot inspiration from real sites and Dribbble prevents the default Claude aesthetic.
06:36 – 08:47
06 · Use The Blueprint Extractor
Firecrawl-powered skill extracts structured style context from live websites and feeds it to Claude as design intent.
08:47 – 09:49
07 · One Shot Website Build
One-shot output demo: Leverage brand, AI-generated graphics via Kie.ai, multi-section landing page.
09:49 – 10:37
08 · Add Logos And Polish
Iterative screenshot-feedback loop with Claude to reach production quality.
10:37 – 11:42
09 · Host It For Free
Single Claude prompt creates a private GitHub repo and deploys to Vercel at no cost.
11:42 – 12:51
10 · GitHub And Vercel Explained
GitHub is code storage, Vercel is the live mirror. CLI authentication means Claude handles both without manual dashboard work.
12:51 – 13:44
11 · Deploy The Website Live
Claude creates the repo and publishes live; domain purchase shown inside Vercel dashboard.
13:44 – 17:23
12 · Build The CMS In Claude
Three-layer architecture: master dashboard, client sites, ingestion machine. Claude receives a pre-built CMS prompt file. Vercel and OpenRouter tokens wired in.
17:23 – 19:02
13 · Add The Safety Layer
Guardian validation: client edits are AI-checked before publish. Copy, image, and page edits allowed; structural changes blocked by default.
19:02 – 20:52
14 · Connect MongoDB
Document model matches page/version data shapes. Free 512MB tier on Atlas, always-on cloud.
20:52 – 21:49
15 · Set Up Your Cluster
Creating an Atlas account, cluster, database user, and choosing the Drivers connection method.
21:49 – 23:56
16 · Publish The CMS Live
CMS deployed to Vercel; MongoDB hydration from scratch demonstrated by wiping local copy and watching Atlas restore it.
23:56 – 24:29
17 · Two Links One System
Owner link (private master dashboard) vs. client link (password-protected Vercel editor). Credentials never touch the client.
24:29 – 25:28
18 · Client Editor Walkthrough
Client experience: enter password, open editor, change copy, publish, verify change is live on Vercel.
25:28 – 26:24
19 · Scale To Many Sites
Claude creates one master command site plus individual client sites; all feed into one dashboard.
The gap between a Claude site and a sellable one.
WHAT TO LEARN
Building the website is the easy part; the thing that makes it a business is the layer between your code and your client cursor.
01The CMS Problem Solved
- A client who cannot edit their own site will always need you, and that dependency caps how many clients you can take on at once.
05Pick A Design Reference
- Design reference screenshots fed directly to Claude at the start of a build prevent the generic AI aesthetic without requiring manual CSS overrides later.
- Firecrawl lets Claude analyze any live website mathematically for color, typography, and spacing, giving it design intent rather than just a description.
09Host It For Free
- Deploying via CLI-authenticated GitHub and Vercel means Claude handles the entire push without you touching a terminal.
12Build The CMS In Claude
- Separating the owner dashboard from the client editor link means API keys and infrastructure controls never enter the client relationship.
13Add The Safety Layer
- A validation layer that blocks structural edits by default is the difference between a client editor and a client liability.
- Version history baked into the CMS removes the most common objection to handing clients editor access: the fear that they will break something irreversible.
14Connect MongoDB
- A document-oriented database maps naturally to versioned page snapshots -- each publish is a recoverable state, not an overwrite.
19Scale To Many Sites
- Charging for recurring CMS access converts a one-time build fee into an ongoing service relationship.
Things they pointed at.
Lines you could clip.
00:10
“99% of Claude websites are unusable because of one limitation.”
01:44
“A beautiful site that they cannot touch.”
17:35
“AI is not writing code. We are basically just changing copy on it.”
17:40
“Nothing is live until publish, and every publish is a snapshot.”
Word for word.
Read-along
Don't just watch it. Burn it in.
See every word as it's spoken — crank it to 2× and still catch all of it. The same dual-channel trick behind Amazon's Kindle + Audible.
00:00Claude Code just changed website design forever. It can now build beautiful, responsive websites that clients pay thousands of dollars for.
00:08However, 99% of Claude websites are unusable because of one limitation.
00:14And by the end of this video, you will have a beautiful website live and deployed. And know how to build a CMS system that solves its biggest limitation, letting you optimize for SEO, add as many pages as you want, and so many new other things.
00:30Meaning that you and your clients can edit these websites as much as you want so you can save more time, make more money, and get light years ahead of everybody else. And if you're new, I'm Jack. I built consumer life tech startup with a gazillion customers.
00:43Now I run my own AI startups. And here, I share the stuff that actually works. So if you haven't already, grab that beautiful coffee and let's dive straight in.
00:51So this is the Claude CMS. And if you sell websites to clients, your sleep is never gonna be better than it is after watching this video. The idea with this is that we have one dashboard for every single client site or even just your own website.
01:05And even if you're building one website for yourself, this is gonna make the process of editing it so much easier. The idea here is that we can build them, we can hand these off to clients, and they never actually have to touch it again. And I'm not only gonna show you exactly how to build this CMS, but how to build a beautiful website with the latest techniques that actually convert and work very, very well.
01:25Now we're gonna do this in five simple steps. First of all, we're gonna go ahead and grab Claude. Once we've done that, we're gonna pick a design reference, how we want it to look.
01:33We're gonna make it look beautiful and build it. Then we're gonna host that website for $0 completely for free. And then we're gonna go ahead and integrate the CMS, which is gonna be the piece of resistance of the entire operation.
01:45And I've spent days building this specifically to show you exactly how this works and why it's so freaking epic. So what we want really is a beautiful site that they can't touch. If we're building this for other people, like in your team or for clients, we want something that, realistically speaking, they can edit, but they can't destroy the kingdom, so to speak.
02:04And this is the big problem with the way that most people are building websites right now. Right? Because to make edits, they either need your logins, which is one thing, or every time they wanna tweak something like, I wanna change the copy or I wanna change my review, you have to do something about that.
02:19And it adds so much more work to your shoulders and your plate, meaning that you can't ever really automate the process and you can't have a hands free experience from your team or your clients because you're the website guy. You're the guy that has to touch it all the time. And it also makes it hard to sell because clients are like, great, but how do I make edits?
02:37What does that physically look like? And before I show you how you build these websites live in any style that you want to, but actually looks epic and not like Claude's slob, I'm gonna show you one thing here. I need to point something out.
02:46That Claude can now build the CMS as well.
02:50Just standing for central management system, meaning you can sell way more of them. Clients can edit the website without breaking it. It's a 100% automated hand off.
02:59You can also bake into this SEO optimizations, which I'm gonna show you, which is freaking crazy.
03:05You can generate recurring revenue from it if you do wanna sell it. And obviously, you can eventually, if you want to, get a white labeling, but that is way down the road. But just to show you what's possible with the CMSs.
03:15So this was a website we built on my last video. Now this is what the website looks like in the CMS. So say for example, we gave this to a client.
03:21What they can do now is they can chat to AI here to make any changes they want to. Crucially as well, let's say that they don't wanna charge $0, but actually they wanna charge $6. I come numb.
03:30I select 6. Awesome. You can also do those things here by moving moving spacing, whatever you want to.
03:35That's how freaking cool this thing is. You can literally edit it and go about it. Obviously, it's got loads of things.
03:40We can see what it looks like on tablet. I can see what it looks like on mobile. Really freaking care.
03:44I'm gonna go down and just literally mobile optimize it and ask suggestions based on that. It just gives a beautiful interface for if you're building your own websites, you prefer to build on this, can do.
03:53When I come down and basically click on selections, I I can then have conversations with it here on the right hand side. Loads of really cool things. You can save it.
04:01You can publish it. Or the cool thing is SEO. So if click on SEO, for example, I can say my key phrase.
04:05So my key phrase is grow on, I don't know, like, I don't know, AI growth or whatever the thing is, and it'll give me an SEO score of of, like, 60. I can come down here and say blah blah blah. I can see here the best way to build your website, whatever the thing is.
04:19Right? I can come down here, add my description, and let you save it, and then have this updated on the on on literally our website instantaneously. And then what it'll also do for us as well, if I've got multiple websites, I can click down here and see other websites that I've got and do edits on this.
04:33So you get this full system that lets you edit anything you want to. The other cool thing that you can do in the CMS for Computer Rocket is basically go into different pages. So can come down to about I can click on the pricing page.
04:44I can make edits to any page that I want to. It's really freaking cool. I can even come down on the left hand side to add either an article page, a blank page, whatever the thing is, and go through that entire process.
04:55And this was all built by Claude Code. And by the way, I just released the full Claude Code masterclass inside the community that will take you from zero building websites, power features, memory systems, Hermes, all the way down to generating income compliance with this. Even the full thing, I'll put a link down below so you can go and grab it.
05:09It is by far the best piece of content I've ever created. I get messages about it all the time. So if Claude Code sounds like Spanish, you can set that one up down below.
05:16So now we understand the power of this Claude CMS and just how epic it is. The first thing we need to do though is actually build together a beautiful website within Claude code that looks unique and will actually convert. So step number one is literally grab the Claude app.
05:30It's literally if you catch up on the master class, you're just downloading Claude desktop and you wanna be on that $20 a month plan to get started, you can use online services like Livable, Bold. New, Base 44, AI Studio. We're gonna be using the Claude app directly.
05:44Now what we wanna do realistically is get inspiration to make it feel like it's not a Claude generated website, which is what 99% of them look like. And we can help Claude know this in a couple of ways.
05:54One is just sharing URL. So I think this is a beautiful website. I really like the vibe.
05:59They've done such a good job of scale. Probably one of the best jobs I've seen in a while actually of having making things feel big and small at the same time, the blending lots of elements together. So what you can do is either find websites that you like, you can come down and take screenshots of this, and we can literally grab this like so.
06:14Copy it. Shoot straight over to Claude, and literally drop in those screenshots. Another classic example, by the way, is a website called dribble.com.
06:22This one's awesome for finding websites that make your vibe, that you think look really cool. You can literally type things in here. I could say like, yeah, like dashboard for example.
06:30Find a dashboard that I like really easily, and I could just say, hey Claude, I love this design. I can copy the image and come straight over. I'm gonna go ahead and use a skill that I built in my community, which basically lets me get a full design blueprint.
06:41I'm just gonna grab that real quick. Just come over here and do the design blueprint extractor. Come down and download this.
06:46And then you just come over to Claude and explain what you want the website to be about. Hey there, I'd like to go ahead and build me a website which is helping businesses scale with AI automations and using things like Hermes agent and AI systems to help reduce their cost.
07:01I want you to do the design blueprint extractor skill based on this website as inspiration. Or if you're not using the skill, can let just drop in exactly what you want it to look like. I wanna use this because I just wanna get a good understanding of how it all connects.
07:13I'm using something called Firecrawl, which is a really great way of AI understanding and breaking down different websites. Effectively, it's just a more powerful way to get information from online. So if you're trying to understand, for example, branding or why does a website look a particular kind of way, like what is it specifically about the fonts and the and the colors?
07:34Firecrawl is fantastic at helping us understand that information. So it's wonderful. That's what I tend to use when I'm ever doing any kind of website stuff.
07:40Cool. And then Claude's come back and asked us, what's the company brand name for the site, the word mark, the button? Why don't we do something like Leverage?
07:47I think that'd be pretty cool. This is an example. And then in CTA for this, we're just gonna go ahead and say, let's go down and get started.
07:52And guys, this was its one shot output. Cost not capability, your workflow, your tools, automate on your terms, blah blah blah. As you can see, I've got these two images.
08:01These are gonna be a list of companies that we work with, which is cool. Measured reliability. This is gorgeous.
08:07And what it's also done for me, which is incredible, is generated specific images. Check this out. I told him to have things like him his agent and he's built this custom graphic for me.
08:16Why is it done though? Well, do you remember the original? The original thing here, for example, had this on it, which is it had a nice background and then it had a actual like screenshot or something on top of it.
08:27So you can see this is what it's done. I think this is for a one shot, really unique. You're not gonna get this just by prompting cord and sliding things into it.
08:35This is fantastic. And then it's given us a really nice professional theme with multiple different images. Here's how our systems work, come down, and then we've got data, and then we're ready to get started with lots of things.
08:45Automation moves fast. Now this was a complete one shot. And if you want Claude to have the ability to add in images, what we can do is give Claude that skill.
08:54We can do that by coming over to this website, which is probably the cheapest way to do it, which is KeyeraPI. You basically give it an API key. From the left hand side here, you have API keys.
09:03It lets you come over. You can grab that API key and share it. And it's like one of the cheapest ways to actually generate images, and that's exactly how this model did it for me.
09:10Now we can think about ways that we may wanna improve this website. For example, I would quite like to have maybe some logos there, some visuality which is cool. And then I think what would be cool I think this is good.
09:19Maybe we can improve this section a little bit. So what I might do is just take a screenshot of this like so, come back over to Claude, and you can just ask it to do certain things. It could say, hey, I like the kind of patchy design of this, or I love the way that this part of the website logs.
09:32You just literally come back, you take the screenshots, you say, hey, Claude, I wanted to do more like this or more like that, or any inspiration that you like, and Claude will go ahead and execute. Then effectively, you just go back and forward a couple of times until it reaches the point where like, dude, this is perfect, then you'd be ready for the next step.
09:49Then once that's done, we can now see the beautiful website and look at this. I think the logo's just in addition, make it look gorgeous and pop. We've got all our different thing.
09:57This is quite crisp. It's quite nice. It's like we don't want it to be too fantastical, too out of this world.
10:03Nice, crisp, really cool what it does. And guys, this was all created by Claude.
10:09How cool is this? Like, even this, I think, is freaking fantastic. Right?
10:12And you can specify this. It just gives it a super duper premium feel. Here, we've got all the other things that we're doing, financial services, health care.
10:19Again, that maps very nicely to the original, which I think is gorgeous. We can play around that a little bit.
10:24We got a nice image, plugs into everything, already run, explore the system, come down, and then we have the full website. And effectively, we can just alter this as we want to, very crisp. And then the next step is to actually get this hosted.
10:36And the way to do that is to tell Claude code to do two things, which is to follow. Hey there. I would like you to create a private GitHub repo, and then I want you to go ahead and basically post this onto Vercel creating a website.
10:51Now, what is GitHub? What is Vercel? TLDR, if you're not familiar, GitHub is just an online place where we store stuff.
10:58So websites, all the code basically lives in GitHub. So all code that we're building for our website, loads of different individual files. GitHub is just a place where it lives.
11:07And then Vercel is the agent that then deploys this. So imagine the code, the information lives in GitHub. And Vercel is just a one to one reflection of what lives in GitHub.
11:17Right? This kind of deploys the website, and we just use Vercel to do that. Now the cool thing is we can connect to both these services without even actually going in and pushing buttons by using something called a CLI, which is command line interface.
11:31Oh my gosh, Jack. What the hell does that mean? Basically, we just open up a browser, we sign in, and then we're fully connected.
11:37So then Claude can just reach over, create the files, edit files in GitHub, then reach over to Vercel, pay basically post it and do anything that it needs to. And just so you're right, this is what GitHub looks like. You have these different folders, power design, people release projects here all the time.
11:51They can be open source. This is the one I did on design, for example. It's really cool.
11:54And like, some are open source, you can clone them and do various different things. And all you ever do, if you wanna use one, is come down here, copy it, throw it into Claude, and say, hey, do something really cool with this. And guys, this is literally how easy this is.
12:06I told it to do it. It's gone ahead. It's created a private GitHub repo for me and it's published it live.
12:11So if I click on this for example, you can see, open it up and here's our website. I'm ready to rock and roll and now I can share this with clients and do like a thousand different things. And just for your information how this physically works, if you come over to Vercel and you click on the app here, which is the one that we've got, you can see this is the actual website.
12:28And then from here, if we want to, we can do some really cool things like domains. Like, I click on domains on the left hand side. Can actually buy a brand new domain for my website.
12:37I could call it coolidea6twenty, whatever the hell it is, .com, and they can buy it. And that will be linked to my own account.
12:43And basically, I have this I can show clients. That's literally the whole process. And now that's live, it takes us very nicely onto the CMS.
12:49Now the cool thing that you can do with Claude Code is actually tell it, hey, I want you to build for me a central management system for managing my website. And this is what I want. I want it to have this feature and that feature.
13:01And Claude will actually build that for you and sync everything together. I'm gonna show you an example of exactly how this works. But the way that I kinda structured this myself is essentially really simple.
13:10So the idea, and I think the best way that I found to do this is you build a website just like we did, and we post it on Versal. That is step one. Step two is what I call the ingestion machine.
13:21I thought along and hard about this structure, what would be the best way when you've got the CMS. And effectively, what we wanna do here guys is get this website. So build a system.
13:29Well, we just simply drop it in, and I'll show you exactly what that looks like. And then you can hand off the keys to the clients to do whatever they want to. And we're gonna be using MongoDB, which is an unbelievably simple way to manage all the kind of data in the background and the storage.
13:42So very simply, we build the website. Step one. We design and cloud, we deploy it live and versatile as on demand.
13:46Awesome. Then we're gonna ingest it. Ingest the CMS, basically, it's gonna make everything editable for us, which is freaking awesome.
13:53And then we can hand it off to our team, to our clients, and then we'll be absolutely flying. And every site version password is protected and it's very, very cool. I'm gonna show you it looks like in a second.
14:02So the idea here is that we have one dashboard, which is a set CMS for us. And then level two is all the different sites that we have. So Bob's Plumbing Co, all this stuff connects to one single dashboard, which means that all of your hundreds and hopefully thousands of clients can all connect to one individual thing.
14:19So for example, I can have this website, that website, and it all beautifully connects together. And to show you how this works, I'm gonna grab one that I made inside my community. It's gonna come down here and grab the Claude CMS.
14:28What I'm gonna do is come down and just download this guy. And I'm literally just gonna come down and attach the file. Hey.
14:32Go ahead. Read this and open up the CMS, please. And you'll best understand exactly how to build it by seeing this.
14:37So in this system, there's two things we wanna connect to. One is gonna be Vercel so that any changes that are gonna make in the dashboard will appear automatically in Vercel. And the second one is OpenRooter so that people can magically edit and amend their site.
14:50So first one is to grab the Vercel tokens, which you can do at vercel.com/account/settingsforward slash tokens. And if you're building this yourself, you'll still need to basically create this token.
15:01So let me go ahead and grab one real quick. We'll give this one a name of Tester. We'll call the scope of my projects and expiration.
15:07I'll just put it to expire an hour for test purposes. Come down and click on create. Then you're gonna copy that token and basically come over and let's just throw that one in here for the self hosting.
15:15Beautiful. Come down and click on connect. Beautiful.
15:17And it's fully connected. Fantastic. Then it wants an AI editing.
15:20I'm gonna go ahead and use OpenRooter, which is my favorite. You head over to openrooter.ai. It just lets you connect to effectively like any kind of AI you want to.
15:27And then on the left hand side, you're gonna come over to API keys, come down, create a brand new key, give it a name. You'll need at least $10 if you're gonna be using OpenAI for this. Once you got the key, come over to API key, and you're gonna throw that bad boy in there, come down, click on save, and then that should all be rocking and rolling, and we're all good to go.
15:42And if I scroll down, I can see actually like an example site. So the next thing that we need to do is just basically grab our website and throw it in Claude. And I basically just came over to Claude.
15:50I said, hey there, bro. People say, Jack, you can't call AI, bro. I'm afraid, guys, I am ready for the uprising.
15:55And it's not gonna come up to me because we are technically bros. I basically say, go ahead and add this website. You'll see the URL to the website from Versal and you also have access to get a repo because remember, Claude has access to the repo and Claude has access to the links.
16:09It can see all those things together and then just paste it in. And now we've done that, if we come back over to the local host, we should be able to see the page. So this effectively is how it'll look.
16:17We'll get our pages here, which is awesome, and I can change them back. This is where it gets really cool. So I can view the live site.
16:22Fantastic. Or I can open the editor, which we're gonna do here. Now if we wanna give this to clients, we can set a password like this.
16:28Okay? Whatever the password is. And then the client can access it this website with that password.
16:34And that's effectively how you can share it and let either your team or different clients use it. Now if I open editor on this, let's see what it looks like. So we've got here so now I can just edit it easily.
16:43Cut cast not capability. I mean, this is so freaking slick. I'm gonna come down.
16:47Maybe I want to make a change. Right? Maybe I wanna say said nothing leaves like you say, and every action is logged.
16:53I could say every action is captured. Okay. Just for instance, I think that's cool.
16:57I can come down. I click on publish for for example. And then if I come over to the website itself, it's my local host, I scroll down as you can see.
17:04Now look at this. It says every action is captured. So you can see it's updating the website.
17:08And so this is really good, but it only really covers half of the question because what we need to know is actually connect this to a database. So that basically, we can Virgin controller and the client can go back and make amendments. You can make amendments, and we can't really do this here.
17:23So this is currently on local host, but what we're gonna wanna do is connect it to MongoDB. But to do that first, I just want you to understand something really important. So the idea with this is that every single change we make is checked.
17:35So we can actually build into this Guardian systems that basically mean there's certain things they can't change, like about the structure or whatever it is. So we have the client's edits, and if it's okay, we let it through to change it. But if not, we can discard that.
17:48So things like actually changing the structure of the website, you can remove these, of course you can. But you can make it very safe to do that. So the idea here is that AI is not writing code.
17:56We're basically just changing copy on it. Although, of course, we can make this a full code editor if we want to. We're gonna validate every change and nothing's live until publish, and every publish is a snapshot.
18:06In other words, we can always reverse this back. And the reason why I've created this version this way is because the client isn't reading whole school whole school website design. Effectively, it's given the ability to create websites, edit copy, edit images, add new pages.
18:19That's it. They don't need to completely redesign different things. But we could do that if we want to.
18:24So this is an optional safe gate that we can take off and on. But it does bring us into the question of where do we store all this stuff? Well, we store all this stuff basically after understanding the fact that we can do many things on here.
18:35Right? We can click on buttons. We can edit it by the chat.
18:37We have an SEO panel. We can add pages. We can add images, add sections.
18:41We can even have a form inbox on that. So if we have a form on the website, it can actually go through to the CMS and they can it almost functions then as like an an entire, like, where they're capturing all of their emails, which is insane.
18:54And obviously, we've got version history which is freaking cool. So again, all these different systems, very, simple. And we stand it up and ready to rock and roll.
19:01But what we need to do is point it towards MongoDB. MongoDB, super freaking cool platform.
19:07Idea of it here is to and it's perfect for these kinds of applications. Takes all of our documents and files as a beautiful place to store it. It's unbelievably easy to set up.
19:16And the reason why we're gonna be using MongoDB here, there's a couple of reasons One is the fact that it is gonna think more so in documents rather than tables, which is exactly how website pages and versions are shaped. Of course, there's many different options. MongoDB is gonna be unbelievably easy to set up.
19:30So we can take JSON documents, a flexible schema, fast queries. It's gonna scale out. It's got something called the Atlas Cloud, which is pretty sick, and it's always gonna be on twenty four seven.
19:39Documents on tables. Stores flexible JSON like documents, no rigid rows, no columns that it's fighting against, so it can be more flexible. We've got the Atlas product, which is basically fully managed.
19:48Cloud clusters with automatic backup, global reach, very, very cool. Flexible schema, very fast queries, it's always on, and it scales out. So how on earth do we actually connect it?
19:58Well, first I'm gonna do is shoot over to MongoDB. And on this page, can download and click on get started and come down and create account by setting up with Google. And then once you've done that, you're gonna come down and accept the privacy policy.
20:08And remember, when you're building AI systems for anything, we have the code editor. But one of the core components, if you think of it like like a like a kind of like two sides of one coin here, is the database and storage. Anything we're doing is gonna require data and storage.
20:23So this is like user accounts, histories on the websites, how do we roll it back, lots of interesting things. And the the MongoDB Atlas is fantastic for this sort of thing.
20:32But you do want some kind of storage system there. So it's gonna get to know a little bit. I'm gonna go ahead and skip the personalization on this, but it will just basically change, I I think, like, the way that they onboard you.
20:42So if you wanna be specific about that, you can go and do that. You can pick your host plan. I'm gonna get down on the free one with 512 megabytes of storage.
20:49Come down. Close to zero is fine. We could call this one something like website CMS.
20:53We need to do only one word. AWS is fine. This is decent.
20:57Come down and then click on create deployment. And of course, we've got to validate that we're human beings, carbon based life forms. And so at this stage, we need to go ahead and create a database user.
21:04So just come down here and click on this button here. Then once that's done, we're gonna come down in that choose a connection method, and we're gonna wanna go with the top one here, which is drivers. And then you just tell Claude that you want to connect MongoDB to cover all the databases and version control.
21:17And what this will allow us to do is go from being something this CMS, something that's running local in on your computer. That's something that actually we can use on a website. So we can actually share this live with clients and they don't need to download things.
21:30They can literally just go to the website, enter the password, and everything is tracked as one single source of truth in MongoDB. And then all you're do guys is that you grab this information, share it with Claude in a safe way, and then you'll be fully connected. And just like guys, MongoDB is fully connected.
21:46So the next thing that we need to do is basically take this wonderful thing we have on our local computer and actually just create its own website. So I'm gonna say, this is awesome, dude. What I'd like to do now is basically publish this CMS on its own Vercel URL, please.
22:01And as you can see, whilst it's doing that in the background, the boot logic confirms it on a fresh start. Mongo was already populated. Populated.
22:07It It hydrates hydrates the the file system from the database. Let me prove it the hard way. Wipe a local leverage copy and watch it come back from Mongo.
22:13Hey, guys. It literally is this simple to connect softwares now to your your own actual individual builds. And then basically, guys, you can see on the left hand side, we can organize database.
22:23They've got a really beautiful UI for this sort of stuff. And it's got like a gargantillion features inside MongoDB, which is interesting. But if you come on to, clusters here, you can see we now have the website CMS uploaded in.
22:32We can see the size of the data. We can see the connections. All this beautiful data and information for us to manage and see exactly what's going on behind the scenes.
22:41Okay. So in MongoDB guys, you can have your organization and your projects. So we'll make sure that we're on our project, which is project zero by clicking on it.
22:49And effectively, what you can do in MongoDB is decide which IP addresses can basically edit it. So what we're gonna do on the left hand side is come over down here to database and network access. And then you can see I've got this and it has the resources.
23:02If you come down here to IP access list, like so, and then what we're do is come down to add IP address. And here, guys, you can either just add in the IP address of your client or you can enter this one in here, which you keep access to basically any IP address, and then come down and click on confirm. And just like that, it's now active.
23:16And, effectively, now, it's really cool because we can just basically whitelist any kind of IP we want to. We have full control of that for our website database.
23:24And for example, now I'm in the editor. So I wanna make some edits. This is exactly what it looked like for the client.
23:29I can come down and add in, let's say, a little wise. I wanna say cut cost, not capability. I come down.
23:35I click on save. Let's click on publish as a for instance. And when it's live, when we refresh the page, we should physically see that going on when this publishing is finished.
23:44Cool. So that's published. Let's go ahead and check now the live web site.
23:46Then if I refresh this one here, there you go. And this is the live thing running right now on Vercel, meaning you have full editorial capabilities. So the best way to think about how this entire system works very simply is there are two links.
23:59Okay? We have, first of all, your link. This runs on your computer.
24:03You're the only person that has access to this master overview. You control things like what is the model that allows the website editing, you know, the Versal hosting, the database connection to MongoDB, all of this stuff.
24:15This is your command center. This is where we add in all of your websites. I've got one here, but I could add as many as I want to.
24:21And if I my client says to me, hey, Jack, I love this website. I would love the ability just be able to edit and do various different things. I can say, hey, no problem.
24:31I can come down here and all I'm gonna do is share this link with them. Okay? And then I'm gonna share with them a password like Hello69.
24:37Obviously, you wouldn't use that in reality, but you get the idea. And effectively, what happens is they get this link, which is this link right here. We just copy and paste that one.
24:45We come over and paste in the password. We unlock the editor, and then this is the client opening it up, and it's like, hey, this looks really cool. Now they themselves, they get an a guide about how does it work, this is how you edit it.
24:56This is insane. And basically, can scale this to as many websites as you want to for the price of it. So I've got cut cost not capability to say, I actually wanna fix that typo.
25:05I wanna remove that. I'm the client. That's exactly what I wanna do, which is decent.
25:09I can come down and then I click on publish. Give that a second. And let's see now if I, the client, have actually gone ahead and updated everything.
25:16Okay. Cool. So it says it's published.
25:17So if I check out the actual website itself, which is this one here, and I refresh it, do I see a standard thing and add it. So that's the client having full access. And then all I do, I basically just add as many as websites as I want to.
25:29It's all managed in one system. And then when you set it up, basically, what Claude does is Claude creates for you the websites you build of which there'll be many. But it creates one kind of master site that just allows people to sign in and they only get access to the thing that they use their credentials for.
25:44And so what Cloud does is when it creates these websites of which you can have five, ten, twenty, thirty, forty, it also creates one other website. This is like your central master command. And effectively, just log in with a unique password to go and edit this thing.
25:59Obviously, you could make this a million different ways. You can give everyone username. Pat, there's a million different ways you could do it.
26:05This is like v one beta of this thing, but just goes to show how you can actually scale this up with so many different websites. Now building a CMS is just one part of many different facets that you need to master with ClaudeCode if you wanna get the full capabilities. So the next thing we wanna do is learn more of those capabilities by watching this video right
The Hook
The bait, then the rug-pull.
The opening promise is blunt: Claude can now build the thing clients pay thousands for, but almost everyone using it is missing the one piece that makes it sellable. That gap and how to close it in a single session is what the next 26 minutes are about.
Named ideas worth stealing.
13:44model
Build Ingest Hand Off
- Build the site in Claude Code
- Run the ingestion machine to make it CMS-editable
- Hand client a password-protected editor link
Three-step deployment model that separates build-time from edit-time and removes the developer from the client-edit loop entirely.
Steal forAny productized web service or done-for-you agency model
17:23concept
Guardian Validation Layer
AI middleware that validates every client edit before it publishes. Allows copy, image, and page changes; blocks structural edits by default. Implemented as an optional safe-gate.
Steal forAny multi-user editing system where you want to protect structural integrity without locking clients out
23:56model
Two-Link Architecture
- Owner dashboard (local/private, holds all API keys)
- Client editor link (Vercel-hosted, password-gated)
Separates infrastructure credentials from client access. Owner controls model selection, Vercel token, and MongoDB connection. Client only sees the editor.
Steal forAny white-label or agency model where clients need editing access but not root access
How they asked for the click.
MENTIONED ON CAMERA
FROM THE DESCRIPTION
PRIMARY CTAWhere the creator wants you to go next.
