Build AI Semantic Search in Next.js (Meaning, Not Keywords)
Most search bars match keywords.
This one matches meaning.
In this episode, we build a live AI semantic search bar in Next.js + TypeScript + Tailwind using OpenAI embeddings and cosine similarity.
You’ll learn how to:
Build a debounced search UI in React
Create an API route at /api/search
Embed user queries with text-embedding-3-small
Score pre-embedded articles and return top matches
Display similarity scores in the UI
Try this query in the demo:
“how components remember things”
→ it finds useState content even without exact keyword matches.
Stack: Next.js 15, TypeScript, Tailwind CSS, Vercel AI SDK v6, OpenAI
Level: Beginner
Runtime: ~15m
🔗 Repo: https://github.com/KapilSinghSisodiya...
🔗 Demo route: /search
Chapters 0:00 Hook — keyword vs semantic search
1:00 Architecture overview
3:00 Search UI + debounce
6:00 /api/search route
10:00 Embeddings + cosine similarity
14:00 Results UI + testing
17:00 Recap + next episode
Next episode: Streaming Autocomplete with useCompletion
If this helped, subscribe for the full AI Frontend Playground series.
#nextjs #typescript #openai #vercelai #react #webdevelopment #ai #semanticsearch #embeddings