An open-source AI semantic image search app template built with Next.js, Vercel AI SDK, OpenAI, Vercel Postgres, Vercel Blob and Vercel KV.
This template ships with OpenAI GPT-4o
as the default. However, thanks to the Vercel AI SDK, you can switch LLM providers to Gemini, Anthropic, Cohere, and more with just a few lines of code.
You can deploy your own version of the Semantic Image Search App to Vercel with one click:
Follow the steps outlined in the quick start guide provided by Vercel. This guide will assist you in creating and configuring your KV database instance on Vercel, enabling your application to interact with it.
Remember to update your environment variables (KV_URL
, KV_REST_API_URL
, KV_REST_API_TOKEN
, KV_REST_API_READ_ONLY_TOKEN
) in the .env
file with the appropriate credentials provided during the KV database setup.
Follow the steps outlined in the quick start guide provided by Vercel. This guide will assist you in creating and configuring your Postgres database instance on Vercel, enabling your application to interact with it.
Once you have instantiated your Vercel Postgres instance, run the following code to enable pgvector
:
CREATE EXTENSION vector;
Remember to update your environment variables (POSTGRES_URL
, POSTGRES_PRISMA_URL
, POSTGRES_URL_NON_POOLING
, POSTGRES_USER
, POSTGRES_HOST
, POSTGRES_PASSWORD
, POSTGRES_DATABASE
) in the .env
file with the appropriate credentials provided during the Postgres database setup.
Follow the steps outlined in the quick start guide provided by Vercel. This guide will assist you in creating and configuring your Blob instance on Vercel, enabling your application to interact with it.
Remember to update your environment variable (BLOB_READ_WRITE_TOKEN
) in the .env
file with the appropriate credentials provided during the Blob setup.
You will need to use the environment variables defined in .env.example
to run Next.js Semantic Image Search. It's recommended you use Vercel Environment Variables for this, but a .env
file is all that is necessary.
Note: You should not commit your
.env
file or it will expose secrets that will allow others to control access to your various OpenAI and authentication provider accounts.
npm i -g vercel
.vercel
directory): vercel link
vercel env pull
pnpm install
Be sure to add your OpenAI API Key to your .env
.
To push your schema changes to your Vercel Postgres database, run the following command.
pnpm run db:generatepnpm run db:push
To get your application ready for Semantic search, you will have to complete three steps.
Put the images you want to upload in the images-to-index
directory (.jpg format) at the root of your application. Run the following command.
pnpm run upload
This script will upload the images to your Vercel Blob store. Depending on how many photos you are uploading, this step could take a while.
Run the following command.
pnpm run generate-metadata
This script will generate metadata for each of the images you uploaded in the previous step. Depending on how many photos you are uploading, this step could take a while.
Run the following command.
pnpm run embed-and-save
Depending on how many photos you are uploading, this step could take a while. This script will embed the descriptions generated in the previous step and save them to your Vercel Postgres instance.
Run the following command
pnpm run dev
Your app template should now be running on localhost:3000.
This library is created by Vercel and Next.js team members, with contributions from:
An open-source AI semantic image search app template built with Next.js, Vercel AI SDK, OpenAI, Vercel Postgres, Vercel Blob and Vercel KV.
This template ships with OpenAI GPT-4o
as the default. However, thanks to the Vercel AI SDK, you can switch LLM providers to Gemini, Anthropic, Cohere, and more with just a few lines of code.
You can deploy your own version of the Semantic Image Search App to Vercel with one click:
Follow the steps outlined in the quick start guide provided by Vercel. This guide will assist you in creating and configuring your KV database instance on Vercel, enabling your application to interact with it.
Remember to update your environment variables (KV_URL
, KV_REST_API_URL
, KV_REST_API_TOKEN
, KV_REST_API_READ_ONLY_TOKEN
) in the .env
file with the appropriate credentials provided during the KV database setup.
Follow the steps outlined in the quick start guide provided by Vercel. This guide will assist you in creating and configuring your Postgres database instance on Vercel, enabling your application to interact with it.
Once you have instantiated your Vercel Postgres instance, run the following code to enable pgvector
:
CREATE EXTENSION vector;
Remember to update your environment variables (POSTGRES_URL
, POSTGRES_PRISMA_URL
, POSTGRES_URL_NON_POOLING
, POSTGRES_USER
, POSTGRES_HOST
, POSTGRES_PASSWORD
, POSTGRES_DATABASE
) in the .env
file with the appropriate credentials provided during the Postgres database setup.
Follow the steps outlined in the quick start guide provided by Vercel. This guide will assist you in creating and configuring your Blob instance on Vercel, enabling your application to interact with it.
Remember to update your environment variable (BLOB_READ_WRITE_TOKEN
) in the .env
file with the appropriate credentials provided during the Blob setup.
You will need to use the environment variables defined in .env.example
to run Next.js Semantic Image Search. It's recommended you use Vercel Environment Variables for this, but a .env
file is all that is necessary.
Note: You should not commit your
.env
file or it will expose secrets that will allow others to control access to your various OpenAI and authentication provider accounts.
npm i -g vercel
.vercel
directory): vercel link
vercel env pull
pnpm install
Be sure to add your OpenAI API Key to your .env
.
To push your schema changes to your Vercel Postgres database, run the following command.
pnpm run db:generatepnpm run db:push
To get your application ready for Semantic search, you will have to complete three steps.
Put the images you want to upload in the images-to-index
directory (.jpg format) at the root of your application. Run the following command.
pnpm run upload
This script will upload the images to your Vercel Blob store. Depending on how many photos you are uploading, this step could take a while.
Run the following command.
pnpm run generate-metadata
This script will generate metadata for each of the images you uploaded in the previous step. Depending on how many photos you are uploading, this step could take a while.
Run the following command.
pnpm run embed-and-save
Depending on how many photos you are uploading, this step could take a while. This script will embed the descriptions generated in the previous step and save them to your Vercel Postgres instance.
Run the following command
pnpm run dev
Your app template should now be running on localhost:3000.
This library is created by Vercel and Next.js team members, with contributions from: