Crea tu propio chatbot con IA gratis usando OpenRouter. Guía 2025 paso a paso con código listo para usar y sin instalar nada.
Crea tu Chatbot con IA Gratis en 2025 – Guía Paso a Paso | TecnoCurioso

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

Asistente virtual con inteligencia artificial

¿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.

💡 ¿Sabías que?

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:

  1. Regístrate en OpenRouter.ai
  2. Ve a tu panel de control y genera una nueva clave API
  3. Copia tu clave (formato: sk-or-v1-xxxxxxxxxxxxxxxx)
  4. Selecciona el modelo deepseek/deepseek-chat-v3-0324:free
  5. Configura el límite de uso si es necesario
🔒 Seguridad importante

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?

  1. Ve a Google Colab
  2. Crea un nuevo notebook
  3. Copia y pega el código anterior
  4. Reemplaza tu_clave_api_aqui con tu clave de OpenRouter
  5. 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

🌐 Asistente para blogs

Implementa un chatbot que responda preguntas sobre tus artículos, sugiera contenido relacionado o ayude a los lectores a navegar por tu sitio.

🛒 Soporte para e-commerce

Crea un asistente que responda preguntas frecuentes sobre productos, políticas de devolución o estado de pedidos.

🎓 Educación y aprendizaje

Desarrolla un tutor virtual que explique conceptos, resuelva dudas o proporcione ejercicios prácticos sobre un tema específico.

💼 Portafolio profesional

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.


TecnoCurioso

TecnoCurioso

Desarrollador y entusiasta de IA. Comparto tutoriales prácticos sobre tecnología en TecnoCurioso. Sígueme para más contenido como este.

Este sitio usa cookies para mostrar anuncios y analizar el tráfico. Al continuar, aceptas nuestra Política de Privacidad.