Skip to content

Commit bff98a8

Browse files
carlagncoderabbitai[bot]
carlagn
and
coderabbitai[bot]
authored
feat: DC-3593 ai landing page (#7091)
* Add new ai page skeleton * Update content * Update AI page internal components * Update per coderabbit * Update font sizes * Update ai sidebar + capitalizations * Update autogenerated * Update src/components/ProductBlock/index.tsx Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com> * update ai sidebar * Add external arrow --------- Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>
1 parent 64af2d0 commit bff98a8

File tree

16 files changed

+622
-209
lines changed

16 files changed

+622
-209
lines changed

‎content/900-ai/index.mdx‎

Lines changed: 185 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,185 @@
1+
---
2+
title: 'Build faster with Prisma + AI'
3+
metaTitle: 'AI'
4+
metaDescription: 'AI'
5+
staticLink: true
6+
---
7+
8+
import {
9+
Grid,
10+
LinkCard,
11+
} from '@site/src/components/GettingStarted';
12+
13+
import {
14+
CardHeading,
15+
HomepageCard,
16+
} from '@site/src/components/ProductBlock';
17+
18+
19+
In the era of AI, where code is increasingly written by agents, ensuring clarity, type safety, and reliable infrastructure is essential. With 5+ years of leadership in the TypeScript ecosystem, Prisma ORM and Prisma Postgres provide the proven foundation for AI-assisted development.
20+
21+
### Get started
22+
23+
Run the following command to bootstrap your database with a prompt:
24+
25+
```bash
26+
npx prisma init --prompt "Create a habit tracker application"
27+
```
28+
29+
### AI Coding Tools
30+
31+
Prisma ORM and Prisma Postgres integrate seamlessly with your AI coding tools. Check out our documentation with tips and tricks for working with Prisma in various AI editors.
32+
33+
<Grid>
34+
<LinkCard
35+
icon="fa-brands fa-cursor"
36+
title="Cursor"
37+
desc="Set up Prisma ORM from scratch with a SQLite database in 5 minutes."
38+
link="/orm/more/ai-tools/cursor"
39+
/>
40+
<LinkCard
41+
icon="fa-brands fa-windsurf"
42+
title="Windsurf"
43+
desc="Explore our ready-to-run examples with your favorite frameworks and libraries."
44+
link="/orm/more/ai-tools/windsurf"
45+
/>
46+
</Grid>
47+
<Grid>
48+
<LinkCard
49+
icon="fa-brands fa-openai"
50+
title="Github Copilot"
51+
desc="Set up Prisma ORM from scratch with a SQLite database in 5 minutes."
52+
link="/orm/more/ai-tools/github-copilot"
53+
/>
54+
<LinkCard
55+
icon="fa-brands fa-tabnine"
56+
title="Tabnine"
57+
desc="Explore our ready-to-run examples with your favorite frameworks and libraries."
58+
link="/orm/more/ai-tools/tabnine"
59+
/>
60+
</Grid>
61+
62+
### MCP server
63+
64+
With Prisma’s MCP server, your AI tool can take database actions on your behalf: Provisioning a new Prisma Postgres instance, creating database backups and executing SQL queries are just a few of its capabilities.
65+
66+
<TabbedContent code>
67+
<TabItem value="Integrate in AI tool (JSON)">
68+
```json
69+
{
70+
"mcpServers": {
71+
"Prisma-Remote": {
72+
"command": "npx",
73+
"args": ["-y", "mcp-remote", "https://mcp.prisma.io/mcp"]
74+
}
75+
}
76+
}
77+
```
78+
</TabItem>
79+
<TabItem value="Start MCP Server (CLI)">
80+
```bash
81+
npx -y mcp-remote https://mcp.prisma.io/mcp
82+
```
83+
</TabItem>
84+
</TabbedContent>
85+
86+
<Grid>
87+
<HomepageCard
88+
light
89+
heading={
90+
<CardHeading title="Capabilities<br>and tools" icon="fa-regular fa-screwdriver-wrench" light />
91+
}
92+
href={{
93+
text: "Read now",
94+
url: "https://www.prisma.io/docs/postgres/integrations/mcp-server#tools"
95+
}}
96+
body={`Discover all the tools that make up the capabilities of the Prisma MCP server.`}
97+
/>
98+
<HomepageCard
99+
light
100+
heading={
101+
<CardHeading title="Integrating<br>in AI tools" icon="fa-regular fa-gear" light />
102+
}
103+
href={{
104+
text: "Read now",
105+
url: "https://www.prisma.io/docs/postgres/integrations/mcp-server#integrating-in-ai-tools"
106+
}}
107+
body={`Learn how to integrate Prisma’s MCP server in your favorite AI tool, such as Cursor, Claude, Warp, and more.`}
108+
/>
109+
<HomepageCard
110+
light
111+
heading={
112+
<CardHeading title="How we built it" icon="fa-regular fa-lightbulb" light />
113+
}
114+
href={{
115+
text: "Read now",
116+
url: "https://www.prisma.io/blog/about-mcp-servers-and-how-we-built-one-for-prisma"
117+
}}
118+
body={`Read this technical deep dive about the MCP protocol and how we built the Prisma MCP server.`}
119+
/>
120+
</Grid>
121+
122+
### Resources
123+
124+
<Grid>
125+
<HomepageCard
126+
light
127+
heading={
128+
<CardHeading title="Vibe Coding with Limits — How to Build Apps in the Age of AI" icon="fa-regular fa-robot" light />
129+
}
130+
href={{
131+
text: "Read now",
132+
url: "https://www.prisma.io/blog/vibe-coding-with-limits-how-to-build-apps-in-the-age-of-ai"
133+
}}
134+
body={`Software development is rapidly changing with AI coding tools. This article shows how to harness productivity gains while staying in control — and why understanding your code still matters.`}
135+
/>
136+
<HomepageCard
137+
light
138+
heading={
139+
<CardHeading title="Vibe Coding an E-commerce App with Prisma MCP and Next.js" icon="fa-regular fa-bolt" light />
140+
}
141+
href={{
142+
text: "Read now",
143+
url: "https://www.prisma.io/blog/vibe-coding-with-prisma-mcp-and-nextjs"
144+
}}
145+
body={`Learn how we used the Prisma MCP server to build a Next.js e-commerce app with AI. We also share tips for effective prompting and avoiding common pitfalls.`}
146+
/>
147+
<HomepageCard
148+
light
149+
heading={
150+
<CardHeading title="Integrating the Vercel AI SDK in a Next.js application" icon="fa-regular fa-message-dots" light />
151+
}
152+
href={{
153+
text: "Read now",
154+
url: "https://www.prisma.io/docs/guides/ai-sdk-nextjs"
155+
}}
156+
body={`Learn how to build a chat application using the Vercel AI SDK with Next.js and Prisma ORM to store chat sessions and messages in a Prisma Postgres database.`}
157+
/>
158+
</Grid>
159+
160+
### Integrations
161+
162+
<Grid>
163+
<HomepageCard
164+
light
165+
heading={
166+
<CardHeading title="Automate your workflows with Prisma Postgres and 2,800+ apps" icon="fa-regular fa-wand-magic-sparkles" light />
167+
}
168+
href={{
169+
text: "Get started",
170+
url: "https://pipedream.com/apps/prisma-management-api"
171+
}}
172+
body={`Connect Prisma Postgres to other apps to create powerful automations and data workflows, such as automatically spinning up a new database when a customer signs up in Stripe or connecting your database with Slack, Notion, Airtable, or any other app in the Pipedream ecosystem.`}
173+
/>
174+
<HomepageCard
175+
light
176+
heading={
177+
<CardHeading title="Prompt your application with Firebase Studio & Prisma Postgres" icon="fa-regular fa-wand-magic-sparkles" light />
178+
}
179+
href={{
180+
text: "Get started",
181+
url: "https://www.prisma.io/docs/postgres/integrations/idx"
182+
}}
183+
body={`Google's <a target="_blank" rel="noopeneer noreferrer" href="https://studio.firebase.google.com/">Firebase Studio</a> is a fully-fledged online IDE with a native AI integration. Prompt and build apps directly in your browser and deploy them by connecting with a powerful Prisma Postgres database in just a few clicks.`}
184+
/>
185+
</Grid>

‎docusaurus.config.ts‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -315,6 +315,14 @@ const config: Config = {
315315
sub: "Make your database global",
316316
icon: "fa-regular fa-bolt"
317317
},
318+
{
319+
type: "docSidebar",
320+
className: "teal",
321+
sidebarId: "aiSidebar",
322+
label: "Prisma + AI",
323+
sub: "Build faster with Prisma + AI",
324+
icon: "fa-regular fa-robot"
325+
},
318326
],
319327
},
320328
{

‎sidebars.ts‎

Lines changed: 92 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -511,6 +511,98 @@ const sidebars: SidebarsConfig = {
511511
],
512512
},
513513
],
514+
aiSidebar: [
515+
{
516+
type: "category",
517+
label: "Prisma + AI",
518+
collapsed: false,
519+
collapsible: false,
520+
link: {
521+
type: "doc",
522+
id: "ai/index",
523+
},
524+
className: "firstTitle",
525+
items: [
526+
{
527+
type: "category",
528+
label: "Coding Tools",
529+
collapsed: false,
530+
collapsible: false,
531+
items: [
532+
"orm/more/ai-tools/cursor",
533+
"orm/more/ai-tools/windsurf",
534+
"orm/more/ai-tools/github-copilot",
535+
"orm/more/ai-tools/tabnine",
536+
],
537+
},
538+
{
539+
type: "category",
540+
label: "MCP Server",
541+
collapsed: false,
542+
collapsible: false,
543+
items: [
544+
{
545+
type: "link",
546+
label: "Capabilities and Tools",
547+
href: "/postgres/integrations/mcp-server#tools"
548+
},
549+
{
550+
type: "link",
551+
label: "Integrating in AI tools",
552+
href: "/postgres/integrations/mcp-server#integrating-in-ai-tools"
553+
},
554+
{
555+
type: "link",
556+
label: "How we built it",
557+
href: "https://www.prisma.io/blog/about-mcp-servers-and-how-we-built-one-for-prisma"
558+
},
559+
],
560+
},
561+
{
562+
type: "category",
563+
label: "Resources",
564+
collapsed: false,
565+
collapsible: false,
566+
items: [
567+
{
568+
type: "link",
569+
label: "How to Build Apps in the Age of AI",
570+
href: "https://www.prisma.io/blog/vibe-coding-with-limits-how-to-build-apps-in-the-age-of-ai"
571+
},
572+
{
573+
type: "link",
574+
label: "Vibe Coding an E-commerce App with Prisma MCP and Next.js",
575+
href: "https://www.prisma.io/blog/vibe-coding-with-prisma-mcp-and-nextjs"
576+
},
577+
{
578+
type: "link",
579+
label: "Integrating the Vercel AI SDK in a Next.js application",
580+
href: "/guides/ai-sdk-nextjs"
581+
},
582+
],
583+
},
584+
{
585+
type: "category",
586+
label: "Integrations",
587+
collapsed: false,
588+
collapsible: false,
589+
items: [
590+
{
591+
type: "link",
592+
label: "Automate your workflows with Prisma Postgres and 2,800+ apps",
593+
href: "https://pipedream.com/apps/prisma-management-api"
594+
},
595+
{
596+
type: "link",
597+
label: "Prompt your application with Firebase Studio & Prisma Postgres",
598+
href: "/postgres/integrations/idx"
599+
},
600+
],
601+
},
602+
// { type: "autogenerated", dirName: "900-ai" }
603+
]
604+
},
605+
]
514606
};
515607

516608
export default sidebars;

0 commit comments

Comments
 (0)