Reachat
Reaviz · Marketing · Chatbot
Reachat é uma biblioteca open source de React com componentes de chat prontos para apps com LLM, o que deixa uma interface de chat com IA pronta em horas, não em semanas.
Sobre Reachat
About
O que é o Reachat
Reachat é uma biblioteca de componentes de chat para React feita para quem já trabalha com React e Tailwind. Ela cobre o que toda interface de chat para LLM precisa ter: a lista de mensagens, o campo de escrita, a barra de sessões, a renderização de markdown, o envio de arquivos e uma camada de estilo que fica nas suas mãos. A instalação sai do npm e os componentes entram num app que você já está escrevendo.
A biblioteca não mexe no seu backend. Não chama OpenAI, Anthropic nem qualquer outro provedor por conta própria, e também não guarda conversas. Seu código envia as mensagens, resolve a requisição e devolve a resposta. Por isso os componentes de chat open source funcionam igual com um modelo local, com um proxy ou com um serviço que você já paga.
O limite está no escopo. Reachat é uma camada de interface, não um produto fechado. Não existe widget hospedado, painel nem analytics de fábrica. Se você quer uma caixa de chat num site institucional sem tocar em código, essa não é a ferramenta. Se está montando uma UI de chat em React dentro do seu próprio projeto, ela tira quase todo o trabalho chato do caminho.
Como começar
- Rode
npm i reachatno projeto e confirme que o Tailwind está configurado, porque os componentes dependem dele para o estilo. - Importe o componente de chat e monte na sua página ou rota.
- Passe o array de mensagens e um handler de envio que chame o seu próprio endpoint.
- Ajuste a aparência com classes do Tailwind ou com slots, e veja as demos do Storybook para conhecer as props que ainda não usou.
Informações do produto
Uma visão rápida dos preços, das plataformas compatíveis e do desempenho de Reachat.
Ideal para
Os usuários, tarefas e cenários em que esta ferramenta se encaixa melhor.
Usuários
- Desenvolvedores frontend que montam uma interface de chat com IA
- Times de produto pequenos sem designer dedicado
- Quem testa um recurso com LLM dentro de um app existente
Tarefas
- Montar uma tela de chat contra um endpoint próprio
- Exibir respostas de agentes com chamadas de ferramentas
- Deixar o chat com a cara da marca
Cenários
- Colocar um copiloto interno no time de suporte ou vendas
- Adicionar perguntas sobre documentos a um painel SaaS
- Trocar uma tela de chat feita à mão que quebrava em conversas longas
Principais recursos
Dois modos de layout
O Reachat traz um layout de console com lista de sessões e outro de companheiro, mais parecido com um painel lateral. Cada time escolhe o que combina com a rotina dos usuários. Os dois usam os mesmos componentes de mensagem, então trocar de layout não significa refazer a conversa.
Renderização de markdown para saída real
Resposta de modelo quase nunca chega em frases simples. O Reachat desenha markdown, tabelas GFM, código com destaque, blocos JSON, listas, fórmulas e vídeos do YouTube incorporados desde o início, com suporte a plugins remark e rehype se precisar de mais. Essa é a parte que quase ninguém calcula no começo.
Papéis de mensagem para agentes
Cada mensagem carrega o papel user, assistant, system ou tool. Chamadas de ferramentas e resultados ficam no mesmo fio da conversa, o que importa numa interface de chat para agentes que busca, consultam ou executam funções antes de responder. Os dados continuam do seu lado; a biblioteca cuida da exibição.
Anexos e prévia de imagens
O usuário envia arquivos e vê a prévia das imagens dentro do próprio campo de escrita. Os anexos viajam no seu payload de mensagens, então você decide onde ficam guardados e como vão para o modelo. Não existe widget de upload separado para ligar.
Menções e comandos
O campo de escrita aceita menções e comandos com barra via Tiptap. O usuário referencia um documento, um contato ou um prompt salvo sem sair da caixa de texto. O que cada comando faz é decisão sua, e essa liberdade mantém o recurso preso ao seu produto em vez de um menu fixo.
Tema com Tailwind e slots
Todos os componentes aceitam classes do Tailwind, e os slots abrem as peças internas, então dá para mudar um botão sem forkar o código. Não há runtime de CSS-in-JS nem arquivo de tema para manter. Se o seu design system já fala Tailwind, a tela de chat herda o mesmo vocabulário.
Conversas longas sob controle
Paginação de mensagens, agrupamento inteligente de sessões e atalhos de teclado vêm de série. Uma conversa de centenas de mensagens continua usável, e o agrupamento mantém juntas as sessões relacionadas na barra lateral. A navegação por teclado cobre o campo de escrita e a lista de mensagens.
Prós e contras
Prós
- Licença Apache 2.0, então você inclui num produto comercial sem passar por revisão jurídica.
- Sem acoplamento ao backend, o que deixa qualquer provedor ou um modelo na sua infraestrutura no jogo.
- Resolve as partes chatas do chat: casos estranhos de markdown, blocos de código e rolagem quando chegam mensagens novas.
- Tailwind e slots barateiam o redesenho, mesmo quando a mudança é num único componente.
Contras
- Assume React e Tailwind. Um projeto em Vue, Svelte ou HTML puro não aproveita nada.
- Não existe versão hospedada, então deploy, autenticação e persistência de mensagens ficam por sua conta.
- A documentação se apoia nas demos do Storybook e os casos de borda costumam exigir uma olhada no código-fonte.
- A versão 4.0 mudou APIs em relação às entregas anteriores, então tutoriais antigos podem não bater com o código atual.
Perguntas frequentes
Entrega componentes de interface de chat para apps em React que conversam com um LLM. Você traz o backend e a chamada ao modelo; o Reachat traz a interface.
Conteúdo relacionado
Explore ferramentas, skills e artigos relacionados a Reachat.
Alternativas a Reachat
ngram 2.0
ngram · Vídeo · Marketingngram 2.0 é um gerador de vídeo com IA para equipes. Ele transforma um pedido, uma gravação de tela ou a URL de um produto em vídeo explicativo, demo ou vídeo com avatar de IA, e cada cena continua editável.
shippedit.me
Krawlup · Marketing · NegóciosO shippedit.me agora redireciona para o Krawlup, uma plataforma web que audita SEO, AEO e velocidade toda semana e entrega as correções a agentes de código via MCP.
MePersona
MePersona, Inc. · Escrita · Produtividade · MarketingMePersona é uma caixa de entrada unificada com IA para criadores de conteúdo. Aprende o seu jeito de escrever, rascunha respostas aos fãs em 12 plataformas e envia apenas o que você aprova.