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   ,   y   con una integración de backend con   . Con su simplicidad y velocidad, Vite facilita la configuración de aplicaciones JavaScript modernas. React Vite la API de Cohere, Express  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   para obtener una clave API) aquí  Paso 1: Configura tu proyecto React  Crea un nuevo proyecto React usando Vite:   npm create vite@latest ai-chatbot -- --template react cd ai-chatbot npm install  Inicie el servidor de desarrollo:   npm run dev  Abra el proyecto en su editor de código favorito.  Paso 2: Crear el servidor Express  Inicialice un nuevo proyecto Node.js en el mismo directorio:   mkdir server && cd server npm init -y  Instalar los paquetes necesarios:   npm install express cors dotenv node-fetch  Actualice el archivo package.json para usar el   de tipo para habilitar el uso de importaciones nativas: module   { "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" } }  Cree un archivo llamado   en el directorio   y agregue el siguiente código: server.js server   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}`); });  Cree un archivo   en el directorio   : .env server   COHERE_API_KEY=your_cohere_api_key_here  Iniciar el servidor:   node server.js    nunca compartas tu archivo   ni lo envíes al control de versiones. Agrega   a tu archivo   . Importante: .env .env .gitignore  Paso 3: Construir la interfaz del chatbot  Actualice el archivo   con el siguiente código: App.jsx   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   para diseñar la interfaz del chatbot: App.css   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  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  Abra la aplicación React en su navegador.  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:   . ¡Siéntete libre de clonarlo, explorar el código y personalizarlo según tus necesidades! AI Chatbot with React and Cohere  Conclusión  Has creado un chatbot funcional impulsado por IA con   ,   ,   y   . Este proyecto se puede mejorar con funciones como: React Vite Cohere Express  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!

The code in this story is for educational purposes. The readers are solely responsible for whatever they build with it.

Read My Stories

Este audio es producido en el idioma original de la historia!

Demasiado Largo; Para Leer

Make resilience your competitive advantage

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

About Author

COMENTARIOS

ETIQUETAS

ESTE ARTÍCULO FUE PRESENTADO EN

Related Stories

Las capas invisibles: por qué las entrevistas con los usuarios son un activo irremplazable

De los foros a los feeds: cómo los algoritmos de las redes sociales influyen en la interacción digital

El modelo Bitcoin UTXO, impulsando un ecosistema único

Una breve introducción a la teoría del cerebro de Boltzmann

Las capas invisibles: por qué las entrevistas con los usuarios son un activo irremplazable

De los foros a los feeds: cómo los algoritmos de las redes sociales influyen en la interacción digital

El modelo Bitcoin UTXO, impulsando un ecosistema único

Una breve introducción a la teoría del cerebro de Boltzmann

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps