Как добавить нейросеть в JavaScript-сайт

Есть 2 основных пути:

Вариант 1: Готовый API (рекомендую для старта)

Не грузите модель на сайте — просто отправляйте запросы на внешний API.

Пример с OpenAI (или аналогичным: Groq, DeepSeek, Anthropic):

async function askAI(question) {
  const response = await fetch("https://api.openai.com/v1/chat/completions", {
    method: "POST",
    headers: {
      "Content-Type": "application/json",
      "Authorization": "Bearer ВАШ_API_КЛЮЧ"
    },
    body: JSON.stringify({
      model: "gpt-4o-mini",
      messages: [
        { role: "system", content: "Ты — помощник на сайте. Отвечай кратко." },
        { role: "user", content: question }
      ]
    })
  });

  const data = await response.json();
  return data.choices[0].message.content;
}

Важно: ключ API нельзя хранить в клиентском JS — его увидит любой посетитель. Нужен простой бэкенд-прокси:

// server.js (Node.js, без фреймворков)
const http = require("http");

http.createServer(async (req, res) => {
  if (req.method === "POST" && req.url === "/api/ask") {
    let body = "";
    req.on("data", chunk => body += chunk);
    req.on("end", async () => {
      const { question } = JSON.parse(body);
      // ключ хранится только на сервере
      const r = await fetch("https://api.openai.com/v1/chat/completions", {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
          "Authorization": `Bearer ${process.env.OPENAI_KEY}`
        },
        body: JSON.stringify({
          model: "gpt-4o-mini",
          messages: [{ role: "user", content: question }]
        })
      });
      const data = await r.json();
      res.setHeader("Content-Type", "application/json");
      res.end(JSON.stringify({ answer: data.choices[0].message.content }));
    });
  }
}).listen(3000);

Фронтенд:

async function askAI(question) {
  const r = await fetch("/api/ask", {
    method: "POST",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify({ question })
  });
  const data = await r.json();
  return data.answer;
}

Вариант 2: Модель прямо в браузере (WebLLM / Transformers.js)

Если не хотите бэкенд и готовы к компромиссам (маленькие модели, медленнее, работает не везде):

import { pipeline } from "https://cdn.jsdelivr.net/npm/@xenova/transformers@2.17.2";

const generator = await pipeline("text-generation", "Xenova/Llama-3.2-1B-Instruct");
const output = await generator("Привет! Кто ты?");
console.log(output[0].generated_text);

Минусы: модель качается в браузер (сотни МБ), качество ниже, нужен мощный компьютер у посетителя.

С чего начать — план

1. Заведите API-ключ (OpenAI, Groq — у Groq есть бесплатный тариф, DeepSeek — дешёвый).
2. Поднимите минимальный Node-сервер (10 строк, как выше) как прокси.
3. Свяжите его с формой на сайте: поле ввода → fetch("/api/ask") → вывести ответ.
4. Добавьте историю диалога (messages массив), системный промпт, ограничение длины ответа.

Для чата-виджета на сайте обычно хватает простой формы + прокси + gpt-4o-mini/llama-3.3-70b — это дёшево и работает стабильно.

Для сайта на чистом JS проще всего не «встраивать нейросеть» внутрь страницы, а обращаться к API готовой модели (OpenAI, Anthropic, Google Gemini, Mistral и др.). Браузер просто отправляет вопрос и получает ответ.

Шаг 1. Получите API-ключ

Зарегистрируйтесь у провайдера (например, platform.openai.com), создайте ключ и пополните баланс. Оплата обычно почасовая, за токены.

Шаг 2. Не храните ключ в браузерном JS

Ключ, записанный во фронтенд-код, увидит любой посетитель, и его украдут. Нужен промежуточный сервер (прокси), который хранит ключ и пересылает запросы. Это может быть:

• простой Node.js/Express сервер;
• serverless-функция (Vercel, Netlify, Cloudflare Workers);
• PHP или любой другой бэкенд, который у вас уже есть.

Шаг 3. Серверная часть (пример на Node.js + Express)

// server.js
import express from "express";

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

app.post("/api/chat", async (req, res) => {
  const userMessage = req.body.message;

  const response = await fetch("https://api.openai.com/v1/chat/completions", {
    method: "POST",
    headers: {
      "Content-Type": "application/json",
      "Authorization": `Bearer ${process.env.OPENAI_API_KEY}`
    },
    body: JSON.stringify({
      model: "gpt-4o-mini",
      messages: [
        { role: "system", content: "Ты помощник на сайте интернет-магазина. Отвечай кратко." },
        { role: "user", content: userMessage }
      ]
    })
  });

  const data = await response.json();
  res.json({ reply: data.choices[0].message.content });
});

app.listen(3000, () => console.log("Server started on port 3000"));

Запуск: OPENAI_API_KEY=ваш_ключ node server.js (нужен Node 18+ и пакет express).

Шаг 4. Клиентская часть (чистый JS)

<div id="chat"></div>
<input id="input" placeholder="Задайте вопрос">
<button id="send">Отправить</button>

<script>
  document.getElementById("send").addEventListener("click", async () => {
    const input = document.getElementById("input");
    const text = input.value.trim();
    if (!text) return;

    const chat = document.getElementById("chat");
    chat.innerHTML += `<p><b>Вы:</b> ${text}</p>`;
    input.value = "";

    const res = await fetch("/api/chat", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ message: text })
    });
    const data = await res.json();
    chat.innerHTML += `<p><b>Бот:</b> ${data.reply}</p>`;
  });
</script>

Для вывода ответа лучше использовать textContent вместо innerHTML, чтобы избежать XSS, но в этом примере для краткости оставлен innerHTML.

Что делать дальше

1. Добавьте историю сообщений в массив messages, чтобы бот помнил контекст.
2. Опишите в system-промпте информацию о вашем сайте: товары, доставку, часы работы. Для больших объемов данных используйте RAG (поиск по своей базе перед запросом к модели).
3. Ограничьте количество запросов с одного IP, чтобы не потратить бюджет впустую.
4. Для бесплатного старта подойдут локальные модели через Ollama, но для сайта проще взять облачный API.

Если скажете, какой у вас бэкенд и какие вопросы будут задавать посетители, подскажу, какой вариант удобнее.

можно использовать доп плагины, или на git hub посмотреть

Проще всего подключить нейросеть через api, а ключ хранить на сервере

Для чат-бота на сайте проще всего подключить готовую языковую модель через API. Сам сайт может оставаться на чистом JavaScript, но запрос к нейросети нужно отправлять через сервер: секретный API-ключ нельзя хранить в браузерном коде — его смогут скопировать посетители.

Как это устроено

1. Посетитель пишет вопрос на сайте.
2. JavaScript отправляет его вашему серверу.
3. Сервер обращается к API нейросети и возвращает ответ.
4. Сайт показывает ответ в чате.

Минимальный пример

На сервере Node.js установите Express:

npm install express

Создайте server.js:

import express from "express";

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

app.post("/api/chat", async (req, res) => {
  try {
    const response = await fetch("АДРЕС_API_НЕЙРОСЕТИ", {
      method: "POST",
      headers: {
        "Authorization": `Bearer ${process.env.AI_API_KEY}`,
        "Content-Type": "application/json"
      },
      body: JSON.stringify({
        model: "НАЗВАНИЕ_МОДЕЛИ",
        messages: [{ role: "user", content: req.body.message }]
      })
    });

    const data = await response.json();
    res.json({ answer: data.choices[0].message.content });
  } catch {
    res.status(500).json({ error: "Не удалось получить ответ" });
  }
});

app.listen(3000);

АДРЕС_API_НЕЙРОСЕТИ и НАЗВАНИЕ_МОДЕЛИ возьмите из документации выбранного провайдера. Ключ храните в переменной окружения AI_API_KEY, а не в server.js и тем более не в HTML или JavaScript страницы.

На сайте запрос будет выглядеть так:

async function askAI(message) {
  const response = await fetch("/api/chat", {
    method: "POST",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify({ message })
  });

  const data = await response.json();
  return data.answer;
}

Если сайт размещён только как статические файлы, вместо собственного сервера подойдут serverless-функции у хостинга: они выполняют роль безопасного промежуточного API.

Для первого прототипа достаточно сделать поле ввода и вывод ответа. Перед запуском для посетителей добавьте ограничение частоты запросов и лимит длины сообщения: API обычно платные, и без ограничений ими можно злоупотребить.