Aprende a construir chatbots conversacionales con IA usando Gemini, Next.js y Firebase. Implementa respuestas inteligentes y mejora la interacción en tu sitio web.

Aprende a crear un chatbot

Paso a Paso para Crear un Chatbot Inteligente con Next.js y Firebase

bashCopiar código
npx create-next-app@latest my-chatbot --ts
cd my-chatbot

bashCopiar código
npm install firebase @heroicons/react

 e iniciar sesión con una cuenta de Gmail.

 (arriba a la derecha) que nos llevará a la vista donde tenemos nuestros proyectos de Firebase, allí seleccionaremos la opción 

Esa opción nos llevará a la siguiente vista, donde crearemos el proyecto:

El paso 1 de la creación de un proyecto en Firebase nos consultará el nombre de nuestro proyecto:

 la configuración de Analytics ya que para efectos del taller no será necesario y le damos en 

Luego, esperamos mientras se crea el proyecto (puede tardar unos minutos):

Una vez termina su creación se ve de la siguiente manera, allí daremos click en 

Y así se verá nuestro dashboard del nuevo proyecto

En dicho dashboard, vamos a seleccionar el botón con los símbolos

, ésto nos permitirá crear las credenciales para conectarlo con nuestra app web, y allí nos pedirá registrar el nombre de nuestra aplicación web y haremos click en el botón 

El siguiente paso, nos mostrará sobre la instalación de firebase (sin embargo no será necesario por que nuestro proyecto base ya tiene firebase instalado) y luego nos arrojará las credenciales de nuestra app.

Por ultimo vamos a agregar las credenciales en el archivo 

 en la raíz de tu proyecto donde las usaremos mas adelante.

envCopiar código
NEXT_PUBLIC_FIREBASE_API_KEY=your-api-key
NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN=your-auth-domain
NEXT_PUBLIC_FIREBASE_PROJECT_ID=your-project-id
NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET=your-storage-bucket
NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID=your-messaging-sender-id
NEXT_PUBLIC_FIREBASE_APP_ID=your-app-id

En la consola de Firebase, iremos a la opción que dice 

 nos muestra las diferentes extensiones que podemos usar, en nuestro caso, buscamos la que dice 

Ésto nos redirigirá a la siguiente vista, en donde seleccionaremos una opción que se muestra más abajo llamada 

Cuenta de Facturación creada en el primer paso

 del workshop, seleccionar dicha opción y luego 

Deberá aparecerte el siguiente mensaje, podremos cerrarla y continuar:

Allí cambiaremos la siguiente información:

  (el nombre de nuestra colección en Firestore).

Allí esperaremos unos minutos mientras se instala…

Aquí veremos cómo podemos probar dicha extensión en nuestro proyecto web, sin embargo, nosotros/as ya lo tomamos en cuenta en pasos anteriores.

Para probar que nuestra extensión funciona correctamente, podemos ir a firestore, prueba presionando en el botón de 

 y agregarle al documento un parámetro llamado 

  con un saludo cómo: “Hola cómo estás?” y verás que en cuestión de segundos Gemini generará la respuesta.

Una vez vista la respuesta ya estamos listos para crear nuestro código fuente!

Organiza tu proyecto con la siguiente estructura:

luaCopiar código
my-chatbot/
├── public/
│   ├── bot.png
│   └── man.png
├── src/
│   ├── app/
│   │   ├── chat/
│   │   │   └── page.tsx
│   │   └── page.tsx
│   ├── components/
│   │   └── FloatingChatbot.tsx
│   ├── hooks/
│   │   └── useChat.ts
│   └── lib/
│       └── firebaseConfig.ts
├── .env.local
├── package.json
└── tailwind.config.js



5. Configuración de Firebase en el Proyecto

typescriptCopiar código
// src/lib/firebaseConfig.ts
import { initializeApp } from 'firebase/app';
import { getFirestore } from 'firebase/firestore';
import { getAuth } from 'firebase/auth';

const firebaseConfig = {
  apiKey: process.env.NEXT_PUBLIC_FIREBASE_API_KEY,
  authDomain: process.env.NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN,
  projectId: process.env.NEXT_PUBLIC_FIREBASE_PROJECT_ID,
  storageBucket: process.env.NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET,
  messagingSenderId: process.env.NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID,
  appId: process.env.NEXT_PUBLIC_FIREBASE_APP_ID,
};

const app = initializeApp(firebaseConfig);
const db = getFirestore(app);
const auth = getAuth(app);

export { db, auth };



typescriptCopiar código
// src/hooks/useChat.ts
import { useState, useEffect } from 'react';
import { db } from '../lib/firebaseConfig';
import { collection, addDoc, query, orderBy, onSnapshot, serverTimestamp, doc } from 'firebase/firestore';

const useChat = (userId: string, conversationId: string, userProfilePicUrl: string, botProfilePicUrl: string) => {
  const [message, setMessage] = useState('');
  const [chat, setChat] = useState([]);
  const [isTyping, setIsTyping] = useState(false);

  useEffect(() => {
    const q = query(
      collection(db, 'conversations', conversationId, 'messages'),
      orderBy('timestamp', 'asc')
    );
    const unsubscribe = onSnapshot(q, (querySnapshot) => {
      const messages = querySnapshot.docs.map((doc) => doc.data());
      setChat(messages);
    });

    return () => unsubscribe();
  }, [conversationId]);

  const handleSendMessage = async () => {
    if (message.trim()) {
      const userMessage = {
        prompt: message,
        sender: userId,
        timestamp: serverTimestamp(),
        profilePicUrl: userProfilePicUrl,
      };

      setChat((prevChat) => [...prevChat, userMessage]);
      setMessage('');
      setIsTyping(true);

      try {
        await addDoc(collection(db, 'conversations', conversationId, 'messages'), userMessage);

        const botResponseRef = await addDoc(collection(db, 'generate'), {
          prompt: message,
        });

        const unsubscribe = onSnapshot(doc(db, 'generate', botResponseRef.id), async (snap) => {
          if (snap.get('response')) {
            const botMessage = {
              prompt: snap.get('response'),
              sender: 'bot',
              timestamp: serverTimestamp(),
              profilePicUrl: botProfilePicUrl,
            };

            await addDoc(collection(db, 'conversations', conversationId, 'messages'), botMessage);
            setChat((prevChat) => [...prevChat, botMessage]);
            setIsTyping(false);
            unsubscribe();
          }
        });
      } catch (error) {
        console.error("Error adding document: ", error);
      }
    }
  };

  const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
    if (e.key === 'Enter') {
      handleSendMessage();
    }
  };

  return {
    message,
    setMessage,
    chat,
    isTyping,
    handleSendMessage,
    handleKeyDown,
  };
};

export default useChat;

