Skip to content

Commit e7c445a

Browse files
ankur-archclaude
andauthored
Docs: one recommended getting-started path for the Prisma stack, for humans and agents (#8106)
* Revamp getting-started: one recommended Prisma stack path with human and agent flows The docs landing now leads with a single integrated journey (scaffold with Prisma Next, create or connect Prisma Postgres, deploy on Prisma Compute) instead of three parallel product commands. Prisma 7 stays one click away as the clearly labeled GA path. - /docs and /next: focused landing pages with quick setup, guided setup, copyable agent prompts, a framework logo grid, progressive-disclosure accordions for alternate paths, and a Browse-the-docs section. Sidebar is visually hidden on these two pages via a new hideSidebar frontmatter flag (pages stay in nav, search, sitemap, and llms.txt). - Agent prompts for every flow: new app, existing project, external Postgres, Prisma 7 full stack, and ORM-/Postgres-/Compute-only, all verified against npm dist-tags and live runs. - Framework guides (Next.js, Hono, TanStack Start, NestJS, Astro, Nuxt, SvelteKit, Elysia, Bun, Deno) validated end to end against live Prisma Postgres and extended with agent prompts plus Compute deploy legs where supported; 7 real deploys verified. Documented real traps: templates still emit the unqualified db.orm.User form, Next.js needs output standalone, TanStack needs nitro, Astro needs the node adapter and HOST=0.0.0.0. - New TechIcon MDX component and local framework logos (hono, nestjs, bun, tanstack copied from apps/site) with dark-mode handling. - orm/postgres/compute/orm-next index pages gain stack-continuation blocks and flow-specific prompts; getting-started nav reordered with Prisma Next first and Prisma 7 labeled; orphaned next/prisma-postgres pages wired into the sidebar. Validated: types:check, lint:links, lint:agent-ready, lint:images, lint:spellcheck all green; audit:redirects clean; desktop/mobile and light/dark screenshots checked; .md endpoints verified for agent parity. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com> * Getting started: visual landing components, click-to-copy prompts, red-teamed agent prompts Compresses the getting-started landing from five scroll-screens to two using Supabase-style visual components while keeping every word crawlable and in the .md/llms agent output. - New components (src/components/getting-started.tsx): HeroGrid + StackSteps (numbered product steps with ORM/Postgres/Compute icons), GetStartedTabs (CLI / AI Prompt tab card with copy, Show more truncation), AgentPrompt (collapsed click-to-copy prompt rows with guide links), SectionRow (two-column Supabase-style sections), IconGrid/IconLink (compact logo links). Prompts are authored as fenced children, so SEO crawlers see the text and llm-markdown emits it; llm-markdown.ts gains converters for all new components (fidelity snapshots pass). - Landing rewritten around the components; /next gets the icon grid and a collapsed prompt; all product pages and the 10 framework guides swap raw prompt fences for AgentPrompt rows. Deno logo added; full:true on /. - All 20 agent prompts red-teamed by an adversarial agent role-playing a literal coding agent, and every finding applied: non-interactive Prisma 7 scaffold with --no-deploy, auth guards before browser-opening steps, template-aware deploy requirements (standalone/nitro/astro-adapter/ --framework bun, svelte excluded), contract:emit before migration plan, migrate --yes, stop-and-ask rules for unresolved placeholders and missing connection strings, driver-adapter step in the Prisma 7 ORM prompt, create-db claim-URL surfacing, curl-based verification, bounded log reads, and the Compute deploy page's agent notes moved inside the copyable block. Validated: types:check, lint:links, lint:agent-ready, lint:images, lint:spellcheck, test:llm-markdown all green; .md output of the landing verified clean of JSX residue; desktop/mobile/dark screenshots reviewed. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com> * Getting started: hero with stack visual, no-flash sidebar hiding, layout polish Addresses review feedback on the redesigned landing: - Sidebar no longer flashes on load: page.tsx server-renders a scoped style that collapses the sidebar column and hides the desktop sidebar before hydration. Desktop-only, so the mobile drawer behind the hamburger keeps working (it was previously dead on hidden-sidebar pages). - New hero: left pitch with Recommended badge and two CTA buttons (quickstart, deploy), right StackDiagram visual showing Compute over Prisma Next over Prisma Postgres with connectors and a type-safe caption. Every layer links straight into its getting-started flow, so clicking "Prisma Postgres" lands on the quickstart, not a product overview. - The AI Prompt / CLI card is now full width below the hero, defaults to the AI Prompt tab, and its CLI tab carries the full command sequence (scaffold through deploy), replacing the removed "Run it, then ship it" section that duplicated commands and left dead space. - Consistency and readability pass: section left-column text enlarged, 4/8 column ratio, tighter AgentPrompt rows with ghost view toggle, consistent vertical rhythm, lucide connector icon. - llm-markdown converters updated (HeroPitch, StackDiagram/StackLayer, template-literal cli extraction, indent cleanup) so the .md output keeps the pitch, CTAs, product layers, CLI commands, and prompts; fidelity snapshots pass. - Verified nothing was removed from the old structure: git diff shows no deleted pages and the nav diff is reorder plus previously-orphaned next/prisma-postgres pages added. Validated: types:check, lint:links, lint:agent-ready, lint:spellcheck, test:llm-markdown green; SSR HTML contains the sidebar-hiding style; screenshots at 1440/1024/390 and dark mode reviewed. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com> * Getting started: full-stack tutorial, spacing pass, click-to-copy prompt, CLI steps - New /next/full-stack-tutorial page: one validated walkthrough from empty directory to live URL (scaffold with Prisma Next, Prisma Postgres provisioning, seed and query, Prisma Compute deploy), built from the live-verified hono run with real output blocks. Wired into the getting started nav, the /next cards, and the hero's primary CTA. - Spacing pass: sections py-16 with wider gaps, roomier prompt rows and hero, capped left-column line length, larger grid gaps. - Prompt card: the whole AI Prompt area is now click-to-copy (keyboard accessible, "Click to copy"/"Copied" affordance, nested code-block buttons hidden); CLI tab renders labeled step groups instead of a flat command dump. - Recommended chip restyled as a quiet uppercase label; removed the awkward "also has the agent prompt" orphan line under the Prisma 7 cards (folded into the card description). Validated: types:check, lint:links, lint:spellcheck, lint:agent-ready, test:llm-markdown green; zero page errors in the browser console; click-to- copy verified end to end via Playwright clipboard read. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com> * Getting started: collapsed hero prompt, path icons, softer callouts, Prisma 8 teasers - Hero AI prompt collapses behind a View prompt toggle; content stays in the DOM (sr-only) so crawlers and agents still see it, and wraps when expanded - Drop the db:seed failure admonition from the landing page (the prompt already carries the fix); give all docs admonitions roomier vertical rhythm - Icon tiles on the More setup paths rows; 5 min badge on the Prisma 7 quickstart card; backtick spans in section descriptions render as code - Assertive cross-linked copy for the Express and MongoDB pointers, with breathing room after the grids - Tease Prisma Next as soon Prisma 8 across hero, stack diagram, and Prisma 7 sections - llm-markdown: AgentPrompt attrs tolerate JSX icon props; IconLink badge surfaces in .md output Co-Authored-By: Claude Fable 5 <noreply@anthropic.com> * Getting started: single dominant golden path, collapsed alternate setups, CodeRabbit fixes Landing page hierarchy per product feedback (too many competing paths): - Hero pitch now defines Prisma before naming versions, keeps one primary CTA (tutorial); secondary CTA becomes "Prisma 7 docs" so existing users exit early without a competing journey. Stack layers link to product overviews instead of three different setup flows. - One-line bridge above the tabs card ties it to the tutorial (same journey, condensed); CLI deploy step discloses the free-account sign-in. - Framework picker reframed as a step in the same journey; SvelteKit/Deno local-only caveat stated up front instead of inside the prompt only. - Prisma 7 section moved above alternates; five alternate-path prompt rows now sit behind a native <details> disclosure (content stays in static HTML and .md output, keyboard accessible). - /next drops the duplicate "What you can try" card block; /next/getting-started drops the duplicate Prisma Postgres section; /getting-started leads with the recommended quickstart and folds deploy into its own section. - Fill empty Prerequisites on the Prisma 7 Prisma Postgres quickstart. CodeRabbit findings: - Template-to-guide slug mapping in the deploy step of the hero prompt (next/nest/svelte no longer produce dead .md URLs). - Framework guide prompts run the dev server in the background, wait for readiness, and stop it after verification. - TanStack Start guide: garbled npm fence replaced with `npm install nitro`. - llm-markdown: fenced code is protected before all component transforms (prefix-aware restore replays dedent/blockquote shifts on fence lines), and GetStartedTabs parses via the brace-aware component parser so `>` inside the cli template literal cannot truncate the match. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com> * Getting started: lucide icons everywhere, admonition title fix, mobile wrap for prompts - Replace every Font Awesome icon in the getting-started components with lucide equivalents: fa-sparkles is not in the loaded FA set, which left the default AgentPrompt tile and the hero badge with empty boxes. The badge, tab icons, copy/check, chevrons, and arrows now render from lucide-react like the rest of the page's icons. - orm/index: move the "Prisma 7 Connection Requirements" heading out of the callout body into the :::note[...] title, so the icon aligns with the title line and the h3 no longer leaks into the TOC. - AgentPrompt expanded body wraps like the hero prompt ([&_pre]:w-full + pre-wrap) instead of a 2000px-wide horizontal scroll on mobile. - Verified at 390px: no horizontal overflow with the disclosure open and prompts expanded; header rows wrap cleanly. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com> * Getting started: validation-round fixes from live path testing - First deploy does not auto-create a project (PROJECT_SETUP_REQUIRED): agent prompts pass --create-project, prose now describes the picker - db.close() does not exist; the API is db.runtime().close() - Node floor is 24 (scaffold engines), not v20.19, across guides - bun/deno scaffold commands were missing --template minimal - Tutorial sample JSON gains the createdAt field the endpoint returns, plus PORT and CLAIM_URL notes - Stale template list on the compute deploy page; stale Post-model prompt suggestions; scaffold flag-order consistency - SEO: differentiate twin quickstart + v6 metas, product-focused ORM metaDescription, /next meta as hands-on hub, self-contained getting-started H1 Co-Authored-By: Claude Fable 5 <noreply@anthropic.com> * Getting started: eliminate expand/collapse layout shifts in the hero - GetStartedTabs: both tab panels share a fixed height with internal scrolling, so AI Prompt <-> CLI switching no longer shifts the page; the prompt is always visible (no View prompt toggle) with the click-to-copy affordance kept, and the caption is a static footer - AgentPrompt: expanded body is bounded (max-h + scroll) so View expands by a fixed amount instead of the full prompt height - getting-started: note that --env .env is per-deployment and point to project env vars for persistence (CodeRabbit follow-up) Co-Authored-By: Claude Fable 5 <noreply@anthropic.com> * Getting started: read persisted env vars from .env via --file project env add with a bare KEY reads the shell environment, not .env; --file .env imports the values the deploy step actually used. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com> * Getting started: open prompts in a modal instead of inline expansion The hero prompt tab shows a clipped preview with a fade into a View full prompt button; the full text opens in a native <dialog> overlay, so reading a prompt never reflows the page. AgentPrompt rows reuse the same modal for View. Prompt content stays mounted for crawlers, and both hero tabs keep equal heights. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com> * Getting started: calm the hero and fix the Open-with handoffs - StackDiagram layers are static tiles now, so the hero has one primary CTA; the pitch copy keeps the product links - The Prisma 7 docs action is a quiet text link instead of a second button - The AI prompt / CLI card collapses to a launcher row; the tabs open in a modal, with the prompt still mounted for crawlers and .md output - Open in T3 Chat passes search=true so its model can actually read the docs URL; Open in Claude notes the confirm step claude.ai adds to link-prefilled prompts; drop dead fetch helper and debug log Co-Authored-By: Claude Fable 5 <noreply@anthropic.com> * Getting started: open the alternate setups in a modal instead of <details> Expanding the native <details> block pushed the sections below it around. The new ModalRow keeps the collapsed paths as a one-line row and opens them in a dialog, so revealing them never shifts the layout. The content stays mounted inside the closed dialog, so the prompts remain in the server-rendered HTML for crawlers (verified against the raw response), and llm-markdown collapses ModalRow to a bold title plus body so the .md output stays clean. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com> --------- Co-authored-by: Claude Fable 5 <noreply@anthropic.com>
1 parent 324e21f commit e7c445a

38 files changed

Lines changed: 2271 additions & 299 deletions

File tree

Lines changed: 45 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -1,71 +1,78 @@
11
---
2-
title: Choose a setup path
3-
description: Choose the fastest path to start using Prisma ORM, Prisma Postgres, or Prisma Compute in a new or existing TypeScript project.
2+
title: Prisma 7 setup paths
3+
description: Choose the fastest path to start using Prisma ORM 7, Prisma Postgres, or Prisma Compute in a new or existing TypeScript project.
44
url: /getting-started
5-
metaTitle: Prisma getting started
6-
metaDescription: Choose the fastest path to start using Prisma ORM, Prisma Postgres, or Prisma Compute in a new or existing TypeScript project.
5+
metaTitle: Prisma 7 getting started
6+
metaDescription: Choose the fastest Prisma 7 setup path. Quickstarts and existing-project guides for Prisma ORM 7, Prisma Postgres, and Prisma Compute, plus an agent prompt.
77
---
88

9-
Prisma gives you a few starting points depending on what you want to do first: deploy an app, create a database, use Prisma ORM locally, or add Prisma to an existing project.
9+
Prisma 7 is the current generally available release of Prisma ORM, and `npx prisma@latest init` installs it. This page collects the Prisma 7 starting points: start a new project, add Prisma to an existing one, then deploy.
1010

11-
## Choose your path
11+
:::note
1212

13-
### Deploy a full-stack app with a database
13+
Starting a new project? [Prisma Next](/next) is the recommended path for new apps. It is the next major version of Prisma ORM (soon Prisma 8), available now in Early Access. The [getting started page](/) covers it.
1414

15-
Use this path if you want to deploy a TypeScript app with Prisma Compute and run it alongside Prisma Postgres.
15+
:::
1616

17-
- [Deploy your first app](/prisma-compute/deploy) on [Prisma Compute](/compute), currently in Public Beta, to run it next to your Prisma Postgres database
17+
## Start a new project
1818

19-
### Start a new project
19+
The recommended path is the [Quickstart with Prisma Postgres](/prisma-orm/quickstart/prisma-postgres): it provisions a managed PostgreSQL database for you and gets you from install to first query in about five minutes.
2020

21-
Use this path if you are creating a new app and want to set up Prisma from the beginning.
21+
Working with a specific database instead?
2222

23-
- [Quickstart with Prisma Postgres](/prisma-orm/quickstart/prisma-postgres) for the fastest end-to-end path with a managed PostgreSQL database
24-
- [Quickstart with PostgreSQL](/prisma-orm/quickstart/postgresql) if you want to work with PostgreSQL
23+
- [Quickstart with PostgreSQL](/prisma-orm/quickstart/postgresql)
2524
- [Quickstart with SQLite](/prisma-orm/quickstart/sqlite) for a lightweight local setup
26-
- [Quickstart with MySQL](/prisma-orm/quickstart/mysql) if your application uses MySQL
27-
- [Quickstart with MongoDB](/prisma-orm/quickstart/mongodb) if your application uses MongoDB
25+
- [Quickstart with MySQL](/prisma-orm/quickstart/mysql)
26+
- [Quickstart with MongoDB](/prisma-orm/quickstart/mongodb)
2827

29-
### Add Prisma to an existing project
28+
## Add Prisma to an existing project
3029

31-
Use this path if you already have an application or database and want to add Prisma ORM.
30+
Use these guides if you already have an application or database and want to add Prisma ORM:
3231

3332
- [Add Prisma ORM to an existing PostgreSQL project](/prisma-orm/add-to-existing-project/postgresql)
3433
- [Add Prisma ORM to an existing MySQL project](/prisma-orm/add-to-existing-project/mysql)
3534
- [Add Prisma ORM to an existing SQLite project](/prisma-orm/add-to-existing-project/sqlite)
3635
- [Add Prisma ORM to an existing MongoDB project](/prisma-orm/add-to-existing-project/mongodb)
3736
- [Add Prisma ORM to an existing Prisma Postgres project](/prisma-orm/add-to-existing-project/prisma-postgres)
3837

39-
## What you will do
38+
## Deploy to Prisma Compute
4039

41-
Most Prisma ORM and Prisma Postgres guides follow the same basic flow:
40+
Once your app runs locally, [Prisma Compute](/compute) (currently in Public Beta) runs it next to your Prisma Postgres database:
4241

43-
1. Define a database connection and data model in your [Prisma schema](/orm/prisma-schema/overview).
44-
2. Set up your database, either with [Prisma Postgres](/postgres) or another supported database.
45-
3. Install Prisma CLI and [Prisma Client](/orm/prisma-client).
46-
4. Run `prisma generate` to create a type-safe client for your schema.
47-
5. Create or introspect your database.
48-
6. Start sending queries from your application.
42+
1. Sign in with `npx @prisma/cli@latest auth login`.
43+
2. Run `npx @prisma/cli@latest app deploy` from your app directory to get a live URL, adding `--env .env` so environment variables like `DATABASE_URL` reach the deployment.
44+
3. `--env .env` applies to that one deployment. Persist variables for future deploys with `npx @prisma/cli@latest project env add --file .env --role production`; see [environment variables](/compute/environment-variables).
45+
4. Keep deploying from the CLI, or [connect GitHub](/compute/github) to deploy on push.
4946

50-
Then you can deploy your app to [Prisma Compute](/compute). The flow is:
47+
The [deploy guide](/prisma-compute/deploy) covers build settings, frameworks, and troubleshooting.
5148

52-
1. Sign in with `npx @prisma/cli@latest auth login`.
53-
2. Run `npx @prisma/cli@latest app deploy` from your app directory to get a live URL.
54-
3. Connect your app to [Prisma Postgres](/postgres) or another database with [environment variables](/compute/environment-variables).
55-
4. Redeploy to apply the environment variables.
56-
5. Keep deploying from the CLI, or [connect GitHub](/compute/github) to deploy on push.
49+
## Use with your agent
50+
51+
To hand the full Prisma 7 stack to your coding agent, copy this prompt. The commands below install Prisma 7, not Prisma Next:
52+
53+
<AgentPrompt>
54+
55+
```text
56+
Set up the Prisma 7 stack: Prisma ORM 7, Prisma Postgres, and Prisma Compute.
57+
58+
If I have not told you which framework template to use, stop and ask.
59+
60+
1. Scaffold a new app non-interactively: `npx create-prisma@latest --name my-app --template [next|hono|nuxt|astro|nest|svelte|tanstack-start|elysia|turborepo] --provider postgresql --no-deploy`. Or add Prisma 7 to an existing app with `npx prisma@latest init --db`, which provisions a Prisma Postgres database; before that, check `npx @prisma/cli@latest auth whoami` and stop and ask me to run `auth login` if I am not signed in, because provisioning can open a browser.
61+
2. From the project directory, define a small schema in `prisma/schema.prisma`, then run `npx prisma migrate dev --name init` and `npx prisma generate`. If migrate dev asks to reset the database, stop and ask me first.
62+
3. Update the seed and app code to query the schema, and verify locally with the dev script.
63+
4. Deploy with Prisma Compute: check `npx @prisma/cli@latest auth whoami` first. If I am not signed in, stop and ask me to run `npx @prisma/cli@latest auth login`, because that step opens a browser. Then run `npx @prisma/cli@latest app deploy --create-project my-app --env .env` so DATABASE_URL reaches the deployment, and verify the deployed URL with curl.
64+
65+
Current docs: https://www.prisma.io/docs/getting-started.md and https://www.prisma.io/docs/llms.txt.
66+
```
67+
68+
</AgentPrompt>
5769

5870
## Next steps
5971

6072
After setup, these pages are usually the next ones people need:
6173

6274
- [Prisma Client overview](/orm/prisma-client)
63-
- [Generating Prisma Client](/orm/prisma-client/setup-and-configuration/generating-prisma-client)
6475
- [Prisma Migrate getting started](/orm/prisma-migrate/getting-started)
6576
- [Prisma schema overview](/orm/prisma-schema/overview)
66-
67-
## If you want the fastest path
68-
69-
- [Quickstart with Prisma Postgres](/prisma-orm/quickstart/prisma-postgres) if you want Prisma to provision the database layer for you
70-
- [Open Prisma Studio](/studio/getting-started) if you want to inspect and edit data visually once your app is running
71-
- [Review pricing](https://www.prisma.io/pricing) if you're evaluating Prisma Postgres or other paid workflows for a team
77+
- [Open Prisma Studio](/studio/getting-started) to inspect and edit data visually
78+
- [Review pricing](https://www.prisma.io/pricing) if you're evaluating Prisma Postgres for a team

0 commit comments

Comments
 (0)