Base44 Tutorial for Beginners 2026 - Step by Step
📺 ดูคลิป · 👁️ 72,213 views · 📅 2025 · ⏱️ 38:54 · 📦 Other
📌 สรุป
คลิปนี้สอน step-by-step วิธีสร้าง web app จริงด้วย Base44 โดยไม่ต้องเขียนโค้ดแม้แต่บรรทัดเดียว ตัวอย่างใช้การสร้าง "Meal Planner App" ตั้งแต่ต้นจนครบทุก feature รวมถึง user authentication, payment (Stripe), AI agent และ custom domain พร้อม security scan ก่อน launch
🔑 ประเด็น / ขั้นตอนหลัก
- สมัครบัญชี Base44 ฟรี → รับ 25 credits/เดือน แต่ใช้ได้แค่ 5 credits/วัน → เพียงพอสำหรับทดลองสร้าง draft แรก
- เขียน prompt บรรยาย app ให้ละเอียด — ยิ่ง specific ยิ่งดี แล้วเลือก style preset ได้ → AI build ครั้งแรกใช้เวลาไม่กี่นาที
- แก้ไข app ทำได้ 3 วิธี: (1) Visual Edit Mode — คลิก element แก้ text/style ไม่เสีย credit, (2) Chat prompt — ขอ feature ใหม่เสีย 1 credit/ครั้ง, (3) ผสมทั้งสอง (เลือก element แล้ว chat)
- ใช้ Discuss Mode (เสียแค่ 0.3 credit) วิเคราะห์ปัญหา/วางแผนก่อนแก้จริง — ช่วยประหยัด credit และแก้ bug ได้แม่นขึ้น
- ปัญหา security สำคัญ: data isolation — ต้องตั้ง authentication ให้ user แต่ละคนเห็นเฉพาะข้อมูลตัวเอง ด้วย prompt ให้ AI set up auth และ RLS rule
- Upgrade เป็น Builder Plan ($40/เดือน หรือ $480/ปี) เพื่อ: custom domain, ปิด 'Edit with Base44' badge, connect Stripe payment, backend integrations
- เชื่อม Stripe ผ่าน dashboard → Settings → Backend Functions → prompt 'integrate with Stripe' → ใส่ API key + Webhook secret → สร้าง product/price ใน Stripe → test ด้วย sandbox mode ก่อน go live
- เพิ่ม AI Agent ใน app — เปิดที่ Dashboard → Agents → toggle on → prompt บรรยายสิ่งที่ agent ทำได้ เช่น ให้ user สั่ง agent ภาษาธรรมชาติแทนการคลิก form
- ซื้อ custom domain ผ่าน Base44 dashboard โดยตรง (ฟรี 1 ปีถ้าจ่ายรายปี) → DNS propagation ใช้เวลาไม่กี่ชั่วโมง
- Run Security Scan ใน Dashboard → Security → Start Security Check → Apply Fixes → ทดสอบซ้ำทุกครั้งหลังแก้ security rule ก่อน launch จริง
🛠️ เครื่องมือ / บริการ / ลิงก์ที่พูดถึง
- Base44 — base44.com (free plan: 25 credits/เดือน, 5/วัน | Starter $16/เดือน/ปี | Builder $40/เดือน/ปี หรือ $480/ปี)
- Stripe — stripe.com (payment processor, sandbox ทดสอบฟรีก่อน go live)
- n8n / Zapier — integrate กับ app อื่นผ่าน Base44 native integrations catalog
- WhatsApp — เชื่อม AI Agent ของ app ผ่าน WhatsApp ได้จาก agent settings
- ตัวอย่าง domain: meal-mate.org (custom domain ฟรี 1 ปีในแผนรายปี)
💡 เอาไปใช้ / ข้อสังเกต
- Base44 เหมาะสำหรับ validate idea MVP เร็วมาก — สร้าง app ที่มี auth + payment + AI agent + custom domain ได้ภายใน 1 ชั่วโมง แทนที่จะจ้าง dev หลักแสน
- Builder Plan ($480/ปี) คือ threshold ที่ app จะ generate revenue จริงได้ — ถ้ายังไม่มั่นใจ idea ให้ทดสอบ free plan ก่อน แล้วค่อย upgrade ตอนพร้อม launch
- กลยุทธ์ประหยัด credit: ใช้ Visual Edit สำหรับ small tweak, ใช้ Discuss Mode วิเคราะห์ก่อนแก้จริง, Freeze files ที่ work แล้วเพื่อกัน AI แก้พลาด
- Security ต้องทำก่อน launch จริงทุกครั้ง — data isolation และ RLS rule ป้องกัน user เห็นข้อมูลคนอื่น เป็น minimum bar ที่ขาดไม่ได้ทางจริยธรรมและกฎหมาย
- Model ธุรกิจที่ทำได้ทันที: ล็อก premium feature ไว้หลัง Stripe paywall → ทดสอบ market fit ก่อนลงทุนใหญ่ — Base44 รองรับ subscription + one-time payment ผ่าน Stripe
📄 Transcript เต็ม (English, 7,164 คำ)
Hi, I'm Matt and in this tutorial, I'll show you step by step how to build a complete web app from scratch using B 44, an incredibly powerful tool that lets you create fully functional apps in minutes using nothing but your words. No coding required. First, we'll generate our app with a single prompt. Then, we'll customize it just by telling B 44 what we want to change. We'll also cover how to add user accounts, integrate payments, and include powerful AI features. Finally, we'll make sure the app is fully secure and ready to launch. By the end of this video, you'll have a clear blueprint for bringing your ideas to life with B 44, all without writing a single line of code or needing any prior experience. To get started, you'll need a B 44 account. You can sign up for free using this link right here, or scroll down and click the first link in the video description. So, you'll land on this page right here. There's a demo chat box that invites you to write a prompt, but you'll need to create an account before it actually works. Just click the start building button at the upper right to sign up. You can either log in with Google or enter your email. Then follow the prompts to complete the signup process. Once you're done, you'll land on a page with a chat box that's now fully functional and ready to go. Creating the first draft of your app is incredibly simple, but there's also a bit of an art to it. You simply write a description of how you want your app to look and function. The more detailed and specific you can be, the better your first draft will turn out. If you're not sure what you want to build, you can click the link to browse templates and see what other people have created. Or you can click one of the idea bubbles under the chat for inspiration. Me personally, I know exactly what I want to build. The most successful apps are the ones that solve real problems for a lot of people. And I know from my own experience and from seeing plenty of memes that the hardest part about being an adult is deciding what to eat for dinner every single night of your life. It takes so much time and energy to plan healthy meals that I actually want to eat. Writing up a shopping list, going to the store, and then making it all. So, I want to make an app that simplifies the whole process and solves meal planning once and for all. Here's what I'll say. I want to have an app where the user gets all of their meals planned for them with AI. And the app provides a detailed meal plan for the week, the recipes, and the shopping list. Each week's meal plan will start by asking the user for their dietary preferences and restrictions, cuisines they like or want to eat, calorie targets, and which meals they want planned for them. For example, breakfast, lunch, dinner, or snacks. Next, let's describe how the app should look. You can describe this manually or if you need ideas, you can click the styling instructions button to browse preset style prompts. If you find a style you like, just click add style instructions to add it to your prompt. And if I scroll down, you can see the style instructions were added right under my initial app description. If there's anything else you want to provide to the AI to help it understand what you're looking for, add that now. You can click the plus button to add photos, documents, or really any other type of file. When you're happy with your prompt, click the send button. You'll be taken to the next page where you can watch the AI start to build your app. On the left side, it'll provide you with a response showing that it understands the instructions and it'll show progress indicators while it's building the various elements of your app. This initial build can take several minutes to complete. So, while it's working, let me show you something important. If you click the base 44 logo dropown at the upper left, you can see how many message credits you have remaining. Each prompt you send to the chat counts as one credit. On the free plan, you're granted 25 credits per month, but you can only use up to five credits per day. This is fairly limiting, but we'll sort that out later. Now, we'll go ahead and fast forward to show you what the finished app looks like. Here we are. The AI finished building the app, and I'm excited about what I'm seeing so far. It built a simple, clean interface that followed the style instructions and seems to have the general functions that I asked for. But the only way to be sure is to test it. So, let's try it out. I'll click the button to create a meal plan. Here we have some buttons we can select to provide dietary restrictions and cuisine preferences. I'll go ahead and select a few of them. Scrolling down, I see we can choose which meals to plan and set some other parameters like a daily calorie target and servings per meal. Let's see what happens if I just create a meal plan with breakfast and dinner. I'll leave the calories and servings alone for now. And let's click to generate my meal plan. It looks like the AI implemented AI functionality into my app, and it's working in the background right now to create the meal plan. There's also this really nice loading indicator here, an elegant touch. After a few moments, the AI finishes processing, and it looks like I've got a full meal plan. I can click on any day of the week to open it and see the meals it selected for me. There's also a show recipe drop down, which expands to show the full recipe with ingredients and instructions. This omelette looks really tasty. Back at the top, it also created a shopping list for me, organized by food category, and I can even check the buttons to strike through each list item. I can see this being really useful at the grocery store. I'll just pull up the list on my phone and check things off once they're in my cart. So, so far, I'm really happy with this. Going back to the dashboard, I can see a card for the week's meal plan. While you're testing your app, be sure to flip the mobile toggle at the top of the screen to check out how your app will look on smaller screens. This is really important because most people discover new apps while browsing on their phone and you want to make sure that your app looks good and works right no matter what device your visitors are using. All right, in about 4 minutes we have a working meal planner app and overall it's off to a great start. Now let's customize it. There are several different methods to make changes to your app. So let's start with the simplest and easiest visual editing. Toggle on the visual edit mode at the bottom left. Now, when you hover over different elements in your app, a blue box appears around them along with an HTML element tag. When you click on an element, like this H1 header, for example, a toolbar will appear. Now, we can click the T icon to open a text editor and change the text content of the header. I want to change your meal plans to my meal plans. Next, you can click the A icon to adjust text styles like the size or the font weight. When you're done making changes, just click the save button that appears in the chat at the bottom left. A loading icon will appear briefly as your changes are applied to the app. Once it's done, if we open up the base 44 dropdown, you can see that we still haven't used any of our credits. That's the perk of the visual editing tool. You don't use any message credits, which is great when you want to make small changes. Of course, this only works when the elements you want to change already exist on the page and they're not being generated dynamically. For bigger changes like adding features, we'll need to use the chat. Just remember, each chat prompt uses up one message credit. So, use your prompts wisely. For example, let's go to our shopping list. Let's say I want the user to be able to export their shopping list as a PDF so they can share it with someone or print it out. I'll simply request this in the chat. Add the ability for users to export their shopping list as a printable PDF. Then, I'll click send. Just like with our initial build, the AI will begin to process the request, and you'll see the status updates in the chat. Most AI changes take a few minutes to implement, so I'll skip through the processing time throughout this video. The request has been processed and the app has now rerendered. I have an error message saying the meal plan wasn't found. So, let's click to return to the dashboard. Now, we can see the meal plan. Let's open it, then go to the shopping list. Now there's a print as PDF button. Let's click it. And it looks like we have a print preview for a shopping list. The formatting could be better. It spans multiple pages, but you can always refine these details with follow-up prompts if needed. Now, there's a hybrid approach we can take using both the chat and the visual edit selector. Let's say, for example, that I want to change the background color of the page and add a gradient. I could change the background color with the visual edit toolbar, but I wouldn't be able to add a subtle gradient. So, what we can do is enable the visual edit mode, select the background element we want to change, then use the chat to tell the AI exactly what we want to change about the selected element. I'll submit the request. And here you can see that the AI did exactly what I asked for. The page has a darker peachy color and has a subtle gradient. Now, let's say we didn't actually like this change. How do we undo it? That's easy. To undo changes, go to the chat and find the message prompt you want to undo. Then click revert this and click okay on the confirmation popup. Base 44 now undoes the change and reverts back to the last version of the app. If we go back to our meal plan page, we can see the background is white again. Alternatively, you could also open the version history in the top left and choose a specific version of the app to revert to from the list there. Now, let me show you a few more prompting techniques and settings. The AI chat also understands visual prompts. This becomes super helpful with debugging, which I'll explain more later in this tutorial. Let's say I don't like how this logo is surrounded by a peachcoled bubble. Let's take a screenshot to show the AI exactly what I'm talking about. On a Mac, I'm clicking commandshift 4, then highlighting the area I want to screenshot. Once you've got a screenshot, you can drag it into the chat or click the plus button to upload it manually from wherever screenshots are saved on your system. While I'm over here, let's check out some advanced settings by clicking the gear icon. You can select which AI model to use by default, but I recommend keeping it on automatic. Base 44 will choose the best model for your app. You can also open AI controls to add custom instructions that apply to every prompt. This is useful if you have specific style guidelines or preferences that you don't want to repeat each message. There's also a freeze files option. If you get something working perfectly, you can freeze those files so the AI won't accidentally modify them. We'll leave these settings alone for now, though, since we're still building out the core features. I still have the text from the reverted image in the chat window. So, I'll delete this and describe the change I want referencing the logo bubble screenshot we just captured. I just want the logo, icon, and tagline to appear directly on the gray background. After some processing, B 44 applies the changes, and now my logo section looks much better. But you'll notice we just ran out of credits for the day. So, let's take a break from editing for a moment. So, now you know how to make changes, but how do you manage the app? The dashboard is your control center for everything. Let me show you the important stuff. Up at the top, you'll see a switch to toggle between preview and dashboard. We're looking at the preview right now. As you've seen already, this is the development environment preview of the app. You can click the dashboard button to view the control center for your app. The users tab shows us all the current users of the app, their role, such as admin or standard user, their email, full name, and any other data your app collects about users. You can also delete users from here. Next, we have the data tab. This shows us all of our database tables and their schema or structure. Right now, the only database table we have is a meal plan table. There are also tabs for app analytics, domain settings, security settings, and code. Let's open the code tab briefly. Here's where you can access all of the files that B 44 has generated. You can click into any of these files to view the code. You can even directly edit the code from here if you're on a paid plan, but that's more advanced, so we won't be covering that in this tutorial. Returning to the main dashboard, there are also tabs for agents, which we'll set up later. Logs, API operations, and general app settings. Notice that the app visibility is currently set to public, but it requires login to access it. The final tab is for configuring authentication methods, which we'll cover later. We have a pretty solid starting point. So, let's see what our app looks like to users. After thoroughly testing that your app works properly, you can click publish in the top right. Then click publish app to make the current version of your app available to the public. That will deploy the app at the listed domain and then open a new tab. Because our app requires login to view, we immediately get a login screen. Let's create a new account. I'll use the email method and enter a password. It sends a verification message to my email. So, I'll grab the code and plug it in here. That redirects me to login. So, I'll log in using my newly created credentials. And voila, we're now in the live web app and it looks great. But there are a couple of problems. The first one is that I just signed up for this app as a new user and I can see someone else's meal plan. Right now, all users have access to any data that's been created and stored in the app's database. That's a huge security problem and privacy violation. Sure, these are just meal plans, but if this was something else, like a financial app, for example, that's a devastating flaw. It's crucial to protect user data to ensure that users only have access to their own data and not anyone else's. Another issue is that we have this ugly edit with base 44 tag in the bottom right. If users click this tag, they can clone this app with the code, settings, everything, taking your idea and making it their own. That's no good if you're making something innovative. You don't want somebody else to steal your work. Also, the URL in our browser is full of random numbers and has base 44's branding. This might be fine for personal projects, but for a public-f facing web app, this is just not professional. Finally, in order to make any money off of this app, we need to integrate a payment processor like Stripe, and we don't have that connected yet. We can fix all of these issues very easily, but in order to implement the changes, we'll need a paid plan. Back in our B 44 interface, there are two ways to upgrade. You can click on the view all plans button if it appears in your chat, or click on the B 44 logo dropown at the top left, and then click upgrade plan. Here you'll be presented with a list of plans. The starter plan is $16 per month if you pay annually. But here's the thing, it won't solve all of our problems. You can turn off the edit with base 44 tag and set up authentication with that plan, but you'll need the builder plan or higher to connect a custom domain and enable the back-end integrations we need like Stripe for payments. No builder plan means no revenue from your app. The builder plan is $40 per month when paid yearly or $50 per month when paid monthly, but I strongly recommend the annual option. You get a free domain for one year, which you don't get with monthly billing. If you're on a tight budget or already own a domain, monthly works, but the annual plan is the better value. Now, $480 upfront might feel like a lot, but here's some perspective. A couple of years ago, I hired a developer to build a portfolio app for audio professionals. Nine months and $20,000 later, I had an app. But with Base 44's builder plan, I rebuilt a better version of that app in one weekend. Base 44 is a gamecher. And if you build something people actually want, it'll pay for itself pretty fast. Pick whichever term works for you, add your payment details, and check out. Once you've paid, return to the base 44 interface. The free plan limit message is gone. And if you click the logo dropown, you'll see your account is loaded with credits. Now that we've removed all of our obstacles, let's finish building this app. Starting with authentication. Remember that users tab? Right now, it's just me. But if we want other people to use this app, everyone needs their own private account. Right now, everyone shares the same data, and that's a problem. So, let's isolate each user's account with one single prompt. Set up authentication so users can sign up, manage their own meal plans, and keep their plans separate from other users. Use this as a starting point for your own prompt. The important part is to ask for authentication. Click send when you've got it. After some processing, you see that the AI ran into an error. This happens occasionally. The nice thing is that when it runs into an issue after a prompt, you can simply click the resolve with AI button to have it fix the problem without being charged any message credits. So, I'll click this now. Now, the issue has been fixed and our app preview appears again. We want to see how the app behaves for different loggedin users. In the preview, I'm currently logged into the email associated with my B 44 account, something B 44 does for you by default. To see how the app behaves for other users, we could log out in the preview and log in to the other account. However, I'm already logged into the app with my other user on the public version. So, let's publish our new app version and see how it behaves. Normally, you wouldn't want to do this. You want to test everything thoroughly before deploying a new version of your app. Especially if you have paying users, you don't want to wreck their experience by accidentally deploying a buggy app. But we don't have any real users yet. So deploying it in this state is just fine. I'll click the publish button in the upper right. And before we fully deploy it, let's change the public access to not require a login. This will help us to ensure that even signed out users can't see other users data. While we're here in the app settings, let's also turn off the edit with base 44 badge so that nobody can clone our app. All right. Now let's publish this new version. Now, here you can see I'm logged in with my other account and I can't see the data of the first account. Perfect. The data isolation is set up, but now we need users to be able to log in and out. So, let's add a landing page and some authentication buttons. I'll go back to the chat and type the prompt. Now, add a landing page that explains the benefits of the app in convincing language. Make sure to add a sign up button somewhere prominent and a login button at the top right so existing users can log in. Lastly, add a log out button within the app in the bottom left by the username so that users can sign out again. Modify the prompt to fit your app's needs. Then hit send. After processing, you can see that the AI has added a big log out button at the bottom left under our user details. Let's click it. It looks like the app successfully logs us out and takes us to the landing page. Beautiful. But there are still a couple of issues. First, we have the left sidebar from our dashboard, which doesn't really make sense on the landing page. We'll want to remove that. Also, it looks like B 44 discovered another issue. Let's start by clicking that to automatically resolve it without using any message credits. After processing, we've been logged back in. Let's log out again. And there we go. We have a beautiful modern landing page with a login button at the upper right. We can scroll through to see how the AI added a bunch of marketing copy highlighting the benefits of the app. But we still have this left sidebar which is unnecessary unless a user is logged in. So let's remove it. If I click to activate the visual edit mode, it doesn't look like I can select this whole sidebar. It's made of three distinct elements. So let's grab a screenshot instead so I can show the AI exactly what we want to remove. I'll drag the screenshot into the chat, then ask the AI to remove the sidebar from the landing page. After processing, let's publish and check if it worked. H the sidebar is still there. The AI didn't quite get it. This happens sometimes, but here's a great troubleshooting technique. Next to the visual edit mode button, there's a discuss mode button. Discuss mode lets you talk to the AI without submitting editing prompts. Perfect for diagnosing issues. It also only costs.3 message credits instead of a full credit. So, let's use discuss mode to ask what we can do to solve the problem. The AI will analyze the files and come up with a plan. Now, let's turn discuss mode off and tell the AI to implement its plan, sending along a screenshot for reference. Perfect. The AI has successfully removed the sidebar from the landing page. Let's test the login button. We get the same authentication screen as before. So, I'll log in with my secondary account. And now we're logged in. We can see everything is working as intended. The sidebar still exists for logged in users on the dashboard. We can log in and out of our app. Users can only see the meal plans they create. And the edit with base 44 badge is gone. Let's test to see if this new user can generate meal plans. I'll create a new plan. Check a few boxes. Do just dinners to keep the generation simple. And generate the plan. Interesting. The meal plan doesn't show up, but the shopping list does. Even weirder, going to the dashboard, it shows that the meal plan has 70 meals. We've encountered our first big bug. You're guaranteed to find bugs when you build an app. Now, that's not because the AI is bad. Finding and squashing bugs is just part of development. Building apps requires a lot of trial and error. And the AI in B 44 makes it easier than ever to diagnose and fix these kinds of issues. Return to the B 44 interface and submit a prompt. But now the user has the ability to generate a meal plan, but none of the recipes actually appear in the meal plan view, just the shopping list. Please fix this. The first attempt didn't work. So, let's try showing the AI what's happening on the page with a bug. We can write click in a blank space and click save as to download the HTML file of the rendered page in its current state. We can upload that to the chat, tell it we're having the same issue, and reference the HTML to see what's happening. Now, when I generate a new meal plan as a loggedin user, it generates exactly what I'm looking for, and I can see it in the meal plan view. So, now users can sign up and get their own meal plans. Our app is now usable, and we could start sharing it right now. But sharing this ugly temporary domain would be kind of tacky. So, let me show you how to configure a custom domain for your new app. In the dashboard, click domains, then buy domain. Search for your domain name. If your first choice isn't available, you'll see recommended alternatives. Just pick one you like and add it to the cart. Make sure to check the box for free private registration to keep your personal information private. Then, complete the purchase form with your billing details. Even though the domain is free, they need this for renewal when it expires. After purchase, back in your base 44 dashboard, you'll see the domain is pending DNS propagation. This can take up to 48 hours, but usually happens in just a couple of hours. You can click check status to monitor the progress at any time. The SSL certificate may take even longer, so be patient if you see security errors at first. Once everything finally connects, publish your app to see it live on your custom domain. And there we go. Upgraded custom domain professional app. Now, let's use those backend functions we just unlocked to integrate other tools. Integrations are basically connections between your app and other services. Think of them as bridges that let different tools talk to each other and share data. They're what turn a simple app into something powerful that can process payments, send emails, or connect to just about any other platform you need. We'll start by connecting Stripe to collect subscription payments from users. Base 44 is a catalog of native integrations that's constantly growing. What's really cool is that you can integrate your app with NADN or Zapier, which allow you to connect almost any major app on the internet without any coding required. We'll be integrating Stripe so that we can collect payments, but the steps will take work for integrating any other tool you may want to connect. All you need is API access. Before we set up Stripe, we need to determine what features of our app we want to offer for free and which ones we want to put behind a payw wall. Asking the chat in discuss mode is a great way to get ideas for how you can implement this. After you know which features you want to put behind a payw wall, the next step is to sign up for Stripe. Go to Stripe in a new tab. You can use the link in the description below. On the homepage, enter your email and click start now to sign up. Follow the prompts to create your account. You'll get a welcome message when you're signed up. Provide your business name and your new website URL. For a subscription service like ours, select recurring payments, then click continue. Then click to go to sandbox mode. Sandbox mode is Stripe's testing environment. It lets you build and test your payment flows using fake transactions and test credit cards, so you can make sure everything works perfectly before processing any real money. Once you've set up your Stripe account and landed on the dashboard, return to your base 44 tab. Now we need to activate backend functions. Go to your dashboard, then settings, then app settings, and find backend functions and click activate. Next, simply prompt the chat with integrate with Stripe. You'll be prompted to provide API credentials. Click the set secrets link that appears. You'll get a modal popup. Return to the Stripe tab and click to copy your Stripe key. Return to base 44 and paste it in the Stripe secret key field. To get a web hook secret key, we'll need to do a little more setup. Back on the Stripe dashboard, use the top search bar to search for web hooks. Then click it when it appears under workbench. Well hooks are automated messages that Stripe sends to your app when something important happens, like when a payment goes through. We're setting this up so our app knows when to upgrade a user's account. Click add destination. Leave the defaults as they are. Then scroll down and search for invoice. Find invoice.paid from the list. Check the box and click continue. Then click continue again. Give your destination a name. I'll use my app name. Then set your endpoint URL to your app's domain. In my case, that's meal-mate.org. Click create destination. Copy the signing secret. Return to B4 and paste it into the Stripe web hook secret field. Click save secrets. Base 44 will now integrate Stripe and build out the functions in your backend to facilitate communication between our app and Stripe. Here you can see that Base 44 came back with a message explaining what it created. There's a new pricing page in the app with a comparison of the free and premium plans and it has an upgrade to premium button. Base 44 will also provide specific instructions to finalize the connection. Follow these precisely to ensure everything is set up correctly. In my case, it's asking me to create a product in Stripe. I'll go to the products page and click create product. I'll name it Mealmate Premium. Set it to recurring and price it at $9.99 monthly. Next, I need to grab the price ID. I'll open the product, click into the price details, and copy the price ID. Back in base 44, I'll go to dashboard, then code, and search for the pricing file. The AI put a placeholder here that I need to replace with my actual price ID. The AI also says that I need to add some additional web hook events. So, I'll go back to Stripe, open the web hook we created, and add the events base 44 specified. One important note, double check for any placeholder URLs. In my case, I need to replace your app domain with my actual domain. The important part is everything after the first forward slash stays the same. Click save destination when you're done. Next, back in base 44, we need to test our integration. I'll click upgrade to premium on our app and try out the new payment flow. The Stripe checkout page tries to load, but because we're in base 44, it doesn't seem to be able to finish loading. So, I'll publish this version of the app and try this out on the live app. Again, only test changes in your published production app if you don't have any real users depending on your services yet. On the public app, I'll go to the pricing page and test the upgrade workflow again. Now, the Stripe checkout page loads. When you're in sandbox mode in Stripe, you can enter fake payment information on the checkout and Stripe will pretend that it worked, sending back payment confirmations to our app. This enables you to test your workflows without using any real money. After completing checkout, it looks like our app has received a confirmation from Stripe. And our test user now has a premium member badge. In your app, you may want to spend some extra time making sure that if you have multiple subscription tiers, each level of membership has the proper features available. Of course, you can work with the AI chat to accomplish this, locking or unlocking certain features depending on a user subscription. Once you have all the features tested and your app is handling payment behavior properly, you'll need to swap out your Stripe Sandbox's test keys for live keys. Return to Stripe and switch to live mode. Everything should look the same as it does in sandbox mode, but now you're working with real data. Grab your new live secret key from the dashboard and your web hook secret by navigating back to the web hooks page. Okay, we've got payments enabled. Now, here's where it gets really interesting. We're adding an AI agent. An AI agent is like a smart assistant built right into your app. Instead of users clicking through menus and forms, they can just ask the agent to do things in plain language like change my meal plan or add breakfast for Tuesday. The agent understands the request, accesses your app's data, and makes the changes automatically. It's conversational automation that makes your app feel more intelligent and userfriendly. Enable agents by going to dashboard, then agents, then toggle the switch on to enable agents. Next, simply prompt the chat to set up an agent and describe what the agent should do. It's important to get really specific with this. For my app, I'll say, "Let's add an AI agent to the meal plan view so that users can make changes to their meal plan by simply asking the agent for them." They should be able to ask for things like, "Add a breakfast on Tuesday. Change Saturday's dinner to be four servings instead of two. I don't like quinoa. change Thursday's breakfast to a different recipe and any other changes they want to make like that. Provide a request changes button right aligned on the same row as the meal plan and shopping list buttons. That button opens the chat modal which provides several conversation starter buttons for the user to select from to show them what's possible in addition to the regular AI chat functions. Make sure that while the AI agent is processing, there's a clear loading screen or imagery. When you've got your prompt in, hit send. Now that the AI finished processing, we can see that it successfully added the request changes button to the meal plan page. Let's test it to see if it worked. Clicking the button opens a modal that has the conversation starter prompt buttons I requested. And we have a chat box at the bottom. Let's ask for a basic change, then hit send. Hm. It looks like the agent couldn't find the meal plan ID automatically to look up the data and change it. So, let's ask a chat to make sure that the agent can get the meal plan ID based on whichever meal plan is open. The page will need to pass some data to the agent in the background. Now, I had this exact same issue a couple of times during that fast-forwarded section. Depending on how complex your app is or what you're asking your agent to do, you may need to do some debugging. Again, finding and squashing bugs is a normal part of developing any application. So, I'll show you another technique for debugging. So, you have another tool in your toolkit. In my last message, I asked the AI to add some logging to help us identify errors with the app operations. Now, let's try to request changes again. Opening the chat window, we can see that the meal plan ID is now listed in the top part of the modal window. and clicking one of the default prompts sends the agent a message with the meal plan ID in it. It's not the most visually elegant solution, but this works for now. We can modify the approach to be more visually appealing later. For now, let's just get it working. The chat agent shows us that it's running a few functions and then successfully adds a breakfast to Tuesday. Going to our Tuesday meal plan, I don't see the new breakfast, though. So, let's open our browser's console log to pass along the information it provides. Press F12 to open developer tools. You may need to hold the function key while pressing F12 depending on your keyboard. Then click the console tab if it's not already visible. The console shows the data the app has logged during its operations. Let's screenshot this and pass it to the chat as a reference. Let's also explain the issue we just had to the AI and tell it to review the most recent agent conversation for details and of course ask it to fix the issue. Now in our meal plan, we can see that the recently created Tuesday breakfast now shows up. Let's request one more change just to ensure everything is working properly. I'll ask our meal plan agent to replace Monday's dinner with a double cheeseburger recipe. After some thinking, the agent says it was successful. And closing out of the chat, we can now see the cheeseburger recipe for Monday. Fantastic. The agent can now make meal plan edits for our users. If you ever need to manage your AI agents, go to dashboard, then agents. From there, you can see a list of all your agents and click edit to see the agents configuration. There's a guidelines page where you can set a system prompt for the agent. basically instructions that apply to every user interaction. The base 44 AI has already configured this with detailed information, but you can tweak it here anytime without using any message credits. The tools page shows how the agent gets stuff done. In our case, the AI added a backend function for managing user meal plans. You can also add more tools manually if needed. There's also a WhatsApp integration option if you want users to interact with your agent via WhatsApp. And if you close out of this modal popup, there's also a conversations tab where you can review every agent interaction, which is super helpful for troubleshooting. Okay, the AI agent is all set up, but there's another problem. Right now, this app probably has security holes we don't even know about. User seeing other people's data, unauthorized edits, exposed information. One security scan fixes it. Let me show you how. To run a security scan, go to dashboard, then security, then click start security check. After some processing, you might be presented with some recommendations. In my case, I have an RLS recommendation for the meal plan table in our database. Let's click apply fixes. And just like that, we've secured our meal plan table, making sure users are only able to create, read, update, or delete their own data. Now, I also like to test the app and poke around for other potential security issues that might not have been caught by the scan. So, I'll ask the chat in discuss mode, are there any console log messages or other information displayed in the developer tools that might compromise the security of the app? And after processing, it gives a long detailed message explaining the state of the app and how the current logging and error handling practices are secure and don't compromise the app's security. This is great. Now, let's test the app to make sure nothing broke when we changed the RLS rules. I'll log out and then log back in as my secondary user and try to create a new meal plan. Oh, we got a pop-up that says permission was denied. Base 44 shows an issues found popup. It correctly identifies the permissions issue with creating a meal plan. Let's click resolve with AI to fix it without using any credits. Perfect. The chat updated the permissions to allow any authenticated user to create meal plans, but all the other rules remain the same. Users can only read, update, and delete their own plans. Let's run another security scan to make sure that this setup is still safe. green check marks across the board. Now, let's test that the meal plan generation and agent both work properly. Excellent. Our app is secure and fully functional. Remember, it's important to never ever skip security testing. This is arguably the most important thing to test. As a developer, it's your ethical responsibility to ensure that you're protecting your users's data and personal information. But now that we've done that, we can officially launch our new app. Simply click to publish your app and start sharing it with potential users. And there you have it. In less than an hour, we went from zero to a fully functional secure web app with user authentication, payment processing, AI capabilities, and a custom domain. We built something that would have taken months and tens of thousands of dollars just a few years ago. That's the power of B 44. You don't need to be a developer. You don't need a huge budget. You just need an idea and the willingness to iterate until it works. So, here's my challenge to you. What are you going to build? Head over to Base 44 using the link in the description below. Test it out. See what you can create. And who knows, maybe your app will be the next big thing that solves a real problem for thousands of people. Thanks for watching and happy building.