I Built an AI SaaS With Claude Code — Full Architecture

本站添加: 2026-05-31

[00:00:00]My name is Eric and I have seven years as a senior software engineer working at companies like Amazon and Microsoft. And in this video I'm going to give you a system design overview on how I built in my own startup called BookZero.ai. And books.ai is a AI tool that help business here to manage their receipts and bank statements using AI. And currently this platform here has reached over 1,150 for the active users in just 28 days from Google search impact. And in this video I'm going to show you three things. First, I'm going to show you the highle designs on how I building systems. What does it look like underneath it? What are the tech stack that I'm using and how those systems are connected to each other. Furthermore, I'm also going to show you how I integrate my AI agents into the SAS products because nowadays AI agents is the key. Every SAS product here is all integrating their AI agents into their SAS products. So, in this video, I'm going to show you my designs on how I integrate it and what are the things that I use. And furthermore, I'm going to show you my development process on how I building this from scratch. what is my development flow or development process look like and I'm going to show you the entire road map for this. So with that being said if you're interested for this let's get into the video. Now before we get started tomorrow is our live call where we're going to break down everything that we discuss in this video. You get a chance to ask questions and we're going to dive deep into each and every single topic that we discuss in this video. So if you're interested make sure to join our school community and also if you miss the call make sure to check out in our classroom for the past live calls recordings that we have made on our school community. All right so now let's get into the video. All right. So before I show you the highle design, let me give you a demo of how this application works. Okay. So to give you a demo, here is what the application looks like. So after we sign into the application, here you can see this is the dashboard where we can view the total spending, the tax recovery and such. So the core functionality for this application is the ability to have user here to upload receipts and also uploading bank statements and having our own OCR system here to process those receipts and transactions and eventually be able to match it. So let me show you in a demo look like. So here you can see this is the receipts page where user here you can see upload bunch of receipts and we can for each receipts here we can see the view details. So here you can see the receipts on the left where we have the vendor the total right so the actual receipts and we're using our own OCR system here to extracting all those informations here which you can see on the right. So the invoice dates how much what time is it. So you can see it's actually valid match exactly what we have on the left and furthermore you can see user here can be able to upload the receipts through the uploader here and also they can be able to upload receipts through Google drive. So if you have like a single file or a folder of receipts where you can do a batch upload you can also do it here right so it's all connected and furthermore you can also do that for transactions. So let's say if you have different bank statements you want to upload you can also upload here you can also be able to see all the source files that you have upload for bank statements. So from CSV to Google Drive, you can do it here. And the most important part that we need for the system here is the matching system, right? So where we have receipts that are uploaded by business and also the transactions. So what happened here is that we can be to match them based on the date, the amount, the vendor name.

[00:03:04]And you can see that the transaction is joined with the right transaction from the receipts. And that's essentially the core functionality. And furthermore, you can see we also have our AI assistant where user now can be able to chat with the AI assistant here or our AI agent to query any information about their expense, right? Their monthly spending by category, the largest receipts, right? So many more. And just to show you example of our AI chat, you can see that I just asked a question for show me different categories for the spending.

[00:03:33]And here you can see it pulls the last month spending for the receipts different categories. And you can see this is the charts. We can also do line charts, bar charts. We can also do a pie chart, right? So you can see all kinds of data visualizations. The AI assistant here can help you to query those information. All right. So now you know exactly the demo of the product. Let me show you the entire system architecture and what it looks like behind the scene.

[00:03:57]So right here what you're looking at is the uh terminal wireframe for the system architecture. So I would say that for the system architecture, we can break it down into four sections. the client side whatever the user are seeing right the web application that you just saw the telegram app which is how user here communicates to the AI agents or also the web agents that you just saw right so those are are using underneath it is actually using the same AI agents and then we also have our email inbox where we sending notifications to the clients that's also count as the client side right is what user sees is basically count as the client side and then furthermore you can see the next session we have is kind of like what I call the controller and controller what it does here is that it's going to handle any request that's coming from the client and process it or route it to the third party apps or in this case external services to process the request. So here you can see the controller here we have different parts. We're going to dive into what each of those sections look like but I'm just going to show you the high level. So we have the second section which is controller which will handle the request and you can see that we also have our third section which is basically the thirdparty apps or in this case the external services database AI background jobs those are count as the external service and furthermore the last section we have is the observability so you could think of it like a third party service that would just monitor the application performance like how the user are using application and what is the application doing is there any logs And is there any errors happening right so basically we need a observability here to keep track of to make sure that our application is you know in in in a good state right in a good health and that's basically the four section that I have for the system architect of this application so now what I want to talk about is basically dive in deep for each and every single section and show you exactly what text that I'm using and how are those things are connected okay so the first part what I want to talk about is the client side so the client side Like I said, it's everything that users are seeing right on the website, on the Telegram app, and also the email that they receive. So essentially for the web application here, we're using NestJS-15 for the React 19 framework to basically render the entire application on the front end. And underneath it, we're also using Tailwind CSS for styling, chassen for UI library, tank stack query here for making server call and zastan here for creating local state or client state which you can think of it like caching or cache the response that we're making to the back end. And then we also have things like sentry or in this case post dog, post hog or GA uh for managing the observabilities which we will talk a little more about that later on in this video. But you can see here that this is basically the web application right these are the text that we're using for the front end and in terms of the uh other applications like telegram what user can do is user can chat with the bot right similar to what we do with this is user can be able to chat with the AI agents we can also integrate that into telegram where user can be able to chat with the telegram bot upload receipts upload transactions or be able to do like slash commands so you can think of it like the shortcuts right where I can be able to do a slash command for for example credits it will show you the credits. If I do a slash command for uh usage, I can show I can see the usage, right? So it's just a quick way for you to you know get what you want in the message and basically that's called the slash commands here.

[00:07:25]Okay. Uh so this basically the client side and you can see these are three portal that we have and once we have our client side we also have our controller which will handle the requests that clients are sending right. So the client side sending the request let's say uploading receipts or in this case like going to a dashboard. The first part we have for controller is the app router.

[00:07:46]Now the reason why the app router here is located in the controller not in the client side is because we're using S.JS and SJS is actually server side rendering. So the pages here are actually served in the server side first before they're going to distribute it to the client side. So that's exactly the difference why we actually have the app router here in the server not on the client. And of course, if you want to know the difference between serverside rendering and client side rendering and what are some different rendering strategies here that's best fit for your applications that you can check out this video right here. Okay, so pretty much you can see we have our app routers and also we have our server actions and the API route handlers. So both of them are handling the API calls. Now the difference between server actions and route handler here you can see is that route handler is calling endpoints to external services and server action here is calling endpoints to the internal services that you have right so for example user try to log in or try to set up the on boarding and whenever making calls to third party or external services like stripe or Google drive you can see that those are basically going to be handled using the route handlers and that's the basically difference right so you can see that we have our receipts extracting receipts which are processed using OCR and we also have our import jobs like emails chrome jobs those are all handled using the API route handlers right so you can see that those are the two sections we have inside of our controller and then in terms of the shared libraries these are the library component that are shared across like these three sections like for example getting the current authenticated user ID so that's essentially what these things are inside of a controller so we have our page routers we have our API endpoints and we also have our server actions and furthermore the next section we have is basically the thirdparty apps or in this case the external services that we're calling. So quickly just to go over the main section we have our database our authentication and for that we're using SUV and for AI here we're using openAI for the chat agents and Gemini here for using the OCR and then in terms of the job processing for background jobs and essentially what Q Stash does is whenever we making calls right to our API or to like Gemini OCR sometimes Gemini has really limiting on how many requests it can do. So by having a Q right a serverless messaging and scheduling solution it essentially going to help you to auto retry help you to schedule help you to batch help you to run requests in parallel help you to process those requests in a Q order so that we don't have to hit like reimiting and if we ever do hit re limiting we're also going to use up stash- redd is here to make sure that we do a hot cache for those right so that's basically the background jobs and we're using like a message queue or like a queue to process those job asynchronously. And then furthermore, you can see we also have our external service. So we're using Stripe for payment reset for email service. And we also have our Google Drive which will handles like cloud imports uh be able to pull in receipts or PDF from a Google Drive folder. And furthermore, we're using Telegram here to communicate to our clients through our AI agents. Right? So you can see that these are the service third party services that we're calling supporting our application architecture. Okay. And the last section we have is the observabilities which I want to talk a bit more on. So observability you can think of it like like I said right? So the third party service that keep track of the application's performance and one of the service that we use is called sentry which is basically monitoring the service errors or logs that we have in our application. For example if I were to navigate to the sentry issues I can be able to see all the issues that are happening inside our application. any errors we have, any logs we have. We can be able to keep track here if there's any high severity issues. We can also get page or in this case get notified based on this. We can also see the outage. We can also see the system performance all through the sentry performance here. Okay. So that's is actually what the sentry does is helping you to man monitoring the performance of the application. But in terms of the product product analytics for example like is user using the application or how many user have visited our application. Well, for that we're actually using a product called Post Hog, which is a pretty powerful tool and it's actually a sponsor of this video.

[00:11:56]And essentially what it does here is that it's going to help you to keep track of the product analytics for the applications. So any events where user click on the buy button or sign up or whatever you want to keep track for your applications. You can be able to use this platform here to keep track of the user behavior. So here you can see I have been using this for almost a month and currently you can see I haven't hit the free tier limit. And just to give you a quick demo here, you can see inside of my post talk project, I have two project. One is for staging which is for development and the other one is for production. So if I were to show you the the the staging environment first you can see uh this is the dashboard analytics for showing you okay what are the active users right? So daily active users that we have and also weekly active users as well as like the growth accounting and the retentions. And furthermore, I can also be able to keep track and pull those information from post hog inside of my application. So right here you can see inside my application. This is for staging by the way. And you can see for outbound is where visitor coming from and where they drop off. And you can see the entire clickfunnel here is all tracked inside of my applications. So I will basically calling the post clock API to fetch those information and display here inside my applications. And for for example the visit per days the lead and demo conversions those are all keeping track here and you can see for inbound for example what users do after they sign up where they chart. So you can see this entire inbound process is all keeping track using post hog as well.

[00:13:23]Right? And of course if you want to learn more about how to use post hog comment down below and I can try to make a video on it. And if you want to see the entire documentations you can simply just going to go to post hog and simply just going to go to the installations configurations where you can be able to configure that inside of your applications. Now honestly this is a really important part because let's say you're building a perfect application and let's say you don't even know how users are interacting with your platform. Now you have no idea how you're going to improve your platform, right? You have no idea where user drop off or you have no idea where the application started failing, right?

[00:13:56]Maybe your application is already failing in the receipts processing and you don't even know that. And with a combo of sentry and host hog, it's going to help your system here to monitor this. So you can see these are the four section that we have the client, the controller, the third party services and also the observabilities. Okay, so that's basically the applications in high level. Let me talk about how we can connect our AI agents to our SAS products in more detail. Maybe you have a SAS products and you just try to figure out, okay, how can I be able to connect our AI agents to it? What are some options that we can choose to connect our agent here with our SAS?

[00:14:29]Now, if you're not really technical, my recommendation is you can just use N.

[00:14:33]Yes, that classic old Nan. And what you can do is you can just click on this, right? And for example, let's say if you want to connect to Telegram, you can do Telegram. You want to do WhatsApp, you can do WhatsApp. And essentially what you can do is uh you can just create a chat interface right and this chat interface here is connected to your AI agents and this AI agent essentially here is connected to a large language model right for example you can use anthropic and on this channel I talk about how you can build your AI agents using an end and if you're curious about that you can check out this video but essentially what you can do with this is you can connect it with your large language model and for AI agent here you can just build your MCP server right so basically you can use like MCP client tool that connects to your MCP. And if you're curious about how you can connect your endpoints, your API to MCP. So there's actually many platforms that you can connect or convert your API to MCP.

[00:15:27]And of course, if you want to see how you can build your MCP through an API, then you can check out this video right here. And essentially, you can see this is probably the simplest way, right? You have your AI model. You have your MCP connected to your API your and then you have your AI agent here which inside of it just going to have some system prompts to telling exactly what to do whenever there's a request comes in.

[00:15:46]Right? So basically that's how you can be able to do it. You're just going to create a uh AI agent here through Nan was a really controlled environment. And the reason why I actually built my AI agent here you can see inside of the system. So you can see the telegram here is not connected to a N workflow. is actually connected to my controller because I have a chat interface inside of my web application. You can see that this is the web applications. So the AI agent here that Telegram is connected to is the same AI agent connected to inside of my web applications. And this chat interface here is also connected to the same AI agents. And that's why the entire tool calling logic, the chat orchestrator is all reused in both places. And that's the reason why I just built it inside of code. And of course I can also use post hog and sentry here to review and be able to keep track of the user conversation the quality signals from the chat conversation right. So how many queries do we have and uh basically what are the top intents what are the top questions and what about the sessions that we have right how many credits they have is there any negative response we will keep track here we will look through the sessions and try to have the system here to learn from it and process it overall so you can see that's exactly what I use to basically connecting my AI agent here to my SAS products okay so that's basically number two and the last process that I want to talk about is my entire dev or in this case development process what is the entire roadap How did I learn about this? Right? What can you do to start building today? Now, in terms of my workflow, I use claw code to building in my applications. And essentially the way how I start is creating a spec, creating a plan first on exactly what kind of the system that we're trying to build. What is the high level look like? And then I also using claw design to building the entire UI. And if you don't know cloud design, you can check out this video right here. It's kind of like simil uh similar to Figma, but you can actually use AI here to prompt it. you give exactly like this is the wireframe this is the style we want to use and it's going to help you to generate the entire UI design right the UI wireframe is all designed using the Figma and then furthermore you can see we can also using like spectrum development here for example Gstack which is really good created by Gary Tang which is a skill claw skill that can be used to follow the spectrum developments here to help you to plan a bit more before you do the executions we also have the super power brainstorming here which these are all tons of skills that I use to help me to create a better spec, better plan before we actually do the implementation. And furthermore, for implementation, you can see there's tons of framework that I use like GSD, superpower, uh, GStack.

[00:18:16]There's a lot of things that I use. And of course, if you want to see the full breakdown of my entire complete clock workflow on how I building applications, then you should definitely check out this video right here. Okay, so pretty much that's it for this video. And if you want to see the full live call, then make sure to check out in our school community. There's so many things that you can learn from, so be sure to check it out. So, pretty much that's it for this video and I will see you in the next video. Take care. Bye.