Chatbot App

Stack Tecnológico

Funcionalidad

• IA conversacional: Chat contextual, multi-turno.
• Formato enriquecido: Tablas, listas, código, imágenes y más.
• Experiencia de usuario: Rápido, accesible y visualmente atractivo.

Estructura del Proyecto

1. Cliente (/packages/client)

Descripción:
El cliente es una interfaz de chat moderna y responsiva construida con React y TypeScript. Renderiza respuestas de IA en formato markdown, soporta cambio de tema y ofrece una experiencia fluida.

Stack:

• React (TypeScript)
• Vite
• Tailwind CSS
• react-markdown + remark-gfm
• Lucide Icons
• Bun (runtime y gestor de paquetes)

Características

• UI de chat moderna: Responsiva, con soporte de temas y amigable en móvil.
• Soporte Markdown: Las respuestas de IA usan Markdown para formato enriquecido (tablas, listas, código, etc.).
• Copiar al portapapeles: Copia fácilmente cualquier respuesta de la IA.
• Cambio de tema: Alterna entre modo claro y oscuro.
• Feedback de audio: Sonidos para mensajes enviados/recibidos.
• Enlace a GitHub: Acceso rápido al repositorio del proyecto.

Directorios destacados:

• src/components/ — Componentes UI (chat, layout, primitivos)
• src/lib/ — Tipos, utilidades y validación
• public/ — Recursos estáticos (imágenes, sonidos)
• .env — Variables de entorno (p.ej., URL del repo GitHub)

Cómo funciona

1. El usuario escribe una pregunta y presiona enviar.
2. El chatbot muestra el mensaje del usuario y un indicador de escritura.
3. La IA responde en Markdown (con tablas, listas, código, etc.).
4. Los usuarios pueden copiar respuestas o cambiar el tema en cualquier momento.

2. Servidor (/packages/server)

Descripción:
El servidor es un backend en TypeScript sobre Bun que gestiona sesiones de chat, inyecta prompts de sistema y se comunica con la API de Anthropic Claude (u otros proveedores). Fuerza el formato markdown y maneja seguridad y rate limiting.

Stack:

• Bun (runtime y gestor de paquetes)
• TypeScript
• Anthropic Claude API (proveedor modular)
• Middleware personalizado (CORS, rate limiting, manejo de errores)
• API REST (routing tipo express)

Tecnologías adicionales

• helmet: Asegura cabeceras HTTP para mitigar vulnerabilidades comunes.
• zod: Validación de esquemas para payloads API, robustez y type-safety.
• anthropic SDK: Integración avanzada con Anthropic Claude API.

Estas herramientas mejoran la seguridad, fiabilidad e integración IA del servidor.

Características

• Integración IA: Conecta con Anthropic Claude (u otros proveedores).
• Markdown forzado: El prompt de sistema asegura respuestas IA en Markdown.
• Gestión de conversaciones: Maneja sesiones y contexto.
• Rate limiting y seguridad: Protege los endpoints API.
• Prompts personalizados: Edita fácilmente instrucciones e info del sistema.

Flujo API

1. Recibe solicitudes de chat del cliente.
2. Inyecta instrucciones de sistema (de /prompts/chatbot.txt y Info.md).
3. Envía mensajes al proveedor IA.
4. Devuelve respuestas en Markdown al cliente.

Directorios destacados:

• routes/ — Endpoints API (chat, health)
• services/ — Orquestación de chat y lógica de prompts
• providers/ — Integraciones IA y plantillas de prompts
• repositories/ — Almacenamiento de sesiones/conversaciones
• middleware/ — Seguridad y manejo de errores
• .env — Claves y configuración

Endpoints API

Health Check

GET /health

• Descripción: Verifica que el servidor está corriendo.
• Respuesta:

{
  "status": "ok"
}

Chat

POST /api/chat

• Descripción: Inicia o continúa una conversación con la IA.

• Body de Solicitud:

{
  "message": "Your question here",
  "conversationId": "optional-conversation-id",
  "maxTokens": 500
}

• Respuesta:

{
  "response": "Markdown-formatted answer",
  "conversationId": "conv_123",
  "usage": {
    "inputTokens": 10,
    "outputTokens": 50
  }
}

Stream Chat

POST /api/chat/stream

• Descripción: Transmite la respuesta IA en tiempo real usando Server-Sent Events (SSE).

• Body de Solicitud:

{
  "message": "Hello",
  "maxTokens": 500
}

• Respuesta:

data: {"chunk":"Hello"}
data: {"chunk":" there"}
data: [DONE]

Obtener Conversación

GET /api/chat/conversation/:conversationId

• Descripción: Devuelve el historial completo de la conversación por ID.

• Respuesta:

{
  "conversationId": "conv_123",
  "messages": [
    {"role": "user", "text": "Hello"},
    {"role": "assistant", "text": "Hi there!"}
  ]
}

Limpiar Conversación

DELETE /api/chat/conversation/:conversationId

• Descripción: Elimina una conversación específica.

• Respuesta:

{
  "message": "Conversation cleared successfully",
  "conversationId": "conv_123"
}

Limpiar Todas las Conversaciones

DELETE /api/chat/conversations

• Descripción: Elimina todas las conversaciones de memoria.

• Respuesta:

{
  "message": "All conversations cleared successfully"
}