UStackUStack
chat icon

chat

chat es un cliente de chat con IA para conectar a un servidor MCP externo y chatear por lenguaje natural con respuestas en streaming y Markdown.

chat

¿Qué es chat?

chat es un cliente de chat con IA de propósito general diseñado para funcionar con el servidor MCP de un servicio. Proporciona una interfaz en lenguaje natural que puede conectarse a un servidor MCP externo e interactuar con sus herramientas, independientemente del dominio (por ejemplo, entregas, reservas o gestión de tareas).

El proyecto está construido como una aplicación Next.js App Router y se centra en los detalles prácticos de UI e integración necesarios para experiencias de chat: conexión de herramientas vía MCP, respuestas en streaming, historial de mensajes y soporte para contenido multimodal como entradas de imágenes y salidas de asistente basadas en Markdown.

Características principales

  • Integración de herramientas MCP vía Streamable HTTP: se conecta a un servidor MCP externo, configurado mediante MCP_URL (cualquier backend) o MCP_APPS_URL (TypeScript + UI embebida); la app rechaza tener ambas configuraciones en tiempo de ejecución.
  • Respuestas de IA en streaming con indicadores de escritura en tiempo real: la salida del asistente se transmite a medida que se genera, en lugar de devolverse toda de una vez.
  • Renderizado de Markdown para mensajes del asistente: los mensajes del asistente se renderizan como Markdown, incluyendo tablas, listas, bloques de código y enlaces.
  • Adjuntos de imágenes con recorte antes de enviar: los usuarios pueden adjuntar imágenes, se les pide recortar antes de enviar, y la imagen se comprime y sube solo al momento de envío (para evitar subidas prematuras).
  • Soporte para salidas de imágenes de LLM: el asistente puede incluir imágenes en las respuestas usando sintaxis Markdown estándar como ![alt](url); las imágenes se muestran como tarjetas cuadradas con esqueletos de carga diferida y se abren en tamaño completo al hacer clic.
  • Historial de conversaciones con paginación basada en cursor: el historial de chat persistente se recupera en páginas con comportamiento de scroll infinito.
  • Soporte para autenticación y localización: email/contraseña con verificación, restablecimiento y Google OAuth; detección de idioma desde geolocalización IP (IPinfo Lite) con fallback a Accept-Language, y configuración de usuario sobrescribible.

Cómo usar chat

  1. Ejecuta la aplicación (consulta los prerrequisitos) y crea un archivo .env.local en la raíz del proyecto.
  2. Configura los ajustes de conexión MCP usando MCP_URL o MCP_APPS_URL (elige uno). Opcionalmente, establece variables de marca y contexto de personalidad como NEXT_PUBLIC_APP_NAME y APP_PERSONA_CONTEXT.
  3. Inicia sesión con los métodos de autenticación compatibles.
  4. Inicia una conversación en la UI de chat. El asistente puede transmitir respuestas y llamar a herramientas MCP según lo expuesto por tu servidor MCP.
  5. Si activas límites de mensajes (WEEKLY_MESSAGE_LIMIT), la UI muestra una advertencia cuando la cuota restante es baja y bloquea envíos adicionales cuando se agota.

Casos de uso

  • Asistente de entregas o despacho: conéctate a un servidor MCP relacionado con entregas para ayudar a los usuarios a coordinar solicitudes y dar seguimiento mediante un flujo conversacional.
  • Reserva de mano de obra: conecta un servidor MCP de reservas de mano de obra para que el asistente guíe a los usuarios en tareas y recopile detalles requeridos vía llamadas a herramientas.
  • Interfaz de gestión de tareas: usa un servidor MCP de gestión de tareas para traducir lenguaje natural en acciones ejecutadas por tu backend.
  • Asistencia multimodal con imágenes: sube una imagen (recorta antes de enviar) y pide al asistente que la analice o la incorpore en un flujo de trabajo; también soporta respuestas del asistente que incluyen tarjetas de imágenes.
  • Soporte multilingüe para equipos: confía en la detección de idioma integrada y el sistema i18n personalizado para localizar tanto cadenas de UI como prompts del sistema de IA para idiomas como EN, ID, KR, JP, ES, ZH, DE, NL, FR e IT.

Preguntas frecuentes

¿Qué configuraciones de MCP soporta la app?

La app soporta conexión a un servidor MCP. Usa MCP_URL o MCP_APPS_URL. Configurar ambas se rechaza en tiempo de ejecución.

¿Cómo se entregan las respuestas de IA en la UI?

Las respuestas se transmiten en tiempo real, con indicadores de escritura durante la generación.

¿Pueden los usuarios enviar imágenes, y puede el asistente mostrar imágenes?

Sí. Los usuarios pueden adjuntar imágenes mediante un flujo de recorte antes de enviar; las imágenes se comprimen y suben solo cuando se envía el mensaje. El asistente también puede incrustar imágenes en su respuesta usando sintaxis de imagen Markdown.

¿Se guarda el historial de chat?

Sí. La app mantiene un historial de conversaciones persistente y usa paginación basada en cursor con scroll infinito.

¿Hay límites en la cantidad de mensajes que se pueden enviar?

Opcionalmente, se puede configurar un límite semanal por usuario con WEEKLY_MESSAGE_LIMIT. Cuando está activado, la UI advierte cuando el conteo restante es bajo y devuelve un bloqueo 429 cuando se agota.

Alternativas

  • Aplicaciones web de chat con IA genéricas sin integración de herramientas MCP: se centran en chat basado en prompts, pero no proporcionan una conexión estructurada al protocolo de herramientas del backend de tu servicio.
  • Implementaciones personalizadas de cliente MCP (UI/pila diferente): puedes crear otro cliente para llamadas a herramientas MCP, pero el flujo de trabajo y las funciones (manejo de imágenes, historial de mensajes, localización) pueden variar.
  • Soluciones RAG/chat centradas en recuperación en lugar de llamadas a herramientas: están orientadas a la búsqueda de conocimiento y anclaje de documentos en vez de orquestar acciones mediante herramientas MCP.
  • Interfaces de chat multimodales de propósito general: admiten entradas/salidas de imágenes, pero pueden no incluir el mismo flujo de trabajo impulsado por MCP para conectar a herramientas de servicios externos.
chat | UStack