Превращаем сайт в ИИ-ассистента: ChatGPT API на JavaScript

Зачем вашему сайту мозги? ChatGPT API + JavaScript

Представьте: пользователь заходит на ваш сайт, а там не просто статичная страница, а живой ассистент. Он пишет код, переводит текст, генерирует идеи или просто поддерживает диалог. Звучит как научная фантастика? А на самом деле это пара десятков строк на JavaScript и один API-запрос к ChatGPT.

В этой статье мы разберем, как подключить ChatGPT API на JavaScript — от регистрации ключа до полноценного чат-бота. Вы узнаете, как отправлять запросы, обрабатывать ошибки и выжимать максимум из нейросети. Поехали!

Что такое ChatGPT API и зачем он вам

OpenAI API — это мост между вашим кодом и гигантской языковой моделью (GPT-4, GPT-3.5). Вы отправляете текст (промпт), а модель возвращает сгенерированный ответ. Всё просто, но возможности — безграничны.

На JavaScript интеграция особенно удобна: вы можете использовать fetch в браузере или axios / node-fetch на сервере (Node.js). Никаких сложных библиотек — только HTTP и JSON.

Где это пригодится на образовательном сайте вроде PythonLib:

• Интерактивный помощник — отвечает на вопросы по Python.
• Генератор кода — пишет примеры по запросу пользователя.
• Проверка домашних заданий — анализирует код ученика.
• Чат-бот для техподдержки — отвечает 24/7.

Шаг 1. Получаем API-ключ OpenAI

Без ключа никуда. Зайдите на platform.openai.com, зарегистрируйтесь и перейдите в раздел API Keys. Нажмите Create new secret key — скопируйте его сразу. Храните ключ в секрете, не вставляйте в клиентский код!

Для тестов хватит бесплатного баланса (обычно $5-18). Но помните: запросы к модели стоят денег, хоть и копейки.

Шаг 2. Простейший запрос на JavaScript (Node.js)

Самый быстрый способ попробовать — написать скрипт на Node.js. Установите node-fetch (или используйте встроенный fetch в Node 18+).

// chatgpt.js
import fetch from 'node-fetch';

const API_KEY = 'ваш_секретный_ключ';
const API_URL = 'https://api.openai.com/v1/chat/completions';

async function askChatGPT(prompt) {
  const response = await fetch(API_URL, {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
      'Authorization': `Bearer ${API_KEY}`
    },
    body: JSON.stringify({
      model: 'gpt-3.5-turbo', // или gpt-4
      messages: [
        { role: 'user', content: prompt }
      ],
      temperature: 0.7,
      max_tokens: 500
    })
  });

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

// Использование
const answer = await askChatGPT('Напиши функцию на Python для сортировки списка');
console.log(answer);

Запустите node chatgpt.js — и нейросеть ответит вам кодом. Магия!

Разбираем структуру запроса

В теле запроса мы передаём:

• model — какая версия GPT (gpt-3.5-turbo быстрее и дешевле, gpt-4 умнее).
• messages — массив сообщений. Можно добавить system (инструкция модели), assistant (контекст) и user.
• temperature — креативность ответа (0 — строго факты, 1 — творчество).
• max_tokens — максимальная длина ответа в токенах (1 токен ≈ 0.75 слова).

Шаг 3. Интеграция ChatGPT API на JavaScript в браузере

Тут есть нюанс: никогда не отправляйте API-ключ из клиентского кода — его украдут. Используйте серверный прокси (Node.js, Python) или Edge Functions.

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

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

  const data = await response.json();
  document.getElementById('answer').textContent = data.reply;
}

// HTML-кнопка
document.getElementById('send-btn').addEventListener('click', () => {
  const msg = document.getElementById('user-input').value;
  sendMessage(msg);
});

На сервере (например, Express.js) вызовете тот же код, что в шаге 2, только добавив заголовок с ключом.

Шаг 4. Добавляем контекст: system-сообщение

Чтобы ChatGPT вёл себя как эксперт по Python, а не просто болтал, задайте ему роль через system message:

messages: [
  { 
    role: 'system', 
    content: 'Ты — опытный Python-разработчик. Отвечай кратко, с примерами кода. Если вопрос не по теме — вежливо отказывай.' 
  },
  { 
    role: 'user', 
    content: 'Как написать декоратор для логирования?' 
  }
]

Теперь ответы будут строже и полезнее. Это основа промпт-инжиниринга — искусства задавать правильные вопросы нейросети.

Шаг 5. Обработка ошибок и лимитов

API не идеален. Будьте готовы к:

• 429 Too Many Requests — превышен лимит запросов. Вставьте задержку или очередь.
• 401 Unauthorized — неверный ключ.
• 500 Server Error — временные проблемы OpenAI.

Пример обработки ошибок:

async function safeAsk(prompt) {
  try {
    const answer = await askChatGPT(prompt);
    return { success: true, data: answer };
  } catch (error) {
    if (error.status === 429) {
      console.error('Слишком много запросов. Подождите.');
      return { success: false, error: 'rate_limit' };
    }
    console.error('Ошибка API:', error.message);
    return { success: false, error: 'api_error' };
  }
}

Шаг 6. Стриминг ответов (режим реального времени)

Пользователи не любят ждать. Включите stream: true, чтобы ответ появлялся по словам, как в настоящем чате:

const response = await fetch(API_URL, {
  method: 'POST',
  headers: { /* ... */ },
  body: JSON.stringify({
    model: 'gpt-3.5-turbo',
    messages: [{ role: