Как добавить ИИ на свой сайт — за один вечер

«Умный чат на сайте — это же сложно, целая команда нужна». Нет.

Кнопка «спроси ИИ» или чат-помощник — это один маленький кусочек на сервере (чтобы твой ключ не утёк) плюс десяток строк на странице. Реально собрать за вечер. Погнали по шагам.

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

• сайт, куда можно добавить код (даже одна HTML-страница подойдёт);
• место, где крутится серверная функция — Vercel, Netlify или любой хостинг с «serverless функциями» (у большинства это бесплатно на старте);
• API-ключ от ИИ-сервиса.

Всё. Дальше три шага.

Шаг 1. Возьми API-ключ

Заведи аккаунт у выбранного ИИ-провайдера и создай ключ в разделе для разработчиков. Ключ — это длинная строка вроде sk-ant-.... Скопируй её.

Важно: этот ключ — как пароль от твоего кошелька. По нему списываются деньги за запросы. Никогда не вставляй его прямо в код страницы — об этом весь следующий шаг.

Шаг 2. Спрячь ключ на сервере

Вот сердце всей затеи. Ключ живёт только на сервере, страница его не видит.

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

// /api/ask.js — маленькая серверная функция
export default async function handler(req, res) {
  const { question } = req.body;

  const r = await fetch("https://api.anthropic.com/v1/messages", {
    method: "POST",
    headers: {
      "x-api-key": process.env.AI_API_KEY,   // ключ из переменной окружения
      "anthropic-version": "2023-06-01",
      "content-type": "application/json",
    },
    body: JSON.stringify({
      model: "claude-opus-4-8",
      max_tokens: 400,
      messages: [{ role: "user", content: question }],
    }),
  });

  const data = await r.json();
  res.status(200).json({ answer: data.content[0].text });
}

Что тут происходит: функция берёт question от страницы, шлёт его ИИ вместе со спрятанным ключом и отдаёт назад чистый текст ответа. Ключ на страницу не попадает никогда. Как безопасно хранить сам ключ — отдельный разбор: как хранить ключи.

Шаг 3. Позови ИИ с сайта

Теперь на странице — поле ввода, кнопка и место под ответ. Кнопка зовёт твою функцию:

<input id="q" placeholder="Спроси что-нибудь..." />
<button onclick="ask()">Спросить</button>
<p id="out"></p>

<script>
async function ask() {
  const question = document.getElementById("q").value;
  const r = await fetch("/api/ask", {
    method: "POST",
    headers: { "content-type": "application/json" },
    body: JSON.stringify({ question }),
  });
  const data = await r.json();
  document.getElementById("out").innerText = data.answer;
}
</script>

Страница шлёт вопрос своей функции (/api/ask), а не напрямую к ИИ. Ключа она не знает — и знать не должна.

Что получится

Открываешь сайт, пишешь вопрос, жмёшь кнопку — через секунду появляется ответ. Всё, у тебя на сайте живёт ИИ.

Дальше — доводишь под себя. Хочешь, чтобы бот отвечал в определённом стиле? Задай ему роль в начале. Тут сравнение, как это влияет:

Разница огромная: слева — безликий бот, справа — помощник именно твоего сайта. Больше приёмов — в разборе как написать хороший промпт.

Почему нельзя вызвать ИИ прямо со страницы?

Потому что код страницы видит каждый. Открыл инструменты разработчика — и твой ключ у него в руках. А значит, и твой счёт. Поэтому ключ всегда прячут за серверной функцией: страница говорит со «своим» сервером, сервер — с ИИ.

Сколько это стоит?

Ты платишь за объём текста в запросах и ответах. Для простого бота на сайте это копейки — центы за тысячи вопросов. Чтобы не переплачивать: ставь короткий max_tokens, для простых задач бери модель попроще и быстрее. Подробно — в разборе как сэкономить на запросах к ИИ.