ChatGPT API интеграция на сайт: пошаговая инструкция

ChatGPT API интеграция на сайт начинается не с кода, а с двух решений: где хранить ключ и кто платит за токены. За два года я подключал OpenAI к лендингам на Tilda, к магазину на WooCommerce и к десятку ботов на aiogram - и почти все затыки сводились к трём вещам: ключ, утёкший в браузер, счёт на $80 за одну ночь из-за зациклившихся запросов и таймаут, когда модель отвечает дольше, чем живёт соединение. Ниже - весь путь от регистрации до рабочего чата на странице: с кодом, который можно копировать, и реальными цифрами по деньгам.

Что понадобится до первого запроса

Собрать минимальный стек реально за полдня. Набор такой:

аккаунт на platform.openai.com с привязанной картой (российские карты не проходят - плачу через зарубежную или сервис-посредник);
API-ключ вида sk-… из личного кабинета OpenAI;
серверная часть - любой бэкенд, который примет сообщение с сайта и сходит в OpenAI: PHP на обычном хостинге, Node.js, Python-скрипт или облачная функция;
$5-10 на балансе для тестов - этого хватает на тысячи сообщений через gpt-4o-mini.

Почему запрос не идёт напрямую из браузера

Ключ OpenAI - доступ к вашему кошельку. Если положить его в JavaScript на странице, любой человек через DevTools вытащит ключ за минуту и будет генерировать тексты за ваш счёт. Поэтому схема всегда одна: браузер шлёт сообщение на ваш сервер, сервер добавляет ключ и обращается к API, ответ возвращается на страницу. Ключ не покидает сервер - это первое, что я объясняю заказчикам, которые нашли в интернете скрипт «вставь ключ в HTML и готово».

Получаем API-ключ и считаем бюджет

Регистрация занимает минут десять:

заходите на platform.openai.com, раздел API keys, создаёте новый ключ и сразу копируете - второй раз его не покажут;
в разделе Billing пополняете баланс и обязательно выставляете лимит расходов (Usage limits). Я ставлю месячный потолок, чтобы кривой цикл не съел бюджет за ночь;
ключ кладёте в переменные окружения на сервере, а не в код и не в git.

Деньги считаются в токенах: грубо 1 токен ≈ 0,75 слова для английского, для русского чуть дороже. Ориентир по моделям на момент написания (прайс на openai.com меняется, сверяйтесь):

Модель	Ввод, $ / 1М токенов	Вывод, $ / 1М токенов	Где беру
gpt-4o-mini	~0,15	~0,60	чат-виджеты, ответы по FAQ, сортировка заявок
gpt-4o	~2,50	~10	сложные ответы, разбор длинных текстов
o‑серия (reasoning)	дороже в разы	дороже в разы	логика и код, точечно

На практике виджет поддержки на gpt-4o-mini с потоком ~500 диалогов в месяц обходится в пределах пары долларов. Пугающие счета появляются, когда в модель шлют весь каталог товаров в каждом запросе, - следите за размером контекста, а не только за числом обращений.

Бесплатный материал

🎁 Полезный скрипт в подарок

Подпишитесь на Telegram - пришлю готовый скрипт по этой теме.

Получить в Telegram →

Без спама. Отписка в 1 клик.

Первый запрос к API: серверная прослойка

Проверить ключ проще всего через curl прямо из терминала:

curl https://api.openai.com/v1/chat/completions 
  -H "Authorization: Bearer $OPENAI_API_KEY" 
  -H "Content-Type: application/json" 
  -d '{"model":"gpt-4o-mini","messages":[{"role":"user","content":"Привет"}]}'

Тот же запрос из Node.js - это и есть ваш эндпоинт, к которому обращается фронт:

import OpenAI from "openai";
const client = new OpenAI({ apiKey: process.env.OPENAI_API_KEY });

const completion = await client.chat.completions.create({
  model: "gpt-4o-mini",
  max_tokens: 500,
  messages: [
    { role: "system", content: "Ты консультант интернет-магазина. Отвечай кратко." },
    { role: "user", content: userMessage }
  ]
});
res.json({ reply: completion.choices[0].message.content });

На Python (пригодится для ботов и парсеров) выходит короче:

from openai import OpenAI
client = OpenAI()  # ключ берётся из переменной окружения

resp = client.chat.completions.create(
    model="gpt-4o-mini",
    messages=[{"role": "user", "content": text}],
)
answer = resp.choices[0].message.content

Три вещи добавляю сразу: system-сообщение с ролью и правилами общения, ограничение max_tokens на длину ответа и обработку ошибки, чтобы при сбое OpenAI пользователь видел внятное сообщение, а не белый экран.

Встраиваем чат на сайт: Tilda, WordPress, Next.js

Фронтенд везде одинаковый - маленький fetch на ваш эндпоинт:

const r = await fetch("/api/chat", {
  method: "POST",
  headers: { "Content-Type": "application/json" },
  body: JSON.stringify({ message: text })
});
const data = await r.json();
renderReply(data.reply);

Отличается только то, где живёт серверная часть.

Tilda

Своего бэкенда у Tilda нет, поэтому прослойку выношу в облачную функцию или на отдельный маленький сервер, а в блок T123 или Zero-блок вставляю скрипт с fetch на этот адрес. Так делал форму подбора товара: пользователь описывает, что ищет, скрипт шлёт запрос, ответ подставляется прямо в блок.

WordPress и WooCommerce

В WordPress прослойку удобно оформить REST-роутом через register_rest_route - ключ лежит в wp-config.php, а фронт стучится на /wp-json/. В связке с WooCommerce так собирал ассистента, который по составу корзины подсказывает сопутствующие позиции и отвечает на вопросы по доставке.

Next.js

В Next.js всё в одном проекте: обработчик в app/api/chat/route.ts, а на клиенте - стриминг ответа по мере генерации, чтобы текст набегал как в самом ChatGPT, а не появлялся целиком спустя пять секунд. Для лендинга с ассистентом это заметно улучшает ощущение скорости.

Боевые сценарии подключения: боты, поддержка, n8n

Голый чат-виджет - только верхушка. Сценарии, которые реально приносят пользу:

Telegram-бот на aiogram - принимает вопрос, отвечает через API и при необходимости передаёт диалог живому оператору. Сюда же прикручиваю оплату через T‑Bank и расчёт доставки СДЭК, если бот продаёт;
первая линия поддержки - модель закрывает типовые вопросы про заказ и возврат, а сложное эскалирует человеку;
автоматизация в n8n - узел OpenAI внутри сценария разбирает входящие письма, сортирует заявки и пишет черновики ответов. Удобно, когда не хочется поднимать отдельный бэкенд;
чат-бот с базой знаний (RAG) - модель отвечает строго по вашим документам, а не фантазирует. Это уже не пара строк, а поиск по векторной базе плюс продуманный промпт.

Чтобы не собирать каждый раз с нуля, обёртку над API, обработку ошибок и стриминг держу под рукой - готовые скрипты для интеграции ChatGPT экономят пару дней на старте проекта.

Лимиты, безопасность ключа и стоимость интеграции

Лимиты и ошибки

OpenAI отдаёт код 429, когда упираетесь в rate limit, - ставьте повтор с нарастающей задержкой (exponential backoff). Ответы дольше 30-60 секунд ломают обычный HTTP-запрос на многих хостингах, поэтому для длинных генераций беру стриминг или фоновую очередь, а не синхронный запрос из формы.

Безопасность ключа

Ключ - только в переменных окружения. Плюс лимит расходов в биллинге, отдельный ключ на каждый проект (чтобы отозвать один, не сломав остальные) и элементарная защита эндпоинта от спама: капча или лимит запросов с одного IP. Иначе конкурент за ночь нагенерирует вам счёт просто в цикле.

Стоимость и сроки

Разброс по задачам:

AI-интеграция OpenAI/Claude под ключ со своим бэкендом - от 50 000 ₽;
Telegram-бот с ChatGPT - от 30 000 ₽;
чат-бот с базой знаний на RAG - от 50 000 ₽;
сценарий автоматизации с узлом OpenAI в n8n - от 25 000 ₽;
простой скрипт-доработка на Tilda - от 3 000 ₽, комплексная интеграция с CRM, оплатой и доставкой - от 40 000 ₽.

По срокам: базовый чат-виджет - 3-5 рабочих дней, бот с оплатой и доставкой - 1-2 недели, RAG-система - от двух недель. Если сначала хочется прикинуть архитектуру и бюджет, беру консультацию от 3 000 ₽ - на ней уже видно, что реально нужно, а что лишнее. Для сравнения: в студиях подобную интеграцию нередко считают вилками в 150 000-300 000 ₽, но это рыночный ориентир, а не мой прайс.

Искусственный интеллект для бизнеса

AI / Claude API

от 50 000 ₽

Подробнее →

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

Можно ли подключить ChatGPT API без программиста?

Частично. Через n8n или готовые конструкторы реально собрать простой сценарий без кода - узел OpenAI принимает текст и возвращает ответ. Но как только появляется своя логика, оплата, база знаний или защита ключа, без бэкенда не обойтись. Голый виджет на конструкторе легко превращается в дыру, через которую списывают деньги с вашего баланса.

Сколько стоят токены и как не разориться?

На gpt-4o-mini тысяча коротких диалогов обходится в считанные доллары. Главное - выставить лимит расходов в биллинге, не слать в каждый запрос лишний контекст и ограничивать max_tokens на ответ. Именно раздутый контекст, а не число пользователей, чаще всего раздувает счёт.

Работает ли ChatGPT API в России?

Сам API доступен, упирается всё в оплату и сеть. Российская карта на балансе не проходит, поэтому плачу зарубежной картой или через посредника, а серверную прослойку размещаю на хостинге, у которого есть доступ к api.openai.com. Пользователь на сайте при этом ничего не настраивает - все запросы идут через ваш сервер.

Чем ChatGPT API отличается от подписки ChatGPT Plus?

Подписка - это веб-интерфейс для человека. API - программный доступ, который встраивается в сайт, бота или CRM и оплачивается по факту использования, за токены. Для интеграции в продукт нужен именно API: подписка Plus не даёт ключа и не подключается к вашему коду.

ChatGPT API интеграция на сайт: пошаговая инструкция подключения