Interfaz de usuario para ChatGPT: creación de un chat interactivo

Introducción

En este módulo vamos a crear una interfaz de usuario moderna y reactiva para interactuar con la API de ChatGPT. Utilizaremos React para construir nuestra interfaz, pero los conceptos pueden adaptarse a otros frameworks.

Configuración del proyecto

Instalación de las dependencias

npm create vite@latest chatgpt-ui -- --template react
cd chatgpt-ui
npm install openai axios @chakra-ui/react @emotion/react @emotion/styled framer-motion

Estructura del proyecto

chatgpt-ui/
├── src/
│   ├── components/
│   │   ├── ChatWindow.jsx
│   │   ├── MessageInput.jsx
│   │   └── Message.jsx
│   ├── hooks/
│   │   └── useChatGPT.js
│   ├── App.jsx
│   └── main.jsx
└── .env

Creación de los componentes

1. El hook useChatGPT

// src/hooks/useChatGPT.js
import { useState } from 'react';
import OpenAI from 'openai';

const openai = new OpenAI({
  apiKey: import.meta.env.VITE_OPENAI_API_KEY
});

export function useChatGPT() {
  const [messages, setMessages] = useState([]);
  const [isLoading, setIsLoading] = useState(false);

  const sendMessage = async (content) => {
    try {
      setIsLoading(true);
      
      // Añadir el mensaje del usuario
      const userMessage = { role: 'user', content };
      setMessages(prev => [...prev, userMessage]);

      // Llamar a la API de ChatGPT
      const completion = await openai.chat.completions.create({
        model: "gpt-3.5-turbo",
        messages: [
          { role: "system", content: "Vous êtes un assistant utile." },
          ...messages,
          userMessage
        ],
      });

      // Añadir la respuesta del asistente
      const assistantMessage = completion.choices[0].message;
      setMessages(prev => [...prev, assistantMessage]);

      return assistantMessage;
    } catch (error) {
      console.error('Erreur lors de l\'envoi du message:', error);
      throw error;
    } finally {
      setIsLoading(false);
    }
  };

  return {
    messages,
    isLoading,
    sendMessage
  };
}