chat-ui

Visão geral

O que é o chat-ui?

chat-ui é um conjunto de blocos de construção de interface de chat para React e Next.js, fornecido por ui.inference.sh. Ele reúne componentes prontos para produção, como contêiner de chat, itens de mensagem, caixa de entrada, indicadores de digitação e avatares, para você montar um frontend completo de chat ou assistente de IA sem precisar começar do zero.

Esses componentes são disponibilizados como blocos no estilo shadcn que você adiciona ao seu projeto, proporcionando uma experiência de desenvolvimento familiar e fácil de adaptar, enquanto cuidam das partes repetitivas de layout e comportamento da UI de chat.

Principais recursos em destaque

• Layout de contêiner de chat – Um componente <ChatContainer> pronto que estrutura toda a área de chat.
• Renderização de mensagens – <ChatMessage> para exibir mensagens de usuário e assistente com suporte a roles e conteúdo.
• Tratamento da entrada de chat – <ChatInput> para capturar o texto do usuário, lidar com ações de envio e gerenciar estados de desabilitado/carregando.
• Indicador de digitação – <TypingIndicator> para feedback visual enquanto o assistente está respondendo.
• Pronto para streaming – Padrões de lista de mensagens e contêiner adequados para respostas de assistente em streaming e incrementais.
• Focado em React/Next.js – Projetado para aplicações modernas em React e Next.js, alinhado a padrões comuns de frontend.

Para quem é o chat-ui?

chat-ui é voltado para:

• Desenvolvedores frontend que estão construindo interfaces de chat ou assistentes de IA sobre APIs existentes.
• Times de produto que querem um layout de chat refinado sem gastar dias conectando e ajustando a UI.
• Desenvolvedores Next.js e React que usam blocos de UI no estilo shadcn e querem componentes de chat consistentes.

Se você está integrando modelos de linguagem, bots de suporte ou ferramentas internas que dependem de interfaces conversacionais, a skill chat-ui ajuda a colocar uma interface profissional no ar rapidamente, mantendo controle total sobre lógica, estilo e dados.

Que problemas o chat-ui resolve?

Implementar um frontend de chat normalmente significa recriar sempre as mesmas peças:

• Estruturar um layout de chat responsivo
• Exibir mensagens de usuário e assistente de forma diferente
• Tratar envio de mensagens, estados desabilitados e carregamento
• Exibir indicadores de digitação e manter o comportamento de rolagem

chat-ui resolve a parte de UI ao fornecer:

• Componentes pré-definidos para contêiner, mensagens, entrada e digitação
• Uma superfície de API consistente para conectar ao seu backend ou serviço de IA
• Um ponto de partida alinhado com expectativas de design modernas, mas ainda customizável

Você continua dono da lógica de negócio e do fluxo de dados, mas pula o trabalho repetitivo de UI.

Quando o chat-ui é uma boa escolha

Use chat-ui quando:

• Você está construindo uma aplicação em React ou Next.js.
• Você quer componentes de chat prontos para uso que se integrem ao seu estado e às suas chamadas de API.
• Você já tem, ou pretende ter, um backend de chat ou assistente de IA e precisa da camada de frontend.
• Você prefere controle em nível de componente em vez de embutir um widget de chat SaaS completo.

Ele é especialmente útil em:

• Copilotos de IA e assistentes embutidos em dashboards
• Ferramentas de suporte ao cliente ou helpdesk interno
• Ferramentas de desenvolvedor com interfaces conversacionais
• Prototipagem rápida de novos produtos baseados em chat

Quando o chat-ui pode não ser ideal

chat-ui pode não ser a melhor opção se:

• Você não usa React nem Next.js. Os componentes são construídos para o ecossistema React.
• Você quer um widget de chat hospedado e plug-and-play que inclua backend, autenticação e armazenamento. chat-ui foca apenas na UI de frontend.
• Você prefere uma implementação agnóstica de sistema de design, que não siga os padrões do estilo shadcn.

Nesses casos, considere usar uma biblioteca de UI genérica ou um provedor de chat turnkey.

Como usar

Pré-requisitos de instalação

Antes de instalar o chat-ui, você deve ter:

• Um projeto React ou Next.js já criado
• Node.js e npm (ou compatível) instalados
• Familiaridade com importação e uso de componentes React

Os componentes do chat-ui são distribuídos via registro no estilo shadcn em ui.inference.sh, e você os adiciona ao seu projeto com um único comando de CLI.

Instalar os componentes do chat-ui

Execute o comando abaixo na raiz do seu projeto frontend para adicionar os componentes de chat:

# Install chat components
npx shadcn@latest add https://ui.inference.sh/r/chat.json

Esse comando traz os blocos relacionados a chat do registro ui.inference.sh para o seu projeto. Normalmente, ele cria entradas em um caminho semelhante a @/registry/blocks/chat/ (como mostrado nos caminhos de importação dos exemplos).

Após a instalação, confirme se o seu projeto agora inclui arquivos como:

• chat-container.tsx
• chat-message.tsx
• chat-input.tsx
• typing-indicator.tsx

Os nomes exatos podem variar conforme a sua configuração do shadcn, mas os imports seguirão os padrões mostrados abaixo.

Componentes principais e uso básico

1. ChatContainer – layout geral

ChatContainer envolve toda a área de conversa. Ele é responsável por organizar como as mensagens e os elementos de entrada são posicionados.

import { ChatContainer } from "@/registry/blocks/chat/chat-container"

function Chat() {
  return (
    <ChatContainer>
      {/* messages and input go here */}
    </ChatContainer>
  )
}

Você pode aninhar sua lista de mensagens, input e outros elementos de UI dentro de ChatContainer. Encare-o como a base de layout da experiência de chat.

2. ChatMessage – renderizar mensagens de usuário e assistente

ChatMessage exibe mensagens individuais e diferencia entre roles, como user e assistant.

import { ChatMessage } from "@/registry/blocks/chat/chat-message"

function Messages({ messages }) {
  return (
    <div>
      {messages.map((message) => (
        <ChatMessage
          key={message.id}
          role={message.role}
          content={message.content}
        />
      ))}
    </div>
  )
}

Você é responsável por gerenciar o array messages e passar o role e o content de cada mensagem para ChatMessage. Isso mantém a UI em sincronia com o seu backend ou modelo de IA.

3. ChatInput – capturar e enviar mensagens do usuário

ChatInput fornece a área de texto e o tratamento do envio.

import { ChatInput } from "@/registry/blocks/chat/chat-input"

function ChatBox({ onSend, isLoading }) {
  return (
    <ChatInput
      onSubmit={(message) => onSend(message)}
      placeholder="Type a message..."
      disabled={isLoading}
    />
  )
}

Use o callback onSubmit para integrar com a sua lógica de envio de mensagens. A prop disabled é útil enquanto você aguarda uma resposta, especialmente se estiver fazendo streaming de tokens de um modelo de IA.

4. TypingIndicator – mostrar atividade do assistente

TypingIndicator avisa o usuário de que o assistente ou outra parte está escrevendo uma resposta.

import { TypingIndicator } from "@/registry/blocks/chat/typing-indicator"

function Footer({ isTyping }) {
  return <>{isTyping && <TypingIndicator />}</>
}

Defina isTyping com base no estado da sua aplicação — por exemplo, enquanto espera respostas do servidor ou completions em streaming.

Juntando tudo: um fluxo de chat simples

Abaixo está um esboço simplificado de como combinar esses componentes em uma página React ou Next.js:

import { useState } from "react"
import { ChatContainer } from "@/registry/blocks/chat/chat-container"
import { ChatMessage } from "@/registry/blocks/chat/chat-message"
import { ChatInput } from "@/registry/blocks/chat/chat-input"
import { TypingIndicator } from "@/registry/blocks/chat/typing-indicator"

export function ChatPage() {
  const [messages, setMessages] = useState([])
  const [isTyping, setIsTyping] = useState(false)

  async function handleSend(userMessage) {
    const nextMessages = [
      ...messages,
      { id: Date.now(), role: "user", content: userMessage },
    ]
    setMessages(nextMessages)
    setIsTyping(true)

    // Call your backend or AI service here
    const reply = await fetch("/api/chat", {
      method: "POST",
      body: JSON.stringify({ messages: nextMessages }),
    }).then((res) => res.json())

    setMessages((prev) => [
      ...prev,
      { id: Date.now() + 1, role: "assistant", content: reply.content },
    ])
    setIsTyping(false)
  }

  return (
    <ChatContainer>
      <div>
        {messages.map((message) => (
          <ChatMessage
            key={message.id}
            role={message.role}
            content={message.content}
          />
        ))}
      </div>

      <ChatInput
        onSubmit={handleSend}
        placeholder="Ask me anything..."
        disabled={isTyping}
      />

      {isTyping && <TypingIndicator />}
    </ChatContainer>
  )
}

Este exemplo mostra como o chat-ui foca nos blocos de UI, enquanto você é responsável pelo gerenciamento de estado e pela integração com a API.

Personalização e estilo

Como os componentes do chat-ui vêm do ui.inference.sh como blocos no estilo shadcn, você normalmente pode:

• Inspecionar e editar o código-fonte dos componentes localmente para ajustar layout, cores ou tipografia.
• Integrar com seus design tokens existentes ou com a configuração do Tailwind CSS.
• Estender componentes com props adicionais ou wrappers para lidar com avatares, timestamps ou ações de mensagem.

Verifique os arquivos gerados no seu projeto após executar o comando de instalação para ver exatamente como os componentes são implementados e como alinhá-los melhor ao seu design system.

FAQ

Como instalo o chat-ui em um projeto React ou Next.js existente?

Execute o comando da CLI do shadcn a partir da raiz do seu projeto:

npx shadcn@latest add https://ui.inference.sh/r/chat.json

Isso adiciona os componentes do chat-ui a partir de ui.inference.sh ao seu codebase, normalmente em um caminho registry/blocks/chat. Depois disso, você pode importar ChatContainer, ChatMessage, ChatInput e TypingIndicator usando os caminhos de import documentados.

O chat-ui funciona sem Next.js, em React puro?

Sim, os componentes do chat-ui são componentes React padrão. Desde que seu ambiente suporte React, você pode integrá-los em uma SPA em React puro. O ponto importante é conseguir rodar o comando npx shadcn@latest add ... e resolver corretamente os imports gerados no seu bundler.

O chat-ui inclui algum backend ou lógica de IA?

Não. chat-ui fornece apenas os componentes de UI de frontend. Você é responsável por:

• Gerenciar o estado de messages
• Chamar seu backend, API ou modelo de IA
• Tratar streaming, erros e autenticação

Essa separação torna o chat-ui flexível: você pode conectá-lo a qualquer backend de chat, de APIs próprias a plataformas de IA de terceiros.

Posso personalizar a aparência dos componentes do chat-ui?

Sim. Os componentes importados via registro ui.inference.sh são componentes React comuns, armazenados no seu projeto. Você pode abrir os arquivos correspondentes (por exemplo, chat-container, chat-message, chat-input e typing-indicator) e:

• Ajustar layout e espaçamento
• Alterar cores, fontes e bordas
• Integrar elementos extras de UI, como avatares, timestamps ou status da mensagem

Como você é dono do código-fonte, não há lock-in de estilização.

O chat-ui é adequado para construir assistentes de IA e copilotos?

Sim. chat-ui se encaixa naturalmente em assistentes de IA, copilotos e ferramentas conversacionais similares. Ele oferece:

• Um contêiner de chat flexível e apresentação de mensagens
• Componentes de entrada e indicador de digitação adequados para respostas em streaming

Você conecta essas peças ao seu backend de IA, trata streaming ou atualizações incrementais no seu estado e deixa o chat-ui cuidar da interface voltada para o usuário.

Quando devo escolher outra solução em vez do chat-ui?

Considere alternativas se:

• Você precisa de um widget de chat totalmente gerenciado (UI mais backend, banco de dados e autenticação) com esforço mínimo de engenharia.
• Sua stack não é baseada em React (por exemplo, Vue, Svelte ou renderização no servidor sem React).
• Você quer componentes fortemente acoplados a um produto de backend específico.

Nesses cenários, uma plataforma de chat dedicada ou uma biblioteca de UI específica para o seu framework pode ser uma opção melhor.

Onde posso aprender mais sobre os componentes do chat-ui?

Dentro da skill, a principal referência é o arquivo SKILL.md, que descreve os componentes disponíveis e traz trechos de código de uso. Após a instalação, os arquivos locais de componentes se tornam a melhor fonte de documentação, pois mostram exatamente como os blocos do chat-ui estão estruturados no seu projeto e como você pode estendê-los ou modificá-los.