{"id":6758,"date":"2025-11-20T11:59:14","date_gmt":"2025-11-20T11:59:14","guid":{"rendered":"https:\/\/www.hostinger.com\/support\/?p=6758"},"modified":"2026-08-19T09:15:43","modified_gmt":"2026-08-19T09:15:43","slug":"how-to-create-a-web-app-using-hostinger-ai-builder-agentic-mode","status":"publish","type":"post","link":"https:\/\/www.hostinger.com\/support\/how-to-create-a-web-app-using-hostinger-ai-builder-agentic-mode\/","title":{"rendered":"Hostinger AI Builder: How to create a web app in agentic mode"},"content":{"rendered":"<p>Create a web application using AI prompts in Hostinger AI Builder agentic mode, without writing code. This guide covers setting up your first project, refining your prompts, and publishing your app for public access.<\/p><h2 id=\"h-create-a-web-app-in-seven-steps-with-hostinger-horizons\" class=\"wp-block-heading\"><span id=\"Create_a_web_app_in_seven_steps_with_Hostinger_Horizons\" class=\"ez-toc-section\"><\/span><strong>Create a web app&nbsp;<\/strong><\/h2><p>Follow these steps below to start creating your first web app by using Hostinger AI Builder agentic mode.<\/p><h3 id=\"h-1-sign-up-and-start-a-new-project\" class=\"wp-block-heading\"><span id=\"1_Sign_up_and_start_a_new_project\" class=\"ez-toc-section\"><\/span><strong>Step 1 &ndash; Sign up and start a new project<\/strong><\/h3><p>Begin by visiting <a href=\"https:\/\/www.hostinger.com\/ai-builder\/pricing\">Hostinger AI Builder<\/a>&rsquo;s&nbsp;official page and choosing a plan that fits your needs.<\/p><p>After completing your payment, head to the&nbsp;<strong>hPanel dashboard<\/strong>&nbsp;and select&nbsp;<strong>Websites &rarr; Websites list<\/strong><strong>&nbsp;<\/strong>in the left sidebar. Then, click&nbsp;<strong>Add Website<\/strong> and choose&nbsp;<strong>AI Builder<\/strong>.<\/p><figure class=\"wp-block-image aligncenter size-large wp-lightbox-container\" data-wp-context='{\"imageId\":\"691f01bf3ba3b\"}' data-wp-interactive=\"core\/image\"><img decoding=\"async\" class=\"alignnone size-full wp-image-15954\" src=\"https:\/\/www.hostinger.com\/support\/wp-content\/uploads\/sites\/55\/2026\/08\/2026-08-18_17-41.png\" alt=\"\" width=\"468\" height=\"368\" srcset=\"https:\/\/www.hostinger.com\/support\/wp-content\/uploads\/sites\/55\/2026\/08\/2026-08-18_17-41.png 468w, https:\/\/www.hostinger.com\/support\/wp-content\/uploads\/sites\/55\/2026\/08\/2026-08-18_17-41-300x236.png 300w\" sizes=\"(max-width: 468px) 100vw, 468px\" \/><br>\n<button class=\"lightbox-trigger\" type=\"button\" aria-label=\"Enlarge\" data-wp-init=\"callbacks.initTriggerButton\" data-wp-on-async--click=\"actions.showLightbox\" data-wp-style--right=\"state.imageButtonRight\" data-wp-style--top=\"state.imageButtonTop\"><\/button><\/figure><div class=\"intercom-interblocks-callout\" style=\"background-color: #e3e7fa80;border-color: #334bfa33\">Want to see Hostinger AI Builder agentic mode in action? Watch us build a complete web app with AI in just one hour &mdash; no coding required.&#8203;<\/div><div class=\"intercom-h2b-video\">\n<p><iframe title=\"Watch Me Build a Web App with AI in Hour (challenge)\" width=\"500\" height=\"281\" src=\"https:\/\/www.youtube.com\/embed\/SFe8TVA4uIA?start=171&amp;feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe><\/p>\n<h3 class=\"wp-block-heading\"><strong>Step 2 &ndash; Navigate the tool&rsquo;s interface<\/strong><\/h3>\n<p>It&rsquo;s time to&nbsp;<a href=\"https:\/\/www.hostinger.com\/support\/hostinger-ai-builder-agentic-mode-product-overview\/\" rel=\"follow\" data-wpel-link=\"internal\">get started with Hostinger AI Builder agentic mode<\/a>.<\/p>\n<p>You&rsquo;ll see a text field where you can write your prompt in&nbsp;<strong>more than 80 languages<\/strong>. After describing your web app, press&nbsp;<strong>Enter, <\/strong>or you can also pick template directly.<\/p>\n<figure class=\"wp-block-image aligncenter size-large wp-lightbox-container\" data-wp-context='{\"imageId\":\"691f01bf3d493\"}' data-wp-interactive=\"core\/image\"><img decoding=\"async\" class=\"alignnone size-full wp-image-15601\" src=\"https:\/\/www.hostinger.com\/support\/wp-content\/uploads\/sites\/55\/2026\/08\/2026-08-14_10-01.png\" alt=\"\" width=\"861\" height=\"750\" srcset=\"https:\/\/www.hostinger.com\/support\/wp-content\/uploads\/sites\/55\/2026\/08\/2026-08-14_10-01.png 861w, https:\/\/www.hostinger.com\/support\/wp-content\/uploads\/sites\/55\/2026\/08\/2026-08-14_10-01-300x261.png 300w, https:\/\/www.hostinger.com\/support\/wp-content\/uploads\/sites\/55\/2026\/08\/2026-08-14_10-01-768x669.png 768w\" sizes=\"(max-width: 861px) 100vw, 861px\" \/><br>\n<button class=\"lightbox-trigger\" type=\"button\" aria-label=\"Enlarge\" data-wp-init=\"callbacks.initTriggerButton\" data-wp-on-async--click=\"actions.showLightbox\" data-wp-style--right=\"state.imageButtonRight\" data-wp-style--top=\"state.imageButtonTop\"><\/button><\/figure>\n<p>Next, choose a domain name for your website, or select Use temporary domain to set one up later, then proceed.<\/p>\n<p>Hostinger AI Builder will take a few moments to process your prompt. Once ready, the dashboard will split into two panes:<\/p>\n<ul class=\"wp-block-list\">\n<li><strong>Left pane<\/strong>&nbsp;&ndash; enter additional prompts here to add more features or refine your web app. Underneath the prompt field, you can find the number of message credits left in your plan.<\/li>\n<li><strong>Right pane<\/strong>&nbsp;&ndash; shows a real-time preview of your app as you make adjustments. You can interact with the elements to test their functionality.<\/li>\n<\/ul>\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large wp-lightbox-container\" data-wp-context='{\"imageId\":\"691f01bf3d8ae\"}' data-wp-interactive=\"core\/image\"><img decoding=\"async\" class=\"alignnone size-full wp-image-16112\" src=\"https:\/\/www.hostinger.com\/support\/wp-content\/uploads\/sites\/55\/2026\/08\/2026-08-19_16-11.png\" alt=\"\" width=\"1910\" height=\"867\" srcset=\"https:\/\/www.hostinger.com\/support\/wp-content\/uploads\/sites\/55\/2026\/08\/2026-08-19_16-11.png 1910w, https:\/\/www.hostinger.com\/support\/wp-content\/uploads\/sites\/55\/2026\/08\/2026-08-19_16-11-300x136.png 300w, https:\/\/www.hostinger.com\/support\/wp-content\/uploads\/sites\/55\/2026\/08\/2026-08-19_16-11-1024x465.png 1024w, https:\/\/www.hostinger.com\/support\/wp-content\/uploads\/sites\/55\/2026\/08\/2026-08-19_16-11-768x349.png 768w, https:\/\/www.hostinger.com\/support\/wp-content\/uploads\/sites\/55\/2026\/08\/2026-08-19_16-11-1536x697.png 1536w\" sizes=\"(max-width: 1910px) 100vw, 1910px\" \/><br>\n<button class=\"lightbox-trigger\" type=\"button\" aria-label=\"Enlarge\" data-wp-init=\"callbacks.initTriggerButton\" data-wp-on-async--click=\"actions.showLightbox\" data-wp-style--right=\"state.imageButtonRight\" data-wp-style--top=\"state.imageButtonTop\"><\/button><\/figure>\n<\/div>\n<p>In the top-right corner of the dashboard, you&rsquo;ll find the&nbsp;<strong>Publish<\/strong>&nbsp;button to launch your web app and make it publicly accessible.<\/p>\n<h3 id=\"h-3-define-your-web-app-s-purpose\" class=\"wp-block-heading\"><span id=\"3_Define_your_web_apps_purpose\" class=\"ez-toc-section\"><\/span><strong>Step 3 &ndash; Define your web app&rsquo;s purpose<\/strong><\/h3>\n<p>Hostinger AI Builder relies on well-structured prompts to generate the web app you envision. So, the more precise your prompts, the better the results.<\/p>\n<p>When defining your web app&rsquo;s purpose, include these key details so that Hostinger AI Builder understands your idea:<\/p>\n<ul class=\"wp-block-list\">\n<li><strong>App purpose<\/strong>&nbsp;&ndash; clearly state the problem your web app solves, for example, &ldquo;helping users track fitness progress.&rdquo;<\/li>\n<li><strong>Core features<\/strong>&nbsp;&ndash; list essential functions you want to include, such as user login, forms, dashboards, or reports.<\/li>\n<li><strong>UI preferences<\/strong>&nbsp;&ndash; be specific about design elements like layout, color scheme, and overall aesthetics.<\/li>\n<\/ul>\n<p>Here&rsquo;s a prompt example for a fitness platform that generates personalized workout and diet plans:<\/p>\n<div class=\"enlighter-default enlighter-v-standard enlighter-t-atomic enlighter-l-raw enlighter-hover \">\n<div class=\"enlighter-code\">\n<div class=\"enlighter\">\n<div class=\"\">\n<div><em><span class=\"enlighter-text\">Create a fitness platform that provides personalized workout and diet plans based on user data. The app should let users enter their age, height, weight, activity level, and health conditions. Based on this data, it should generate tailored fitness routines and meal recommendations. Include a user-friendly dashboard with input forms, a progress tracker, and a visually appealing interface with a clean, modern layout and a teal-and-violet color scheme.<\/span><\/em><\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<p>Like any other AI tool, Hostinger AI Builder&rsquo;s first output might not be perfect regardless of how detailed your initial prompt was. We can build upon this first iteration of the app by entering follow-up prompts.<\/p>\n<h3 id=\"h-4-customize-your-project-s-design\" class=\"wp-block-heading\"><span id=\"4_Customize_your_projects_design\" class=\"ez-toc-section\"><\/span><strong>Step 4 &ndash; Customize your project&rsquo;s design<\/strong><\/h3>\n<p>The next step is customizing the application&rsquo;s design. In addition to making your app more visually appealing, this process involves adding important elements for navigation and functionality.<\/p>\n<p>Here are some of the important front-end components to include in your application:<\/p>\n<ul class=\"wp-block-list\">\n<li><strong>Menus<\/strong>&nbsp;&ndash; areas like a sidebar, tab, or drop-down menu that contain shortcuts to different pages.<\/li>\n<li><strong>Forms<\/strong>&nbsp;&ndash; fields that let users input data, such as an email address or image.<\/li>\n<li><strong>Pages<\/strong>&nbsp;&ndash; full-screen windows containing different settings and information.<\/li>\n<li><strong>Buttons<\/strong>&nbsp;&ndash; elements that will perform certain actions, like submitting data or navigating to another page.<\/li>\n<\/ul>\n<p>If you have a&nbsp;<strong>wireframe&nbsp;<\/strong>detailing the application&rsquo;s layout and element placements, you can upload it to Hostinger AI Builder as a prompt. This will result in a more accurate output.<\/p>\n<p>Otherwise, use a text-based prompt, like this example:<\/p>\n<div class=\"enlighter-default enlighter-v-standard enlighter-t-atomic enlighter-l-raw enlighter-hover \">\n<div class=\"enlighter-code\">\n<div class=\"enlighter\">\n<div class=\"\">\n<div><em><span class=\"enlighter-text\">Create a login page where users can access their account. Here, include a button that redirects users to the sign-up page where they can create a new account if they don&rsquo;t have one.<\/span><\/em><\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<p>Remember to add more details about your application design, such as colors, text size, and font style. For inspiration and guidance, check out our&nbsp;<a href=\"https:\/\/www.hostinger.com\/support\/hostinger-ai-builder-agentic-mode-web-app-design-tips\/\" rel=\"follow\" data-wpel-link=\"internal\">web design tips tutorial<\/a>.<\/p>\n<h3 id=\"h-5-refine-the-logic-and-structure\" class=\"wp-block-heading\"><span id=\"5_Refine_the_logic_and_structure\" class=\"ez-toc-section\"><\/span><strong>Step 5 &ndash; Refine the logic and structure<\/strong><\/h3>\n<p>Now that you have the design laid out, let&rsquo;s refine the app&rsquo;s functionality. The process remains the same: you provide follow-up prompts on aspects you want to improve.<\/p>\n<p>During this stage, the areas for improvement are usually related to the logic and features of your application. Some of the most common ones are:<\/p>\n<ul class=\"wp-block-list\">\n<li><strong>Business logic<\/strong>&nbsp;&ndash; the underlying rules of your application. For example, your fitness app should give different recommendations according to the health data you input.<\/li>\n<li><strong>Decision tree&nbsp;<\/strong>&ndash; the flow of your application based on users&rsquo; decisions. For example, if a user selects a certain menu, a pre-determined page should pop up.<\/li>\n<li><strong>Event handling<\/strong>&nbsp;&ndash; the reaction to user actions, such as clicks, swipes, and keypresses. For instance, a toggle should switch when clicked.<\/li>\n<li><strong>Data flow<\/strong>&nbsp;&ndash; the handling of user data when passed through forms, validated, or uploaded. For example, a user password must be a string of text that matches the database entry.<\/li>\n<\/ul>\n<p>When&nbsp;<a href=\"https:\/\/www.hostinger.com\/tutorials\/prompting-with-hostinger-horizons\/\" rel=\"follow\" data-wpel-link=\"internal\">writing prompts for Hostinger AI Builder<\/a>, make sure you clearly describe the logic or feature you want to improve. Giving the AI more context helps it produce a more accurate output.<\/p>\n<p>Here&rsquo;s a prompt example for refining the data flow:<\/p>\n<div class=\"enlighter-default enlighter-v-standard enlighter-t-atomic enlighter-l-raw enlighter-hover \">\n<div class=\"enlighter-code\">\n<div class=\"enlighter\">\n<div class=\"\">\n<div><em><span class=\"enlighter-text\">Check the email address and password fields on the sign-in page. Make sure they only accept strings of texts that correspond to existing database entries. <\/span><\/em><\/div>\n<\/div>\n<div class=\"\">\n<div><\/div>\n<\/div>\n<div class=\"\">\n<div><span class=\"enlighter-text\">If the inputted data doesn&rsquo;t match any database entry, return an error message saying, &ldquo;Invalid email or password.&rdquo; If the given information is valid, redirect the user to the main dashboard.<\/span><\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<p>Then, check whether Hostinger AI Builder has properly configured your application&rsquo;s logic and functionality by testing them in the preview. This will also help you identify if any feature is missing.<\/p>\n<div class=\"protip\">\n<div class=\"intercom-interblocks-callout\" style=\"background-color: #e3e7fa80;border-color: #334bfa33\">\n<p>To get the best and most accurate results, refine one aspect of your application at a time.<\/p>\n<\/div>\n<\/div>\n<h3 id=\"h-7-test-and-publish-your-web-app\" class=\"wp-block-heading\"><span id=\"7_Test_and_publish_your_web_app\" class=\"ez-toc-section\"><\/span><strong>Step 6 &ndash; Test and publish your web app<\/strong><\/h3>\n<p>At this point, your application should be fully developed and functional. Before finalizing it, check all the features and navigation to make sure they work properly.<\/p>\n<p>In Hostinger AI Builder, you can check and interact with your application directly from the preview menu on the right pane.<\/p>\n<p>Here&rsquo;s a checklist of what you should check during&nbsp;<a href=\"https:\/\/www.hostinger.com\/tutorials\/web-app-testing\/\" rel=\"follow\" data-wpel-link=\"internal\">web application testing<\/a>:<\/p>\n<ul class=\"wp-block-list\">\n<li><strong>Functionality<\/strong>&nbsp;&ndash; all the features should work properly in the live environment. This includes the ability to perform&nbsp;<a href=\"https:\/\/www.geeksforgeeks.org\/crud-full-form\/\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" data-wpel-link=\"external\">CRUD database operations<\/a>&nbsp;and business logic.<\/li>\n<li><strong>Navigation<\/strong>&nbsp;&ndash; the flow of your app and the functionality of the navigational elements. For example, if you click&nbsp;<strong>Log in<\/strong>, you should be redirected to the main dashboard.<\/li>\n<li><strong>Visibility<\/strong>&nbsp;&ndash; the appearance of your web application on mobile and desktop. Make sure all elements are scaled properly and usable.<\/li>\n<\/ul>\n<p>Now, let&rsquo;s publish your project. Click the <b>Publish<\/b> button at the top right.<\/p>\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large wp-lightbox-container\" data-wp-context='{\"imageId\":\"691f01bf40049\"}' data-wp-interactive=\"core\/image\"><img decoding=\"async\" src=\"https:\/\/www.hostinger.com\/tutorials\/wp-content\/uploads\/sites\/2\/2025\/03\/the-publish-button-on-hostinger-horizons-1024x895.png\" alt=\"The Publish button on Hostinger Horizons\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on-async--click=\"actions.showLightbox\" data-wp-on-async--load=\"callbacks.setButtonStyles\" data-wp-on-async-window--resize=\"callbacks.setButtonStyles\"><button class=\"lightbox-trigger\" type=\"button\" aria-label=\"Enlarge\" data-wp-init=\"callbacks.initTriggerButton\" data-wp-on-async--click=\"actions.showLightbox\" data-wp-style--right=\"state.imageButtonRight\" data-wp-style--top=\"state.imageButtonTop\"><\/button><\/figure>\n<\/div>\n<p>If you connected a domain during setup, Hostinger AI Builder will publish your project to that domain. Otherwise, it will use a temporary domain until you connect one. Before connecting or changing your domain, let&rsquo;s complete a few more additional tests.<\/p>\n<p>Start by verifying&nbsp;<strong>cross-browser compatibility<\/strong>. To do so, access your application on different web browsers and devices to see if any issues arise.<\/p>\n<p>Then, check its&nbsp;<strong>performance&nbsp;<\/strong>and loading speed using a benchmark tool like GTMetrix. If the result is suboptimal, ask Hostinger AI Builder to optimize the code.<\/p>\n<p>If everything looks good, return to the&nbsp;<strong>Websites<\/strong>&nbsp;menu in hPanel to connect your domain to the web application.<\/p>\n<p>That&rsquo;s it! Congratulations, you&rsquo;ve created and published a web app using Hostinger AI Builder.<\/p>\n<h4 class=\"title\">Additional resources<\/h4>\n<p>If you want to learn how to build specific types of web apps, check out our detailed guides on how our colleagues built their:<\/p>\n<ul>\n<li><a href=\"https:\/\/www.hostinger.com\/tutorials\/how-to-create-a-reviews-web-app\/\" rel=\"follow\" data-wpel-link=\"internal\">Reviews web application<\/a><\/li>\n<li><a href=\"https:\/\/www.hostinger.com\/tutorials\/create-task-manager-web-app\/\" rel=\"follow\" data-wpel-link=\"internal\">Task manager web application<\/a><\/li>\n<\/ul>\n<p>Simple, right? Go ahead and try to develop your own web app using Hostinger AI Builder.<\/p>\n<\/div><p><iframe title=\"How to Find Web App Ideas + Top Web App Ideas You Can Build Without Coding\" width=\"500\" height=\"281\" src=\"https:\/\/www.youtube.com\/embed\/Z0GoHZR3KoA?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Create a functional web application using AI prompts in Hostinger AI Builder agentic mode.<\/p>\n","protected":false},"author":594,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"include_on_kodee":true,"footnotes":""},"categories":[293],"tags":[],"class_list":["post-6758","post","type-post","status-publish","format-standard","hentry","category-ai-builder"],"hreflangs":[{"locale":"en-US","link":"https:\/\/www.hostinger.com\/support\/how-to-create-a-web-app-using-hostinger-horizons","default":1}],"include_on_kodee":true,"_links":{"self":[{"href":"https:\/\/www.hostinger.com\/support\/wp-json\/wp\/v2\/posts\/6758","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.hostinger.com\/support\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.hostinger.com\/support\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.hostinger.com\/support\/wp-json\/wp\/v2\/users\/594"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hostinger.com\/support\/wp-json\/wp\/v2\/comments?post=6758"}],"version-history":[{"count":16,"href":"https:\/\/www.hostinger.com\/support\/wp-json\/wp\/v2\/posts\/6758\/revisions"}],"predecessor-version":[{"id":16113,"href":"https:\/\/www.hostinger.com\/support\/wp-json\/wp\/v2\/posts\/6758\/revisions\/16113"}],"wp:attachment":[{"href":"https:\/\/www.hostinger.com\/support\/wp-json\/wp\/v2\/media?parent=6758"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hostinger.com\/support\/wp-json\/wp\/v2\/categories?post=6758"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hostinger.com\/support\/wp-json\/wp\/v2\/tags?post=6758"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}