feat: DC-3593 ai landing page

content/900-ai/index.mdx

@@ -0,0 +1,185 @@
+---
+title: 'Build faster with Prisma + AI'
+metaTitle: 'AI'
+metaDescription: 'AI'
+staticLink: true
+---
+
+import {
+  Grid,
+  LinkCard,
+} from '@site/src/components/GettingStarted';
+
+import {
+  CardHeading,
+  HomepageCard,
+} from '@site/src/components/ProductBlock';
+
+
+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.
+
+### Get started
+
+Run the following command to bootstrap your database with a prompt:
+
+```bash
+npx prisma init --prompt "Create a habit tracker application"
+```
+
+### AI Coding Tools
+
+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.
+
+<Grid>
+  <LinkCard
+    icon="fa-brands fa-cursor"
+    title="Cursor"
+    desc="Set up Prisma ORM from scratch with a SQLite database in 5 minutes."
+    link="/orm/more/ai-tools/cursor"
+  />
+  <LinkCard
+    icon="fa-brands fa-windsurf"
+    title="Windsurf"
+    desc="Explore our ready-to-run examples with your favorite frameworks and libraries."
+    link="/orm/more/ai-tools/windsurf"
+  />
+</Grid>
+<Grid>
+  <LinkCard
+    icon="fa-brands fa-openai"
+    title="Github Copilot"
+    desc="Set up Prisma ORM from scratch with a SQLite database in 5 minutes."
+    link="/orm/more/ai-tools/github-copilot"
+  />
+  <LinkCard
+    icon="fa-brands fa-tabnine"
+    title="Tabnine"
+    desc="Explore our ready-to-run examples with your favorite frameworks and libraries."
+    link="/orm/more/ai-tools/tabnine"
+  />
+</Grid>
+
+### MCP server
+
+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.
+
+<TabbedContent code>
+<TabItem value="Integrate in AI tool (JSON)">
+```json
+{
+  "mcpServers": {
+    "Prisma-Remote": {
+      "command": "npx",
+      "args": ["-y", "mcp-remote", "https://mcp.prisma.io/mcp"]
+    }
+  }
+}
+```
+</TabItem>
+<TabItem value="Start MCP Server (CLI)">
+```bash
+npx -y mcp-remote https://mcp.prisma.io/mcp
+```
+</TabItem>
+</TabbedContent>
+
+<Grid>
+<HomepageCard
+  light
+  heading={
+    <CardHeading title="Capabilities<br>and tools" icon="fa-regular fa-screwdriver-wrench" light />
+  }
+  href={{
+    text: "Read now",
+    url: "https://www.prisma.io/docs/postgres/integrations/mcp-server#tools"
+  }}
+  body={`Discover all the tools that make up the capabilities of the Prisma MCP server.`}
+/>
+<HomepageCard
+  light
+  heading={
+    <CardHeading title="Integrating<br>in AI tools" icon="fa-regular fa-gear" light />
+  }
+  href={{
+    text: "Read now",
+    url: "https://www.prisma.io/docs/postgres/integrations/mcp-server#integrating-in-ai-tools"
+  }}
+  body={`Learn how to integrate Prisma’s MCP server in your favorite AI tool, such as Cursor, Claude, Warp, and more.`}
+/>
+<HomepageCard
+  light
+  heading={
+    <CardHeading title="How we built it" icon="fa-regular fa-lightbulb" light />
+  }
+  href={{
+    text: "Read now",
+    url: "https://www.prisma.io/blog/about-mcp-servers-and-how-we-built-one-for-prisma"
+  }}
+  body={`Read this technical deep dive about the MCP protocol and how we built the Prisma MCP server.`}
+/>
+</Grid>
+
+### Resources
+
+<Grid>
+<HomepageCard
+  light
+  heading={
+    <CardHeading title="Vibe Coding with Limits — How to Build Apps in the Age of AI" icon="fa-regular fa-robot" light />
+  }
+  href={{
+    text: "Read now",
+    url: "https://www.prisma.io/blog/vibe-coding-with-limits-how-to-build-apps-in-the-age-of-ai"
+  }}
+  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.`}
+/>
+<HomepageCard
+  light
+  heading={
+    <CardHeading title="Vibe Coding an E-commerce App with Prisma MCP and Next.js" icon="fa-regular fa-bolt" light />
+  }
+  href={{
+    text: "Read now",
+    url: "https://www.prisma.io/blog/vibe-coding-with-prisma-mcp-and-nextjs"
+  }}
+  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.`}
+/>
+<HomepageCard
+  light
+  heading={
+    <CardHeading title="Integrating the Vercel AI SDK in a Next.js application" icon="fa-regular fa-message-dots" light />
+  }
+  href={{
+    text: "Read now",
+    url: "https://www.prisma.io/docs/guides/ai-sdk-nextjs"
+  }}
+  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.`}
+/>
+</Grid>
+
+### Integrations
+
+<Grid>
+<HomepageCard
+  light
+  heading={
+    <CardHeading title="Automate your workflows with Prisma Postgres and 2,800+ apps" icon="fa-regular fa-wand-magic-sparkles" light />
+  }
+  href={{
+    text: "Get started",
+    url: "https://pipedream.com/apps/prisma-management-api"
+  }}
+  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.`}
+/>
+<HomepageCard
+  light
+  heading={
+    <CardHeading title="Prompt your application with Firebase Studio & Prisma Postgres" icon="fa-regular fa-wand-magic-sparkles" light />
+  }
+  href={{
+    text: "Get started",
+    url: "https://www.prisma.io/docs/postgres/integrations/idx"
+  }}
+  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.`}
+/>
+</Grid>

docusaurus.config.ts

@@ -315,6 +315,14 @@ const config: Config = {
               sub: "Make your database global",
               icon: "fa-regular fa-bolt"
             },
+            {
+              type: "docSidebar",
+              className: "teal",
+              sidebarId: "aiSidebar",
+              label: "Prisma + AI",
+              sub: "Build faster with Prisma + AI",
+              icon: "fa-regular fa-robot"
+            },
           ],
         },
         {

sidebars.ts

@@ -511,6 +511,98 @@ const sidebars: SidebarsConfig = {
       ],
     },
   ],
+  aiSidebar: [
+    {
+      type: "category",
+      label: "Prisma + AI",
+      collapsed: false,
+      collapsible: false,
+      link: {
+        type: "doc",
+        id: "ai/index",
+      },
+      className: "firstTitle",
+      items: [
+        {
+          type: "category",
+          label: "Coding Tools",
+          collapsed: false,
+          collapsible: false,
+          items: [
+            "orm/more/ai-tools/cursor",
+            "orm/more/ai-tools/windsurf",
+            "orm/more/ai-tools/github-copilot",
+            "orm/more/ai-tools/tabnine",
+          ],
+        },
+        {
+          type: "category",
+          label: "MCP Server",
+          collapsed: false,
+          collapsible: false,
+          items: [
+            {
+              type: "link",
+              label: "Capabilities and Tools",
+              href: "/postgres/integrations/mcp-server#tools"
+            },
+            {
+              type: "link",
+              label: "Integrating in AI tools",
+              href: "/postgres/integrations/mcp-server#integrating-in-ai-tools"
+            },
+            {
+              type: "link",
+              label: "How we built it",
+              href: "https://www.prisma.io/blog/about-mcp-servers-and-how-we-built-one-for-prisma"
+            },
+          ],
+        },
+        {
+          type: "category",
+          label: "Resources",
+          collapsed: false,
+          collapsible: false,
+          items: [
+            {
+              type: "link",
+              label: "How to Build Apps in the Age of AI",
+              href: "https://www.prisma.io/blog/vibe-coding-with-limits-how-to-build-apps-in-the-age-of-ai"
+            },
+            {
+              type: "link",
+              label: "Vibe Coding an E-commerce App with Prisma MCP and Next.js",
+              href: "https://www.prisma.io/blog/vibe-coding-with-prisma-mcp-and-nextjs"
+            },
+            {
+              type: "link",
+              label: "Integrating the Vercel AI SDK in a Next.js application",
+              href: "/guides/ai-sdk-nextjs"
+            },
+          ],
+        },
+        {
+          type: "category",
+          label: "Integrations",
+          collapsed: false,
+          collapsible: false,
+          items: [
+            {
+              type: "link",
+              label: "Automate your workflows with Prisma Postgres and 2,800+ apps",
+              href: "https://pipedream.com/apps/prisma-management-api"
+            },
+            {
+              type: "link",
+              label: "Prompt your application with Firebase Studio & Prisma Postgres",
+              href: "/postgres/integrations/idx"
+            },
+          ],
+        },
+        // { type: "autogenerated", dirName: "900-ai" }
+      ]
+    },
+  ]
 };
 
 export default sidebars;