chat-ui

Vue d’ensemble

Qu’est-ce que chat-ui ?

chat-ui est un ensemble de briques d’interface de chat pour React et Next.js, fournies par ui.inference.sh. Il regroupe des composants prêts pour la production, comme un conteneur de chat, des éléments de message, un champ de saisie, des indicateurs de saisie et des avatars, afin que vous puissiez assembler une interface complète de chat ou d’assistant IA sans repartir de zéro.

Ces composants sont livrés sous forme de blocs au format shadcn que vous ajoutez à votre projet, pour une expérience développeur familière et personnalisable tout en prenant en charge les aspects répétitifs de la mise en page et du comportement d’une UI de chat.

Principales fonctionnalités en un coup d’œil

• Mise en page du conteneur de chat – Un composant <ChatContainer> prêt à l’emploi qui structure l’ensemble de la zone de chat.
• Rendu des messages – <ChatMessage> pour afficher les messages de l’utilisateur et de l’assistant, avec prise en charge des rôles et du contenu.
• Gestion de la saisie – <ChatInput> pour capturer le texte de l’utilisateur, gérer la soumission et les états désactivé/chargement.
• Indicateur de saisie – <TypingIndicator> pour afficher visuellement que l’assistant est en train de répondre.
• Compatible avec le streaming – Des patterns de liste de messages et de conteneur adaptés au streaming et aux réponses incrémentales de l’assistant.
• Ciblé React/Next.js – Conçu pour les applications React et Next.js modernes, en phase avec les patterns frontend courants.

À qui s’adresse chat-ui ?

chat-ui cible principalement :

• Les développeurs frontend qui créent des interfaces de chat ou d’assistant IA au-dessus d’API existantes.
• Les équipes produit qui souhaitent une mise en page de chat soignée sans passer des jours sur le câblage de l’UI.
• Les développeurs Next.js et React qui adoptent des blocs UI façon shadcn et veulent des composants de chat cohérents.

Si vous intégrez des modèles de langage, des bots de support ou des outils internes basés sur des interfaces conversationnelles, la skill chat-ui vous aide à mettre rapidement en place une interface professionnelle tout en conservant le contrôle total sur la logique, le style et les données.

Quels problèmes chat-ui résout-il ?

Mettre en place un frontend de chat implique en général de recréer toujours les mêmes éléments :

• Structurer une mise en page de chat responsive
• Afficher différemment les messages de l’utilisateur et de l’assistant
• Gérer la soumission des messages, les états désactivés et le chargement
• Afficher les indicateurs de saisie et maintenir le bon comportement de scroll

chat-ui règle la partie UI en fournissant :

• Des composants prédéfinis pour le conteneur, les messages, la saisie et la saisie en cours
• Une API cohérente à connecter à votre propre backend ou service d’IA
• Un point de départ conforme aux standards de design actuels, tout en restant personnalisable

Vous gardez la main sur la logique métier et les flux de données, mais vous évitez le travail répétitif lié à l’UI de chat.

Quand chat-ui est-il adapté ?

Utilisez chat-ui lorsque :

• Vous développez une application React ou Next.js.
• Vous voulez des composants de chat prêts à l’emploi qui s’intègrent à votre état existant et à vos appels d’API.
• Vous avez déjà, ou prévoyez d’avoir, un backend de chat ou d’assistant IA et avez besoin d’une couche d’interface.
• Vous préférez un contrôle au niveau des composants plutôt que d’intégrer un widget de chat SaaS tout-en-un.

C’est particulièrement utile pour :

• Les copilotes IA et assistants intégrés dans des tableaux de bord
• Les outils de support client ou de helpdesk interne
• Les outils développeurs avec interface conversationnelle
• Prototyper rapidement de nouveaux produits basés sur le chat

Quand chat-ui n’est-il pas idéal ?

chat-ui n’est peut‑être pas le meilleur choix si :

• Vous n’utilisez pas React ou Next.js. Les composants sont conçus pour l’écosystème React.
• Vous cherchez un widget de chat hébergé clé en main incluant backend, authentification et stockage. chat-ui se concentre uniquement sur l’UI frontend.
• Vous préférez une implémentation indépendante de tout système de design qui ne suit pas les patterns shadcn.

Dans ces cas, orientez-vous plutôt vers une bibliothèque UI générique ou un fournisseur de chat tout-en-un.

Utilisation

Prérequis à l’installation

Avant d’installer chat-ui, vous devez disposer :

• D’un projet React ou Next.js déjà créé
• De Node.js et npm (ou équivalent) installés
• D’une familiarité avec l’import et l’usage de composants React

Les composants chat-ui sont distribués via le registre au format shadcn sur ui.inference.sh, et vous les ajoutez à votre projet via une simple commande CLI.

Installer les composants chat-ui

Exécutez la commande suivante à la racine de votre projet frontend pour ajouter les composants de chat :

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

Cette commande récupère les blocs liés au chat depuis le registre ui.inference.sh dans votre projet. Elle va généralement créer des entrées sous un chemin du type @/registry/blocks/chat/ (comme indiqué dans les chemins d’import des exemples).

Après l’installation, vérifiez que votre projet contient des fichiers du type :

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

Les noms exacts peuvent varier selon votre configuration shadcn, mais les imports suivront les patterns présentés ci‑dessous.

Composants principaux et usage de base

1. ChatContainer – mise en page globale

ChatContainer englobe l’ensemble de la zone de conversation. Il est responsable de l’organisation des messages et des éléments de saisie.

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

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

Vous pouvez imbriquer votre liste de messages, votre champ de saisie et d’autres éléments d’interface à l’intérieur de ChatContainer. Considérez-le comme la base de la mise en page de l’expérience de chat.

2. ChatMessage – affichage des messages utilisateur et assistant

ChatMessage affiche chaque message et distingue les rôles comme user et 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>
  )
}

Vous êtes responsable de la gestion du tableau messages et de la transmission du role et du content de chaque message à ChatMessage. Cela permet de garder l’UI synchronisée avec votre backend ou votre modèle IA.

3. ChatInput – capturer et envoyer les messages utilisateur

ChatInput fournit la zone de texte et la gestion de la soumission.

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

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

Utilisez le callback onSubmit pour vous intégrer à votre logique d’envoi de message. La prop disabled est utile pendant l’attente d’une réponse, en particulier si vous streamez des tokens depuis un modèle d’IA.

4. TypingIndicator – afficher l’activité de l’assistant

TypingIndicator indique à l’utilisateur que l’assistant ou l’interlocuteur est en train de rédiger une réponse.

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

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

Réglez isTyping en fonction de l’état de votre application — par exemple, pendant l’attente des réponses du serveur ou le streaming de complétions.

Mettre le tout ensemble : un flux de chat simple

Voici un schéma simplifié montrant comment combiner ces composants dans une page 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>
  )
}

Cet exemple illustre comment chat-ui se concentre sur les primitives d’interface, tandis que vous fournissez la gestion d’état et l’intégration API.

Personnalisation et styles

Comme les composants chat-ui proviennent de ui.inference.sh sous forme de blocs au format shadcn, vous pouvez en général :

• Inspecter et modifier le code source des composants en local pour ajuster la mise en page, les couleurs ou la typographie.
• Les intégrer à vos design tokens ou à votre configuration Tailwind CSS existante.
• Étendre les composants avec des props ou wrappers supplémentaires pour gérer les avatars, horodatages ou actions sur les messages.

Consultez les fichiers générés dans votre projet après avoir exécuté la commande d’installation pour voir exactement comment les composants sont implémentés et comment les aligner au mieux avec votre design system.

FAQ

Comment installer chat-ui dans un projet React ou Next.js existant ?

Exécutez la commande CLI shadcn à la racine de votre projet :

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

Cela ajoute les composants chat-ui depuis ui.inference.sh dans votre base de code, généralement sous un chemin registry/blocks/chat. Vous pouvez ensuite importer ChatContainer, ChatMessage, ChatInput et TypingIndicator en suivant les chemins d’import documentés.

Est-ce que chat-ui fonctionne sans Next.js, dans une application React classique ?

Oui, les composants chat-ui sont des composants React standard. Tant que votre environnement supporte React, vous pouvez les intégrer dans une SPA React classique. L’essentiel est de pouvoir exécuter la commande npx shadcn@latest add ... et de résoudre correctement les imports générés dans votre bundler.

Est-ce que chat-ui inclut un backend ou une logique IA ?

Non. chat-ui fournit uniquement les composants d’interface frontend. Vous êtes responsable de :

• Gérer l’état messages
• Appeler votre backend, API ou modèle IA
• Gérer le streaming, les erreurs et l’authentification

Cette séparation rend chat-ui flexible : vous pouvez le connecter à n’importe quel backend de chat, qu’il s’agisse d’API sur mesure ou de plateformes IA tierces.

Puis-je personnaliser l’apparence des composants chat-ui ?

Oui. Les composants importés via le registre ui.inference.sh sont des composants React classiques stockés dans votre projet. Vous pouvez ouvrir les fichiers correspondants (par exemple chat-container, chat-message, chat-input et typing-indicator) et :

• Ajuster la mise en page et les espacements
• Modifier les couleurs, polices et bordures
• Ajouter des éléments d’interface supplémentaires comme des avatars, horodatages ou statuts de message

Comme vous possédez le code source, vous n’êtes pas verrouillé sur un style.

chat-ui convient-il pour créer des assistants IA et copilotes ?

Oui. chat-ui est particulièrement adapté aux assistants IA, copilotes et autres outils conversationnels. Il fournit :

• Un conteneur de chat flexible et une présentation des messages adaptée
• Des composants de saisie et d’indicateur de saisie bien adaptés aux réponses en streaming

Vous connectez ces éléments à votre backend IA, gérez le streaming ou les mises à jour incrémentales dans votre état, et laissez chat-ui gérer l’interface côté utilisateur.

Quand faut-il choisir une autre solution que chat-ui ?

Envisagez d’autres options si :

• Vous avez besoin d’un widget de chat entièrement géré (UI plus backend, base de données et auth) avec très peu d’ingénierie.
• Votre stack n’est pas basée sur React (par exemple Vue, Svelte ou rendu serveur sans React).
• Vous voulez des composants étroitement couplés à un produit backend spécifique.

Dans ces cas, une plateforme de chat dédiée ou une bibliothèque UI spécifique à votre framework sera souvent plus adaptée.

Où en savoir plus sur les composants chat-ui ?

Dans la skill, la référence principale est SKILL.md, qui décrit les composants disponibles et fournit des extraits de code d’usage. Après l’installation, vos fichiers de composants locaux deviennent la meilleure source de documentation, car ils montrent exactement comment les blocs chat-ui sont structurés dans votre projet et comment vous pouvez les étendre ou les modifier.