Vercel Integration Ecommerce Demo

A starter template for integrating Mixedbread Search into ecommerce applications using Next.js, Vercel, and Mixedbread.

Note: This is a demo store that is currently not publicly accessible. We will add public stores in the future. Feel free to explore the code and use this as a starter template to build your own AI-powered search application.

See it in action:

https://github.com/user-attachments/assets/e57e6d13-10b0-40f7-9b3b-29e7d04c0de1

Getting Started

Prerequisites

• Node.js 22+
• Git

1. Clone the Repository

1
git clone <your-repo-url>
2
cd vercel-integration-ecommerce

2. Install Dependencies

1
npm install

3. Set Up Environment Variables

Create a .env file in the root directory:

1
cp .env.example .env

Add your Mixedbread API key to the .env file:

1
MXBAI_API_KEY=your-api-key-here
2
MXBAI_STORE_ID=your-store-id

To get your API key and store ID, you have two options:

1. From Vercel Integration (Recommended if deploying to Vercel):

   • Go to your Vercel Dashboard
   • Navigate to your project's Integrations tab
   • Install or access the Mixedbread integration
   • Copy your API key and store ID from the integration settings

2. From Mixedbread Platform (For standalone use):

   • Visit the Mixedbread Platform
   • Sign up or log in to your account
   • Navigate to API Keys and create a new key
   • Copy your API key and store ID from the platform

4. Update Code and Metadata

This template is pre-configured to work with the commerce dataset. If you're using your own dataset, you'll need to update the code to match your metadata structure and content URLs.

Key files to update:

1. lib/types.ts - Update the ProductMetadata interface to match your dataset's metadata fields
2. components/product-grid.tsx - Update references to metadata fields (e.g., metadata.name, metadata.description) and image_url.url
3. app/api/search/route.ts - Adjust search parameters if needed (e.g., top_k, score_threshold)

Example metadata structure used in this template:

1
{
2
  name: string;
3
  description?: string;
4
  filename?: string;
5
  price?: number;
6
  category?: string;
7
  // ... other fields
8
}

The template also expects search results to include an image_url.url field for product images.

5. Run the Application

Start the development server:

1
npm run dev

Open http://localhost:3000 in your browser to see the application.

Learn More

Mixedbread Resources

• Mixedbread Documentation - Learn about Mixedbread's features and APIs
• Quickstart Guide - Get started with creating stores and uploading files
• Mixedbread Discord - Join the community and get support

License

MIT