Skip to content
Meisei
Log inStart freeStart free trial
Meisei
Start free trialLog in

Reviews and rewards for Vercel Shop. Rendered on the server.

Give shoppers on your Vercel Shop storefront reviews to read, points to earn and lists to share. Meisei's widgets load with the page itself, so your store stays as fast as Vercel Shop made it.

Start a free trialRead the setup guide

app/products/[handle]/page.tsx

import { Rating, Reviews } from
  "@meisei/widgets/next"

<Suspense>
  <Rating productSlug={product.handle} />
  <Reviews productSlug={product.handle} />
</Suspense>

The part the template leaves to you.

Vercel Shop covers the catalog, the cart, checkout and customer accounts. Its own product page docs name reviews and restock waitlists among the additions that need another service. Meisei does both, and the rest comes with it.

Reviews and ratings
Stars under the product title, the full reviews list below it, photo and video reviews, and one-tap request emails after every order.
Shopper questions
An ask box on the product page that answers a shopper's question right away, from your published reviews and the product page.
Points and rewards
A floating Rewards button on every page, and a shopper's own balance once they sign in with their customer account.
Wishlists
A save button beside Add to cart, lists a shopper can share by link, and an email when the price drops or the stock comes back.

In the HTML, not after it.

A review widget that loads from a script paints after the page does, and on a storefront built for speed it becomes the slowest thing on the page. Meisei's Next.js components load on the server instead.

  • Reviews, the star summary and the Product structured data are in the HTML a shopper or a search crawler receives, so nothing jumps when the JavaScript arrives.
  • The browser makes no request for that first view. Sorting, voting and writing a review still go straight to Meisei from the shopper's browser.
  • Every widget on a page shares one request to Meisei, so reviews, ratings and the loyalty panel together cost one call, not three.
  • They stream inside a Suspense boundary, the same way the template already streams its own product details, so they never hold up the price or Add to cart.
  • Your secret key stays on the server. A signed-in shopper's email is signed there too, and the browser only ever sees the signature.

app/layout.tsx

import { MeiseiNextProvider } from
  "@meisei/widgets/next"

<MeiseiNextProvider>
  <Nav />
  <main>{children}</main>
  <Footer />
</MeiseiNextProvider>

.env.local

MEISEI_API_URL=https://your-store.meisei.app/api
MEISEI_SECRET_KEY=sk_live_9f2c
NEXT_PUBLIC_MEISEI_PUBLISHABLE_KEY=pk_live_9f2c

Four steps, no glue code.

Vercel Shop's product handle is the slug Meisei already stores, and its product pages live at /products/, where Meisei looks by default. There is nothing to map.

  1. Step 1

    Connect the same store.

    Install Meisei on the Shopify store your Vercel Shop reads from. Products, customers and orders come across and stay in sync.

  2. Step 2

    Add the package.

    pnpm add @meisei/widgets, then two keys and your store's address in .env.local, or in your Vercel project's settings.

  3. Step 3

    Wrap the layout.

    One provider in app/layout.tsx. It links the stylesheet your appearance settings produce, so the widgets match without a build step.

  4. Step 4

    Drop in the widgets.

    Rating and Reviews on app/products/[handle]/page.tsx, taking product.handle as it is. That's the whole product page.

Follow the guide, file by file

Based on Vercel Shop's own docs and code, checked in October 2026 against Next.js 16.4 and React 19.3. The template changes, so check its docs for the latest.

Ready for an agent-native store.

Vercel Shop is designed for the AI agents that build your storefront and the ones that shop it. Meisei is too.

  • Vercel Shop is built to be extended by coding agents, and Meisei's widgets are plain React components with typed props, so an agent can add them from the type definitions.
  • Turn on agentTools and the widgets offer WebMCP tools to an AI agent in the shopper's browser: read the reviews, ask about the product, check a points balance, save to a wishlist.
  • Your own tools get the rest through Meisei's MCP server, connected with OAuth or a scoped key, with writes off until you turn them on.

Vercel Shop questions.

Is Vercel Shop the same thing as Next.js Commerce?

It's Vercel's successor to it: the Next.js storefront template for Shopify going forward. Meisei still works with a Next.js Commerce store, with one setting for its singular /product/ URLs.

Do I need Meisei's Shopify app as well as the React package?

You'll want both, and the app takes a minute. The Shopify app brings your products, customers and orders across so review requests go out after each order. The React package is what puts the reviews on your Vercel Shop pages.

Does it work with Cache Components and partial prerendering?

Yes. Vercel Shop turns Cache Components on, so a prerendered shell goes out first and the rest streams in. The widgets sit inside a Suspense boundary, like the template's own product details, so the shell stays static and the reviews arrive fresh on every visit.

Vercel Shop already prints product structured data. Will I get two?

Only if you keep both. Pass structuredData={false} to the Reviews widget to keep the template's, or remove the template's ProductSchema and keep Meisei's, which adds the star rating and the reviews themselves.

Can I style the widgets like the rest of my storefront?

Yes. Set colors and fonts in Meisei's theme editor, write your own CSS, or turn the hosted stylesheet off and style the widgets yourself.

Is Meisei made by Vercel?

No. Meisei is an independent app that works with Vercel Shop. Vercel and Vercel Shop are Vercel's own names and products.

The rest of Meisei.

Every feature shares one customer record and one bill. Turn on the ones you need.