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

Showcase
, , ,
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

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 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


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



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.

1 Like