UStackUStack
chat icon

chat

chat é um cliente geral de chat com IA que conecta a um servidor MCP externo, com respostas em streaming, Markdown e suporte a imagens.

chat

O que é chat?

chat é um cliente geral de chat com IA projetado para funcionar com o servidor MCP de um serviço. Ele fornece uma interface em linguagem natural que pode se conectar a um servidor MCP externo e interagir com suas ferramentas, independentemente do domínio (por exemplo, entregas, reservas ou gerenciamento de tarefas).

O projeto é construído como uma aplicação Next.js App Router e foca nos detalhes práticos de UI e integração necessários para experiências de chat: conexão de ferramentas via MCP, respostas em streaming, histórico de mensagens e suporte a conteúdo multimodal, como entradas de imagens e saídas de assistente baseadas em Markdown.

Principais Recursos

  • Integração de ferramentas MCP via Streamable HTTP: conecta a um servidor MCP externo, configurado por meio de MCP_URL (qualquer backend) ou MCP_APPS_URL (TypeScript + UI incorporada); o app rejeita ter ambas as configurações em tempo de execução.
  • Respostas de IA em streaming com indicadores de digitação em tempo real: a saída do assistente é transmitida à medida que é gerada, em vez de ser retornada de uma só vez.
  • Renderização de Markdown para mensagens do assistente: mensagens do assistente são renderizadas como Markdown, incluindo tabelas, listas, blocos de código e links.
  • Anexos de imagens com corte antes do envio: usuários podem anexar imagens, são solicitados a cortar antes de enviar, e a imagem é comprimida e enviada apenas no momento do envio (para evitar uploads prematuros).
  • Suporte a saída de imagens do LLM: o assistente pode incluir imagens nas respostas usando sintaxe padrão de Markdown como ![alt](url); imagens são exibidas como cards quadrados com esqueletos de carregamento preguiçoso e abrem em tamanho total ao clicar.
  • Histórico de conversas com paginação baseada em cursor: histórico de chat persistente é recuperado em páginas com comportamento de rolagem infinita.
  • Suporte a autenticação e localização: email/senha com verificação, redefinição e Google OAuth; detecção de localidade por geolocalização de IP (IPinfo Lite) com fallback em Accept-Language, e configuração de usuário sobrescritível.

Como Usar o chat

  1. Execute a aplicação (veja pré-requisitos) e crie um arquivo .env.local na raiz do projeto.
  2. Configure as opções de conexão MCP usando MCP_URL ou MCP_APPS_URL (escolha uma). Opcionalmente, defina variáveis de branding e contexto de persona, como NEXT_PUBLIC_APP_NAME e APP_PERSONA_CONTEXT.
  3. Faça login usando os métodos de autenticação suportados.
  4. Inicie uma conversa na UI do chat. O assistente pode transmitir respostas e chamar ferramentas MCP conforme expostas pelo seu servidor MCP.
  5. Se ativar limites de mensagens (WEEKLY_MESSAGE_LIMIT), a UI exibe um aviso quando a cota restante estiver baixa e bloqueia envios adicionais quando esgotada.

Casos de Uso

  • Assistente de entregas ou despacho: conecte a um servidor MCP relacionado a entregas para ajudar usuários a coordenar pedidos e acompanhar por meio de um fluxo conversacional.
  • Agendamento de serviços gerais: conecte um servidor MCP de agendamento de serviços para que o assistente guie usuários em tarefas e colete detalhes necessários via chamadas de ferramentas.
  • Interface de gerenciamento de tarefas: use um servidor MCP de gerenciamento de tarefas para traduzir linguagem natural em ações executadas pelo seu backend.
  • Assistência multimodal com imagens: envie uma imagem (corte antes de enviar) e peça ao assistente para analisá-la ou incorporá-la em um fluxo; também suporta respostas do assistente com cards de imagem.
  • Suporte multilíngue para equipes: conte com a detecção de localidade integrada e sistema i18n personalizado para localizar strings de UI e prompts de sistema de IA em idiomas como EN, ID, KR, JP, ES, ZH, DE, NL, FR e IT.

FAQ

Qual configuração MCP o app suporta?

O app suporta conexão a um servidor MCP. Ele usa MCP_URL ou MCP_APPS_URL. Definir ambos é rejeitado em tempo de execução.

Como as respostas de IA são entregues na UI?

As respostas são transmitidas em tempo real, com indicadores de digitação exibidos durante a geração.

Os usuários podem enviar imagens, e o assistente pode exibir imagens?

Sim. Usuários podem anexar imagens por meio de um fluxo de corte antes do envio; imagens são comprimidas e enviadas apenas quando a mensagem é enviada. O assistente também pode incorporar imagens em suas respostas usando sintaxe de imagem Markdown.

O histórico do chat é salvo?

Sim. O app mantém histórico de conversas persistente e usa paginação baseada em cursor com rolagem infinita.

Há limites no número de mensagens que podem ser enviadas?

Opcionalmente, um limite semanal por usuário pode ser configurado com WEEKLY_MESSAGE_LIMIT. Quando ativado, a UI avisa quando a contagem restante estiver baixa e retorna um bloqueio 429 quando esgotado.

Alternativas

  • Aplicativos web genéricos de chat com IA sem integração de ferramentas MCP: estes focam em chat baseado em prompts, mas não fornecem conexão estruturada ao protocolo de ferramentas no backend do seu serviço.
  • Implementações personalizadas de cliente MCP (UI/pilha diferentes): você pode criar outro cliente para chamadas de ferramentas MCP, mas o fluxo de trabalho e recursos (manipulação de imagens, histórico de mensagens, localização) podem diferir.
  • Soluções RAG/chat centradas em recuperação em vez de chamadas de ferramentas: estas são orientadas para busca de conhecimento e ancoragem em documentos, em vez de orquestrar ações via ferramentas MCP.
  • Interfaces de chat multimodais de uso geral: estas suportam entradas/saídas de imagens, mas podem não incluir o mesmo fluxo de trabalho impulsionado por MCP para conexão a ferramentas de serviços externos.