React AI prompt generator
React is the most-requested frontend framework by AI builders, yet "build me a React app" gets you a
single 400-line App.jsx with everything in one component and state fetched in the render
body. This page builds the opposite: a mega-prompt tuned to React idioms — component tree, where state
lives, how data is fetched, which router — so Cursor, Bolt, v0 or Windsurf output a project a senior
React dev would actually merge.
What a good React build prompt must specify
A React prompt fails in the same five places every time. The tool does not know your component
boundaries, so it dumps everything into one file. It does not know where state should live, so it lifts
nothing and prop-drills everything. It does not know how you fetch, so it writes fetch in a
useEffect with no cleanup. Name these five things and the output changes shape entirely.
- Component tree. The actual hierarchy —
Layout > Sidebar + Main > ProductList > ProductCard— not "some components". This is the single highest-leverage instruction; it decides file layout and where props flow. - Props and state placement. Which state is local (
useStatein a leaf), which is lifted to a shared parent, which is global (context or a store). "Filters live in the URL, cart lives in a store, hover state is local" is a complete answer. - Routing. React Router v7 (data routers, loaders) vs TanStack Router (type-safe) vs file-based (if Next). Say which, and whether routes need auth guards or loaders.
- Data fetching. TanStack Query (server state, caching, retries) vs plain
fetchin effects vs a Server Component boundary. If you skip this the AI defaults to raw effects, which is the wrong default for anything with a list. - Styling approach. Tailwind vs CSS Modules vs styled-components vs shadcn/ui. This one line stops the AI from mixing three styling systems in one repo.
Vite vs Next.js vs CRA — and how the prompt adapts
The build tool is not a detail the AI can pick for you, because it changes the entire shape of the output: whether there is a server, how routing works, where data is fetched. Pick deliberately.
| Choice | Best for | What the prompt then specifies | Status 2026 |
|---|---|---|---|
| Vite + React | SPAs, dashboards, internal tools, anything client-rendered with its own API | React Router or TanStack Router, TanStack Query for data, a client entry, SPA deploy (static host + rewrites) | Default for new client apps |
| Next.js (App Router) | Content + SEO, marketing pages, apps needing SSR/RSC and a backend in the same repo | Server Components by default, route handlers, generateMetadata, server actions or route handlers for mutations |
Default for SEO/full-stack |
| Create React App | Legacy only | Migration path to Vite; do not start here | Deprecated Feb 2025 — the React team's own docs point new projects to a framework or Vite |
CRA was officially sunset by the React team in February 2025; create-react-app now prints a
deprecation notice. If an AI reaches for it, that is a tell your prompt did not pin the build tool.
React-specific pitfalls AI gets wrong
These are the recurring defects in AI-generated React. Each one has a one-line fix that belongs in the prompt so the tool avoids it on the first pass instead of you catching it in review.
- useEffect for everything, including derived stateThe AI syncs one state to another with an effect (
useEffect(() => setFullName(first + last))). That value should be computed during render, not stored. The React docs have an entire page titled "You Might Not Need an Effect" for exactly this. Prompt: "derive values during render; use effects only for external synchronization." - Array index as
keykey={i}on a reorderable or filterable list corrupts state and inputs on reorder. Prompt: "keys must be stable domain IDs, never the array index." - State colocation ignoredState declared at the top of a giant component and drilled six levels down. Prompt: "colocate state with the component that uses it; lift only when two siblings share it."
- Prop drilling instead of composition or contextThe same prop threaded through four intermediate components that do not use it. Prompt: "if a prop passes through 3+ layers untouched, use context or component composition (children) instead."
- Fetch in effect with no cleanup / race conditionsTwo fast navigations and the slower response overwrites the newer one. Prompt: "use TanStack Query for server state; if fetching in an effect, guard against races with an ignore flag or AbortController."
- Stale closures in event handlersA handler captures an old state value because a dependency is missing. Prompt: "prefer functional updates
setX(x => ...)and keep effect dependency arrays exhaustive."
Copy-paste example: a React mega-prompt
This is the shape of what the generator produces — trimmed to fit the page. It reads like a spec, not a wish. Paste it into any of the tools below and you get a coherent project instead of a scaffold.
# Build: Recipe manager (React SPA)
## Stack
- Vite + React 19 + TypeScript (strict)
- React Router v7 (data router, route loaders)
- TanStack Query for all server state
- Tailwind CSS + shadcn/ui for primitives
- Zod for form + API validation
## Component tree
- RootLayout (nav, toast host)
- RecipesPage
- FilterBar (filters -> URL search params)
- RecipeList
- RecipeCard (key = recipe.id)
- RecipeDetailPage (loader fetches by :id)
- NewRecipePage (RecipeForm)
## State placement
- Filters: URL search params (shareable, back-button works)
- Server data: TanStack Query, keyed ['recipes', filters]
- Form state: react-hook-form + zodResolver, local to RecipeForm
- Toasts: context provider at RootLayout
## Data
- REST at /api. GET /recipes?tag=&q= , GET/POST/PUT/DELETE /recipes/:id
- Mutations invalidate ['recipes'] on success; optimistic update on delete
## Rules
- Derive values in render; effects only for non-React sync
- Keys are recipe.id, never index
- No fetch in useEffect — use useQuery/useMutation
- Colocate state; lift only for shared siblings
## Done when
- Filtering updates the URL and survives refresh
- Deleting a recipe optimistically removes the card and rolls back on error
- Type-checks clean under strict modeNotice what is not in it: no "write clean code", no "you are a senior engineer". Every line removes an ambiguity the tool would otherwise fill with its generic default.
Which AI tools consume it best
| Tool | Fit for React | Note |
|---|---|---|
| Cursor | Best for existing repos | Paste the spec into Composer/Agent; it edits file-by-file and respects an existing component tree. Pair it with a .cursorrules that names the stack so it stops reaching for libraries you did not pick. |
| Bolt | Best for zero-to-preview | Runs Vite in-browser (WebContainers), so a Vite + React spec previews instantly. Great for prototypes; the spec is what pushes it past a template — see the Bolt prompt page. |
| v0 (Vercel) | Best for UI, biased to Next | Excellent React + Tailwind + shadcn components, but defaults everything to Next.js App Router. Feed it the design-system half of the spec; details on the v0 prompt page. |
| Windsurf | Best for multi-file agentic edits | Cascade applies the spec across the tree in one pass; drop the constraints into a .windsurfrules. See the Windsurf prompt page. |
Building for SEO or need a server in the same repo? The React choice is really a Next.js choice — the Next.js prompt generator specializes the same spec for the App Router, Server Components and the Metadata API.
Frequently asked questions
Should I use Vite or Next.js for an AI-generated React app?
Next.js if you need SEO, server-side rendering or a backend in the same repo; Vite if you are building a client-only app (a dashboard or internal tool behind a login) that already has its own API. The generator asks this first because it changes the whole spec: a Vite spec never mentions Server Components, a Next spec never wires React Router.
Can I still use Create React App in 2026?
You should not start a new project on it. The React team deprecated Create React App in February 2025 and now points new projects to a framework like Next.js or to Vite. If an AI tool reaches for CRA, it is a sign your prompt did not pin the build tool.
What is the single most important line in a React prompt?
The component tree. Stating the actual hierarchy decides file layout, where props flow and where state should live. It is the one instruction that most changes the shape of the output from one big component into a real project.
Why does AI-generated React overuse useEffect?
Because without guidance the model syncs one piece of state to another with an effect instead of deriving it during render. The React docs even have a page called "You Might Not Need an Effect" for this. Telling the prompt to derive values in render and use effects only for external synchronization fixes it on the first pass.
Which tool is best for React: Cursor, Bolt, v0 or Windsurf?
Cursor for editing an existing repo file-by-file; Bolt for zero-to-preview because it runs Vite in the browser; v0 for UI but it defaults everything to Next.js; Windsurf for agentic multi-file edits across the tree. The same spec works in all four — the choice is about your workflow, not the code quality.
Does this cost anything?
The guidance and template on this page are free. The full guided generator gives two free specifications with an account; unlimited is a paid plan. No AI credits are spent to read this page.
Turn "build me a React app" into a real spec
The generator asks the questions above — build tool, component tree, state placement, data fetching — and writes the mega-prompt for you. 2 free prompts with an account, no card.
Generate my React spec