Cómo crear un Chat Bot con Deep Seek a través de OpenRoute

Chat Bot Viztou

1. Introducción

En este tutorial crearemos un Chat Bot que se comunica con la API gratuita de Deep Seek (disponible en OpenRouter). El objetivo es:

Enviar preguntas desde un formulario en HTML.
Recibir respuestas con inteligencia artificial.
Presentar la respuesta en una caja de texto, mostrando el resultado en formato Markdown convertido a HTML.

Además, te enseñaremos cómo darle un diseño moderno en tonos neutros y con esquinas redondeadas, sin exponer bordes sólidos, y con la fuente Poppins.

2. Estructura del proyecto

Necesitarás un archivo HTML que contendrá:

La referencia a Bootstrap para maquetar fácilmente.
El enlace a Google Fonts para usar la fuente Poppins.
La referencia a la librería marked.min.js para convertir las respuestas en Markdown a HTML.
El código JavaScript que hace la solicitud a la API de OpenRouter y procesa la respuesta.

Al final de este tutorial, tendrás un único archivo HTML con todo listo para que lo subas directamente a tu hosting o lo ejecutes en tu PC.

3. Requisitos previos

Clave de OpenRouter:
- Debes registrarte en OpenRouter y luego generar una API key gratuita.
- Con esa clave, podrás consumir modelos como el de Deep Seek a costo cero (limitaciones de uso aplican).
Conexión a Internet (obvia, pero importante) para que el fetch hacia la API funcione.
Editor de texto o IDE (puede ser Visual Studio Code, Sublime Text, etc.).

4. Paso a paso para crear el archivo HTML

4.1. Crea un archivo `index.html`

Abre tu editor y crea un archivo llamado index.html. Copia el siguiente código en él. Más adelante, personalizaremos algunos valores.

html

<!DOCTYPE html>
<html lang="es">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Chat Bot Viztou</title>
    <!-- Google Fonts: Poppins -->
    <link
      href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;700&display=swap"
      rel="stylesheet"
    />
    <!-- Bootstrap CSS -->
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css" />
    <!-- Librería para convertir Markdown a HTML -->
    <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
    <style>
      /* Fuente principal */
      body {
        font-family: 'Poppins', sans-serif;
        background-color: #000; /* Fondo negro */
        color: #444; /* Texto en gris oscuro */
        margin: 0;
        padding: 0;
      }

      /* Contenedor: centramos todo su contenido */
      .container {
        text-align: center;
        margin-top: 20px;
      }

      h2 {
        margin-bottom: 20px;
      }

      .form-group {
        margin-top: 20px;
      }

      /* Input con bordes redondeados y sin borde */
      #userInput {
        background-color: #f9f9f9;
        color: #444;
        border: none;
        border-radius: 12px;
        text-align: center;
      }

      /* Centrar también el placeholder del input */
      #userInput::placeholder {
        text-align: center;
      }

      /* Caja de respuestas con bordes redondeados y sin borde */
      #response {
        margin-top: 20px;
        padding: 10px;
        min-height: 50px;
        background-color: #f2f2f2;
        border-radius: 12px;
        color: #444;
        text-align: center;
      }

      #response h3 {
        color: #333; /* Un gris un poco más fuerte para titulares */
        font-size: 1.2em;
      }

      #response strong {
        color: #444; /* Mantener gris oscuro */
      }

      #response ul {
        padding-left: 20px;
        text-align: left; /* Cambia a center si quieres listas centradas */
      }

      #response li {
        margin-bottom: 5px;
      }

      /* Botón con 100% de ancho, bordes redondeados, sin borde, texto centrado */
      .btn-fullwidth {
        width: 100%;
        background-color: #f5f5f5;
        color: #444;
        border: none;
        border-radius: 12px;
        text-align: center;
      }

      /* Hover: fondo negro, texto blanco */
      .btn-fullwidth:hover {
        background-color: #000;
        color: #fff;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <h2>Chat Bot Viztou</h2>
      <div class="form-group">
        <input
          type="text"
          class="form-control"
          id="userInput"
          placeholder="Escribe tu pregunta aquí..." />
      </div>
      <button class="btn btn-fullwidth" onclick="sendMessage()">¡Preguntar!</button>
      <div id="response"></div>
    </div>

    <script>
      async function sendMessage() {
        // 1) Tomamos el valor del input
        const input = document.getElementById('userInput').value;
        const responseDiv = document.getElementById('response');

        // 2) Validamos que no esté vacío
        if (!input) {
          responseDiv.innerHTML = 'Por favor, ingresa un mensaje.';
          return;
        }

        // 3) Mostramos mensaje de carga
        responseDiv.innerHTML = 'Cargando...';

        try {
          // 4) Hacemos la llamada a la API de OpenRouter
          const response = await fetch(
            'https://openrouter.ai/api/v1/chat/completions',
            {
              method: 'POST',
              headers: {
                // Aquí va tu clave de OpenRouter
                Authorization: 'Bearer TU_API_KEY_DE_OPENROUTER',
                'HTTP-Referer': 'https://www.sitename.com',
                'X-Title': 'SiteName',
                'Content-Type': 'application/json',
              },
              body: JSON.stringify({
                model: 'deepseek/deepseek-r1:free', // Modelo gratuito de Deep Seek
                messages: [{ role: 'user', content: input }],
              }),
            }
          );

          // 5) Procesamos la respuesta
          const data = await response.json();
          console.log(data);

          // 6) Obtenemos el contenido devuelto por IA
          const markdownText =
            data.choices?.[0]?.message?.content || 'No se recibió respuesta.';
          
          // 7) Convertimos Markdown a HTML y lo mostramos en el div #response
          responseDiv.innerHTML = marked.parse(markdownText);
        } catch (error) {
          // 8) En caso de error, lo mostramos
          responseDiv.innerHTML = 'Error: ' + error.message;
        }
      }
    </script>
    <!-- Bootstrap JS (opcional) -->
    <script
      src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.min.js">
    </script>
  </body>
</html>

4.2. Reemplaza la clave `TU_API_KEY_DE_OPENROUTER`

En el bloque <script>, localiza la parte donde dice:

js

Authorization: 'Bearer TU_API_KEY_DE_OPENROUTER',
Sustitúyelo por la API key que te generó OpenRouter. Quedaría así, por ejemplo:

js

Authorization: 'Bearer sk-or-v1-XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX',
¡Importante! Recuerda que no es recomendable exponer tu clave en frontend, ya que cualquiera podría inspeccionar el código y reutilizar tu API key. Para proyectos de producción, crea un backend seguro (Node.js, Python, PHP, etc.) y desde allí llama a la API.

5. Explicación del código

Bootstrap y Google Fonts:
- Añadimos el <link> a Bootstrap 4.3.1 para usar sus clases (container, form-group, etc.).
- Importamos la fuente Poppins desde Google Fonts, que le da un aspecto moderno al texto.
marked.min.js:
- Esta librería transforma el texto en formato Markdown (que la IA envía) a HTML.
Estilos personalizados (dentro de <style>):
- Fondo negro, textos en gris, border-radius: 12px para esquinas redondeadas, y sin bordes.
- Hover en el botón para cambiar fondo a negro y texto a blanco.
Contenedor .container (de Bootstrap):
- Centramos todo con text-align: center;.
Campo de texto <input>:
- Sin borde, esquinas redondeadas, fondo claro para contrastar con el fondo negro.
Botón ¡Preguntar!:
- Ancho completo (width: 100%), esquinas redondeadas, y un efecto “hover”.
Función sendMessage():
- Toma el valor del <input>.
- Valida que no esté vacío.
- Realiza una petición fetch a la API de OpenRouter, con las cabeceras y el cuerpo de la petición.
- Convierte la respuesta en JSON, y luego en HTML usando la librería marked.
- Maneja los posibles errores con un try/catch.

6. Pruebas locales

Guarda el archivo index.html.
Abre el archivo en tu navegador preferido (Chrome, Firefox, Edge…).
Escribe tu pregunta en el campo y haz clic en ¡Preguntar!.
Verás en la consola del navegador (F12 > “Console”) la respuesta JSON que llega desde la API, y en pantalla se convertirá el texto a HTML.

7. Despliegue en tu blog o hosting

Puedes subir este archivo index.html a cualquier hosting que soporte HTML estático (GitHub Pages, Netlify, Vercel, o incluso tu propio servidor).
Simplemente arrastra y suelta el archivo (o haz un deploy con la plataforma) y luego accede a la URL generada para verificar que funcione.

Nota:
Ten en cuenta la seguridad de tu API key. Para proyectos serios, o de alta escalabilidad, se recomienda usar un servidor intermedio (backend) que oculte tu clave y maneje la interacción con la API.

8. Conclusiones

Este Chat Bot te permite hacer preguntas a un modelo de IA alojado en OpenRouter, aprovechando el modelo gratuito de Deep Seek.
Mediante HTML, Bootstrap y JavaScript se logra una interfaz limpia y centrada, con un diseño minimalista al estilo “Apple”.
Es un punto de partida para crear asistentes virtuales más complejos, integrados con bases de datos o APIs externas.

¡Esperamos que este tutorial te haya sido útil! Ahora tienes un Chat Bot funcional que puedes personalizar según tus necesidades, cambiar colores, fuentes, o incluso migrarlo a un backend seguro para ambientes de producción.

Si te gustó este tutorial, compártelo en tus redes o en los comentarios de tu blog. ¡Disfruta construyendo con IA!

Compártelo

Sebastian Llerena

Experto en Marketing digital, ha dedicado más de 10 años a hacer crecer empresas. Ha liderado estrategias de SEO, SEM y publicidad online que han llevado negocios a multiplicar sus ventas y expandirse en el mundo digital. Su enfoque combina análisis de datos, creatividad y optimización constante para convertir inversiones en resultados reales.