Native.Builder Tutorial: Build and Deploy Your First AI App
Native.Builder Tutorial: Build and Deploy Your First AI App
Most no-code tools let you drag components onto a canvas. Native.Builder works differently: you describe what you want, and a team of specialized AI agents plans, codes, and ships a real production React app for you. No canvas. No drag and drop. Just a prompt and a live URL at the end.
This tutorial walks you through the entire workflow from scratch. You will brief the Product Architect agent, get a full PRD generated automatically, hand it off to the Builder agent, and publish a working app to a public URL. The whole thing takes under 30 minutes and uses fewer than 10 credits.
If you are preparing for an AI hackathon, this workflow is worth knowing. Native.Builder lets hackathon teams skip the scaffolding and go straight to building product.
What you will build
Task Flow: a dark-themed Kanban board with three status columns (To Do, In Progress, Done), click-to-move task cards, and an Add Task modal. It is fully functional, deployed, and shareable by the end of this tutorial.
Prerequisites
- A Native.Builder account (sign up at beta.nativelyai.com)
- 50 free credits (all new accounts receive 50 credits with no payment required)
- No coding experience needed
The Dashboard
After signing in you land on the Home page. The large prompt box in the center is where every project begins. Below it, a "From the Community" section shows apps other builders have shipped.
The sidebar on the left is the main navigation. Here is what each section does:
Credits (top of the sidebar): Your current balance. All new free accounts start with 50 one-time credits. Credits are consumed by chat turns with AI agents, not by browsing, previewing, or publishing. For a full breakdown of plans and what each credit buys, see the Plans and Credits docs.
My Projects: A grid of all your projects. Each card shows the project name, thumbnail, and creation date. Click any card to reopen that project.
My Templates: A growing library of reusable components you can drop into any project. The team is actively expanding this section.
Switch Workspace: Native.Builder organizes everything into workspaces. A workspace holds your projects, members, and a shared credit pool. You can create additional workspaces or switch between them here.
Store: Browse community-built apps and components. The Store has two tabs: Apps (full projects you can fork) and Components (reusable UI pieces). Everything marked Free costs no credits to install.
Integrations: Connect external services to your projects. Currently available integrations are Supabase (database), AI/ML API, OpenRouter (bring your own LLM key), and GitHub (sync your project with a repository).
Plans and Credits: Manage your subscription and view your billing history. The free plan includes 50 one-time credits, 1 project, and 2 workspace members.
Members: Invite teammates by email and assign roles (Owner, Admin, Member, Viewer, Guest). All members in a workspace share the same credit pool.
Step 1: Brief the Product Architect
Go to Home and look at the prompt box. Notice the agent label in the top left corner: Product Architect. This is the default agent for new projects, and it is the right one to start with.
The Product Architect's job is to scope your project before any code is written. It reads your brief, asks clarifying questions, and produces a PRD (Product Requirements Document) that the Builder agent will use as its spec. This two-step flow saves credits by avoiding expensive rewrites later.
Type the following into the prompt box and send it:
I want to build a simple task manager web app. It should have:
- A left sidebar with the app name and navigation
- A main area with tasks grouped into three columns: To Do, In Progress, and Done
- A button to add a new task with a title
- Ability to click a task to move it to the next column
- Clean minimal dark UI with card-style tasks
Scope this for me before we start building.
After sending, the project workspace opens. The Product Architect will ask you four clarifying questions before writing the PRD. These questions define the scope and prevent the Builder from making assumptions.
Here are the recommended answers for this project:
| Question | Answer | Why |
|---|---|---|
| Where do new tasks start? | Always starts in To Do | Simple and predictable |
| How should tasks move? | Click only | Drag-and-drop needs more code and more credits |
| Should tasks persist after closing the browser? | No, in-memory only for now | Keeps it pure frontend, no database needed |
| What should we name this project? | Task Flow | Clean product name |
After you answer all four questions and click Done, the Product Architect sets the project name and writes the PRD.
Step 2: Read the PRD in the Docs Tab
Click the Docs tab (page icon in the top navigation) to see what the Product Architect wrote. It created a file at prd/overview.md with a full PRD: description, goals, user stories, user flows, design notes, acceptance criteria, out-of-scope items, and implementation notes.
Read through it. If anything is wrong, you can correct it now by telling the Product Architect in chat before any code is written. This is much cheaper than fixing code after the fact.
The Docs tab supports both WYSIWYG and Raw MD views. You can edit docs directly here or let agents update them as the project evolves.
Step 3: Switch to the Builder Agent and Build
Go back to the chat panel. Click the agent selector (it says Product Architect) and choose Builder.
Type this prompt and send it:
Build the Task Flow app based on the PRD in prd/overview.md
The Builder will read the PRD first, then suggest switching to the Builder Agent. Click Switch Agent to confirm.
The Builder reads prd/overview.md, then starts generating files. You will see file names appear in the Code tab as it works. A "Building..." indicator shows at the bottom of the chat panel.
When it finishes, the Builder posts a summary of everything it built: components, interactions, keyboard shortcuts, and design decisions.
The generated code lives in three files: App.tsx (all app logic and UI), main.tsx (React entry point), and index.css (global styles). You can click any file in the Code tab to read or edit it directly.
Step 4: Test in the Live Preview
Click the Preview tab (eye icon). The app renders immediately in the right panel.
Test the core interactions:
- Click Add Task, type a title, press Enter. The task appears in the To Do column.
- Click the task card. It moves to In Progress.
- Click again. It moves to Done. Cards in Done have no move action.
If something looks wrong, describe the issue in chat. For small fixes, use a single focused prompt like:
The Add Task button should be centered in the sidebar, not left-aligned
Keep refinements narrow. One fix at a time costs fewer credits than bundling multiple changes into one prompt.
The Tasks tab (grid icon) shows the Task Planner's development board. This is where the Task Planner agent tracks implementation tasks if you use it to break down larger features.
Step 5: Publish to a Live URL
Click the Publish button in the top right corner. A panel appears showing your app URL.
Click Publish. Native.Builder builds the production bundle and deploys it. You will see a "Building in progress" indicator, then a green "Published less than 5 seconds ago" confirmation.
Your app is now live at yourproject.nativelyai.app. Anyone with the link can use it. Publishing does not consume credits.
Version History
Every time the Builder makes changes, Native.Builder saves a version snapshot. Click the history icon (clock, top left) to see all versions. Each one is named after the prompt that created it, so you can trace exactly when each change happened.
Click Preview on any version to see how the app looked at that point. On paid plans, you can restore any version as the active codebase.
Frequently Asked Questions
Q: How many credits does building an app actually use? Very few with the standard models. The entire Task Flow app in this tutorial (Product Architect scoping plus Builder generating all the code) used fewer than 10 credits from the 50-credit free allowance. Simple apps built with the Kimi or other standard models are extremely credit-efficient.
Q: What types of apps can Native.Builder produce? Native.Builder generates Vite-based React web applications. This covers landing pages, dashboards, internal tools, SaaS products, and most standard web apps. It does not currently support native mobile apps, Python-based apps (Streamlit, Flask), or standalone backend services.
Q: Do I need to know React or TypeScript to use Native.Builder? No. You describe what you want in plain language and the agents write the code. That said, being able to read the generated TypeScript helps you spot issues and write better refinement prompts. The Code tab is always open so you can inspect everything the Builder produces.
Q: Can I connect a real database so tasks persist between sessions? Yes. Go to Integrations and connect Supabase, then tell the Builder agent: "Add Supabase persistence so tasks survive page reloads." It will generate the schema, client setup, and updated components. You will need a Supabase project and its URL and anon key.
What to do next
The Task Flow app is a starting point. Here are a few directions to take it further:
Iterate with the Builder agent: Ask it to add features one at a time. Good next prompts:
Add a way to delete tasks from the Done columnAdd a priority badge (High, Medium, Low) to each task cardMake the sidebar collapsible
Connect a database: Go to Integrations, connect Supabase, then tell the Builder: Add Supabase persistence so tasks survive page reloads. The Builder will generate the schema and client code.
Connect a custom domain: On Builder plan and above, go to Settings, then Domains to connect your own URL instead of the default *.nativelyai.app subdomain. Full instructions are in the Custom Domains docs.
Explore the full docs: docs-builder.nativelyai.com covers prompting best practices, workspaces, publishing, and plans in detail.
Build something bigger: The next tutorial in this series shows how to build an AI-powered customer onboarding agent using Native.Builder's conversational UI capabilities.
If you want to put these skills to work immediately, check out the upcoming AI hackathons on Lablab. Native.Builder is particularly useful for hackathon prototyping: you can go from idea to demo-ready app in a single session.
.png&w=128&q=75)