In this video, I'm going to show you

exactly how to build a full stack

applications like this from absolute

zero to a production ready applications

using claw code and five most powerful

MCB servers that I often use for any

projects that I build. And we're going

to build a real bookkeeping applications

that upload bank statements, process

receipts with OCR system and

automatically match them with each

transactions we have. And you will see

how I use suedase MT server for database

and storage and also how we can be reuse

chassis and MT server here to building a

beautiful UI components on our

applications and also spec it for

planning your entire applications before

we write a single line of code. By the

end of this you will have a fully

deployed app on Verscell and completely

built with claw code and those five MCV

server here to help you to build a

perfect application. Now, if you're new

to Claw Code and you want a beginner

guide, then you can check out this video

right here, which I made a complete

video on how to get started with Claw

Code. But if you're not a beginner, you

want to level up your Claw Code

development skill, then in this video,

we're going to show you exactly how to

do that. So, with that being said, if

you're interested, let's get into it.

All right, so before we jump in, a quick

intro for those who are new here. My

name is Eric, and I have spent years as

a senior software engineer at companies

like Amazon, AWS, and Microsoft. And I

have started this YouTube channel to

share everything I have learned along

the way from AI and coding to

automations, web 3, career developments,

and more. All broken down into practical

tutorials that you can actually follow.

So if you're ready to level up, make

sure to check out my YouTube channel and

hit that subscribe button. Now, let's

get back to the video. All right, so

let's take a look at what we're trying

to build in this video. So the goal here

is we're trying to build a bookkeeping

application. And this is the prompt that

I wrote uh using AI here to generate.

And the overall project overview here is

that we're trying to build a automated

expense tracking applications that can

use the Google OCR here to extract data

from receipts or bank statements for our

expense tracking. Right? And to put it

simply, this is what we're trying to

build for the overall system

architecture. So here you can see uh we

have our bookkeeping applications and

this applications can handle these kind

of main features. So one is that user

can be able to upload bunch of bank

statements and these statements here

will be organized and will be tracked

inside of our bank transaction table. So

basically if you upload like PDF CSV

data this application will handle them

and break it down into each transactions

uh records added onto the transaction

table and for each PDF files or CSV data

for the bank statements it will also be

stored the file inside of our storage

bucket so that we know exactly which

file that each transaction come from.

Okay. And the second feature is the

receipt feature where user can be able

to upload bunch of receipts. And we're

going to use the OCR system here to

basically process each receipts like

images like files, PDF files, and be

able to use the OCR here to basically

process each receipts like extract those

data like when it was purchased, what

was the amount, who was the vendor,

which car it was purchased from and be

able to save those informations onto the

receipt table, right? And the third

feature is the the authentications,

right? Right? So user can be able to

authenticate themselves, can be able to

sign up, can be able to, you know, edit

any informations inside of our user

table. Right? So these are the three

tables that we have inside of our

database. And the most important feature

of all is the match transactions, which

basically means that we're going to

match each transaction from our bank

statement, right? From our bank

statement right here to each receipts

that we have inside of our receipt

table. This is really important because

if you're a business owner, you're

trying to do your bookkeeping, right?

you're trying to use AI or basically

like OCR system like QuickBooks to

basically match each transaction to your

receipts, this system or this

application will do it for you, right?

So basically that's what we're trying to

build in this video and what I really

wanted to show you in this video is

basically how I build this applications

from the ground up using AI here to plan

to code to verify to test and be able to

refine. Okay, so in this case let me

show you exactly how I do that. So first

thing first what I usually do here is

I'll start with a prompt. So here you

can see this is the prompt that I

generate using AI and feel free to use

any AI to generate a prompt right so

this is like 200 300 words and what I

usually do here I'll just talk with AI

like just have a natural conversation

explain the AI what you're trying to

build for example I'm trying to build a

bookkeeping applications and here is all

the features that we have list out like

the receipts invoice managements which

supports JPEG PNG files or we're using

the Google Gemini 25 flash for the OCR

suit base for the storage and also Also

user can be able to view, edit and

delete any receipts. There's also the

bank statement management transaction

matching which will match each

transaction with the relevant receipts

and there's also the user authentication

where user can be able to authenticate

themsel using the superbase

authentication. Uh so pretty much these

are all the features right and in terms

of the extractions on what are the

things we're going to use OCR here to

extract which we are using Gemini uh 2.0

flash. So here you can see that these

are the list of things that we're going

to extract from the receipts. Right? So

the last four digits of car locations,

GST, PST, and the process days and such.

Uh there's also bank statement

extractions. So what are the fields?

What are the properties we're going to

extract from the bank statements? So

these are all the things we're going to

extract. And here you can see we have

our data tables. Uh what are the

database relationships, right? Data

tables relationships with each others.

There's also the user flow, how users

going to navigate to the the

applications. So after we have our

prompts, we're just going to move on to

installing our MTP servers to create

applications. So the reason why we need

to install those MC server here is

because usually if you want to follow

this process you you can definitely use

MC server here to help your AI agents to

basically automate a lot of those works.

For example, right let's say if you're

trying to do some planning initially for

designing our applications you can use

specit which is basically a specd driven

development which will plan out the

entire applications or projects before

it start to do the implementation. So if

you haven't get started with spec kits,

you can check out this video right here

which I made on how to get started with

specd driven developments. Basically

help you to do research and plan out the

entire projects before moving on to the

implementations for any project you're

trying to plan or design. And the next

step is after you have your project

planned it right you're going to move on

to implementations and for

implementation here there are a couple

MC servers that I recommend for using

claw code to help you to implement the

project right. So there are two MC

server here that we're going to

introduce in on this stage. One is the

superbase where we're going to give

access to the cloud code agent here. The

ability to create our data migrations,

our data tables, our mock data, right?

Whatever you think of inside of our

database or even for our superbase

storage bucket. We can also do that for

our uh superbase MT server. So that's

why we're going to introduce this MTB

server here inside of our coding stage.

And the other MCB server here we're

going to introduce is the chassen MCB

server. Now this one is mostly for

building UI. So chassen is a UI library

and this Shassian MC server is basically

using the right UI components that you

can add on your application so that

you're not stuck with just UI templates

that AI generates. And that's a really

big one. And if you want to learn more

about how to build beautiful UI with

chassis and MC server, you can check out

this video that I made right here for

more details. The third step is

basically try to use the Playright MCB

server here to test it. And the good

thing about Playright MCU server here is

that it's able to open a browser for

you. Creating a test plan and be able to

test each page, each sections, each

components on the actual applications

and making sure that is able to do what

it's supposed to do that we set inside

of our initial plan. Right? So the AI

here has a context about the plan and

also the player M3 server. Then it

should be able to test everything just

like how a user walked through the

entire application. And then once it

tests everything then it will generate a

test report on what are things fail and

what are things good then we can be able

to use that report to refine our

applications for our next phase. So

that's basically we're going to follow

in this video for MC servers very simple

try to keep it short and concise and

we're going to build this applications

follow this process. So I'm going to

show you exactly how to install this one

by one. Now before we move on to the

next section I want to address the

biggest bottleneck in learning this

stuff. We all know that reading

documentation can be boring and watching

videos can lead to tutorial hell and

sometimes we're just watching videos and

are not actually really coding. So

that's why I'm introducing this platform

called Scribba which is completely

different. Their platform isn't a video.

It's a live code environment. Look, I

can be able to pause this instructor

right here and edit the code directly in

the browser, run it immediately to see

the results and verify if the instructor

is telling me it's right or not. Right?

So it forces you to be active and prove

you actually understand the logic. Now,

of course, if you want to be good at

vibe coding, you have to understand the

underlying architecture. That's why I

recommend checking out their full stack

developer path. And it covers the exact

modern stack that we're using like

Nest.js and even the new AI fundamentals

like context engineering and MCP

servers. And you need to know exactly

how these pieces fit together so that

you can be able to architect a system

that AI can help you to build. So, make

sure to use the link in the description

to get 20% off on Scrima Pro and start

mastering those stack. All right, so now

let's move on to the next part of this

video, which is setting up our MCB

server. Now to start to set up our MCB

servers here inside our project, first

thing first, I'm just going to set up

the Zubase MCB server. That's going to

be our database core side of our

applications, which is our data storage.

So to start here, basically you can see

I have signed up for a Subase account

and basically I create a new project

right here. And here is I'm basically

going to call it the bookkeeper AI. And

here you can see once I create this

project you can see I have zero tables,

zero functions and zero web class inside

of the project. So what I'm going to do

here is I'm going to click on connect to

basically connect our applications our

projects with this soup base project. So

once we click on connect what we're

going to do is we're going to click on

the MCB server option and if you scroll

down it tells exactly what you're going

to do to install it right. So if you

select the client as claw code or cursor

whatever ID you're using. I'm using claw

code. So here I'm just going to select

claw code. And it goes you gives you

exact command to install this on your

local machine. And simply here you can

see I just navigated to the app projects

to this empty project and basically run

this command here to add this MC server

onto our claw code. Then what I do here

is I'll basically restart my claw code

MC server and just run the /mcp inside

of my terminal. And basically you can

see here that I just restarted the claw

code session and and basically do the

/mcp. Here you can see that we have one

MTP server added which is superbase. And

all we have to do here just click on

enter to log in. And once we click on

enter, we're just going to click on

authenticate to authenticate oursel for

this superbase mc server. All right. So

once I authenticate myself successfully,

this is what it shows. I'm just going to

return back to claw code right here. And

now you can see that instead of claw

code, I have subbase connected which

shows here. Now the next step here is

basically to install chassis and mc

server onto our local machine. Now again

if you haven't seen the video for

chassis and UI check out this video that

I made which actually pops up on the

Google search for chassis new MC server.

Okay so basically this MC server here

not only help you to research the right

components but also help you to create

one and also help you to plan the UI

entirely using their chassis and mcber

components using their chassen

components. So what I do here is I'll

just simply come back to the project and

first thing first install the chassian

latest version onto our project. Then

what I'll do here is I'll basically

initialize or install the chassis and

MCP server onto our clock configurations

which you can see here that we have

installed dependencies and configure the

MCB server here. And then now if I were

to restart my clock session and

basically do the /mcp command you can

see that we have two MCB server

connected successfully inside of our MCB

server list. All right so pretty much we

have two MCB servers installed correctly

and now we have two more left. So let's

get into those right now. All right. So

the next one we're going to install is

the spectrum development kit which is

the spec kit from GitHub. And this is

the right way to install the spec kit uh

MC server inside of our project. And you

can see that this is the command that I

use based on the documentation. And what

we do here after we have this installed

is we're just going to initialize our

project. So we're going to use the

specify init which shows here. So here

I'm just going to do specify init for

this project. And once I done that, you

can see it's going to ask me some couple

questions on what kind of AI agent we're

using for our AI assist. So here I'm

just going to choose claw code and what

we do here is that here you can see it

tells exactly uh what are the nest steps

are. So we're going to use the spec kit

constitutions to basically establish the

project principles right and also the

specify here to create the baseline

specifications and then we're going to

get into their planning and also

creating our actual tasks and also be

able to implement each task one by one

using our claw code coding agents which

again you can be able to learn more

using this video right here. So like

what I did here I basically just follow

the documentations. First thing first

I'll just create the constitution like

basic principle on code quality testing

standards and user experience. So

basically I set this as a standard for

the first step on spec kit which you can

see here that it basically set some

rules for the code quality on this

project. Then what I do here is I'll

basically focus on what and why on what

exactly we're trying to build and why

we're trying to build this and basically

just try to create a spec for this

project. So basically using the specify

command here to do so. So here I'm just

going to coming back to the uh clock

session and I'm just going to type in

specify right here and simply you can

see here that basically you going to use

the initial prompt that I created

earlier. What are the feature we're

going to have and why we're going to

create this and what exactly we're going

to create this right so I'm just going

to copy this prompt and just simply

paste it to claw code and then

eventually here you can see that it

gives you some open-ended questions

which we can be able to actually answer

and specify here. So then what I did

here is I basically navigate to that

documentation which contains those 15

questions like needs clarifications. I'm

just going to fill in and answer those

questions one by one and be able to

continue on with the implementation

plan. All right. So then what I did here

is I basically going to complete the

questions and here I basically ask it to

create the plan and here I provide a

text stack and you can see it's going to

create a comprehensive implementation

plan for our project. So here you can

see that these are the uh implementation

plan which takes 12 weeks but I don't

think it would take that long and you

can see that these are the eight

implementation phases based on our uh

implementation plan. So here you can see

that for phase zero which is mostly for

research and MCP server setup. Then we

have also have phase one for database

authentications for data migrations

schema RLS indexes generated the

typescript types right and also making

sure to build the authentication pages

with the chassian form components end to

end testing and those kind of things.

Then we also have our phase two for the

receipts and also have phase three for

bank statements transaction matching and

also the dashboard export and polishing

optimizations end to end testings and

finally documentation and launch. So

pretty much you can see that it breaks

down each phase one by one in the right

order and it tells you exactly what

we're going to do for each phase. And

for the complete project structure,

we're using the NestJS14 model repo. So

for this repo right here, we have all

the file structure what it looks like.

So once everything looks good, what

we're going to do now is we're just

going to start to break this task, this

plan right here into multiple tasks. So,

we're just going to do the spec kit uh

tasks and it will basically just break

the entire plan into multiple or in this

case a list of tasks. So, it tells you

exactly that we first have to check out

to a different branch. So, I'm just

going to create a new terminal sessions.

I'm going to check out this new branch

right here. And basically, I'm just

going to run this specits on this

branch. So here it will automatically

detect the features from the feature

branch name and load the entire spec.md

file and the plan MD file and basically

complete everything from there. So in

this case I'm just going to run this uh

slash command right here again. And here

you can see that it generates 137

ashable uh executable task that we can

uh execute. So you can see that for each

phase we have a list of task. For

example phase one we have nine task and

here you can see that this is the entire

dog that keep track of all the tasks for

each phase. for example like task one to

nine right so in this case let's start

with task one to nine right so in this

case I'm just going to start to do

implementation using the

slashimplementation command and we're

going to do this for task one to nine

and basically have clock here just just

to follow the task list and complete it

and after a while you can see that has

complete everything and here you can see

that the current project status is

complete and all the dependencies have

added and all the directories files are

all completed so pretty much you can see

that this is the step one right to

basically do the setup and all we have

to do here is just do the mpm install to

install all the dependency for our

applications. So in this case you can

see it's going to install this and also

try to tell us exactly that we have add

the service rule key and also the Google

API key and also and such. So here you

can see that these are all the file

structure that we have and in this case

we're just going to add those

authentications for our example file. So

in this case I'm just going to add those

in intov.local local file and basically

ensure that all the credentials set up

for the phase one complete. So in this

case I'm just going to repeat this

process for phase two and above and I'm

just going to come back after we finish

all the phases and before we try to do

the verification. So in this case you

can see I'm going to start with phase

two and here I'm just going to change

this to be phase or in this case task 10

all the way to task 025 which is the

entire phase 2. And before we do so, I

also want to make sure to commit

everything that we have done for phase

one to the GitHub repository, right? So

that we have all the changes saved

before we start to implement the new

phase. So I'm just going to enter this

and let clock code handle the rest. All

right. So while I basically have claw

code build the whole thing, you can see

that claw code also uses the subbase mcb

server here to set up the entire data

table. So here you can see we have two

tables receipts and also the bank

transactions. So that's really the power

of superbase mc server here will give

the tool ability for clawo here to call

the superbase mc server here to create

the tables to set up the entire database

so that we don't have to manually create

those migrations or setting up those

tables one by one. So in this case I'm

just going to continue on with all the

phases and once done I will come back

and review everything. Now before we

jump into the next section let me give a

quick shout out to the sponsor of this

video test. Testbrite is an AI agent

that's specifically for software

testing. With the release of the test

sprite MCP, you get a chance to use the

test sprite MCP inside of your coding

IDE like clock code, cursor, windserve

and more. With simply just adding the

configurations inside of the MCP

settings, you can use it right away.

With the test MCP, it not only

understands what you want because it

first read through the codebase,

understand the documentations as well as

validates the results that your Asian

roads and it is doing that by

automatically generating the test plan

for the PRD documentations and producing

the test cases and test coverage without

any manual inputs. And then from there,

it will basically start to execute the

test and then be able to send the

reports back to you by telling you

exactly what's broken. with normal

coding accuracy of 42% from other coding

agents, we can be able to improve that

with test MCP with the feature delivery

accuracy of 93%. So if you're interested

to try it out, you can check out this

video that I made or you can check out

the link in the description for more

details. All right. So now you can see

that the entire project 137 tasks are

all completed using the playright MCP

servers to test and also using the

specify here to basically do the

spectrum developments and also using

some other MCP servers like subase or

any other like chassis and MCP server

here to basically design the elements

and also setting up the database. So

right here you can see that we have all

the 137 tasks are completed and these

are all the stories for this entire

project like authentications receipt and

bank statements also the bulk operation

and export polish and production

readiness and now if we were to scroll

down there's the production ready

features on for example like the versel

CI/CD pipeline the legal compliance air

handlings and such and if we were to

take a look at the specify here there's

also the spec uh we can click on the

tasks so now if we were to open this

here you can see that these are All the

tasks that are co currently all

completed using these specified right

here. Okay. Specade driven developments

which here you can see all 137 tasks are

all completed which follow step by step.

And now if I were to scroll all the way

down you can see that these are all the

task has all completed which you can see

that it marked with X which means that

this entire phase has completed. So you

can see that the story 6 or phase 8 has

completed the phase 7 and also phase six

are all completed as well. All right. So

in this case, let's try to to run the

applications in our local environment

and try to test the applications to see

if it's working. Right? So here I'm just

going to run in local environment

localhost 3000. And here we can see that

this is our applications. So before I

start the application, I also have um

seeded some data basically uploaded some

receipts and also transactions through

CSV and PNG files, right? And here you

can see that inside of our receipts tab,

you can see that these are all the

receipts that I have uploaded in the

past. For example, we have our vendor,

category, amount, payment method, and

here you can see that these are all

extracted using the Google OCR. And here

is also the file URL, which basically

shows exactly where that file is being

uploaded. Right? So, it's uploaded in

our storage bucket, which the user here

can be able to click on the link and be

able to access the image files. Right?

So, here you can see that we have the

vendor, the amount, which all match

exactly like each records inside of our

tables. Uh, for example, there's also

another record, right? Okay. So if I

were to click on this, this is another

receipt which match exactly like what we

have inside of our table for the

receipts. Uh there's also transactions.

So if I were to click on transactions,

this is where we're going to upload the

bank statements. So after upload some

CSV data for the bank statements, here

you can see that it renders the data

correctly. So here you can see that we

have our date, right? We can sort the

date by extending or descending order

descriptions, the amount, right? We can

sort by the amount as well. Uh there's

also the file URL where we can be able

to click on this to view the full CSV

data for the entire bank statement.

There's also when it was uploaded like

the date on when it was uploaded and

also you can see there's also status on

either this transaction is being matched

or not based on if we have a record

match with a receipt and the most

important part is the transaction

matching right so so for example if I

were to run the auto match it will

basically match each transactions with a

corresponding receipt so these are all

the unmatched items and these are all

the match items that that we see here so

here you can see that these are all the

receipts and also The transactions are

joined in one single table, right? So we

have our date that's being matched uh

which you can see is October 5th, 2025.

There's also the transaction

descriptions also match with the vendor

that we extracted the transaction amount

and also the receipt amount which also

match which gave us a confidence score

of 100%. And here you can see uh if we

were to look at some other transactions

like for example this one um the date

here is October 11th right? So, and if

we were to look at the transaction

dates, it was October 13th, which is

like one or two days delay, but the

amount is exactly the same. And that's

why we gave a confidence score

automatically match a competent score of

80%, because there are some properties

for both tables are unmatched. I can

also be able to click on the uh file

here to see the exact receipt what it

looks like. So, there's much more easier

for anyone to be able to bookkeep their

business expense and their transactions,

right? So pretty much that's how it

works for the basic functionality of the

applications. But you can see that it

integrates all the services pretty well.

It renders the correct data, right? So

how many items being unmatched and total

item being tracked, total tax being paid

which are being calculated. And here you

can see I only upload the months for the

month of October which you can see the

chart shows that right here exactly.

Okay. Uh we also have the vendors,

right? So top five vendors that we have

purchased, all the max transactions and

also the max amount and also we have the

recent activities, right? and also the

data health, the match percentage rates,

everything like this we are displaying

in the uh dashboard. Okay. And of

course, if you want to sign out for the

applications, we can simply just click

on sign out. And now we're just directly

navigate to the signin page. And now if

I were to type in the password for this

password right here. And if I were to

sign in, okay, it's going to sign me in.

And let's say if I want to download this

data for the match records, I can be

able to click on the export right here

for match records. So I'm just going to

click on export CSV. And let's say if I

were to open this CSV right here instead

of a visual studio code, you can open

this inside of Google sheet as well. And

here you can see that this is the entire

data which you can see here that we have

our receipt date, the vendor, the

receipt amount, the transaction date and

also the uh transaction descriptions,

the transaction uh details, right? And

also the link on where you can be able

to get the uh file storage on the

receipt URL for file and also the

transaction as well. Okay. So you get

the full data, you get control of your

own data as well. So that you know it's

not being capped by the applications,

right? So overall you can see that the

application pretty satisfied with what

we're trying to build here. And overall

um I think there's a lot of things we

can test but overall the main

functionality is there. Okay. And of

course let's come back to the database

right here for a second for the

bookkeeper AI. And if I were to click on

the storage here, you can see that these

are the receipts and also the statements

that we have inside of our database.

Right? So we have 10 MB. So let's take a

look at how many records we have. I'm

not sure if it shows, but if we would

click on receipts, uh these are November

receipts, right? So these are all the

photos for November's. These are all the

receipts for December, but which

currently we don't have any. And if I

were to click on the statement bucket,

you can see that there's also the CSV

for the bank statement, which we can be

able to download and be able to view

from the user behalf. Uh if I were to

click on database here, you can see that

there's also the data table, right? So

just like what we mentioned and inside

of our data tables you can see that we

have our bank transactions we have our

receipts and if I were to click on these

tables right here you can see that these

are all the records that's being shown

right so we have each ID for each

receipts and then we have our

descriptions we have the amounts the

categories notes source file URLs um

match receipt ID confidence rates and so

much more okay so pretty much we're

going to be able to keep all those data

inside of our database so that our

application can be able to render those

data to the users and moreover I also

follow the versel MCP server

documentations which can help me to you

know connect this with my agents like

claw code and basically tell claw code

that hey I want to deploy this

application right and claw code knows

exactly what this application is about

you know how to better best deploy it

and here you can see we have our entire

applications fully deployed in versel

completely using the versel MTB server

and claw code which here you can see

that this is the deployment details we

can was to click on visit so if I were

to click on this link um You can see

that it navigates to the applications

which we have hosted inside of Verscell.

And here you can see this what the

application looks like. Okay. So it's no

longer a local host applications is

fully hosted in the cloud. So if I were

to come back to the Visual Studio Code

and be able to stop the MPM rundev and

now if I were to navigate back to the

this applications refresh you can see

that it's still there because it's

hosted inside of our inside of a cloud.

So anybody can use it inside of their

browser. And just to test make sure that

everything works I'm just going to log

into the dashboard. Here you can see

that all the data that we just mentioned

here are all persisted inside of this

application. Okay, so we have our

database, we have our hosting platform

set up, everything is good to go for

this application and that's step once

you have this built pretty much you can

be able to have this application here

release to the public or set up the

domain here and be able to get more

traffic to your users. So pretty much

that's how we can be able to build our

full stack applications using clock code

and these MTP server here basically help

you to remove that manual process to

basically click on different buttons and

be able to set things up. You can be

able to directly make these happens

using these MTP servers with the power

of claw code. So with that being said,

if you do find value in this video,

please make sure to like this video,

consider subscribe for more content like

this, but with that being said, I'll see

you in the next video.