# 🔍 {{projectName}}

> Semantic search application powered by **Voyage AI** embeddings, **MongoDB Atlas Vector Search**, and **Next.js** with Material UI.

[![Generated by vai](https://img.shields.io/badge/scaffolded%20with-vai-00ED64?style=flat-square)](https://github.com/mrlynn/voyageai-cli)
[![Next.js](https://img.shields.io/badge/Next.js-14-black?style=flat-square&logo=next.js)](https://nextjs.org)
[![MUI](https://img.shields.io/badge/MUI-5-007FFF?style=flat-square&logo=mui)](https://mui.com)

---

## ⚡ Quick Start

```bash
# 1. Install
npm install

# 2. Configure
cp .env.example .env.local
# → Edit .env.local with your Voyage AI key + MongoDB URI

# 3. Create vector index (see below)

# 4. Run
npm run dev
```

Open **[http://localhost:3000](http://localhost:3000)** — you'll see a branded landing page with a link to the search UI.

---

## 🔧 Configuration

| Setting | Value |
|---------|-------|
| Embedding Model | `{{model}}` |
| Dimensions | `{{dimensions}}` |
| Database | `{{db}}` |
| Collection | `{{collection}}` |
| Vector Index | `{{index}}` |
{{#if rerank}}
| Rerank Model | `{{rerankModel}}` |
{{/if}}

### Environment Variables

```env
VOYAGE_API_KEY=       # From dash.voyageai.com
MONGODB_URI=          # Atlas connection string
```

### Vector Search Index

Create this index on your `{{collection}}` collection in Atlas:

```json
{
  "fields": [{
    "type": "vector",
    "path": "{{field}}",
    "numDimensions": {{dimensions}},
    "similarity": "cosine"
  }]
}
```

Name it **`{{index}}`**.

---

## 📁 Project Structure

```
{{projectName}}/
├── app/
│   ├── layout.jsx              # Root layout (Inter font, theme)
│   ├── page.jsx                # Landing page (hero + features)
│   ├── search/page.jsx         # Search UI (score bars, copy, fade-in)
│   └── api/
│       ├── search/route.js     # POST /api/search
│       └── ingest/route.js     # POST /api/ingest
├── components/
│   ├── ThemeRegistry.jsx       # Light/dark mode with persistence
│   ├── Navbar.jsx              # Branded AppBar + dark toggle
│   └── Footer.jsx              # Powered-by footer
├── lib/
│   ├── voyage.js               # Voyage AI client
│   ├── mongodb.js              # MongoDB connection + vector search
│   └── theme.js                # MUI theme (light + dark palettes)
├── public/favicon.svg
├── .env.example
└── package.json
```

---

## 🌗 Features

- **Dark mode** — auto-detects system preference, persists choice
- **Score visualization** — color-coded progress bars for relevance scores
- **Copy to clipboard** — one-click copy on each result
- **Responsive** — works on mobile and desktop
- **Branded** — vai + Voyage AI + MongoDB branding throughout
{{#if rerank}}
- **Reranking** — results refined with {{rerankModel}} for better relevance
{{/if}}

---

## 🔌 API Endpoints

### `POST /api/search`

```bash
curl -X POST http://localhost:3000/api/search \
  -H "Content-Type: application/json" \
  -d '{"query": "How does vector search work?", "limit": 5}'
```

### `POST /api/ingest`

```bash
curl -X POST http://localhost:3000/api/ingest \
  -H "Content-Type: application/json" \
  -d '{"text": "Your document content...", "metadata": {"source": "api"}}'
```

---

<sub>Generated by [vai](https://github.com/mrlynn/voyageai-cli) v{{vaiVersion}} on {{generatedAt}}</sub>