Веб-приложение · экономика AI · нативный JS
Калькулятор стоимости AI-бота
Перед запуском бота заказчик спрашивает: «А сколько это будет стоить в месяц?» Ответ зависит не от числа клиентов, а от токенов: длины инструкций, найденных фрагментов базы знаний, истории переписки и ответов. Калькулятор раскладывает счёт на эти части и показывает, что даёт кеш промпта, короткий контекст или маршрутизация простых вопросов на дешёвую модель.
Сценарий: Три типовых сценария: бот поддержки по базе знаний, бот квалификации заявок и агент с инструментами. Можно задать свои числа.
Открыть демо
Расчёт сохраняется в адресе страницы — ссылку можно отправить коллеге. Цены можно поправить прямо в таблице.
Приложение работает в браузере: на сервер ничего не отправляется.
Что показывает демо
Как попробовать
Выберите сценарий
«Поддержка», «Квалификация заявок» или «Агент с инструментами» — параметры подставятся сами.
Сравните модели
График покажет месяц на каждой модели, а выбранная модель — из чего складывается счёт.
Посчитайте свой текст
Загрузите словарь o200k (3 МБ) и вставьте системный промпт — калькулятор посчитает токены и подставит их в расчёт.
Отправьте ссылку
Адрес страницы хранит все параметры и правки цен: коллега откроет тот же расчёт.
Без платных нейросетей
Калькулятор ничего не отправляет в нейросети: токены считает собственный токенизатор в браузере. Цены собраны на 10 октября 2026 года, долларовые пересчитаны по курсу ЦБ на ту же дату. Цены меняются — перед бюджетом проверьте их на сайтах поставщиков. Для Claude, YandexGPT и GigaChat число токенов оценено по o200k с поправкой: у них свои токенизаторы.
Демо работает без API-ключей OpenAI, YandexGPT или GigaChat. Там, где рабочая система обращается к модели, стоит локальная заглушка с тем же интерфейсом — поэтому демо бесплатно, всегда доступно и ничего не выдумывает.
Что будет в рабочем проекте
- Расчёт бюджета до разработки: сценарии, нагрузка, выбор модели и запас на рост
- Учёт фактических токенов в работающем боте и отчёт о расходах по дням и сценариям
- Кеш промпта, сжатие истории и маршрутизация вопросов между дешёвой и сильной моделью
- Сравнение облачных моделей со своей на арендованном сервере по цене и качеству ответов
Стек
- Все демо по стеку:
- Нативный JS
- JavaScript без фреймворков
- BPE-токенизатор
- Web Worker
- SVG
- URLSearchParams
- JSDoc
- Vite
Основано на
Книги и дисциплины, идеи из которых работают в этом демо.
Книга · Чарльз Петцольд
Код. Тайный язык информатики
Настоящий токенизатор o200k в браузере показывает, как текст превращается в числа для модели и почему по-русски тот же смысл занимает больше токенов.
Книга · Джон Берриман, Альберт Циглер
Промпт инжиниринг для LLM
Расчёт показывает, из чего складывается контекст — инструкции, фрагменты базы, история, ответ — и сколько стоит каждая часть в токенах.
Книга · Джордж Сэмюэль Клейсон
Самый богатый человек в Вавилоне
Прежде чем запускать бота, считаю, сколько он будет стоить в месяц, и показываю, как платить меньше: кеш промпта, меньше фрагментов, дешёвая модель для простых вопросов.
Комментарий от разработчика
Антон Гончаров
Разработчик ИИ-систем · Python
Для бизнеса
- Бюджет на модель известен до разработки — и видно, из чего он складывается.
- Часто выгоднее не дешёвая модель, а короткий контекст и кеш промпта: советы пересчитываются сразу.
- Расчёт живёт в ссылке — её можно отправить финансовому директору.
Для разработчиков
- Свой байтовый BPE по словарю o200k в Web Worker; совпадение с tiktoken проверяет тест на эталоне.
- Все параметры — в адресе страницы, поэтому расчёт переживает перезагрузку и пересылку.
- Графики — чистый SVG без библиотек, типы — JSDoc, которые проверяет tsc.
Советы
Совет 01
Считайте токены настоящим токенизатором на своих текстах: по-русски их заметно больше, чем кажется.
Совет 02
Неизменную часть промпта ставьте в начало — тогда срабатывает кеш промпта.
Нужен такой же для вашего бизнеса?
Расскажите о задаче — отвечу, что из демо подойдёт вам, сколько это займёт и что понадобится с вашей стороны.
Другие демо в этом разделе
Все демо- работает
Веб-приложение · схема агента
Конструктор AI-агента
Агент поддержки собирается из блоков: намерения, база знаний, вызовы API, проверки и передача оператору. Отправьте сообщение клиента — путь подсветится на схеме шаг за шагом.
- React
- TypeScript
- работает
Веб-приложение · вопрос → SQL → график · PostgreSQL в браузере
ИИ-аналитик данных
Руководитель спрашивает своими словами — «выручка по каналам за 3 квартал», «какие клиенты перестали заказывать» — и получает SQL, график, таблицу и вывод. База продаж — настоящий PostgreSQL, который работает прямо в браузере.
- React
- TypeScript
- работает
Веб-приложение · риски по эталону · Word с правками
Проверка договоров
Контрагент прислал свой договор — проверка сверяет его с эталоном компании, подсвечивает рискованные пункты, объясняет, чем они опасны, и предлагает редакцию. На выходе — Word с режимом исправлений и протокол разногласий.
- React
- TypeScript
- работает
Веб-приложение · задачи из чата · канбан · вечерняя сводка
ИИ-агент в рабочем чате
В рабочем чате пишут как обычно — «Петя, до пятницы поправь прайс». Агент сам заводит задачу на канбане, двигает её по «Беру» и «Готово», переносит сроки и передаёт задачи, утром напоминает о просрочке, а вечером присылает сводку.
- React
- TypeScript
- работает
Веб-приложение · общий ящик · CRM · защита от подмены реквизитов
ИИ-разбор входящей почты
Агент читает общий ящик отдела продаж: понимает, что за письмо, достаёт поля, заводит сделку, обращение или задачу в CRM и готовит ответ. Счёт с новыми реквизитами и фишинг он ловит до того, как кто-то заплатит или перейдёт по ссылке.
- React
- TypeScript
- работает
Веб-приложение · маркетплейсы · проверка модерации · юнит-экономика
Карточки товаров для WB и Ozon
Агент превращает текст поставщика в две карточки — для Wildberries и для Ozon: название в лимите площадки, описание с ключевыми запросами, характеристики по справочнику. Потом проверяет то, на чём карточки срезаются на модерации, и считает, сколько останется с продажи.
- React
- TypeScript
- работает
Веб-приложение · расшифровка встречи · протокол · канбан
Протокол совещания → задачи в канбан
Агент читает расшифровку планёрки и собирает протокол: решения, задачи с исполнителем и сроком из живой речи, риски и открытые вопросы. Задачи уходят на канбан, а на следующей встрече агент сам двигает их по статусам.
- React
- TypeScript
- работает
Веб-приложение · персональные данные · медицина · аналитика
Обезличивание данных перед нейросетью (152-ФЗ)
Агент находит в письмах и расшифровках ФИО в любом падеже, телефоны, паспорта, СНИЛС, карты, адреса и диагнозы, заменяет их до отправки во внешнюю нейросеть, а её ответ возвращает к настоящим данным уже у вас. Таблицу пациентов обезличивает для аналитики так, чтобы никого нельзя было узнать.
- React
- TypeScript
- работает
Веб-приложение · автоматизация · amoCRM, 1С, Telegram
Конвейер автоматизации в духе n8n
Три рабочих сценария мебельной фабрики на холсте, как в n8n: заявки с сайта уходят в amoCRM и к менеджерам по горячести, оплата ЮKassa — в 1С с повторами и веткой ошибок, по утрам — сводка руководителю. Запустите событие и смотрите, как записи идут от узла к узлу; схему можно править и выгрузить в настоящий n8n.
- React
- TypeScript
- работает
Веб-приложение · мультиагентная система · контент
Команда ИИ-агентов для контента
Шесть агентов готовят публикацию по брифу: главред планирует, исследователь ищет факты в базе знаний, автор пишет, фактчекер и редактор возвращают черновик на доработку, SMM раскладывает текст по Telegram, ВКонтакте, рассылке, блогу и карусели. Видно всю переписку агентов, каждую правку и что ушло бы в публикацию без проверки.
- React
- TypeScript
- работает
Веб-приложение · HR · скоринг и чат-бот
Отбор резюме и бот-интервьюер
Двадцать резюме на три вакансии разбираются за секунды: периоды работы, стаж, зарплата и город, совпадение с требованиями и цитата из резюме на каждое «да» или «нет». Чего в резюме не хватает, уточняет бот: задаёт только недостающие вопросы, переспрашивает размытые ответы и записывает на собеседование. Пол, возраст и семья в оценку не попадают.
- React
- TypeScript
- работает
Веб-приложение · RAG · нейросеть в браузере
Песочница поиска
Как бот поддержки находит ответ в базе знаний: документы режутся на фрагменты, поиск идёт по словам, по смыслу или гибридом, и у каждого найденного фрагмента видно, почему он выше других.
- React
- TypeScript
- Нейросеть в браузере
- работает
Веб-приложение · метрики · пороги CI
Оценка качества бота
Прежде чем выкатить новую настройку бота, её прогоняют на контрольных вопросах. Здесь видно, как это устроено: hit@1, hit@3, доля верных отказов, сравнение с продом и красная плашка, если CI не пропустил бы выкладку.
- React
- TypeScript
- Нейросеть в браузере
- работает
Веб-приложение · безопасность AI · нативный JS
Тренажёр защиты от prompt-инъекций
Попробуйте обмануть бота поддержки: выманить секретный промокод, вытащить системный промпт или оформить возврат без оснований. Шесть уровней защиты, атаки в лоб и через письма, отзывы и базу знаний, журнал проверок по OWASP Top 10 для LLM.
- Нативный JS