Semantic Image Search

This open-source AI semantic image search app template, built with Next.js, offers a robust solution for creating intelligent image search functionalities. It leverages the Vercel AI SDK, OpenAI, Vercel Postgres, Vercel Blob, and Vercel KV to provide a comprehensive and scalable application.

Key Features:

• Next.js App Router: Utilizes the latest Next.js features for efficient routing and server-side capabilities.
• React Server Components (RSCs), Suspense, and Server Actions: Enhances performance and developer experience with modern React paradigms.
• Vercel AI SDK: Facilitates multimodal prompting, generation, and embedding of image metadata, along with streaming images from server to client.
• Flexible AI Model Support: While defaulting to OpenAI's GPT-4o, the template supports switching to other LLM providers like Gemini, Anthropic, Cohere, or custom models, thanks to the Vercel AI SDK.
• Modern UI Stack: Built with shadcn/ui for a sleek interface, styled using Tailwind CSS, and powered by Radix UI for accessible, headless components.
• Data Storage & Caching: Implements query caching with Vercel KV for speed and uses Vercel Postgres with pgvector and Drizzle ORM for efficient embedding storage.
• Image Asset Management: Leverages Vercel Blob for scalable and reliable file (image) storage.

Use Cases & Setup: This template is ideal for developers looking to quickly deploy an AI-powered image search application. It provides a clear path from deployment to local development and image indexing.

To get started, users can deploy their own version to Vercel with a single click. Local setup involves linking with Vercel, downloading environment variables, and installing dependencies. Critical environment variables for OpenAI API, Vercel KV, Vercel Postgres, and Vercel Blob must be configured.

The image indexing process is streamlined into three steps:

1. Upload Images: Place .jpg images in the images-to-index directory and run pnpm run upload to store them in Vercel Blob.
2. Generate Metadata: Execute pnpm run generate-metadata to send images to an LLM (e.g., OpenAI GPT-4o) for title and description generation.
3. Embed Metadata and Save: Run pnpm run embed-and-save to embed the generated descriptions and save them to the Vercel Postgres database, enabling semantic search.

Once set up, the application can be run locally using pnpm run dev, accessible at localhost:3000. This template provides a robust foundation for building advanced AI-driven image search experiences.