Build Stunning AI-Powered Websites with Claude Code: No Coding Needed

In this video, I'll show you how you can use Claude Code to build professionallook websites, all without

writing any code. This is perfect for building websites for businesses or for personal portfolio pages. We'll also

have a look at a few of Claude Co's most impressive features like sub agents and skills to create a design that looks

absolutely stunning. And of course, in 2026, there's an expectation to have some kind of AI assistant baked into

these websites. So we can open up this chat window and we can ask the agent questions about the menu or about the

business and the agent is able to retrieve data from its knowledge base and we can even use these agents to

capture leads or make reservations in the instance of a restaurant. So let's say hey there please can you reserve a

table for four people under the name John? The reservation should be for the 30th of January at 5:00 p.m. All right,

let's send this. And the agent says it's made a reservation. And if we have a look at our database, we can indeed see

this entry for John for four people. And this is indeed scheduled for the 30th of Jan. Now, this website actually uses a

lot of images, especially on the menu. So, it's important that these images are actually optimized so that these pages

load fast and the entire experience just feels zippy and we'll use Claude skills to download and optimize these images.

So, this should be a really fun project to learn the fundamentals of using Claude code. And this topic is actually

near and dear to my heart. I actually started learning to code back in high school where I started to build websites

for clients. Now, back then it really meant writing all of the HTML and CSS by hand. and you might have to use

something like PHP for all the server rendered functionality. We had tools like Dreamweaver that could help a

little bit, but it really wasn't ideal and it was quite expensive as well. There were also these content management

systems that you could use like Jumla and even WordPress. But these platforms had a steep learning curve and they

weren't that easy to maintain either. You won't believe how many of my WordPress websites got hacked because

the client never updated them over years. Now, in terms of WordPress, you could, of course, invest in plugins like

Elementor, but these were not cheap either. I mean, this was like $7 per month for a single website. And if you

were running a little agency like what I had, you had to spend significantly more for all of your different projects. At

some stage, I had hundreds of websites in the company. So, it's absolutely mind-blowing to me that we're now at a

point where we can ask an agent to build something as beautiful as this within only a few minutes. We can hook up

contact forms really easily. We have built-in AI assistants that just work. And of course, we can make reservations

manually as well. And these reservations will be added to a built-in database, which we don't have to set up ourselves

either. So, this is actually a really nice way to make a little bit of side income. Or if you're simply learning

Cloud Code and you want to give back to your community, offer to build a website for a local business for free. So,

enough talk. Let's jump in. For the prerequisites, all you need is to install NodeJS on your machine. I also

recommend installing a code editor like VS Code. We will not be writing any code ourselves, but a code editor will make

it really easy for us to preview our application. Now, since we'll be using Claude Code, I do recommend having a

Claude Code subscription. Now, Claude Code is about $20 per month, but I will link to two other videos where you can

use the GLM models for a lot cheaper. And if you have the hardware to do so, you can run local AI models on your own

machine for free. Right, the next step is to open up your code editor and simply open up any folder on your

machine. Then we can open up a new terminal window. And in the terminal, we have to install claw code. I will link

to this article and all the other pages in the description of this video. On this page, when you scroll down to

installation, you can simply have a look at your operating system. For me, I'm using Windows. So, I'll copy this

command, then run that command in the terminal. This will install Claude Code on your machine. Now, I'm not going to

run it because I've already set up Claude Code. And in order to start Claude, all we have to do is run the

command Claude. You will now be asked to select your theme. So, I'll just go with dark mode. And then you have to log into

Claude either with your subscription or with an API key. Now, I do not recommend using an API key as this will get way

too expensive really quickly. Instead, let's sign in with our subscription. And that's it. We can now start using Claude

code. So, let's just say, hey, and we get this response from Claude, meaning everything was set up correctly. Now,

I'm just going to clear this conversation. So, let's talk about design. By default, Claude and most of

the AI models out there will produce designs that look very generic. This is also known as AI slop. Now, there is a

way to get Claude to produce designs that look unique and natural, and we can do that by assigning a front-end design

skill to Claude. If we enter front slash, we get access to all of these custom commands. And if we enter skills,

we can see all the skills currently available to our session. At the moment, we don't have any, but we do get this

instruction that says that we can actually create skills within this folder. Now, skills is a really hot

topic right now. It's a very unique way to assign these extra capabilities to Claude that it wouldn't necessarily have

otherwise. Now, there are many different ways of adding skills to a project. Either we can add them manually, which

is perfectly fine, or we can download and install them from a marketplace. to access different marketplaces. What we

can do is enter front slash slashplugin and when we run this we can view any installed plugins or we can also add

different marketplaces. So let's actually add a marketplace. This official marketplace from Anthropic

actually includes a lot of different skills including the front-end design skill. So what we have to do is simply

copy this URL. Then back in claw code, let's add a marketplace. Let's paste in that URL and press enter. Then from this

marketplace, I'm actually going to look for this front end design skill and I'm going to press I to install it. Now, if

we exit out of Claude and go back in, we can enter skills. And now we do have access to that front-end design skill.

Now that we've given Claude the ability to create unique designs that do not represent AI slop, we want to give it

some design inspiration. So what we could do is go to a website like dribble and maybe we can enter something like

restaurant and then let's have a look for a design that we actually like. And maybe just to keep things a little bit

different, let's select this one. So I'm going to copy this image. Then back in our project, I'm going to create a

folder in the root and I'm going to call this docs. Within docs, I'm going to create another folder called design. And

within design, let's create another folder called references. And I'm going to paste that image into

this folder. And I'm just going to rename this to 1.png. Then we could assist the agent by maybe

grabbing a few more images and adding them to this folder as well. Right. So back in claw code, let's pass in this

prompt. Analyze the code base and reference images in the docs design and references folder. Create a complete

design system in docs design with a style guide, design tokens, and component specs tailored to our tick

stack. This is really important. use the front-end design skill to assist. So, Claude is going to ask for permission to

run certain commands. I'll just go with option two, which will allow it to just simply continue without asking our

permission going forward. While this is running, I'm actually going to add one more document to the docs folder. And

this is a CSV file that contains all of our menu items. You're welcome to create your own. And in fact, you could just

ask Lord to create something like this for you. And this basically contains the category like appetizer, sushi, steaks,

etc. It gives the item name, the description, the price, and a badge. The badge simply has something like popular

or chef's pick. That's it. Or it could just be blank. So, as I mentioned, you can simply get Claw Code to create the

CSV document for you, or you can download it from my community, which I'll link to in the description of this

video. We will use the CSV file for two things. First, we'll ask Lord Code to create the menu page using these items.

We will also upload the CSV document to our AI assistance knowledge base. And right, we now have all of these

different pages which contains all of these design components, design tokens, the style guides, and even the Talwind

config files. Now that we have our design system in place, I'm actually going to create a sub agent to enforce

this design system. When we're building our application, we can use sub agents as these little specialized agents in

our application and the main agent can then invoke the sub agents at any time to review the UI as an example. In order

to create sub agents, all we have to do is run the command agents. Then let's create a new agent. I'll create it at

project level and we'll generate it with Claude. I'm going to say call this agent front end designer. This agent is

responsible for ensuring that the application follows the correct design system. It needs to reference the design

system in the docs/design/folder. This agent is allowed to make edits itself. If the agent is asked to review

a design, it should return a detailed response back to the calling agent. Or if this agent is asked to review and

edit a design, it is allowed to make edits itself. Let's keep it really simple. Let's send this. I'm going to

assign all of these tools and hit continue. For this, we'll actually use Opus. And for the color, I'll just go

with blue. And let's press enter to save this agent. In the claude folder, we now have our front-end designer agent. Now

that we have our design system set up, we have to decide on the text stack that we'll use in our application. We could

simply go for standard HTML and CSS and maybe a bit of JavaScript or we can decide on a framework like React or

Nex.js. Now we will be implementing some server side logic in this application. So I think we'll go with Nex.js. It's a

really popular framework. But there is one challenge. When we try to set up Nex.js, it's actually going to tell us

that we can't because there's already files in this folder. In fact, let's open up a new terminal window. And in

this terminal, we can try to set up Next.js by running create-ext- app

space period. When we run this, it's going to say it can't set up next.js because we already have files in this

folder. And if I wasn't such an idiot, I would have started this tutorial by first installing Nex.js and then doing

the design system. But I just thought the sequence might not make sense. So apologies for that. If you want, you can

first install Next.js and then come back to the design step. What I'm going to do is ask the agent to help me out. So

let's say I'm trying to install Nex.js using this command. But this command actually fails because we already have

files in this folder. How can we set up Nex.js in this folder without removing our files first? Is this something that

you can help us with? So God says it can actually just create Nex.js in a temp folder and then move everything up once

it's done. Let's just actually go with that. Option one sounds good. So as you can see it's currently setting up Nex.js

in this temporary folder. And now it's moving all of his files back into the main root folder. And that's it. We now

have Nex.js installed in this separate terminal window. What I am going to do is just run npm install. And this will

just make sure that all of these NextJS dependencies have been installed. And in order to run the dev server, we'll just

run npm rundev. Like so. Now we can access our website from this URL. And if you see this nextJS landing page, it

means everything worked. Cool. So now that we have our design system in place and we have our Next.js framework in

place, we can finally build our website. So I'm going to go into planning mode. You can go into planning mode by

pressing shift and tab. This means that the agent won't make any changes at this point, but we'll work with the agent to

plan out our website. So, let's describe our restaurant website. Please help us plan a website design for a restaurant

called The Oak and Barrel. This is a restaurant located in New York that specializes in steaks, sushi, burgers,

and craft beers. This is a familyfriendly restaurant that has live music every Friday evening and every

Sunday afternoon. I want the website to have three pages. The homepage will feature the most popular menu items and

it will have a beautiful header section with a background image. The homepage will also feature upcoming events like

live music. There should also be a reservation button and when you click the reservation button it brings up a

modal where the user can enter their name, the party size and the date and time of the reservation. There should

also be an about us page. This is where you can add a story about the founder of the restaurant. You can make all of this

up as this is just a fictitious restaurant. You can just say that the founder's name is Leon Fonale and the

restaurant was started in 2004. Then I also want a menu page. Now this menu page should feature all the menu items

in this CSV file. So I'm actually just going to go to docs and drop in this menu items CSV file. I want this menu

page to be unique in the sense that it should feel like a menu that you're paging through the details and images

for each of these items. Now, for all of the images in this website, I want you to use stock images from popular

websites like pixels. This includes all of the images on the homepage, on the upcoming events, the menus, and for the

about us page as well. All right, I think that's enough. Let's send this. Right, the agent now created this

implementation plan, and I do recommend reading through this. And once you're happy, you can simply say yes, clear the

context and we'll go into auto accept edits mode. Claude code will now create this to-do list and it will make all the

changes. So I'll simply skip forward to when all of this is implemented. Right? So Claude is done with the changes. And

if we have a look at the website, we actually get this error message. So I'm just going to copy this and let's pass

this back to Claude. This will be a really easy fix. It's just that in Nex.js JS when you're referencing

external images, you do have to allow for those providers. As Claude says, it's just a configuration change. And

now our website is indeed working. So if we have a look at this, this really looks professional. We have these

different sections. I really like the unique font that it decided to use. We have this beautiful euro section. We've

got our favorites over here. And everything just looks incredibly professional. Let's have a look at our

about page. We're just missing an image of a person here. But of course, we should be providing our own images for

all of the stuff anyway. And under menu, this looks really neat, like this nice welcome message. And this actually looks

like a menu or a book. Let's page through this. And we have these nice little images. And everything just

works. This is really cool. Now there is one optimization that I like to make to these images and that is to actually

download the images from pixels and to store them in our local folder. At the moment when we open our website it's

actually doing requests to pixels to retrieve the images which is completely unnecessary. We should be caching these

images in our own project. And these images are also relatively big because typically these are JPEG images and they

could have any type of resolution. So what I like to do is to download these images and convert them to WEBP which is

a tiny format meant for the web. So how can we get Claude to do this for us? We need Claude to now download all the

images used in this application, resize them and convert them to webp. Now this is where skills come in. Now we've

already seen that we can download existing skills like the front-end developer skill but we can also create

our own skills. So what we'll do is we'll actually create a skill that will teach Claude how to download these

images, resize them, and convert them to webp. So I'm actually going to clear this conversation. Then what I'm going

to do is go to this official documentation from Anthropic on creating your own skills. I'm going to copy all

of this text. Then back in Claude Code, I'll switch to planning mode and I'm going to say, I want you to create a new

Claude code skill. Below you will find the documentation for creating skills. What I want to do is to create a skill

that will download an image from a URL, resize it, and then convert it to webp. What we will use the skill for is to

download all the stock images from websites like pixels and then resize them for use in our application and

convert them to WEBP. These final WEBP files should be stored in the public folder. That way we can cache them to

improve the website's performance. All right, then I'm simply going to paste in all of the text from that article and

let's send this. Now, chances are we could just ask Lordco to go and download the images and then somehow resize them

and it will be able to figure things out during the course of the conversation. But the thing is if we continue with

this web page. So let's say we add more pages with more images. And now we want to go through the same exercise again.

It means that we have to prompt Claude in the same way and hope and pray it does the same thing by assigning a

skill. We can ensure that consistency. Right cool. So Claude is asking where we would like to store this project. If we

want the skill to be available across all of our Claude instances on all of our projects, we can select personal.

But for this tutorial, I'll just save it in the project folder. Then for the default resize, I'll just go with this

second option and I'll just go with the recommended option. Let's send this. And then I'm just going to approve this plan

and let Claude create a skill. And that's it. So Claude just created a skill. So if we have a look at the

skills folder, we now have this image to WEBP skill. And at the highest level, we have this skill. MD file. And this

simply explains to Claude what the skill does and how to use it. But the underlying magic is actually the scripts

file where Claude created this Python script that the agent can run to do all of this work. This will ensure

consistency when we ask the agent to download and convert this images in the future. And if we enter the

command/skills, we actually don't see our new skill at this stage. So I'm actually going to

exit out of claude code. Then let's go back into claude and if we run the skills command we can now see our image

to webp skill. So let's do the following. Hey please can you use your image to webp skill to download all of

the stock images used in this application. I think a lot of them are actually being retrieved from from

pixels and then resize them and convert them to webp. They need to be stored in the public folder. then you need to

update all of the references to these images to use these local versions of the images instead. All right, so that's

a bit of a mouthful, but let's send this. All right, so this is actually interesting. I noticed that the agent

was not using the skill and I actually got this editor message. So I asked Claude why is it getting that message

and it said that in the skill file itself there's this setting disable model invocation. This means the agent

cannot call the skill by itself. This is my first time seeing this, so I'm not sure if this was added recently, but I'm

just going to flag this as false. And I wanted to point it out just in case you receive the same issue. All right, so

I've updated the skill to allow an AI to invoke it. So please try again. And hopefully it can use the skill now.

Right, it's definitely calling our skill. I now have the skill instructions. Let me create a directory

structure. And that's cool. It looks like it is actually running this convert script in the skills folder. So this

script over here. And if we have a look at our public folder, we now have this images subfolder for all the images in

the about page, events, euro, and menu. And we can see these images being added to this menu folder. And they do have

the webp extension. And from what I can tell, they do seem to work. So how cool is that? We just created our very own

skill in claude code. And if we want, we can share the skill with others and reuse it across all of our projects. And

that's it. So our application should no longer call images from pixels directly, but use images directly in our project

folder. I'm just going to restart a dev server. And all of these images should now be local to our project. And I can

already see that this is a webp file. And this is only 96 kilobyt compared to the 718 kilob of the previous version.

This is already a significant improvement. Now before we move on to adding our chatbot and adding this

reserve a table feature, let's actually commit all of our changes and push these changes to GitHub. So in our project,

let's go to source control. Let's initialize a repository. Let's give a name for this commit like initial. and

let's commit this. Now let's publish this branch. And I'll actually create this as a public repository. So if you

guys want access to the source code, you can simply view the repository yourself. Then I'm going to open this in GitHub.

And there we go. So of course for this you do need a GitHub account which is really easy to set up. Just go to

github.com and then register an account. Now there's actually two major benefits to deploying this project to GitHub.

First is that this is actually a remote backup of the project. So if something had to happen to your local machine or

your local codebase, you will be able to retrieve it from GitHub. You can also invite other people to collaborate on

this project as well. So if you're sharing this with a client or some team members, you can definitely invite

people as well. The second benefit is that you can actually use claude code web to make further changes to the

project. This means if you go to claw.ai/code, AI/code. You can simply select that repository

from over here and you can ask Lord to make changes without accessing your local IDE or PC. How cool is that? So

you can make changes on the move and on the fly. Then there's another benefit. If you go to versell.com and I actually

do recommend doing it now. Go to versell.com and sign up for your account. This is completely free and

this is how we're going to host our project. Let's simply go to add new project. Then let's select open barrel.

And we don't have to change anything on the screen. Then simply click on deploy. And Versel's free tier is so generous

that with a little static website like this, you'll probably never have to upgrade or pay for this service. And now

that the project is deployed, we can go to our dashboard and Versel will give you this public-f facing URL. So anyone

with this URL can now access our website online. Now, of course, this is just a generated URL. And if you want a custom

domain, you can simply click on domains. You can either add an existing domain. So if a domain is registered elsewhere,

you can simply add an existing domain or you can buy a domain from Versell. So we could just enter a name for our

restaurant and just buy it from Versell directly. Now for tutorial sake, I'm not going to do that, but if you want to,

that is really how you can get a custom domain. It just can't be any simpler than that. Now, let's have a look at

adding an AI assistant to this website. And this is something that's really popular these days. Now, we could try to

build our own little embedded agent ourselves, but honestly, why reinvent the wheel? There are plenty of open-

source platforms out there that excel at this task. So, we could use something like Flowwise AI, which gives you this

beautiful little drag and drop interface for building really awesome agents. or another very popular tool with over

170,000 stars is N8N. If we go to the pricing, you'll see that under monthly, it actually starts at €24 per month,

which is really, really not cheap. Now, the nice thing about N8N is that you can self-host it as well. So, a service that

I recommend is Hostinger, and I've been hosting my N8N instances with them for years now, and I've never had any

downtime or issues. And they didn't pay me to say that. That's actually just the truth. Now, if you consider that on this

plan you have unlimited workflows, it's actually really a steal. So, all you have to do is select a plan like KVM1 or

KVM2. I'll just go with KMV2. Then, you can select your period like 1 month, 12 months, or 24 months. It's really up to

you. The most important thing is that you select N8 down here. And then, before you continue to check out, you

can get an additional 10% off if you use the code Leon. And there you go. Now you're saving even more. So simply

continue with the checkout process. It will take a few minutes for your instance to sprint up. And once you're

done, you'll be able to access its dashboard. From here, simply click on manage app. And now simply complete the

sign up form and click on next. Then I'm simply going to close this popup. And when you see this screen, definitely

enter your email address and click on send me a free license key. Then simply copy that key. Go to settings, personal.

Go to usage and plan. Click on enter activation key. Then paste in that activation key and click on activate.

And that's really it. We can now start using inate. Now building a chatbot is really simple. Let's click on this

button to create our very first workflow. Let's call this one oak and barrel support. Let's start with our

first node and let's select on chat message. And yes, this will be publicly available. For the mode, let's change to

embedded chat. And if we want, we can definitely add some authentication. But the most important bit is actually these

allowed cores. At the moment, anyone can embed this chatbot into their websites. So, if we only want this chatbot to work

on certain domains, like our own website domain, we can enter it in here. Now, because this is just a tutorial, I'll

simply leave this on all domains. Now, we have to add our AI agent. So, let's click on add. Let's go to AI. Let's

select AI agent. And for this agent, let's actually add a system message. I'm going to switch to expression. Let's

just open this up in a bit of a bigger window. And let's say you are a helpful assistant for a restaurant called the

Oak and Barrel. This restaurant has a familyfriendly atmosphere. It specializes in steaks and sushi and

burgers and vintage wines and craft beers. All right, so that should be good enough. Of course, you can adjust it

however you want. Now, we have to assign a chat model. So, we can simply click on this and N8 supports pretty much every

possible provider out there. Now to keep things really simple, I'll simply select open router. Then under credentials,

let's click on create new credential. And now we have to provide our open router API key. So let's simply go to

open router and let's sign into our account. If you're unfamiliar with open router, it's basically this unified

platform that allows you to easily swap out providers and models. So let's say that you actually don't want to use only

chat GPT models and you want an easy way to swap to anthropics models. Then this is perfect. You can easily swap out any

provider and any model and you only have one account. You will have to load some credits though. So just go to the

billing section and add a bit of credits. And then under keys, let's create a new key. I'll just call this N

tutorial. Delete me as I will delete this after this video. Let's copy this key and add it to N8N. Let's save this.

And if everything was done correctly, you will receive this green message. And as I mentioned, we now have access to

all the different providers from OpenAI to Nvidia to man so so many different providers. For this tutorial, I'll just

stick with GBT 4.1 Mini. Let's close this node. And I'm also going to add memory. And this is really easy. We'll

just add a simple memory node. and will recall the last 20 messages. Without this, the agent just won't have any

conversational memory. So within the same conversation, you could tell it that your name is Leon and then when you

send the message again, it completely forgot what your name is. So with this note, we can recall the last 20 messages

in the conversation. So I'm going to save this workflow. And now let's publish this. Click on publish again.

And that's it. This workflow is now live. Oh, and by the way, we can test it as well by clicking on the chat button

and let's just say hello. So, if I expand this a bit, we do receive a response back from the agent, which

means it is actually working. So, now let's have a look at adding this chatbot to our website. Let's simply click on

this node. Then, in this section, we have a link to the documentation. I'm going to open up this page. And this

page explains how to embed Nate chatbots into websites. We don't actually have to read this ourselves. All we have to do

is copy this URL. Then back in our project. Let's say, hey there, I want you to embed this N8N chatbot into our

website. Here's the documentation on doing so. And let's paste in that URL. And then what we also have to pass is

this web hook URL. Also, here's the web hook URL to our init chatbot. And let's paste that in as well. I'm not even

going to go into planning mode. I think we can just run this. Right, that's done. And we can indeed see our chat

bubble and we can try it out by saying hey. And we get our response. How cool is that? However, the branding in this

chat window doesn't really match the overall website. So that is where our design system comes into play. So let's

say thank you. I can see the chat bubble. It is working, but the design doesn't look right. It doesn't match the

rest of the website. Please can you use the front end designer sub agent to adjust the styling of this widget? And

let's send this. And we can see the main agent did indeed invoke our front-end designer. And the front-end designer has

a view of all of these design documents. So, it's going to make changes to the widget to hopefully match the branding a

bit more. And that looks way better. Let's just say hey. And that's awesome. At the moment, this agent isn't all that

helpful as it doesn't know what's in the menu or it doesn't really know much about our business at all. So, let's fix

that. Now, to be clear, N8N is stupidly powerful. You can assign vector databases and you can upload documents

and it's really, really impressive and this is not really an N8 tutorial. So, I'm going to show you the easiest way to

add knowledge to these agents. Let's go back to our NAT dashboard. Let's go to data tables. Let's create a new data

table. And I'm going to call this oak and barrel menu. And now we can import that CSV file that we created in our

project. So I'm actually going to upload this menu from our project folder. And my CSV file does contain a header row.

And let's create this. And it's picked up all of the columns in our file. So let's click on create. And it was really

that easy. Nitn just created an internal database and automatically pulled in all of our menu items. And now this menu is

consistent with the menu on the website. And I think while we're here, let's actually create a custom data table. So

let's call this one oak and barrel reservations. We'll create this one from scratch. And

let's add a new column. Let's call this name. Let's add this column. And let me also move my head out of the way. And

let's call this one party. This is of a type number. So this is the party size. And let's add one more column. And we'll

just call this one date. And for the type, let's select date time. And let's add this column. So now we've got a list

of menu items. And we've got a table where we can store our reservations. Now this can be anything. This could be a

lead system or anything. Right? Let's go back to our workflows and let's start with the menu items. So when the user

asks about the menu, the agent should be able to answer questions. So let's go to tool. Let's search for data tables. Now

for this one, we want to change the operation to get and then let's select our open barrel menu data table and then

under return all I'm actually let I'm actually going to let the agent decide. And then that's it. And we can also

rename this node. So let's go to rename and let's say get menu items. Let's add one more tool for creating the

reservations. Again, let's search for the data table tool. This time we'll insert records and we'll insert into the

reservations table. And then for the values, we'll actually just let the AI decide on how to populate these fields.

Cool. I'm just going to rename this one as well to create reservations like so. And let's save this. Let's publish this

chatbot. Now, this is optional, but I like to do it. The agent should be intelligent enough to figure out what

these tools are used for, but personally, I like to give these agents a bit of instructions. So, I'm just

going to add to the system prompt. You have access to two tools. If the user asks you about the menu items, then you

can use the menu item tool. If the user asks to create a reservation, then you need to collect their name, the party

size, as well as the date and time. You should not create a reservation until all of that information is provided. All

right, that's actually it. So, let's save and publish. And let's try this in the actual website. Now, let's open this

up and let's say, "Do you sell sushi?" And the agent says, "Yes, we do sell sushi. What are your most popular items

on the menu?" And you can see that one took a little bit longer. And that is because it actually reached out to the

knowledge base. Let's try creating a reservation. I would like to create a reservation for four people for the 30th

of Jan at 12:00 p.m. Great. I have the party sizes four people and the date and time. Could you please provide me with

the name? The name is Leon. Then send this. And nice. We now have the reservation made. And that's it. So if

we go back to NN, let's go to our data tables. Let's go to our reservations. And we do have that reservation for

Leon. I mean, this can be a lead magnet for your platform. You know, people can chat to your chatbot. And if they

qualify, you could actually make a booking or collect their information. Now, of course, you can extend this as

far as you want. Let's implement one more thing. So, in this app, we've got this reserve a table form. At the

moment, this isn't hooked up to anything, but ideally, we want to leverage the NAN data table that we

already have. So, how do we hook this form up to N8N? And by the way, this also goes for contact forms. You can

actually use N8N as your proxy for sending emails or WhatsApp messages. So what we'll do is actually create a new

workflow and this time I'm just going to call it make reservation and then for the trigger node what we'll

do is select on web hook call. This will expose this workflow as an API endpoint. Let's change the method to post and

let's change the path to make reservation. Now, for this, I would actually recommend setting up

authentication. You could just have a username and password or even provide an API key, but for the tutorial, I'm not

going to do it, but I do recommend doing this for an actual project. Then, I'm going to copy this production URL, and

let's actually just go back to the main workflow. I'm just going to publish this so that it's accessible. And now, in

claw code, we want to implement the reservation button. At the moment, it brings up a modal, but the modal doesn't

do anything. What we need to do is call the following N8N web hook endpoint. This web hook expects a name, the party

size, and the date and time. And let's pass in that endpoint. And I'm just going to say you should not call this

directly from the front end. This web hook might have authentication on it. So, we need to securely call this from

the back end. I suggest creating an API in Nex.js. Then the reservation form should only have this information. It

should only have the name, the party size, and the date time. In fact, instead of passing in the production

URL, let's just grab this test URL. Please can you use this NN web hook endpoint instead? Let's just paste in

that one. And we can just use this one to test the application. We'll swap it out to the production endpoint in a

second. This means in N8 we can now click on this button. So this will now wait for our application to call it.

Then from here let's actually click on reserve a table. Let's just say John two guests and for the date time let's

select this and this. Let's click on complete reservation. Reservation is confirmed. And if we go back to N8, we

can see the workflow was actually triggered and we can see the exact data that was sent to this endpoint. Right?

Cool. So now that we have this data available, we can simply add a new node. Let's look for data table. Let's go to

insert row. Then from the data table list, let's select reservations. And because we don't have an AI assistant

involved in this workflow, we simply have to map these values manually. So we can simply grab the name from the left

and drag it into this field. Let's do the same thing for the party size and for the date time. Then let's run this

node. So let's save this workflow. Let's click on publish. Let's publish this. And now that we know that this all

works. Let's go back to cloud code and let's say all right. So we're actually done with testing. Please revert back to

the production endpoint. Let's send this. And now let's actually test this reservation process again. Let's say Sam

with a party size of seven guests. For the datetime, let's select the 28th and let's create this reservation. Cool.

Let's go back to our data table. And we have a reservation for Sam for seven people on the 28th. This is perfect. Of

course, if you want to add any additional integrations like the ability to send emails or WhatsApps or whatever

you want, N8 can definitely do it as well. So, I've got plenty of videos on NN that shows a lot of these complex

integrations and drag using vector databases. Now, the only thing that's left to do is to simply create a new

commit. Let's say add AI assistant. Let's commit this. Let's sync it. And the nice thing about this workflow is

that it automatically pushes the changes to your production instance. And that's it. So if we now have a look at this

public facing URL, we do indeed get our chat window and let's say howdy. And this works. This video was a lot of work

to create. So if you enjoyed it, please hit the like button and subscribe to my channel to get notified whenever I

publish new Claude Code videos. If you get stuck at any point, then you can join my school community to get support

from like-minded individuals. I'll see you in the next one.