Web app · RAG · neural network in the browser

Search sandbox

A bot’s answer is only as good as the fragment it found. Here you can see the whole kitchen: how the text is cut into chunks, which words of the question were found and how much they weigh, where the “I don’t know” threshold lies. The neural network for semantic search runs right in the browser — no servers or keys.

Scenario: The knowledge base of Kvadrat Coworking — the same one the support demo bot answers from. You can upload your own documents.

Open the demo

Open the app

Keyword search works right away. The neural network loads on a button press — about 126 MB once, then from the browser cache.

The app runs in your browser: nothing is sent to a server.

What the demo shows

Documents: the coworking base, your own text or .md, .txt and .pdf files — everything stays in the browser
Fragments by section or of a given length with overlap — boundaries and the shared tail are visible in the text
Three modes: by keywords (as the bot works now), by meaning (neural network) and hybrid
For every fragment: BM25, vector similarity, its rank in each list, the RRF total and question coverage
An “I don’t know” threshold: if the base doesn’t cover the question, the bot declines instead of making things up
A set of questions where the modes disagree: synonyms and paraphrases that keyword search misses

How to try it

Open the app
The coworking base is already loaded and cut into fragments. Ask a question or click an example.
See why it was found
On the right are the fragments found with their scores; below is the same question in all three modes. Click a fragment and it’s highlighted in the text.
Turn on the neural network
“By meaning” mode, then “Load model”. Ask “Can I bring my pooch?” — by keywords the bot declines, by meaning it finds the section about pets.
Try your own documents
Upload a file or paste text, change the fragment length — and check how the bot will search your base.

What to write

Can I bring my dog?
Can I bring my pooch?
How do I get there by subway?
I want to register a company at your address
Write a poem about spring

No paid neural networks

The search is real: the same code as in the demo bot, moved to the browser and checked against the bot with a 40-question test, and the semantic search neural network is an open model running right on your device. Only the last step is a stub: the answer is assembled from sentences of the fragments found, while in a production bot a language model writes it from the same fragments.

The demo runs without OpenAI, YandexGPT or GigaChat API keys. Wherever a production system calls a model, there’s a local stub with the same interface — so the demo is free, always available and never makes things up.

What a production project adds

A base built from your documents, website, Notion or Confluence, updated on a schedule
Vectors in pgvector or Qdrant, server-side search for bases of thousands of documents
Fragment length, mode and thresholds are tuned by measuring on your questions, not by eye
Model answers (OpenAI, YandexGPT or GigaChat) strictly from the fragments found, with links

Stack

React 19
TypeScript
Transformers.js
ONNX Runtime Web
Web Workers
pdf.js
Vite

Based on

Books and university courses whose ideas are at work in this demo.

Book · James Martin
Computer Data-Base Organization
BM25 keyword search follows the inverted file principle: from a word to the fragments where it occurs, not a scan of all the text.

Developer’s comment

Anton Goncharov
AI systems developer · Python

For business

When a bot answers badly, the culprit is usually not “AI” but search. Here you can see whether the right fragment was found.
You can upload your own documents and understand before development how the bot will search them.
The “I don’t know” threshold protects your reputation: an honest refusal and an operator beat a confident invention.

For developers

The search was ported from the Python bot to TypeScript and is checked against the original with a 40-question test.
The semantic model is multilingual MiniLM via Transformers.js in a Web Worker on WASM. It loads only from our server, not from Hugging Face.
Hybrid is a merge by rank in two lists (RRF): no need to tune weights between incomparable BM25 and cosine similarity scores.

Tip 01
Tune fragment length and thresholds by measuring on your own questions: the optimum differs between bases.
Tip 02
Don’t throw away keyword search even with vectors: vectors are worse at finding SKUs, numbers and rare terms.

Want the same for your business?

Tell me about your task — I’ll tell you what from the demo fits, how long it will take and what I’ll need from you.

Message me on Telegram Send a request

Other demos in this section

All demos

Web app · agent diagram
live
AI agent builder
A support agent is assembled from blocks: intents, a knowledge base, API calls, checks and operator handover. Send a customer message and watch its path light up on the diagram step by step.
- React
- TypeScript
Web app · question → SQL → chart · PostgreSQL in the browser
live
AI data analyst
A manager asks in plain words — “revenue by channel for Q3”, “which customers stopped ordering” — and gets SQL, a chart, a table and a conclusion. The sales database is real PostgreSQL running right in the browser.
- React
- TypeScript
Web app · risks against a standard · Word with tracked changes
live
Contract review
A counterparty sent their own contract — the review compares it with the company’s standard, highlights risky clauses, explains why they’re dangerous and suggests wording. The output is a Word file with tracked changes and a disagreement protocol.
- React
- TypeScript
Web app · tasks from chat · kanban · evening digest
live
AI agent in a team chat
People write in the team chat as usual — “Pete, fix the price list by Friday”. The agent creates a task on the kanban board, moves it through “On it” and “Done”, reschedules and reassigns tasks, reminds about overdue work in the morning and sends a digest in the evening.
- React
- TypeScript
Web app · shared inbox · CRM · protection against bank detail fraud
live
AI inbox triage
The agent reads the sales team’s shared inbox: it understands what each email is, extracts fields, creates a deal, a ticket or a task in the CRM and drafts a reply. An invoice with new bank details or a phishing email is caught before anyone pays or clicks a link.
- React
- TypeScript
Web app · marketplaces · moderation check · unit economics
live
Product listings for WB and Ozon
The agent turns a supplier’s text into two listings — for Wildberries and for Ozon: a title within the marketplace limit, a description with search keywords, attributes from the reference lists. Then it checks what listings usually fail moderation on and calculates what’s left from each sale.
- React
- TypeScript
Web app · meeting transcript · minutes · kanban
live
Meeting minutes → kanban tasks
The agent reads a stand-up transcript and builds the minutes: decisions, tasks with an assignee and deadline taken from live speech, risks and open questions. Tasks go to the kanban board, and at the next meeting the agent moves them through statuses itself.
- React
- TypeScript
Web app · personal data · healthcare · analytics
live
Anonymizing data before it reaches a neural network
The agent finds full names in any grammatical case, phones, passports, SNILS numbers, cards, addresses and diagnoses in emails and transcripts, replaces them before sending to an external neural network, and restores its answer to the real data on your side. It anonymizes a patient table for analytics so that nobody can be identified.
- React
- TypeScript
Web app · automation · amoCRM, 1C, Telegram
live
An n8n-style automation pipeline
Three working scenarios of a furniture factory on a canvas, as in n8n: website leads go to amoCRM and to managers by lead temperature, YooKassa payments go to 1C with retries and an error branch, and every morning there’s a digest for the director. Trigger an event and watch records flow from node to node; the workflow can be edited and exported to real n8n.
- React
- TypeScript
Web app · multi-agent system · content
live
A team of AI agents for content
Six agents prepare a publication from a brief: the editor-in-chief plans, the researcher finds facts in the knowledge base, the writer writes, the fact-checker and editor send the draft back for revision, and the SMM agent adapts the text for Telegram, VK, a newsletter, a blog and a carousel. You see the agents’ entire conversation, every edit and what would have been published without checks.
- React
- TypeScript
Web app · HR · scoring and chatbot
live
CV screening and an interviewer bot
Twenty CVs for three vacancies are analyzed in seconds: employment periods, experience, salary and city, match with the requirements and a quote from the CV for every “yes” or “no”. What’s missing from the CV is clarified by a bot: it asks only the missing questions, follows up on vague answers and books an interview. Gender, age and family are left out of the assessment.
- React
- TypeScript
Web app · metrics · CI thresholds
live
Bot quality evaluation
Before a new bot configuration is rolled out, it’s run against control questions. Here you can see how that works: hit@1, hit@3, the share of correct refusals, a comparison with production and a red banner if CI would block the release.
- React
- TypeScript
- In-browser neural network
Web app · AI security · vanilla JS
live
Prompt injection defense trainer
Try to trick a support bot: coax out a secret promo code, extract the system prompt or get a refund without grounds. Six defense levels, direct attacks and attacks via emails, reviews and the knowledge base, and a check log based on the OWASP Top 10 for LLMs.
- Vanilla JS
Web app · AI economics · vanilla JS
live
AI bot cost calculator
How much a bot will cost per month on GPT, Claude, YandexGPT, GigaChat or your own model on a rented GPU. Token-based calculation, all models compared on a chart, tips on paying less, and a real o200k tokenizer right in the browser.
- Vanilla JS