React чат с GPT

npm install openai

// ChatComponent.tsx
import { useState } from 'react';
import OpenAI from 'openai';

const client = new OpenAI({
  apiKey: 'sk-aitunnel-xxx',
  baseURL: 'https://api.aitunnel.ru/v1/',
  dangerouslyAllowBrowser: true // Только для демо!
});

interface Message {
  role: 'user' | 'assistant';
  content: string;
}

export function ChatComponent() {
  const [messages, setMessages] = useState<Message[]>([]);
  const [input, setInput] = useState('');
  const [loading, setLoading] = useState(false);

  const sendMessage = async () => {
    if (!input.trim()) return;

    const userMessage: Message = { role: 'user', content: input };
    setMessages(prev => [...prev, userMessage]);
    setInput('');
    setLoading(true);

    try {
      const response = await client.chat.completions.create({
        model: 'gpt-5.2',
        messages: [...messages, userMessage]
      });

      const assistantMessage: Message = {
        role: 'assistant',
        content: response.choices[0].message.content || ''
      };
      setMessages(prev => [...prev, assistantMessage]);
    } catch (error) {
      console.error(error);
    } finally {
      setLoading(false);
    }
  };

  return (
    <div className="chat-container">
      <div className="messages">
        {messages.map((msg, i) => (
          <div key={i} className={`message ${msg.role}`}>
            {msg.content}
          </div>
        ))}
        {loading && <div className="loading">Думаю...</div>}
      </div>
      <div className="input-area">
        <input
          value={input}
          onChange={e => setInput(e.target.value)}
          onKeyPress={e => e.key === 'Enter' && sendMessage()}
          placeholder="Введите сообщение..."
        />
        <button onClick={sendMessage} disabled={loading}>
          Отправить
        </button>
      </div>
    </div>
  );
}

const sendMessageStreaming = async () => {
  // ... setup ...

  const stream = await client.chat.completions.create({
    model: 'gpt-5.2',
    messages: [...messages, userMessage],
    stream: true
  });

  let content = '';
  for await (const chunk of stream) {
    content += chunk.choices[0]?.delta?.content || '';
    setMessages(prev => {
      const updated = [...prev];
      updated[updated.length - 1] = { role: 'assistant', content };
      return updated;
    });
  }
};

// Не храните ключ на фронтенде!
const response = await fetch('/api/chat', {
  method: 'POST',
  body: JSON.stringify({ messages })
});