Interactive fictional example · No signup
Try the same project as four different visitors.
A small portal needs more than a login screen. Choose a visitor to inspect the expected response for one fictional project.
The fictional project belongs to Client A.
This browser-only illustration uses fixed fictional responses. It is not authentication, a Supabase integration, or proof that a deployed app enforces access. Your real app must pass server-side and database access tests separately.
The practical idea
Start from buyer value, not tool excitement.
Supabase can provide accounts and private data, Vercel can host the Next.js app, and a domain can point to the finished deployment. You do not need to perform each low-level step by memory.
Your job is to tell your chosen agent who may see each screen, what data is private, what happens when a service is unavailable, and what proof must pass before a client receives access.
For the first version, sell one workflow rather than a general app: a video agency's client can inspect a project status, leave feedback through an agreed process, and see no other client's records. Describe an AI-assisted build honestly; the finished portal does not need an AI feature just to justify the offer.
Keep the pilot scope countable: one status screen, two client roles, an admin role, fictional seed records, access tests and a handoff note. Hosting, AI subscriptions, integrations, ongoing support and live-data migration need separate cost and permission checks. Do not choose a fixed price until you have estimated that work.
Worked example
One narrow service, made inspectable.
- Buyer
- A small video-production agency
- Repeated pain
- Clients ask for status updates across email threads.
- Offer
- A tiny authenticated project-status portal with fictional sample projects for the pilot.
- Proof
- One client sees only their fake project, an admin sees the fake portfolio, and unauthenticated access is denied.
- Human approval
- The agency approves roles, fields, retention, domain, and production data migration separately.
Do this in order
A 4-step operating path.
- 1
Brief the screen and roles
Name the user, the one job they perform, and exactly which records each role may view or change.
- 2
Ask the agent for data and access rules
Require Supabase tables, row-level security, private storage, and server-side access checks in plain English.
- 3
Use preview deployment
Deploy fictional data to a Vercel preview first. Keep production keys and customer data out of previews.
- 4
Connect domain after QA
Only after auth, access, mobile layout, backups, and error handling pass should the approved domain point to production.
Prompt for your agent
Replace the brackets, then use your preferred AI agent.
Act as my senior delivery agent. Build the smallest secure client app for this workflow: [WORKFLOW]. Users and roles: [ROLES] Private records: [DATA] One required screen: [SCREEN] Human approval or admin action: [APPROVAL] Use the existing project's Next.js patterns. Propose Supabase tables and row-level security before applying them. Use fake seed data only. Add server-side authorization, private storage where needed, clear empty/error states, and mobile layout. Prepare a Vercel preview QA checklist and domain handoff plan. Never touch another Supabase project, Vercel project, domain, or live customer record. Stop for exact approval before external account mutations.
Ready check
Keep these 5 facts visible.
- Each role has an explicit access rule.
- Paid or private data is checked server-side.
- Fake data is used in preview.
- Secrets stay server-only.
- Domain connection waits for QA.
Avoid
Common ways this goes wrong.
- Treating login as complete authorization
- Putting a service key in browser code
- Using production data in preview
- Connecting the final domain before access tests
A useful reading order
Not sure where to begin? Follow these three steps.
- 1
Choose your first AI service
Match one reachable buyer with one repeated problem.
- 2
Compare seven beginner service ideas
Start with a draft or review queue, not irreversible actions.
- 3
Build and check with one AI agent
Use the same plan, build, review, test and handoff loop.
Prefer a full lesson? Open the first free lesson: choose your first AI service to sell.
Primary references
Review the source, not just our summary.
Products and platform rules change. These links are the starting point for the next source refresh.
Related practical guides
Continue with a connected next step.
How to Price AI Automation Services for Your First Client
Sell a bounded pilot the buyer can approve, not an unlimited promise you cannot control.
Read guideAI Automation Proposal Template for a Small First Project
Turn your demo into a document a buyer can approve without decoding technical language.
Read guideHow to Find Your First AI Automation Client: 4-Step Plan
Build a researched 20-prospect list, start useful conversations, and turn one confirmed workflow problem into a bounded paid pilot.
Read guidePublished by Agentic Systems Academy Team. Educational information only. No client, income, ranking, or platform outcome is guaranteed.