Vercel Integration Ecommerce Demo

Vercel Integration Ecommerce Demo is a starter template that demonstrates how to add Mixedbread AI-powered semantic search to an ecommerce storefront built with Next.js and deployed on Vercel. Created by Mixedbread AI, this boilerplate gives you a working product search UI out of the box, pre-configured to work with a commerce dataset, so you can focus on wiring up your own product catalog and metadata.

What is the Vercel Integration Ecommerce Demo?

Vercel Integration Ecommerce Demo is a Next.js application that combines a search API route and a product grid component to deliver AI-generated search results for online stores. It takes a Mixedbread API key and store ID as environment variables and returns ranked product matches from a Mixedbread search index, rendering them with product names, descriptions, prices, categories, and image URLs. The template runs on Node.js 22 or newer, uses npm for dependency management, and is released under the MIT license.

Key Features

• Next.js framework — Built on Next.js, with an API route at app/api/search/route.ts that accepts search queries and returns product results using configurable parameters such as top_k and score_threshold.
• Mixedbread Search integration — Connects to Mixedbread's AI search platform through MXBAI_API_KEY and MXBAI_STORE_ID environment variables, giving you access to a managed search index.
• One-click Vercel deployment — Includes a Deploy with Vercel button that clones the repository and pre-fills the Mixedbread integration via the Vercel marketplace.
• Pre-configured commerce dataset — The template ships ready to search a sample commerce dataset, so you can see results immediately after setup.
• Customizable metadata layer — Metadata fields like name, description, price, and category are defined in lib/types.ts and consumed by components/product-grid.tsx, making it straightforward to adapt to your own product data.
• Product grid with image support — The UI expects a image_url.url field on search results and renders product cards with images, names, and descriptions.
• MIT license — Freely reusable and modifiable for both commercial and personal projects.

Who is it for?

Developers building ecommerce search experiences who want a working reference implementation rather than starting from scratch. Ecommerce teams planning to deploy on Vercel can use the one-click integration to provision Mixedbread credentials. Node.js developers familiar with Next.js can treat this as a learning resource for combining retrieval APIs with server-rendered React components.

What can you do with it?

• Ecommerce developers: scaffold an AI-powered product search page by cloning the repository, adding your API key, and adjusting the metadata types to match your catalog.
• Vercel customers: use the deploy button to create a new project with the Mixedbread integration installed, then copy API credentials directly from the integration settings.
• AI search evaluators: test Mixedbread's retrieval quality on the included commerce dataset.

How does it work?

The setup follows a clear sequence: install dependencies with npm install, copy .env.example to .env, add your MXBAI_API_KEY and MXBAI_STORE_ID, then run npm run dev to start the development server on http://localhost:3000. The search API route reads the environment variables, queries the Mixedbread index, and returns results that the product grid component renders. If you use your own dataset, you must update lib/types.ts, components/product-grid.tsx, and app/api/search/route.ts to match your metadata structure.

FAQ

How do I get a Mixedbread API key and store ID?

You have two options: install the Mixedbread integration from your Vercel project's Integrations tab and copy the credentials from there, or sign up at the Mixedbread Platform, create an API key, and note your store ID from the platform interface.

What Node.js version is required?

The template requires Node.js 22 or newer. You'll also need Git installed to clone the repository.

Can I use my own product data?

Yes. The template is pre-configured for a commerce dataset, but you can adapt it by updating the ProductMetadata interface in lib/types.ts, the metadata field references in components/product-grid.tsx, and the search parameters in the API route.

Is the demo store publicly accessible?

No. The demo store is currently not publicly accessible; the maintainers plan to add public stores in the future. You can still run the template locally or deploy your own instance using the provided configuration.