Web app · conversations · deals · analytics
Operator panel
The bot closes routine questions itself and hands complaints, wholesale inquiries and returns to a human — with a reason and a summary. The panel shows what the work looks like on the other side: new customers arrive every few seconds, you can reply to them and create a deal from a conversation.
Scenario: Zerno roastery — fictional: support in Telegram, Max and on the website, wholesale to coffee shops.
Open the demo
Customers and deals are fictional. The “Reset” button starts the shift over.
The app runs in your browser: nothing is sent to a server.
What the demo shows
How to try it
Open the app
The shift is already under way: the queue has conversations the bot handed to a human.
Reply to a customer
“Take it”, then a quick reply or “Reply draft”. The customer answers a few seconds later.
Create a deal
The “+ Deal” button in the conversation. In the “Deals” tab, drag the card through the stages.
Look at the analytics
The share of requests closed by the bot grows over the month — that’s what the return on expanding the knowledge base looks like.
No paid neural networks
In a production project, the conversation summary and the reply draft are written by a language model from the history and the knowledge base. In the demo they’re assembled from templates based on the request topic — the interface, queue, deals and metrics are the same.
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
- Conversations from Telegram, Max, the website widget and email in one queue
- Deals and customers in amoCRM or Bitrix24 rather than a separate database
- Distribution among operators, SLAs and notifications about overdue replies
- Handover review: which questions to add to the base so the bot closes them itself
Stack
- All demos by stack:
- React
- TypeScript
- React 19
- TypeScript
- dnd-kit
- Recharts
- Zustand
- Vite
- Tailwind CSS
Developer’s comment
Anton Goncharov
AI systems developer · Python
For business
- The operator doesn’t read the conversation from the start: the bot hands over a reason and a summary, and a reply draft is already prepared.
- A deal is created right from the conversation — wholesale inquiries and complaints don’t get lost in the chat.
- Analytics shows what share of requests the bot closes and what to add to the base to make it grow.
For developers
- The customer stream is a timer-based simulation in the browser with all state in Zustand, so the shift can be reset with one button.
- The kanban is built on dnd-kit: cards can be dragged with a mouse, a finger or the keyboard — accessibility isn’t optional here.
- Recharts charts are calculated from the same events the operator sees, so the numbers never diverge from the queue.
Tips
Tip 01
Handing over to an operator without a reason and a summary is only half the job: the person will still start with “how can I help?”.
Tip 02
Build metrics from events rather than separate counters — that way they won’t diverge from reality.
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.
Other demos in this section
All demos- live
Web app · OCR · validating company details
Document recognition
Upload an invoice or a certificate of completion — a photo, scan or PDF. The app recognizes the text, extracts company details and table rows and validates them: tax ID and account checksums, the total and VAT.
- React
- TypeScript
- In-browser neural network
- live
Web app · Recharts · RBAC · audit
SaaS dashboard
A SaaS revenue team’s workspace: MRR by plan, revenue movement, churn, customer health, CSV export for Excel and an activity log. All numbers are calculated from a single year of history — changing a plan in a customer card moves MRR on the charts immediately.
- React
- TypeScript
- live
Web app · Laravel · PostgreSQL
Warehouse system on Laravel
Warehouse accounting where stock is the sum of ledger entries, not a “qty--” field: orders with all-or-nothing reservation, picking by bin, receiving with CSV import, stocktaking and a ledger. A race between two real PHP processes in PostgreSQL shows why row locking is needed.
- PHP
- live
Web app · metrics · alerts
Bot monitoring
How a bot is watched in production: how many requests, how fast it answers, how often it fails or doesn’t know the answer. A request log with a trace of every answer and rules that message the on-call engineer in Telegram when something goes wrong.
- React
- TypeScript
- live
Python scraper · runs in the browser
Competitor price monitoring
A Python scraper crawls the websites of three competitors of an electronics store every day: an HTML catalog with pagination, a sitemap with JSON-LD and an SPA with an API. It matches products with the catalog, sends notifications about changes, recommends a price by rules and exports a report to Excel. Python runs right in the browser.
- Python
- React
- TypeScript
- live
Web app · PWA · vanilla JS
Offline courier app
A courier’s working day: orders, a call to the customer, handover with a photo and signature. The app opens and works without a network, and changes go to dispatch when the connection returns. If the dispatcher changed the same order in the meantime, the courier chooses which version is right.
- Vanilla JS