ChatUI is an MIT-licensed UI design language and React component library for conversational interfaces, published on npm as @chatui/core and aimed at front-end teams that need a ready chat surface instead of hand-built message components.

What it is

ChatUI is a TypeScript library maintained in the Alibaba GitHub organisation and distributed through npm as @chatui/core. It provides the component layer of a conversational interface: a Chat container, a Bubble message primitive, and a useMessages hook that returns messages, appendMsg, and setTyping. The visual layer ships as @chatui/core/dist/index.css, and the project pairs the components with a design language documented at the homepage, chatui.io. The README describes its interaction patterns as the best practice for chat interaction, drawn from the team's experience building Alime Chatbot.

The concrete problem it solves is the assembly cost of a chat front end. Turning generic React primitives into a message list, composer, typing indicator, and responsive layout is repetitive work that every conversational product otherwise repeats, and the accessibility and legacy-browser details are easy to get wrong along the way. ChatUI replaces that per-project scaffolding with a packaged set of conversational components and a hook-based message state model. An application keeps control of its own rendering, supplying renderMessageContent and a send handler, while the library handles the surrounding presentation and message flow.

Key capabilities

• Exports the Chat container, the Bubble message primitive, and the useMessages hook from the single package @chatui/core, with styles imported separately from @chatui/core/dist/index.css.
• useMessages returns messages, appendMsg, and setTyping, giving a message-list state model that does not require an external state library.
• appendMsg accepts a message object carrying type, content, and position, so outbound messages are appended with position: 'right'.
• Theme customization is supported in every detail, documented at chatui.io/docs/customize-theme.
• Internationalization support for dozens of languages, documented at chatui.io/docs/i18n, with a Simplified Chinese README variant (README.zh-CN.md) in the repository.
• Accessibility support, certified by the Accessibility Research Association.
• Responsive design that adapts to the device, written in TypeScript with predictable static types.

Who uses it and how

• React front-end teams building chatbot, assistant, or customer-service chat panels that sit inside an existing web application.
• Products that must serve multiple locales, using the built-in i18n support for dozens of languages rather than maintaining a separate message catalogue per chat component.
• Teams with legacy browser requirements: Chrome 49+, Edge 16+, Firefox 31+, Safari 9.1+, iOS Safari 9.3+, and Android WebView 6+, with Internet Explorer 11 covered through polyfills and a CSS Variables polyfill such as css-vars-ponyfill.
• Organisations that need an accessibility certification story, since the components carry certification from the Accessibility Research Association.
• Adopters who want to evaluate the components quickly, using the linked CodeSandbox demo before wiring the library into a larger application.

Getting started

Install with npm install @chatui/core --save, or with yarn add @chatui/core, then import Chat, Bubble, and useMessages from @chatui/core alongside @chatui/core/dist/index.css. The repository also includes a demo directory that runs with npm i followed by npm run dev.

How it compares

The facts provided do not list any paid products that this project replaces, and the README names no competing chat UI library. Those facts name only Alime Chatbot, the Alibaba chatbot whose interaction experience informed the project's recommended patterns, and that is an internal origin rather than a product marketed as an alternative. On the evidence available, ChatUI stands alone in this registry.

When to use it — and when not to

ChatUI ships front-end components only, so an adopter must supply the message transport, storage, and authentication behind it; the library handles presentation and local message state, not delivery. It is therefore a poor fit for teams outside React, or for anyone expecting a running chat service rather than a component package. The README itself is thin, delegating theme and i18n details to external documentation, and the repository carries 53 open issues, so prospective users should read the chatui.io docs and the issue tracker before committing to it.

npm install @chatui/core --save

yarn add @chatui/core

import Chat, { Bubble, useMessages } from '@chatui/core';
import '@chatui/core/dist/index.css';

const App = () => {
  const { messages, appendMsg, setTyping } = useMessages([]);

  function handleSend(type, val) {
    if (type === 'text' && val.trim()) {
      appendMsg({
        type: 'text',
        content: { text: val },
        position: 'right',
      });

      setTyping(true);

      setTimeout(() => {
        appendMsg({
          type: 'text',
          content: { text: 'Bala bala' },
        });
      }, 1000);
    }
  }

  function renderMessageContent(msg) {
    const { content } = msg;
    return <Bubble content={content.text} />;
  }

  return (
    <Chat
      navbar={{ title: 'Assistant' }}
      messages={messages}
      renderMessageContent={renderMessageContent}
      onSend={handleSend}
    />
  );
};

cd demo
npm i
npm run dev