Native.Builder Tutorial: Build an AI-Powered Onboarding Agent
Native.Builder Tutorial: Build an AI-Powered Onboarding Agent
Every SaaS product has the same problem: new users land on the dashboard and have no idea where to start. A good onboarding wizard solves this by collecting a few key details upfront (name, role, goals) and using that data to show exactly the right next steps for each person.
This tutorial builds Welcome Flow: a 4-step onboarding wizard with a progress bar, role-based recommendation engine, and personalized summary screen. It is built entirely through Native.Builder's AI agents, from a plain-language brief to a live deployed URL.
If you are working on an AI hackathon project that needs to impress judges with a polished first-run experience, this is the pattern to know. The same wizard structure works for any product category. Just swap out the roles and recommendations.
This is the second tutorial in this series. If you have not used Native.Builder before, read Build Your First AI App with Native.Builder first for a full dashboard walkthrough.
What you will build
Welcome Flow: a dark-themed onboarding wizard with four steps.
| Step | Description |
|---|---|
| Step 1: Welcome | Full-screen card with headline, subtext, and a Get Started button |
| Step 2: About You | First name input and four role cards (Developer, Designer, Product Manager, Founder) |
| Step 3: Your Goals | Multi-select goal cards (Ship faster, Reduce costs, Improve collaboration, Automate workflows) |
| Step 4: All Set | Personalized summary with the user's name, role badge, selected goal tags, and three role-specific recommended next steps |
Prerequisites
- A Native.Builder account with credits (beta.nativelyai.com)
- Familiarity with the platform basics (see Tutorial 1 if you are new)
- No coding experience needed
Step 1: Brief the Product Architect
Go to Home, confirm Product Architect is selected, and send this prompt:
I want to build a multi-step customer onboarding wizard called "Welcome Flow".
It should guide new users through a personalized setup experience with 4 steps:
- Step 1 (Welcome): Full-screen landing with headline, subtext, and a Get Started button
- Step 2 (About You): Collect the user's first name and their role from 4 options:
Developer, Designer, Product Manager, Founder
- Step 3 (Your Goals): Let them pick multiple goals from 4 options:
Ship faster, Reduce costs, Improve collaboration, Automate workflows
- Step 4 (All Set): Personalized summary showing their name, role badge, selected
goals as tags, and 3 recommended next steps based on their role
Dark UI with purple-to-blue gradient accents, smooth transitions between steps,
all state in React useState with no backend needed.
Scope this for me before we build.
The Product Architect will ask clarifying questions. Here are the answers that produce the cleanest build:
| Question | Answer | Why |
|---|---|---|
| Icon library? | Lucide (clean, minimal) | Standard in Vite + React, well supported, no missing-dependency errors |
| Recommended next steps content? | I'll write them out now | Generic placeholders weaken Step 4. Write real content once |
| Transition effect? | Simple fade only | Slide and scale animations introduce layout bugs; fade is reliable |
| Layout? | Max-width with blur backdrop | Centered card with dark blurred background matches modern SaaS onboarding patterns |
When asked to write the recommended next steps, type them directly in chat:
Developer: Connect your API key, Read the quickstart docs, Join the Discord community
Designer: Browse the component library, Fork a starter template, Share your first project
Product Manager: Set up your first workspace, Invite your team, Create your product roadmap
Founder: Schedule a demo call, Explore pricing plans, Read customer success stories
Step 2: Review the PRD
Once you have answered all questions, the Product Architect sets the project name and writes a comprehensive PRD to prd/welcome-flow.md. Click the Docs tab to read it.
This PRD is unusually detailed for a no-code tool. It includes:
- A typed
OnboardingStateinterface (step,firstName,role,goals) - The full component breakdown:
WelcomeFlow.tsx,StepWelcome.tsx,StepAboutYou.tsx,StepGoals.tsx,StepAllSet.tsx,RoleCard.tsx,GoalCard.tsx,ProgressBar.tsx - The complete
ROLE_RECOMMENDATIONSconstant with every recommendation pre-mapped - Tailwind CSS class names for selected vs unselected card states
- Accessibility notes (
aria-current="step", focus states, WCAG contrast)
Read it before building. If any role label or recommendation text needs changing, edit it here now. It is far cheaper to fix prose in a Markdown doc than to rewrite generated TypeScript.
Step 3: Switch to Builder and Build
Click the agent selector, choose Builder, then send:
Build the Welcome Flow app based on the PRD in prd/welcome-flow.md
Confirm the "Switch to Builder Agent" suggested action. The Builder reads the PRD, then generates the entire component tree. Watch the Code tab. Watch the Code tab as 9 files appear as it works.
When the build finishes, click Preview to see Step 1.
Step 4: Fix Issues with Focused Prompts
Click Get Started. If Step 2 shows a blank gradient rectangle instead of the form, this is a CSS scoping bug: the gradient background was applied to the card container instead of just accents.
Send this focused fix prompt:
Steps 2, 3, and 4 show a blank purple-to-blue gradient filling the entire card ,
no text, form fields, or role cards are visible, only the Continue button at the
bottom. The gradient should only appear as accents: button backgrounds, progress
bar fill, and selection borders. The card background itself should stay dark
(bg-slate-900 or bg-slate-950). Please fix the gradient so it is not applied to
the card container background, and make all step content visible.
The Builder will identify the problematic CSS class and patch it. One targeted prompt, one fix turn.
This is the key skill for working with Native.Builder on complex UIs: describe what you see, not what you think is wrong. "Steps 2-4 show a blank gradient" is more useful than "fix the CSS" because the Builder can match your description to the visual output.
Step 5: Test All Four Steps
After the fix, click through the full flow:
Step 2: About You: Enter your name, select a role. The selected role card gets a purple border and checkmark.
Step 3: Your Goals: Select multiple goals. A counter below the cards shows how many are selected.
Step 4: All Set: The personalized summary shows your name in the heading, your role as a badge, your selected goals as tags, and exactly the three recommendations for your role.
Test with a different role to confirm the recommendations change. Select Founder on Step 2 and Step 4 should show the Founder recommendations instead.
Step 6: Publish
Click the Publish button and then Publish again in the panel.
Your onboarding wizard is now live at yourproject.nativelyai.app and shareable with anyone.
Customizing Welcome Flow for Your Product
The wizard structure is generic by design. Here is how to adapt it for a real product:
Change the roles: In the PRD, the roles are Developer, Designer, Product Manager, and Founder. Replace these with whatever segments make sense for your product , for a DevTool: Junior, Senior, Lead, Architect. For a marketing tool: Freelancer, Agency, In-house, Enterprise.
Update the recommendations: The ROLE_RECOMMENDATIONS constant in constants.ts holds all four role-to-steps mappings. Tell the Builder: Update the ROLE_RECOMMENDATIONS in constants.ts with these new values: [paste your content]. This is a single-file edit that costs very few credits.
Add a fifth step: Tell the Builder: Add a Step 5 between Goals and All Set that asks users to choose their team size: Solo, 2-10 people, 11-50 people, 51+ people. Store the selection as teamSize in state and show it as a tag on the summary screen. The component structure makes this straightforward to extend.
Connect to a backend: When you are ready to save onboarding responses, go to Integrations, connect Supabase, then tell the Builder: On Step 4 load, save the user's firstName, role, and goals to a Supabase table called onboarding_responses. The Builder will generate the schema, client setup, and the insert call.
Frequently Asked Questions
Q: How many credits does a multi-component build like this use? The Welcome Flow build (Product Architect scoping plus Builder generating 9 component files) used fewer than 15 credits of the 50-credit free allowance. Two fix prompts (CSS gradient + alert removal) added 4 more. Total: under 20 credits for a fully functional, polished onboarding wizard.
Q: Why did the Builder apply the gradient to the card background instead of just accents? Complex Tailwind setups with many gradient classes can produce scoping conflicts on first build, especially when a parent container and child elements share gradient utilities. This is a known pattern with AI-generated CSS. The fix is always the same: describe what you see visually, let the Builder identify the offending class, and apply a targeted patch.
Q: Can I use this wizard pattern for something other than onboarding?
Yes. The same 4-step structure works for: product surveys, lead qualification forms, feature preference selectors, and role-based pricing guides. The personalization logic (collect role, map to recommendations) is reusable across all of these. Swap the content in constants.ts and update the step labels.
Q: Does the role-based recommendation logic require a backend?
No. The entire mapping is a static JavaScript object (ROLE_RECOMMENDATIONS) that lives client-side. There is no API call and no database , the personalization happens entirely in React state. This makes the app fast, free to run, and easy to deploy.
What to do next
Add localStorage persistence: Tell the Builder: Save onboarding state to localStorage so the wizard remembers where a user left off if they close the browser mid-flow. This adds two lines of code and makes the experience much more polished.
Use the Deck Creator agent: Switch to the Deck Creator agent and ask it to generate a stakeholder presentation for Welcome Flow. It reads the PRD and produces a shareable slide deck , useful for presenting your hackathon project.
Build the next feature: Now that users complete onboarding, they need somewhere to go. Use Native.Builder to build the dashboard they land on after clicking "Get started". Reference the onboarding state from localStorage to personalize the dashboard for their role.
Ready to put these skills into practice? Check out the upcoming AI hackathons on Lablab , a polished onboarding flow is one of the fastest ways to differentiate your hackathon submission from a bare-bones demo.
.png&w=128&q=75)