Cree un chatbot con inteligencia artificial más rápido que su café matutino con esta guía

Los chatbots con tecnología de IA pueden mejorar la experiencia del usuario y automatizar las respuestas de manera eficaz. En este tutorial, aprenderá a crear rápidamente un chatbot con React , Vite y la API de Cohere, con una integración de backend con Express . Con su simplicidad y velocidad, Vite facilita la configuración de aplicaciones JavaScript modernas.

Esta arquitectura evita la exposición de claves API confidenciales al enrutar solicitudes a través de un servidor.

Lo que aprenderás

• Configurando un proyecto básico de React con Vite.
• Uso de la plataforma de inteligencia artificial de Cohere para la generación de lenguaje natural.
• Creación de un servidor Express para interactuar con la API de Cohere.
• Construyendo una interfaz de chatbot responsiva en React.

Prerrequisitos

• Conocimientos básicos de React, JavaScript y Node.js.
• Node.js instalado en su sistema.
• Una cuenta Cohere (regístrese aquí para obtener una clave API)

Paso 1: Configura tu proyecto React

1. Crea un nuevo proyecto React usando Vite:

   
   

 npm create vite@latest ai-chatbot -- --template react cd ai-chatbot npm install

2. Inicie el servidor de desarrollo:

   
   

 npm run dev

3. Abra el proyecto en su editor de código favorito.

Paso 2: Crear el servidor Express

1. Inicialice un nuevo proyecto Node.js en el mismo directorio:

    mkdir server && cd server npm init -y

2. Instalar los paquetes necesarios:

    npm install express cors dotenv node-fetch

3. Actualice el archivo package.json para usar el module de tipo para habilitar el uso de importaciones nativas:

    { "name": "server", "version": "1.0.0", "description": "", "main": "index.js", "type": "module", "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "keywords": [], "author": "", "license": "ISC", "dependencies": { "cors": "^2.8.5", "dotenv": "^16.4.7", "express": "^4.21.2", "node-fetch": "^3.3.2" } }

4. Cree un archivo llamado server.js en el directorio server y agregue el siguiente código:

    import 'dotenv/config' import express from 'express'; import cors from 'cors'; import fetch from 'node-fetch'; const app = express(); const PORT = 5000; app.use(cors()); app.use(express.json()); app.post('/generate', async (req, res) => { const { prompt } = req.body; if (!prompt) { return res.status(400).json({ error: 'Prompt is required' }); } try { const response = await fetch('https://api.cohere.ai/v1/generate', { method: 'POST', headers: { 'Content-Type': 'application/json', Authorization: `Bearer ${process.env.COHERE_API_KEY}`, }, body: JSON.stringify({ model: 'command-xlarge-nightly', prompt: `User: ${prompt}\nBot:`, max_tokens: 100, }), }); const data = await response.json(); res.json(data.generations[0].text.trim()); } catch (error) { console.error('Error calling Cohere API:', error); res.status(500).json({ error: 'Failed to generate response' }); } }); app.listen(PORT, () => { console.log(`Server running on http://localhost:${PORT}`); });

5. Cree un archivo .env en el directorio server :

    COHERE_API_KEY=your_cohere_api_key_here

6. Iniciar el servidor:

    node server.js

   
   

   Importante: nunca compartas tu archivo .env ni lo envíes al control de versiones. Agrega .env a tu archivo .gitignore .

   
   

Paso 3: Construir la interfaz del chatbot

Actualice el archivo App.jsx con el siguiente código:

 import React, { useState } from 'react'; import './App.css'; const App = () => { const [messages, setMessages] = useState([]); const [userInput, setUserInput] = useState(''); const [loading, setLoading] = useState(false); const sendMessage = async () => { if (!userInput.trim()) return; const newMessages = [...messages, { sender: 'user', text: userInput }]; setMessages(newMessages); setUserInput(''); setLoading(true); try { const response = await fetch('http://localhost:5000/generate', { method: 'POST', headers: { 'Content-Type': 'application/json', }, body: JSON.stringify({ prompt: userInput }), }); const botReply = await response.text(); setMessages([...newMessages, { sender: 'bot', text: botReply }]); } catch (error) { console.error('Error fetching bot reply:', error); setMessages([ ...newMessages, { sender: 'bot', text: 'Sorry, something went wrong.' }, ]); } finally { setLoading(false); } }; return ( <div className="chat-container"> <div className="chatbox"> {messages.map((msg, index) => ( <div key={index} className={`message ${msg.sender}`}> {msg.text} </div> ))} {loading && <div className="message bot">Typing...</div>} </div> <div className="input-container"> <input type="text" value={userInput} onChange={(e) => setUserInput(e.target.value)} placeholder="Type your message..." /> <button onClick={sendMessage}>Send</button> </div> </div> ); }; export default App;

Paso 4: Agregar estilo

Cree un archivo llamado App.css para diseñar la interfaz del chatbot:

 code.chat-container { font-family: Arial, sans-serif; max-width: 500px; margin: 20px auto; } .chatbox { border: 1px solid #ccc; padding: 10px; height: 400px; overflow-y: auto; border-radius: 5px; margin-bottom: 10px; } .message { margin: 5px 0; padding: 10px; border-radius: 5px; } .message.user { background-color: #d1e7dd; text-align: right; } .message.bot { background-color: #f8d7da; text-align: left; } .input-container { display: flex; } input { flex: 1; padding: 10px; border: 1px solid #ccc; border-radius: 5px 0 0 5px; } button { padding: 10px; border: 1px solid #ccc; border-radius: 0 5px 5px 0; background-color: #007bff; color: white; cursor: pointer; }

Paso 5: prueba tu chatbot

1. Ejecute la aplicación React y el servidor simultáneamente. Puede utilizarlos simultáneamente o abrir dos terminales:

• Terminal 1:

   npm run dev

• Terminal 2 (dentro server ):

   node server.js

2. Abra la aplicación React en su navegador.
3. Escribe un mensaje y envíalo. La solicitud se dirigirá a tu servidor Express, que llamará de forma segura a la API de Cohere y devolverá el resultado.

Repositorio

Puedes encontrar el código fuente completo de este proyecto en GitHub: AI Chatbot with React and Cohere . ¡Siéntete libre de clonarlo, explorar el código y personalizarlo según tus necesidades!

Conclusión

Has creado un chatbot funcional impulsado por IA con React , Vite , Cohere y Express . Este proyecto se puede mejorar con funciones como:

• Integración de voz a texto y texto a voz.
• Conversaciones persistentes almacenadas en una base de datos.
• Un diseño más pulido utilizando un marco CSS como Tailwind.
• Implemente el servidor utilizando servicios como Heroku, AWS o Vercel.

¡Empieza a experimentar y disfruta codificando!