[▲ Vercel Community](/) · [Categories](/categories) · [Latest](/latest) · [Top](/top) · [Live](/live)

[Showcase](/c/showcase/41)

# AI Router — Semantic Search Navigation for SPAs, powered by HuggingFace embeddings in a Web Worker

31 views · 1 like · 1 post


IvanMalkS (@ivanmalkser) · 2026-03-22 · ♥ 1

# AI Router — Semantic Search Navigation for SPAs, powered by HuggingFace embeddings in a Web Worker

Hey everyone!

I built ****AI Router**** — an open-source library that adds semantic search navigation to any SPA. Instead of keyword matching, it uses AI embeddings to understand what users actually mean.

****Live Demo****: https://ai-router-search.vercel.app

****GitHub****: [GitHub - IvanMalkS/ai-router: AI-powered semantic search router for SPAs - find the best route by meaning, not keywords. Runs entirely in the browser via Web Worker, zero backend required. · GitHub](https://github.com/IvanMalkS/ai-router)

****npm****: https://www.npmjs.com/package/@van1s1mys/ai-router

****Docs****: https://ivanmalks.github.io/ai-router/

## What it does

A user types “how to reach support?” and gets routed to `/contact` with a 0.91 similarity score — no hardcoded synonyms, no keyword lists. The AI model understands semantics.

It even handles typos and misspellings — type “pricng” or “contcat” and it still finds the right page. The embedding model captures meaning, not exact characters, so your users don’t need to be perfect spellers.

- Runs a HuggingFace embedding model ****entirely in the browser**** via Web Worker — no API calls, no backend, no latency

- Uses [Orama](https://orama.com) hybrid search (text + vector) for ranking

- Typo-tolerant — understands intent even with misspellings

- Progressive model loading — start with a fast model, upgrade to a better one in the background

- Instance caching & preload API — pre-warm at page load, instant search when needed

- SSR-safe out of the box — works with Next.js, Nuxt, and any SSR framework

- Multilingual support (English, Russian, Chinese, and more)

## The Stack

* Next.js 15 — docs site and live demo

-  **i18n** — translate docs

- **@huggingface**/transformers — embedding model in@huggingfaceerence in the browser

- ****Orama**** — hybrid text + vector search engine

- ****Web Workers**** — keeps the main thread free, no UI jank

- ****ONNX Runtime**** — model execution

- ****Vercel**** — hosting the live demo

- ****GitHub Pages**** — documentation site

## Framework Plugins

Auto-scan your pages directory instead of listing routes manually:

* `@van1s1mys/ai-router-plugin-vite` — for Vite/SvelteKit/Vue

- `@van1s1mys/ai-router-plugin-next` — for Next.js

- `@van1s1mys/ai-router-plugin-webpack` — for Webpack/CRA

## Quick Start

```bash

*n*@van1s1mys*m* install @van1s1mys/ai-router

```

```ts

import { Sma@van1s@van1s1mysmystRouter } from ‘@van1s1mys/ai-router’;

const router = **new** *Sma*@van1s1mys*tRouter*({

routes: [

```
{ path: '/pricing', title: 'Pricing', description: 'cost, plans, subscription' },

{ path: '/contact', title: 'Contact', description: 'support, phone, address' },

{ path: '/docs',    title: 'Docs',    description: 'documentation, API, guides' },
```

],

threshold: 0.5,

});

await router.ready;

const result = await router.*search*(‘how to reach support?’);

*// { path: ‘/contact’, score: 0.91 }*

```

## Why Vercel?

The demo site is a Next.js app deployed on Vercel. The monorepo structure with pnpm workspace dependencies made Vercel’s build pipeline a perfect fit — it handles everything in the right order out of the box.

## What’s next

* More embedding models support

- Search analytics and scoring insights

- React hook (`useSmartRouter`) for easier integration

Would love to hear your feedback! Try the live demo at https://ai-router-search.vercel.app — type any query (even with typos!) and see how it finds the best matching page by meaning.