24 v0 Prompts for Full-Stack Apps (2026)

Before writing any code, write a short PRD for this app so we can agree on scope.

App: [a team task manager] used by [small product teams], to [plan work and track what's shipping this week].

In the PRD, list:
- Core entities and their fields ([Workspace, User, Project, Task]).
- The screens and the primary action on each.
- Auth model (who logs in, what they can see).
- The database tables and key relationships.
- What is explicitly OUT of scope for v1 (no billing, no notifications yet).

Stack we'll build on: Next.js App Router, TypeScript, Tailwind, shadcn/ui, Supabase Postgres, server actions.

Output only the PRD as markdown. Do not build anything yet — I'll review it, then ask you to scaffold.

Build a full-stack SaaS starter in the sandbox. Follow the PRD we agreed on.

Product surface:
- Marketing home at / with a hero, feature grid, and a "Get started" CTA.
- Authenticated app at /app with a sidebar (Dashboard, Projects, Settings).
- Dashboard: stat cards ([open tasks, due this week, completed]) and a recent-activity list.

Used by [product teams], on desktop, to run their week at a glance.

Constraints:
- Next.js App Router, TypeScript, Tailwind, shadcn/ui. Server components for data, server actions for writes.
- Connect a Supabase Postgres database; create tables for [Workspace, User, Project, Task] with the fields from the PRD and foreign-key indexes.
- Add a .env.example listing every var; never inline secrets.
- Design tokens: primary [#4f46e5], radius [0.625rem], font weight 600 for headings, generous spacing.

Provision the database, generate the schema, seed 5 sample projects, and make the dashboard render live data. Responsive down to 360px.

Add multi-tenant workspaces to the app.

Product surface:
- A workspace switcher in the sidebar header.
- A /app/settings/members page: table of members (name, email, role), an "Invite by email" form, and a remove action.
- Roles: [owner, admin, member]. Owners and admins can invite and remove; members can't.

Used by [a workspace owner], when onboarding teammates, to control who has access.

Constraints:
- Add [Membership] (user_id, workspace_id, role) and [Invite] (email, workspace_id, token, status) tables via server actions.
- Scope every query to the current workspace — a user never sees another workspace's data.
- Invite flow: create an invite row, and stub the email send behind lib/email so it's easy to wire later.

Keep Next.js App Router + shadcn/ui. Enforce permissions on the server, not just the UI.

Build an analytics dashboard page at /app/analytics that reads real rows from the database.

Product surface:
- A date-range picker (last 7 / 30 / 90 days) that drives every widget.
- KPI cards: [total events, active users, conversion rate, avg session length] with a % change vs the previous period.
- A line chart of [events over time] and a bar chart of [top pages], using [recharts].
- A table of [recent events] with pagination.

Used by [a founder], each morning, to decide where to focus that day.

Constraints:
- Aggregate in SQL through server actions — never fetch all rows and reduce in the client.
- Add an [events] table if it doesn't exist and seed 30 days of realistic sample data.
- Next.js App Router, Tailwind, shadcn/ui, TypeScript. Loading skeletons for each widget. Responsive to 360px.

Build a project tracker as a full-stack CRUD app on Neon Postgres.

Product surface:
- /projects: a table of projects (name, status, owner, updated) with sort and an empty state.
- A "New project" dialog with a validated form.
- /projects/[id]: detail view with inline edit and a delete action (confirm first).

Used by [an agency lead], through the week, to see what's in flight and what's stuck.

Constraints:
- Schema: [Project] (id, name, status enum [planning|active|done], owner_id, created_at, updated_at) with an index on status. Generate the migration.
- All reads and writes go through server actions in app/actions; validate input with Zod, reused on client and server.
- After a write, revalidate the list path so the table stays fresh.
- Next.js App Router, shadcn/ui table + dialog + form, TypeScript. Responsive.

Build a lightweight CRM as a full-stack app with a Supabase Postgres database.

Product surface:
- /contacts: searchable list (name, company, email, last touched).
- Contact detail: profile fields, a timeline of notes, and a "deals" panel.
- /deals: a kanban board with columns [lead, qualified, won, lost]; drag a card to change stage (persist on drop).

Used by [a solo founder doing sales], between calls, to remember context and move deals forward.

Constraints:
- Tables: [Contact], [Deal] (contact_id, stage, amount), [Note] (contact_id, body, created_at). Foreign-key indexes.
- Stage changes and note creation are server actions; optimistic UI on the board.
- Full-text search on contacts pushed into the query.
- Next.js App Router, Tailwind, shadcn/ui, TypeScript. Design tokens: primary [#0f766e], radius [0.5rem].

Build an inventory management app, full-stack, on Postgres.

Product surface:
- /items: a paginated, filterable table (SKU, name, category, quantity, price). Low-stock rows highlighted.
- Add / edit item in a dialog with validation.
- Bulk actions: adjust quantity, change category.
- A small "stock summary" header: total items, total value, low-stock count.

Used by [a small warehouse manager], during a stock count, to keep quantities accurate.

Constraints:
- Cursor-based pagination and case-insensitive search, both in the database query.
- [Item] table (sku unique, name, category, quantity int, price numeric, updated_at); index category and name.
- Server actions for all mutations; Zod validation; revalidate the list after writes.
- Next.js App Router, shadcn/ui, TypeScript, responsive to 360px.

Build a mini CMS for [blog posts], full-stack, on Supabase.

Product surface:
- /admin/posts: list with status badges (draft / published), search, and "New post".
- Editor at /admin/posts/[id]: title, slug (auto from title, editable), a markdown body with live preview, cover image, and tags.
- Publish / unpublish toggle that sets published_at.
- Public /blog and /blog/[slug] that render only published posts.

Used by [a marketing writer], to draft and ship posts without touching code.

Constraints:
- [Post] (title, slug unique, body, status, cover_url, published_at) + [Tag] many-to-many. Index slug and status.
- Server actions for save/publish; revalidate the public paths on publish.
- Next.js App Router, Tailwind, shadcn/ui, TypeScript. Draft rows never appear on the public site.

Add authentication to this app.

Product surface:
- /login with email + password and "Continue with GitHub" (OAuth).
- /signup, sign-out, and a session that persists across refreshes.
- Everything under /app requires a session; unauthenticated visitors are redirected to /login.

Used by [returning users], at the start of a session, to get into their own data.

Constraints:
- Use [Supabase Auth] (or [Auth.js] if cleaner here). Add all required env vars to .env.example — names only, no values.
- A getCurrentUser() helper usable in server components and server actions; attach the user so data queries scope to them.
- Middleware guards the /app routes on the server, not just client redirects.
- Next.js App Router, shadcn/ui forms, TypeScript. Show clear inline errors on bad credentials.

Build an account settings area at /app/settings.

Product surface:
- Profile tab: name, avatar upload, timezone. Saves via a server action.
- Security tab: change password, list active sessions, sign out everywhere.
- Danger zone: delete account with a typed-confirmation dialog.

Used by [any signed-in user], occasionally, to keep their account correct and safe.

Constraints:
- Avatar upload uses [Supabase Storage] with a presigned URL; validate type and max size on the server.
- All mutations are server actions scoped to the current user; validate with Zod.
- Account deletion cascades their rows and signs them out.
- Next.js App Router, shadcn/ui tabs + form + dialog, TypeScript. Toast on success and failure.

Add role-based access control on top of the existing auth. Roles: [owner, admin, member, viewer].

Product surface:
- A can(user, action, resource) helper in lib/authz that owns all permission logic in one place.
- Enforce on the server: [only owner/admin can delete; viewers are read-only]. Return 403 when denied.
- In the UI, hide or disable actions the current role can't perform — but never rely on the UI as the gate.

Used by [an admin], to keep the right people out of the wrong actions.

Constraints:
- Add a role to the [membership] table.
- Add the check to every mutating server action and route handler — sweep the codebase and don't miss one.
- Keep the stack: Next.js App Router, TypeScript. Don't change unrelated files.

Replace password login with passwordless magic-link auth using Supabase Auth.

Product surface:
- /login with a single email field and a "Send magic link" button.
- A "check your email" confirmation state and a /auth/callback route that completes the session.
- First-time sign-in creates the user's profile row automatically.

Used by [consumer users] who don't want another password.

Constraints:
- Configure Supabase magic-link auth; add the redirect URL and keys to .env.example (names only).
- On first sign-in, upsert a [profile] row (user_id, email, created_at) via a server action.
- Handle expired / already-used links with a clear error and a re-send option.
- Next.js App Router, shadcn/ui, TypeScript. Tell me exactly which Supabase dashboard settings to enable to test locally.

Build an AI chat app, full-stack, with streaming responses.

Product surface:
- A chat UI: message list (user + assistant bubbles), an auto-growing composer, and a streaming response that renders token by token.
- Conversation sidebar: list past chats, start new, rename, delete. Persist messages to the database.
- A model picker and a "system prompt" field per conversation.

Used by [a knowledge worker], throughout the day, to think through problems and keep the thread.

Constraints:
- Use the [AI SDK] with a route handler that streams from [the model provider]; read the API key from env.
- Tables: [Conversation] and [Message] (role, content, created_at) on [Supabase]. Save each turn.
- Handle errors and rate limits gracefully; stop-generation button.
- Next.js App Router, Tailwind, shadcn/ui, TypeScript. Responsive; keyboard submit.

Build a document Q&A app using retrieval-augmented generation.

Product surface:
- Upload [PDFs / text files]; show them in a "sources" list with processing status.
- Ask a question in a chat box; answers cite which document and section they came from.
- A per-document view showing extracted chunks.

Used by [a researcher], to ask questions across their own documents and trust the answer.

Constraints:
- On upload, chunk the text, embed it with [the embeddings model], and store vectors in [Supabase pgvector]. Show progress.
- On a question, retrieve the top-k chunks, pass them as context to the model via a streaming route handler, and return an answer with citations.
- Read all keys from env; validate file type and size on upload.
- Next.js App Router, shadcn/ui, TypeScript. Handle "no relevant context" gracefully.

Build an AI content generator, full-stack.

Product surface:
- A form: content type ([blog intro, product description, email]), topic, tone, and length.
- Generate button that streams the result into a preview pane with copy and regenerate.
- A "history" tab listing past generations (prompt + output), reusable and deletable.

Used by [a marketer], to draft copy fast and reuse what worked.

Constraints:
- A route handler calls [the model] with a templated prompt built from the form; stream the output. Key from env.
- Persist each generation to a [Generation] table (type, input, output, created_at) on [Neon].
- Add a per-user daily generation cap enforced on the server.
- Next.js App Router, Tailwind, shadcn/ui, TypeScript. Design tokens: primary [#7c3aed], radius [0.75rem].

Build a support inbox with AI-drafted replies.

Product surface:
- A two-pane inbox: conversation list on the left (status, customer, last message), thread on the right.
- A "Suggest reply" button that streams an AI draft the agent can edit before sending.
- Status controls: open / pending / closed; assign to an agent.

Used by [a support agent], during their shift, to answer faster without losing their voice.

Constraints:
- Tables: [Ticket] (status, assignee, customer_email) and [TicketMessage] (ticket_id, role, body). On [Supabase].
- The suggest-reply route handler passes the thread as context to [the model] and streams a draft; nothing sends automatically.
- Status changes and replies are server actions; scope tickets to the current team.
- Next.js App Router, shadcn/ui, TypeScript. Optimistic status updates.

Build a two-sided marketplace for [freelance services], full-stack.

Product surface:
- Buyer side: browse listings, listing detail, and an "order" action.
- Seller side: /seller/listings to create/edit listings, and an orders dashboard.
- Shared: auth, profiles with a role ([buyer, seller, or both]), and an orders table both sides can see their slice of.

Used by [buyers looking for a service] and [sellers offering one], to transact with trust.

Constraints:
- Tables: [Listing] (seller_id, title, description, price, category, active), [Order] (listing_id, buyer_id, status, amount). Foreign-key indexes.
- Browse has search + category filter pushed into SQL. Only active listings show publicly.
- All writes are server actions scoped by role; a buyer can't edit listings, a seller can't see others' orders.
- Next.js App Router, Tailwind, shadcn/ui, TypeScript, Supabase, responsive.

Build a booking app for [appointments with a provider], full-stack.

Product surface:
- Public booking page: pick a service, see available slots on a calendar, book with name + email.
- Provider dashboard: set weekly availability, block dates, view upcoming bookings, cancel.
- Confirmation screen and a stubbed confirmation email.

Used by [a client] booking time and [a provider] managing their calendar.

Constraints:
- Tables: [Service] (name, duration, price), [Availability] (weekday, start, end), [Booking] (service_id, start_at, end_at, customer). On [Postgres].
- Compute open slots on the server from availability minus existing bookings — never double-book; enforce with a check on write.
- Timezone-aware; validate that a slot is still free at booking time.
- Next.js App Router, shadcn/ui calendar + form, TypeScript. Responsive to 360px.

Add Stripe payments and subscriptions to the app. Use the current Stripe API.

Product surface:
- A /pricing page with [Free / Pro / Team] plans and an "Upgrade" button per paid plan.
- Upgrade creates a Checkout Session server-side and redirects to Stripe.
- A billing page: current plan, "manage billing" (Stripe portal), and plan status.

Used by [a user ready to pay], to upgrade and manage their subscription.

Constraints:
- A route handler creates the Checkout Session; a webhook at /api/webhooks/stripe verifies the signature and, on [checkout.session.completed / subscription updated], writes the plan to the user's row.
- Handle canceled checkout, failed payment, and expired session paths.
- Store price/product IDs and keys in env (test keys in .env.example, names only).
- Next.js App Router, TypeScript. Tell me which Stripe dashboard settings and env vars I must set to test locally.

Build a listings/directory app (like [a rentals or jobs board]), full-stack.

Product surface:
- /listings: a results grid with a filter sidebar (category, price range, location, [remote toggle]) and keyword search.
- Listing detail page with a gallery and a contact/apply action.
- "Post a listing" form behind auth.

Used by [someone searching] to narrow options fast, and [a poster] to get seen.

Constraints:
- Filters and search read from and write to the URL query string so results are shareable and refresh-safe.
- All filtering happens in the database query with the right indexes — never filter in memory.
- [Listing] table with the filterable columns; only active listings appear.
- Next.js App Router, Tailwind, shadcn/ui, TypeScript. Loading and empty states. Responsive.

Import this GitHub repo and add a feature — work on a new branch, don't touch main.

Repo: [github.com/me/my-app]. Stack in the repo: Next.js App Router, TypeScript, Tailwind, shadcn/ui, [Prisma + Postgres].

Feature to add: [a comments system on the /posts/[id] page] — a threaded comment list, a "post comment" form (auth required), and edit/delete for your own comments.

Constraints:
- Match the repo's existing folder structure, naming, and data-access patterns — read them first and follow them.
- Add the [Comment] table and migration; reads/writes go through the existing data layer, not new ad-hoc queries.
- Scope edit/delete to the comment's author on the server.
- Open a pull request with a clear description of what changed. Don't reformat unrelated files.

First, summarize how the repo is structured and where you'll add each piece, then build.

This app currently uses mock data in the frontend. Wire it to a real database, end to end.

Current state: [a task board] with hardcoded arrays in the components.

Do this:
- Design tables for the entities the mock data implies ([Board, Column, Card]) and provision a [Supabase Postgres] connection.
- Generate the schema and a migration; seed it with the current mock data so nothing looks empty.
- Replace every hardcoded array with reads from server components / server actions. Add create, update, delete, and reorder as server actions.
- Add loading and error states where data now loads async; revalidate after writes.
- Remove the now-unused mock modules.

Only change the data seams and the components that show loading/error — don't restyle the UI. Keep Next.js App Router + TypeScript.

Build this app in ordered steps — queue these and work through them one at a time, showing me each before the next.

App: [a habit tracker] on Next.js App Router, Tailwind, shadcn/ui, TypeScript, Supabase.

1. Provision the database and create tables: [Habit] (name, cadence, color) and [Checkin] (habit_id, date). Seed sample data.
2. Build the /habits list page reading real habits, with an "Add habit" dialog (server action + Zod).
3. Build the habit detail page with a monthly heatmap of check-ins.
4. Add the "check in for today" toggle as a server action with optimistic UI; revalidate.
5. Add a dashboard with current streaks computed in SQL.

Do NOT skip ahead. Keep design tokens consistent: primary [#059669], radius [0.5rem]. After each step, list what's done and what's next.

The app is ready to ship. Get it into GitHub and deployed to Vercel.

Do this:
- Create a new branch [ship/v1], commit the current state with a clear message, and open a pull request summarizing the app: features, tables, and routes.
- Produce a deploy checklist for Vercel: the build command, the start command, and the full list of environment variables the deployment needs (from .env.example) with a one-line note on where each value comes from.
- Confirm the database connection string and all provider keys are read from env, never hardcoded — flag anything that isn't.
- Add a /api/health route that returns { ok: true } for a post-deploy check.

Then walk me through the exact steps to click "Deploy" on Vercel and set the env vars there. Don't include any real secret values in the repo or the PR.