Vibe Coding an E-commerce App with Prisma MCP and Next.js

With the release of the Prisma MCP server, we wanted to showcase its practical use in real-world scenarios. To demonstrate this, we set out to build an e-commerce application using Prisma ORM, Prisma Postgres, and Next.js. Instead of coding everything manually, we embraced "vibe coding," allowing an AI to implement features based on our prompts rapidly.

Here's the complete journey—including the thought process, implementation, and errors we encountered along the way.

Note: This was done using VS Code Copilot with Claude 3.5 Sonnet

AI prompting tips (Quick overview)

These prompting strategies helped us work faster without losing control of the architecture:

• Set the AI’s role clearly to get structured, spec-driven output.
• Mention your stack early to avoid mismatched tools or patterns.
• Focus each prompt on one feature to reduce confusion and errors.
• Use realistic seed data to surface layout or filtering bugs early.
• Treat errors as feedback—pasting them back often leads to quick fixes.
• Be clear about runtime boundaries to avoid issues like calling client hooks in server code.

Prompting AI to act like a software architect

We started by getting the AI into the right mindset. To ensure it followed our project conventions and made sound architectural choices, we asked it to take on the role of a software architect and follow a clear set of implementation guidelines.

Our Prompt:

You are a software architect. Your task is to provide clear, precise specifications for engineers to implement.

You will receive feature descriptions and tech stack. Only respond with structured technical specifications per feature, no code yet. Break things down logically, and limit each spec to ~200 words. Avoid future or theoretical ideas — only describe what's needed now.

Wait for features and tech stack to begin.

🧠 Tip: Define the AI’s role (e.g. “software architect”) at the start. This primes the model to output structured, implementation-focused responses instead of jumping straight to messy or generic code.

Follow-up Prompt:

Tech stack:

• Framework: Next.js 15 with App Router and TypeScript
• Styling: TailwindCSS
• Database ORM: Prisma ORM using Prisma MCP server to define schema and generate database
• UI Client/server distinction: Specify when a component must use "use client" or "use server"
• Images: Use Next.js Image component—set next.config.js domains when needed

🧠 Tip: Include your tech stack in the prompt early. It reduces guesswork and prevents the AI from suggesting incompatible tools or patterns.

AI’s Response:

I understand that you want to set up technical specifications for a project using the following modern stack:

1. Next.js 15 with App Router (TypeScript)
2. TailwindCSS for styling
3. Prisma ORM with MCP server for database management
4. Proper client/server component distinctions
5. Next.js optimized image handling

Before I provide specifications for features, I'd like to first ensure we have the proper project structure set up...

From there, the AI responded with structured implementation plans that aligned well with our stack and development flow.

Setting up Next.js and Prisma ORM to scaffold the project

With the stack and context in place, we were ready to move on to building the homepage and getting the database schema set up. We started by prompting the AI with a description of the homepage functionality:

Our Prompt:

Feature: Homepage

A simple ecommerce homepage with the following:

• Full-width hero section with a background image and a CTA button
• A grid of featured products (limit 6), pulled from the database via a server component
• Each product should show an image, name, and price
• Use Next.js Image component for all images
• If external image sources are used, add required domains to next.config.js
• CTA button should link to the /shop route

🧠 Tip: Prompt one feature at a time. This leads to clearer logic and fewer hallucinations, since the AI isn’t juggling multiple responsibilities at once.

AI’s Response:

I'll create a technical specification for the homepage feature. First, let me set up our Next.js project with the required configuration:

From there, the AI proceeded to scaffold the workspace, by running two commands:

• create-next-app@latest .: Creates a new Next.js app in the current directory, along with a few other flags to auto select tool options.
• prisma init --output: Initializes Prisma ORM with a custom output path

It then added Prisma:

After intializing Prisma, it prompted the Prisma MCP Server to create a database. Once created, it connected to the database and that was it!

At this point, the foundation of our project was ready. We had a Next.js project, Prisma set up, and a working Prisma Postgres database. All in a matter of seconds.

Setting up categories and products in prisma.schema

Once Prisma ORM was initialized and connected to our MCP-managed database, the AI generated a schema to model the data for our store.

We asked the AI to define two core models for our database: Category and Product, with each product belonging to a category in a one-to-many relationship. This worked smoothly thanks to Prisma's Schema Language (PSL), which is simple, declarative, and easy for AI to generate accurately.

Here’s the full schema:

This gave us a simple, relational structure that was easy to query and ideal for the kind of categorization we wanted.

Having AI seed our database

With the schema in place, our database was still empty. We needed test data to work with, so we asked the AI to handle seeding:

Our Prompt:

Can you generate seed data for a few categories and products so we can start testing the UI?

🧠 Tip: Use real-world data when seeding. It helps you catch layout or edge-case bugs early and makes the UI behave more like it would in production.

AI’s Response:

Sure. I’ll write a seed.ts script that first creates categories, then products with proper category relationships. I’ll also add a seed command to your package.json so you can run it easily.

The script it produced was clean and well-structured. It starts by deleting the current records in the Product and Category tables, then defining them, and creating new records:

It then added the following to our package.json:

And ran the command for us:

AI’s Confirmation:

Seeding complete. You can open Prisma Studio to view your data.

Sure enough, we opened up Prisma Studio by running npx prisma studio, and everything was ready to go.

Building a shop page we can filterable shop page with Prisma ORM

Once we had seeded data in place, we moved on to building out the /shop page. Our goal was to let users filter products by category and display the results in a clean grid layout.

Our Prompt:

We want to create a /shop page that lists all products by default, but also supports filtering by category via a search param.

• Use Prisma to fetch categories and products
• Use a server component
• Include a category filter component and product grid
• Handle filtering via searchParams.category

AI’s Response:

Understood. I'll fetch the list of categories and use searchParams to optionally filter the products. Then I'll pass the results to a CategoryFilter and ProductGrid component via props. Since searchParams is dynamic, make sure this function is async.

Here’s the key part of the code the AI generated—it powers the core functionality of the shop page:

• Fetches all categories for the filter UI
• Fetches products, optionally filtered by category via searchParams
• Includes each product’s category to avoid extra queries

After fetching, we serialized the products for client use and rendered everything with suspense boundaries for a smoother UX, showing loading placeholders while the components load to avoid layout shifts and give immediate visual feedback.

The final UI includes a filter bar up top and a product grid below:

React context for persistent cart functionality

With the shop page in place, we needed a persistent cart system. Something simple and session-safe, and since we weren’t using auth or backend sessions, localStorage was the obvious choice for keeping cart data around between page reloads.

We weren’t using auth or backend sessions, so localStorage gave us an easy way to persist the cart across page reloads.

Our Prompt:

Can you set up a full cart using React Context?

• Support add, remove, update quantity
• Persist to localStorage
• Display the item count in the header

AI’s Response:

I’ll create a CartContext with helpers to manage state, sync to localStorage, and compute the total item count. This will live entirely on the client using "use client".

Here’s a condensed look at the final setup:

This gave us everything we needed: shared state, persistent cart data, and easy access via a useCart() hook anywhere in the app for the AI to use.

Addressing errors along the way

We ran into a handful of issues throughout the process, but each was quickly resolved by the AI once we provided the relevant error message.

This is pretty typical when relying on AI to generate entire features. On the first pass, it often misses small but critical details, things a human would probably catch immediately. That said, the fix was usually just a prompt away.

🧠 Tip: Treat errors as feedback to refine your prompts. Feeding stack traces or unexpected behavior back into the AI helps it course-correct and improves output with minimal effort.

Resolving invalid image URLs

After the initial seed, we noticed a few product images were falling back to the alt text. We captured the error and let the AI take over:

Our Prompt:

Looks like we're hitting an error. Here's the error message:

AI's Response:

It appears the image URL provided doesn't exist. Here's a corrected URL:

Update the seed.ts file with this URL and re-run:

This fixed the issue immediately, restoring all images correctly.

Client/Server component errors

When building the cart functionality, we stumbled upon a client/server component error. Again, we let the AI diagnose the issue:

Our Prompt:

Looks like we're hitting an error. Here's the error message:

🧠 Tip: Be clear about runtime boundaries in your prompt. Missing details like "use client" can cause errors like useCart is not a function when the AI places logic in the wrong context.

AI's Response:

This error occurs because useCart is being called from a server component. To fix it, mark your component explicitly as a client component by adding:

at the very top of your component file.

Applying this simple fix solved the issue instantly, making the cart fully functional.

Next.js searchParams error

While implementing dynamic routes on our /shop page, we encountered an issue with searchParams. Once again, we leaned on the AI for guidance:

Our Prompt:

Looks like we're hitting an error. Here's the error message:

AI's Response:

The issue is that Next.js expects searchParams to be handled asynchronously. Ensure your route is an asynchronous function, and explicitly await the parameters before accessing them. For example:

This quick adjustment solved the problem, restoring our dynamic route functionality.

Conclusion

This project was a practical deep dive into what it looks like to build a real app with Prisma MCP and AI-driven development.

The Prisma MCP server allowed us to define a full database in seconds. That was a super simple experience, allowing for more time thinking about the app itself rather than database headaches.

Vibe coding with AI wasn’t flawless. It quickly got us most of the way there, but it often overlooked small but important details. Once we hit an error and pointed it out, though, fixes came quickly.

Overall, this workflow made building the core of an e-commerce app efficient. Prisma MCP handled the database management effortlessly, and the AI let us move faster without giving up architectural control.