🧠 Crea tu Chatbot con IA Gratis en 2025 – Guía Paso a Paso

¿Quieres integrar un chatbot con inteligencia artificial en tu blog o proyecto personal? En esta guía completa te enseñaré cómo crear tu propio asistente virtual usando OpenRouter y modelos de IA avanzados como DeepSeek, totalmente gratis y sin necesidad de instalar software.
🤖 ¿Cómo funciona un asistente virtual con IA?
Un asistente virtual con inteligencia artificial se basa en modelos de lenguaje avanzados que pueden entender y generar texto de forma similar a como lo haría un humano. Estos modelos se entrenan con grandes cantidades de datos y pueden mantener conversaciones coherentes, responder preguntas y realizar tareas específicas.
En esta guía usaremos OpenRouter, una plataforma que actúa como intermediario entre tu aplicación y diversos modelos de IA, incluyendo opciones gratuitas como DeepSeek Chat.
Los modelos como DeepSeek pueden procesar hasta 128K de contexto, lo que significa que pueden recordar conversaciones largas y mantener coherencia en diálogos extensos.
📋 Requisitos previos
Para seguir esta guía solo necesitas:
- Una cuenta en OpenRouter (gratuita)
- Navegador web moderno (Chrome, Firefox, Edge)
- Conocimientos básicos de HTML/JavaScript (opcional para personalización)
- Para la versión Python: cuenta de Google para usar Google Colab
⚙️ Configuración en OpenRouter
Sigue estos pasos para configurar tu acceso a la API:
- Regístrate en OpenRouter.ai
- Ve a tu panel de control y genera una nueva clave API
- Copia tu clave (formato:
sk-or-v1-xxxxxxxxxxxxxxxx
) - Selecciona el modelo
deepseek/deepseek-chat-v3-0324:free
- Configura el límite de uso si es necesario
Nunca expongas tu clave API directamente en código frontend. Para proyectos públicos, considera usar un backend intermedio o claves temporales.
💬 Chatbot HTML listo para implementar
Aquí tienes un widget de chatbot completamente funcional que puedes insertar en tu blog o página web:
Para implementar este chatbot en tu sitio, copia el siguiente código HTML/JavaScript:
<div class="chatbot-container">
<div class="chatbot-header">
<div class="chatbot-icon">🤖</div>
<h3 class="chatbot-title">Asistente IA de [Tu Blog]</h3>
</div>
<div id="chat-log" class="chat-log"></div>
<div class="chat-input-container">
<input type="text" id="user-input" class="chat-input" placeholder="Escribe tu mensaje...">
<button onclick="sendMessage()" class="chat-button">Enviar</button>
</div>
</div>
<script>
const API_KEY = "sk-or-v1-tu_clave_api_aqui"; // Reemplaza con tu clave
const MODEL = "deepseek/deepseek-chat-v3-0324:free";
let chatHistory = [
{role: "system", content: "Eres un asistente útil que habla español. Sé claro y conciso."},
{role: "assistant", content: "¡Hola! Soy un asistente virtual con IA. ¿En qué puedo ayudarte hoy?"}
];
async function sendMessage() {
const userInput = document.getElementById("user-input");
const message = userInput.value.trim();
if (!message) return;
// Mostrar mensaje del usuario
const chatLog = document.getElementById("chat-log");
chatLog.innerHTML += `<div class="chat-message user-message"><strong>Tú:</strong> ${message}</div>`;
userInput.value = "";
chatLog.scrollTop = chatLog.scrollHeight;
// Agregar al historial
chatHistory.push({role: "user", content: message});
try {
// Mostrar indicador de carga
chatLog.innerHTML += `<div class="chat-message bot-message"><em>Asistente está pensando...</em></div>`;
chatLog.scrollTop = chatLog.scrollHeight;
// Llamar a la API
const response = await fetch("https://openrouter.ai/api/v1/chat/completions", {
method: "POST",
headers: {
"Authorization": `Bearer ${API_KEY}`,
"Content-Type": "application/json",
"HTTP-Referer": window.location.href,
"X-Title": document.title
},
body: JSON.stringify({
model: MODEL,
messages: chatHistory
})
});
const data = await response.json();
// Eliminar indicador de carga
chatLog.removeChild(chatLog.lastChild);
if (response.ok && data.choices?.[0]?.message?.content) {
const botResponse = data.choices[0].message.content;
chatLog.innerHTML += `<div class="chat-message bot-message"><strong>Asistente:</strong> ${botResponse}</div>`;
chatHistory.push({role: "assistant", content: botResponse});
} else {
throw new Error(data.error?.message || "Error desconocido");
}
} catch (error) {
chatLog.removeChild(chatLog.lastChild);
chatLog.innerHTML += `<div class="chat-message bot-message" style="color: #d32f2f;"><strong>Error:</strong> ${error.message}</div>`;
}
chatLog.scrollTop = chatLog.scrollHeight;
}
// Permitir enviar con Enter
document.getElementById("user-input").addEventListener("keypress", function(e) {
if (e.key === "Enter") {
sendMessage();
}
});
</script>
🐍 Versión Python para Google Colab
Si prefieres trabajar con Python, aquí tienes un script completo para ejecutar en Google Colab:
# Instalar dependencias (ejecutar solo una vez)
!pip install requests
import requests
# Configuración
API_KEY = "sk-or-v1-tu_clave_api_aqui" # Reemplaza con tu clave
MODEL = "deepseek/deepseek-chat-v3-0324:free"
chat_history = [
{"role": "system", "content": "Eres un asistente útil que habla español."},
{"role": "assistant", "content": "¡Hola! Soy tu asistente de IA. ¿En qué puedo ayudarte?"}
]
def chat_with_ai():
print("🤖 Asistente Virtual con IA (escribe 'salir' para terminar)\n")
print(chat_history[-1]["content"] + "\n")
while True:
user_input = input("Tú: ")
if user_input.lower() in ["salir", "exit", "quit"]:
print("\nAsistente: ¡Hasta luego! Vuelve cuando necesites ayuda.")
break
# Agregar mensaje al historial
chat_history.append({"role": "user", "content": user_input});
try:
# Mostrar que el asistente está pensando
print("\nAsistente está pensando...", end="\r")
# Llamar a la API
response = requests.post(
"https://openrouter.ai/api/v1/chat/completions",
headers={
"Authorization": f"Bearer {API_KEY}",
"Content-Type": "application/json"
},
json={
"model": MODEL,
"messages": chat_history
}
)
data = response.json()
if response.status_code == 200 and data.get("choices"):
bot_response = data["choices"][0]["message"]["content"]
print(f"Asistente: {bot_response}\n")
chat_history.append({"role": "assistant", "content": bot_response})
else:
error_msg = data.get("error", {}).get("message", "Error desconocido")
print(f"\nError: {error_msg} (Código: {response.status_code})")
except Exception as e:
print(f"\nError al conectar con la API: {str(e)}")
# Iniciar el chat
if __name__ == "__main__":
chat_with_ai()
¿Cómo usar este script?
- Ve a Google Colab
- Crea un nuevo notebook
- Copia y pega el código anterior
- Reemplaza
tu_clave_api_aqui
con tu clave de OpenRouter - Ejecuta las celdas (Shift+Enter)
🎨 Personalización avanzada
Puedes mejorar tu asistente virtual con estas personalizaciones:
1. Cambiar el comportamiento del asistente
Modifica el mensaje del sistema para ajustar la personalidad:
// Ejemplo para un asistente técnico
{role: "system", content: "Eres un experto en tecnología que responde preguntas técnicas en español. Sé preciso y usa términos profesionales."}
// Ejemplo para un asistente creativo
{role: "system", content: "Eres un asistente creativo y entusiasta. Usa un tono amigable y emojis ocasionales. Sé conciso."}
2. Añadir memoria contextual
Puedes limitar el historial para mantener conversaciones coherentes pero no demasiado largas:
// Mantener solo los últimos 6 mensajes
if (chatHistory.length > 6) {
chatHistory = [
chatHistory[0], // Mantener el system prompt
...chatHistory.slice(-5) // Últimos 5 mensajes
];
}
3. Añadir funciones adicionales
Puedes extender el chatbot para que realice tareas específicas:
// Ejemplo: Respuesta a comandos especiales
if (message.startsWith("/buscar ")) {
const query = message.substring(8);
chatLog.innerHTML += `<div class="chat-message bot-message">Buscando: ${query}...</div>`;
return;
}
💡 Casos de uso prácticos
Implementa un chatbot que responda preguntas sobre tus artículos, sugiera contenido relacionado o ayude a los lectores a navegar por tu sitio.
Crea un asistente que responda preguntas frecuentes sobre productos, políticas de devolución o estado de pedidos.
Desarrolla un tutor virtual que explique conceptos, resuelva dudas o proporcione ejercicios prácticos sobre un tema específico.
Incluye un asistente en tu portafolio que hable sobre tus habilidades, experiencia y proyectos destacados.
🚀 Conclusión: Tu asistente IA está listo
Ahora tienes todo lo necesario para crear e implementar tu propio asistente virtual con inteligencia artificial. Los beneficios son claros:
- Interactividad mejorada para tus visitantes
- Soporte automatizado 24/7
- Experiencia personalizada para cada usuario
- Cero costos con el plan gratuito
El siguiente paso es experimentar con diferentes modelos y personalizaciones. ¿Por qué no pruebas con GPT-4 o Claude para comparar resultados? Recuerda que en OpenRouter puedes cambiar de modelo con solo modificar una línea de código.
Si este tutorial te resultó útil, compártelo con otros desarrolladores o creadores de contenido que podrían beneficiarse de esta tecnología.
Participar en la conversación