Чат-бот поддержки на сайте: настройка виджета и подключение TokenMaster

2026-11-04 · чат-бот поддержка сайт ai

Чат-бот поддержки на сайте отвечает посетителям 24/7 и заметно снижает нагрузку на живых операторов: рутинные вопросы закрываются автоматически, а люди подключаются только к сложным обращениям. Современные языковые модели отвечают на естественном языке, поэтому бот справляется с типовыми вопросами о продукте, ценах и доставке без участия человека. Ниже — пошаговая настройка виджета и серверной части, которая отправляет вопросы в LLM через OpenAI-совместимый API TokenMaster.

Что понадобится

Бэкенд или хостинг, на котором можно запустить небольшой сервер (Node.js или Python). Подойдёт любой VPS, serverless-функция или даже локальная машина для теста.
Ключ TokenMaster вида sk-… — создаётся в разделе «Ключи» после регистрации. Один ключ работает со всеми моделями шлюза.
База знаний о вашем продукте — её текст вы вложите в системный промпт, чтобы бот отвечал по делу, а не сочинял от себя.

Пошаговая настройка

Сначала добавим на страницу простой виджет — поле ввода и окно сообщений. Это минимальный клиентский код, который шлёт вопрос на наш сервер и выводит ответ. Каждому посетителю выдаётся свой session_id, чтобы диалоги не смешивались:

const box = document.createElement("div");
box.innerHTML = '<div id="log" style="height:200px;overflow:auto"></div>' +
  '<input id="q" placeholder="Ваш вопрос" style="width:70%">' +
  '<button id="send">Отправить</button>';
document.body.appendChild(box);

const log = () => document.getElementById("log");
const sessionId = crypto.randomUUID();

document.getElementById("send").onclick = async () => {
  const q = document.getElementById("q");
  log().innerHTML += `<div><b>Вы:</b> ${q.value}</div>`;
  const resp = await fetch("/chat", {
    method: "POST",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify({ session_id: sessionId, message: q.value }),
  });
  const data = await resp.json();
  log().innerHTML += `<div><b>Бот:</b> ${data.reply}</div>`;
  q.value = "";
};

Теперь серверная часть. Она принимает вопрос, держит историю диалога через массив messages и отвечает. Внутри messages передаётся роль system (инструкция), а затем по очереди все реплики user и assistant — так модель видит полный контекст разговора. Системный промпт задаёт роль «оператор поддержки». Вариант на Python (Flask):

from flask import Flask, request, jsonify
import requests

app = Flask(__name__)
BASE_URL = "https://tokenmaster.ru/v1"
API_KEY = "sk-..."
SYSTEM_PROMPT = "Ты — оператор поддержки сайта. Отвечай вежливо и по делу."

dialogues = {}

@app.route("/chat", methods=["POST"])
def chat():
    data = request.json
    session_id = data.get("session_id", "default")
    history = dialogues.setdefault(session_id, [])
    history.append({"role": "user", "content": data.get("message", "")})

    payload = {
        "model": "deepseek-flash",
        "messages": [{"role": "system", "content": SYSTEM_PROMPT}] + history,
    }
    resp = requests.post(
        f"{BASE_URL}/chat/completions",
        headers={"Authorization": f"Bearer {API_KEY}"},
        json=payload,
        timeout=30,
    )
    resp.raise_for_status()
    reply = resp.json()["choices"][0]["message"]["content"]
    history.append({"role": "assistant", "content": reply})
    return jsonify({"reply": reply})

Тот же endpoint на Node.js (Express):

const express = require("express");
const app = express();
app.use(express.json());

const BASE_URL = "https://tokenmaster.ru/v1";
const API_KEY = "sk-...";
const SYSTEM_PROMPT = "Ты — оператор поддержки сайта. Отвечай вежливо и по делу.";
const dialogues = {};

app.post("/chat", async (req, res) => {
  const sessionId = req.body.session_id || "default";
  const history = (dialogues[sessionId] ||= []);
  history.push({ role: "user", content: req.body.message || "" });

  const payload = {
    model: "deepseek-flash",
    messages: [{ role: "system", content: SYSTEM_PROMPT }, ...history],
  };
  const resp = await fetch(`${BASE_URL}/chat/completions`, {
    method: "POST",
    headers: {
      "Content-Type": "application/json",
      Authorization: `Bearer ${API_KEY}`,
    },
    body: JSON.stringify(payload),
  });
  if (!resp.ok) throw new Error(`HTTP ${resp.status}`);
  const data = await resp.json();
  const reply = data.choices[0].message.content;
  history.push({ role: "assistant", content: reply });
  res.json({ reply });
});

app.listen(3000);

Оба варианта хранят историю в словаре по session_id — так каждый посетитель ведёт свой диалог, а модель «помнит» контекст, пока сервер не перезапущен.

Подключение TokenMaster

TokenMaster — это AI-шлюз с OpenAI-совместимым API, поэтому бот подключается к нему так же, как к обычному OpenAI:

Зарегистрируйтесь на tokenmaster.ru и создайте API-ключ в разделе «Ключи».
Укажите Base URL — https://tokenmaster.ru/v1.
Подставьте ключ вида sk-… в заголовок Authorization: Bearer sk-….
Выберите модель: deepseek-flash, glm-4.5, qwen и другие — каталог смотрите на tokenmaster.ru/pricing.

Почему TokenMaster? Один ключ и один баланс для моделей DeepSeek, GLM (Zhipu) и Qwen, оплата из России без привязки к зарубежной карте. Base URL единый — https://tokenmaster.ru/v1.

Проверка работы

Откройте страницу с виджетом и задайте вопрос из вашей базы знаний. Если бот ответил по существу — всё работает. Если появилась ошибка:

401 / invalid api key — ключ неверный или скопирован не целиком (он должен начинаться с sk-).
connection error — проверьте Base URL: ровно https://tokenmaster.ru/v1, без лишнего /chat/completions в конце.
insufficient quota — на балансе недостаточно средств, пополните его в разделе «Кошелёк».

Частые вопросы

Обязательно ли писать свой сервер? Для продакшена — да, потому что ключ нельзя хранить в браузере. Серверная прослойка скрывает ключ и заодно держит историю диалога.

Как сделать бота умнее? Вложите в SYSTEM_PROMPT текст базы знаний: описание продукта, цены, ответы на частые вопросы. Можно также подключить RAG-поиск по документам, если ответов много.

Какую модель выбрать для поддержки? deepseek-flash — хороший баланс цены и скорости для рутинных ответов. Для сложных формулировок подойдут старшие модели DeepSeek, GLM (Zhipu) или Qwen.

Итог

Чат-бот поддержки — это виджет на странице плюс маленький сервер, который держит контекст диалога и ходит в LLM через OpenAI-совместимый API. С TokenMaster достаточно указать Base URL https://tokenmaster.ru/v1, ключ sk-… и модель — а оплата из России и единый баланс избавляют от возни с зарубежными картами.