Building a web application usually involves designing an interface, writing frontend code, creating a backend, connecting a database, testing features, and deploying the finished project. Hostinger Horizons was created to make much of this process easier with AI-generated code and natural-language instructions.
The product is now part of Hostinger AI Builder's Agentic mode. You can describe the application you want, let AI generate its initial structure, and then improve it through follow-up prompts and the built-in editor.
In this tutorial, you will learn how to plan a web app, write a useful starting prompt, generate pages and features, work with application data, test the result, and publish it online.
We will use a project management dashboard as a running example. It will include a dashboard, task list, task creation form, status filters, and data storage. You can adapt the same process to a booking system, expense tracker, customer portal, inventory tool, or another browser-based application.
1. What Is Hostinger Horizons?
Hostinger Horizons is the earlier name for Hostinger's prompt-based web application creation experience. Hostinger now offers this workflow through AI Builder Agentic mode.
Instead of manually writing every component, you explain what your application should do. The AI works from those instructions to generate the code, project structure, interface, and supported backend functionality. You can then request changes in the chat interface.
Agentic mode is different from Hostinger AI Builder's Manual mode:
- Agentic mode: You describe the website or application through prompts, and AI generates and modifies the project.
- Manual mode: You work with a visual website editor and customize pages using drag-and-drop controls.
Agentic mode is the relevant choice for this tutorial because our goal is to build an interactive web application rather than only a conventional business website.
You can get started without writing code manually. However, understanding basic concepts such as forms, databases, authentication, and application logic helps you write better prompts and identify problems. Complex applications still need careful testing and may require manual debugging.
2. Plan Your Web Application Before Starting
Before opening the AI builder, decide what problem your application should solve. A vague request such as "make me a project management app" leaves too many decisions to the AI.
Write down the following details first:
| Planning area | Questions to answer | Example |
|---|---|---|
| Purpose | What problem does the app solve? | Help users organize projects and tasks. |
| Users | Who will use it? | Students, freelancers, and small teams. |
| Pages | Which screens are required? | Dashboard, tasks, projects, settings. |
| Features | What should users be able to do? | Create, edit, delete, and filter tasks. |
| Data | What information must be saved? | Task title, due date, priority, status. |
| Design | What should the interface look like? | Clean dashboard with a sidebar and cards. |
Choose a manageable first version
Do not ask AI to build every possible feature in one attempt. Start with a minimum viable product (MVP): the smallest useful version of your application.
For our project management example, the first version needs:
- A dashboard with task statistics.
- A page displaying all tasks.
- A form to add a new task.
- Options to edit and delete tasks.
- Filters for task status and priority.
- Persistent data storage.
Features such as team invitations, notifications, advanced reports, and subscription payments can be added later if the initial version works correctly.
3. Open Hostinger AI Builder Agentic Mode
1Sign in to Hostinger
Visit the official Hostinger AI Builder page and sign in to your Hostinger account. Review the available plan and AI-credit details before purchasing or starting a project.
2Open the Websites dashboard
From your Hostinger dashboard, navigate to Websites → Websites list. Select Create site and choose AI Builder.
3Select Agentic mode
Choose Agentic mode rather than Manual mode. This opens the prompt-based project creation experience.
4Prepare your project references
You can start with a text description. The interface also supports reference material through the add menu, including images, PDFs, and HTML files. You can provide a website link or an image of a design you want to use as inspiration.
For example, a simple dashboard wireframe can help the AI understand where you want the sidebar, charts, task list, and buttons to appear.
5Choose a domain option
During setup, choose a domain for your project or select a temporary domain if you want to connect your custom domain later. Continue to the prompt interface.
4. Write an Effective Initial AI Prompt
The initial prompt is one of the most important parts of the process. It gives the AI the project requirements and helps it generate the right structure.
A useful prompt should explain:
- The purpose of the application.
- The intended users.
- The required pages and features.
- The data that needs to be stored.
- The visual design and layout.
- Any important rules or restrictions.
Example prompt: Project management web app
Build a responsive project management web application for students and small teams. Create a modern dashboard with a sidebar containing Dashboard, Projects, Tasks, and Settings. The dashboard should display total tasks, completed tasks, pending tasks, and overdue tasks. Users should be able to create, edit, delete, search, and filter tasks. Each task should have a title, description, due date, priority, and status. Include a clean task table and a form for adding tasks. Use a professional light theme with a white background, dark navy text, and purple and blue accents. Make the layout responsive for desktop, tablet, and mobile screens. Store application data persistently and validate all user inputs. Build the application in clear, maintainable sections.
This prompt gives the AI a clear direction without trying to describe every small detail. After the first version is generated, you can add more specific instructions.
Use reference files when helpful
If you already have a design, upload a screenshot or wireframe. If you have written requirements, a PDF can provide additional context. An HTML reference can also help communicate an existing structure.
Use reference material to explain the desired result, not as a substitute for checking the generated application. Always review the actual output and correct any differences.
5. Generate and Customize the Application Interface
After submitting the prompt, Hostinger AI Builder generates the initial project. The editor provides a workspace where you can review the application and continue making changes.
The main areas include:
- Prompt and chat panel: Send instructions to add features or change the project.
- Preview: View and interact with the current version of the application.
- Select and edit: Select specific elements to make targeted content or design changes.
- Code: Inspect and edit the project's code through the code editor.
- Data: Access the integrated backend when your project uses backend functionality.
- Device view: Switch the preview to check the mobile layout.
Improve the dashboard layout
Start by checking whether the main sections are arranged logically. A project management dashboard should make its most important information easy to find.
Improve the dashboard layout without changing its existing functionality. Keep the sidebar fixed on desktop, make the main content area spacious, and display the task statistics in four clear cards. Use consistent spacing, readable typography, subtle borders, and a responsive layout. On mobile, make the sidebar collapsible and prevent horizontal scrolling.
Make targeted changes
For small text and image changes, use the Select and edit mode where appropriate. Select the element you want to change and edit it directly or provide an instruction for that selected element.
This is often more precise than asking the AI to redesign an entire page when you only want to change one button, heading, image, or section.
6. Add the Main Web App Features
Once the basic interface is ready, add functionality one feature at a time. This makes it easier to check what works and identify the cause of any problems.
Feature 1: Create a task
Ask the AI to add a form with fields for task title, description, due date, priority, and status. Include validation so required fields cannot be submitted empty.
Add a Create Task form to the Tasks page. Include title, description, due date, priority, and status fields. Make the title required and validate the date. When the user submits the form, save the task to the application database and display a clear success or error message. After successful submission, update the task list and dashboard statistics.
Feature 2: Edit and delete tasks
Users should be able to update an existing task or remove one they no longer need. Ask for a confirmation step before deletion to reduce accidental data loss.
Add Edit and Delete actions to every task row. The Edit action should open a form populated with the selected task's existing information. Save changes to the database and refresh the task list. The Delete action should show a confirmation dialog before removing the selected task. Do not change unrelated dashboard components.
Feature 3: Search and filter
Search and filters help users find information in applications containing many records.
Add a search field that filters tasks by title. Add filters for task status and priority, including All, Pending, In Progress, Completed, Low, Medium, and High. Allow users to combine search and filters. Show a useful empty state when no tasks match the selected criteria.
Feature 4: Dashboard statistics
The dashboard should calculate statistics from saved task records rather than displaying hard-coded numbers.
Connect the dashboard statistic cards to the actual task data. Calculate total tasks, completed tasks, pending tasks, and overdue tasks from the database. Update these numbers whenever a task is created, edited, or deleted. Do not use sample values as live statistics.
Do not assume that a button works just because it appears in the preview. Test the action, check whether the data is actually saved, and confirm that the interface updates correctly.
7. Set Up the Backend and Application Data
A web application often needs to store information between visits. For example, a task management tool should not lose all its tasks when a user refreshes the page.
Hostinger AI Builder Agentic mode provides integrated backend capabilities. The editor also includes a Data area when backend functionality has been added to the project. External services such as Supabase or Firebase can be connected for supported use cases.
Decide what data your app needs
For our example, each task could contain the following fields:
| Field | Purpose | Example |
|---|---|---|
| Task ID | Unique record identifier | task_001 |
| Title | Name of the task | Complete project report |
| Description | Additional task details | Finish the final documentation |
| Due date | Task deadline | 2026-11-15 |
| Priority | Importance of the task | High |
| Status | Current progress | In Progress |
Prompt for persistent data storage
Connect the task management application to persistent backend storage. Store each task with a unique ID, title, description, due date, priority, and status. Implement create, read, update, and delete operations. Load saved tasks when the application opens and update the dashboard statistics using the stored records. Handle database errors with clear messages. Do not rely on browser-only temporary state for permanent task storage.
When should you use an external database?
An external database may be useful when your project needs a particular database workflow, existing data, or an integration with another service. Hostinger documents support for connecting external services such as Supabase and Firebase, but the exact setup depends on the project.
If you connect an external service, verify its configuration, authentication rules, permissions, and database operations. Never put private service credentials or secret API keys in publicly accessible frontend code.
8. Refine the Application with Follow-Up Prompts
The first generated version is a starting point, not necessarily the final application. AI may misunderstand a requirement, omit a validation rule, or change more than you intended. Improve the project through focused follow-up instructions.
Use one prompt for one main change
Instead of requesting ten unrelated changes in one message, divide them into smaller tasks. For example:
- Fix the task creation form.
- Check task editing and deletion.
- Connect the dashboard statistics to saved data.
- Improve the mobile layout.
- Review validation and error messages.
Useful prompts for improving your app
Review the task creation process. When a user submits a task with a missing title, show a validation message and prevent the record from being saved. Keep all other task functionality unchanged. Test the corrected behavior.
Review every page at mobile screen widths. Make the navigation usable, stack dashboard cards vertically, keep forms within the screen width, and make tables usable without breaking the layout. Do not remove any existing features.
Add a loading indicator while task data is being retrieved. Show a helpful empty state when there are no tasks. If the database request fails, display a clear error message and provide a way to retry.
Review the existing project for broken navigation, non-working buttons, missing validation, inconsistent task data, and responsive layout problems. List the issues you find before making changes. Do not redesign or remove working features without asking.
9. Test Your Web Application Before Publishing
Testing is essential because a visually complete interface does not guarantee that its underlying functionality works. Use the preview to interact with the app and check each important workflow.
Functional testing
- Create a new task and confirm it appears in the list.
- Edit an existing task and confirm the changes are saved.
- Delete a task and confirm it is removed.
- Try searching for a task by its title.
- Apply status and priority filters.
- Refresh the application and check whether saved data remains.
- Submit incomplete or invalid form data and check validation.
- Check whether dashboard statistics update after changes.
Navigation and responsive testing
- Open every page from the navigation menu.
- Check that buttons lead to the correct actions or screens.
- Test the application in desktop and mobile preview modes.
- Check long text, forms, tables, and dialogs on smaller screens.
- Open the preview in a new browser tab and test it again.
Security and data checks
- Check access permissions for any private or user-specific data.
- Verify that authentication and protected pages behave correctly if the app uses accounts.
- Do not expose private API keys or database credentials.
- Test how the app handles failed requests and invalid input.
- Use test accounts and sample data before handling real customer information.
Preview testing is a useful first step, but you should also test the published app using its actual domain, different browsers, and devices. Test important user journeys from beginning to end.
10. Publish Your Web App on Hostinger
When the main features are working and you have checked the application, you can publish it so other people can access it.
1Review the final version
Check the homepage, navigation, forms, data operations, and mobile layout. Replace all sample text, placeholder images, and example contact information with your actual content.
2Click Publish
Use the Publish button in the editor. Hostinger will deploy the latest saved version of your project. Wait for the publishing process to finish.
3Open the live application
Visit the published URL and test the application again. If you selected a temporary domain during setup, the project can be accessed through that address while you prepare a custom domain.
4Connect your custom domain
If you want to use your own domain, follow Hostinger's current domain-connection instructions for Agentic mode. Check the domain's DNS configuration and wait for any required DNS changes to take effect.
5Test the published version
Open the live domain in a private browser window and test the main user journeys. Confirm that forms, saved data, authentication, and integrations behave as expected in the deployed environment.
For additional instructions, see Hostinger's official guide to creating a web app in Agentic mode.
11. Understand Hostinger AI Credits and Costs
Before building a large application, understand how the AI usage system works. Hostinger's current AI Builder Agentic mode uses a dynamic credit model. Credit consumption depends on the request and the work involved, so not every prompt uses the same amount.
For example, a small content change may require less processing than generating a new application feature or analyzing a complex code issue. Your actual usage depends on the task.
Keep these points in mind:
- Check your available AI credits before starting a large build.
- Review usage in the project's AI Credits Usage area.
- Use targeted prompts to avoid unnecessary rebuilds.
- Use direct Select and edit controls for suitable small content changes.
- Check the current cost and expiry terms before buying additional credits.
- Remember that external APIs, databases, and other connected services may have separate charges.
For current plan and credit information, visit the official Hostinger AI Builder page. Do not rely on old fixed message allowances without checking the current subscription details.
12. Limitations to Know Before Building
Hostinger Agentic mode can help create many types of browser-based applications, but it is not a replacement for every software development environment.
| Limitation | What it means for your project |
|---|---|
| AI output can vary | You may need several prompts to get the intended result. |
| Complex application logic | Advanced workflows may need manual review and debugging. |
| Development environment restrictions | Traditional access methods such as FTP, SSH, and File Manager are not available in the Agentic environment. |
| Specialized applications | It is not intended for every type of software, including native app-store mobile apps, browser extensions, or trading and banking applications. |
| External services | Integrations require correct credentials, configuration, permissions, and testing. |
| AI usage limits | Large or frequent changes can consume more credits. |
13. Tips for Getting Better Results
- Start with a clear app description. Explain the purpose, audience, features, and data requirements.
- Build the MVP first. Add essential functions before requesting advanced features.
- Use specific prompts. Explain exactly what should change and what should remain unchanged.
- Make changes incrementally. Test each major feature before moving to the next.
- Provide useful references. Screenshots, wireframes, and written requirements can help communicate your expectations.
- Check the generated code when needed. Use the code editor to inspect important project files and investigate problems.
- Test data persistence. Confirm that records remain available after refreshing or reopening the app.
- Keep security in mind. Protect credentials, validate user input, and review permissions before launch.
- Test on the live domain. A successful preview does not replace testing the published application.
Ready to build your first web app?
Explore Hostinger AI Builder and review the current Agentic mode features and credit options before starting your project.
Explore Hostinger AI BuilderFrequently Asked Questions
1. Is Hostinger Horizons the same as Hostinger AI Builder?
Hostinger Horizons is the earlier name for the prompt-based app-building experience now offered through Hostinger AI Builder's Agentic mode. AI Builder also has a separate Manual mode for visual website editing.
2. Can I build a web app with Hostinger Horizons without coding?
Yes. Agentic mode lets you describe your application using natural-language prompts, and AI generates the project code and supported functionality. However, complex projects may require technical knowledge, manual debugging, and careful testing.
3. What types of web apps can I create?
You can create browser-based applications such as task managers, dashboards, trackers, booking tools, customer portals, calculators, and interactive learning applications. The result depends on the requirements and the platform's current capabilities.
4. Can Hostinger AI Builder create a database?
Agentic mode provides integrated backend capabilities for supported projects. You can also connect external services such as Supabase or Firebase when your application needs them. Configure and test database permissions and data operations before launch.
5. Can I add login and registration to my web app?
You can ask Agentic mode to create authentication features for a supported application. Make sure to test registration, login, logout, password handling, access permissions, and protected pages before using real accounts.
6. Can I edit the code generated by Hostinger Horizons?
Yes. The current Agentic mode includes a code editor for viewing and editing project code. Review changes carefully, especially when they affect authentication, data handling, or integrations.
7. Does Hostinger AI Builder include web hosting?
Hostinger offers hosting and deployment within its AI Builder ecosystem. Check the current plan and subscription requirements to understand which services are included and what is needed to keep your application published.
8. Can I connect my own domain?
Yes. You can choose a domain during setup or use a temporary domain and connect a custom domain later. Follow the current Agentic mode domain-connection instructions and configure the required DNS settings.
9. Can I build an Android or iOS app?
Agentic mode is designed for websites and browser-based web applications, not native applications for distribution through the Google Play Store or Apple App Store. A responsive web app can still be accessed through mobile browsers.
10. How do I publish my web app?
After testing your project, select Publish in the editor and wait for deployment to finish. Open the live URL, check its functionality, and connect a custom domain if you have not already done so.
11. Does every AI prompt use the same number of credits?
No. Hostinger uses a dynamic credit model, and usage depends on the complexity and processing required for each request. Check the project's AI Credits Usage area for your current usage.
12. Is Hostinger Horizons suitable for complex software?
It can help generate more advanced web applications, but complex systems require careful planning, testing, security reviews, and potentially manual development. It should not be assumed to replace a complete professional software engineering process.
Final Thoughts
Building a web application with Hostinger Horizons—now part of Hostinger AI Builder's Agentic mode—starts with a clear idea and a well-structured prompt. From there, you can generate the initial interface, add features, connect data, refine the design, and publish the result.
The most reliable approach is to build a small working version first. Test each feature, verify that data is saved correctly, and improve the application in focused steps. With careful prompting and realistic expectations, the platform can help you turn a web app idea into a working browser-based project.
Editorial note: Product names, interface steps, supported features, and AI-credit terms may change. This guide reflects Hostinger's published Agentic mode documentation at the time of writing. Always check the current official documentation before purchasing or deploying a production application.
