Production-ready React chat UI for Jazzmine-powered assistants.

Use the managed wrapper or compose your own chat experience with full state control.

     

Documentation  |  npm  |  Getting Started

---

The Ecosystem

Jazzmine is a set of focused packages for production AI chat systems. Use them together or adopt only what you need.

Package	Language	What it does	Install
jazzmine-core	Python	Agent runtime, orchestration, memory, and tools	pip install jazzmine
@jazzmine-ui/react	TypeScript	React UI component library for chat interfaces	npm install @jazzmine-ui/react
@jazzmine-ui/sdk	TypeScript	Client SDK for Jazzmine backend APIs	npm install @jazzmine-ui/sdk
jazzmine-logging	Python	Structured async logging with multi-sink support	pip install jazzmine-logging
jazzmine-security	Python	Moderation and input/output safety layers	pip install jazzmine-security

New to Jazzmine? Start here: https://www.jazzmine.dev/docs/getting-started

---

Jazzmine React

     

Build polished chat interfaces quickly with a component library that supports both managed and fully controlled modes.

What You Get Out Of The Box

• Conversation list UX with select/rename/delete patterns.
• Message stream rendering with markdown, GFM tables/lists, and LaTeX math support.
• Explicit context selection from prior messages and forwarding in send flow.
• Search across message content with active-result navigation.
• Sidebar and floating-widget entry points for desktop and compact experiences.
• Branding and avatar customization for production embedding.
• Floating chat mode with anonymous session-scoped user IDs.

Features

Managed integration	Use JazzmineChat to handle conversations, history, and messaging flow
Controlled integration	Use ChatInterface when your app owns all data and state
Floating mode	Pass floating to JazzmineChat to render as a floating widget
Rich assistant output	Markdown + GFM + LaTeX rendering out of the box
Context selection	Select message snippets and send them as explicit context
Branding controls	Pass custom logo, assistant avatar, and avatar fallback text

Requirements

• React 18+
• react-dom 18+

Installation

npm install @jazzmine-ui/react
npm install react react-dom react-markdown remark-gfm remark-math rehype-katex katex

Import styles once at app entry:

import '@jazzmine-ui/react/styles';

If your bundler does not automatically include peer dependencies, install them explicitly:

npm install react-markdown remark-gfm remark-math rehype-katex katex

Quickstart

import React from 'react';
import JazzmineClient from '@jazzmine-ui/sdk';
import { JazzmineChat } from '@jazzmine-ui/react';
import '@jazzmine-ui/react/styles';

const client = new JazzmineClient('https://your-api.example.com', {
  apiKey: 'your-api-key',
  defaultUserId: 'user',
});

export function App() {
  return (
    <div style={{ height: '100vh' }}>
      <JazzmineChat
        client={client}
        assistantName="Jazzmine AI"
        logo="/brand-logo.png"
        logoAlt="Acme AI"
        assistantAvatar="/assistant-avatar.png"
        assistantAvatarFallback="AC"
        placeholder="Type your message..."
      />
    </div>
  );
}

Floating Mode

Pass the floating prop to render the chat as a floating widget instead of the full sidebar interface. This is useful for embedding a compact assistant on any page.

<JazzmineChat
  client={client}
  floating
  initialOpen={false}
  assistantName="Jazzmine AI"
  logo="/brand-logo.png"
  defaultMessage="Hi! How can I help you today?"
/>

In floating mode:

• The full ChatInterface with sidebar and conversation history is replaced by a compact floating panel.
• A new anonymous user ID (customer-{uuid}) is generated automatically on each page load and used for conversation creation. It is not persisted — refreshing the page starts a fresh session.
• The userId prop is ignored in floating mode.
• Conversation listing, search, and history are disabled — the widget is single-session only.

Controlled Mode Example (ChatInterface)

Use this mode when your app already owns fetching, persistence, and business logic.

import React from 'react';
import { ChatInterface } from '@jazzmine-ui/react';
import type { Chat, Message, Context } from '@jazzmine-ui/react';
import '@jazzmine-ui/react/styles';

export function ControlledChat() {
  const [messages, setMessages] = React.useState<Message[]>([]);
  const [chats, setChats] = React.useState<Chat[]>([]);
  const [activeChatId, setActiveChatId] = React.useState<string>();
  const [isLoading, setIsLoading] = React.useState(false);

  const onSend = async (text: string, contexts?: Context[]) => {
    setMessages((prev) => [
      ...prev,
      { id: crypto.randomUUID(), text, sender: 'user', timestamp: new Date().toISOString(), contexts },
    ]);

    setIsLoading(true);
    try {
      // Replace with your backend call.
      const reply = `Echo: ${text}`;
      setMessages((prev) => [
        ...prev,
        { id: crypto.randomUUID(), text: reply, sender: 'assistant', timestamp: new Date().toISOString() },
      ]);
    } finally {
      setIsLoading(false);
    }
  };

  return (
    <ChatInterface
      chats={chats}
      activeChatId={activeChatId}
      messages={messages}
      assistantName="Jazzmine AI"
      onSend={onSend}
      onNewChat={() => setChats((prev) => [...prev, { id: crypto.randomUUID(), title: 'New Chat' }])}
      onSelectChat={setActiveChatId}
      isLoading={isLoading}
      defaultMessage="Welcome!"
    />
  );
}

Integration Modes

Component	Best for	You manage	Package manages
JazzmineChat	Fast production integration	Client instance + optional callbacks	Conversation create/list/search/delete/update, history load, send flow, loading states
JazzmineChat (floating)	Embeddable widget on any page	Client instance + optional callbacks	Floating panel, anonymous session ID, conversation creation, send flow
ChatInterface	Full custom architecture	All state/data/actions	Layout, interaction UX, context selection, search UX
FloatingChatWidget	Controlled floating entry-point	Message state + send callback	Floating panel behavior + chat-window rendering

JazzmineChat Props

Prop	Type	Default	Description
client	IJazzmineClient	required	Jazzmine backend client instance
userId	string	"user"	User identifier for conversation scoping. Ignored when floating is true
assistantName	string	resolved from API	Display name for the assistant
logo	string	—	URL for the branding logo shown in the sidebar or widget button
logoAlt	string	—	Accessible alt text for the logo
assistantAvatar	string	—	URL for the assistant avatar image
assistantAvatarFallback	string	—	Initials or short text shown when avatar image is unavailable
placeholder	string	"Type your message..."	Input placeholder text
defaultMessage	string	""	Message shown in the chat window before any messages exist
floating	boolean	false	Renders as a floating chat widget instead of the full interface
initialOpen	boolean	false	Whether the floating panel starts open. Only applies when floating is true
loadingText	string	"typing"	Text shown in the loading indicator
loadingVariant	string	"text-and-dots"	Visual style of the loading indicator
onError	(error: Error) => void	—	Called when an error occurs in any managed operation
className	string	""	Additional CSS class applied to the root element

API Quick Reference

Common top-level props you will likely use first:

• assistantName: display name in navbar/sidebar/messages.
• logo + logoAlt: sidebar/widget branding image and accessible alt text.
• assistantAvatar + assistantAvatarFallback: assistant avatar image and fallback initials.
• defaultMessage: assistant message shown when there is no backend message yet.
• placeholder: message-input placeholder text.
• floating: switch to floating widget mode.
• initialOpen: control whether the floating widget starts open.

For full prop tables, see docs: https://www.jazzmine.dev

Documentation

For full API tables, detailed prop docs, backend client contract, and integration guides:

• https://www.jazzmine.dev
• https://www.jazzmine.dev/docs/getting-started
• https://www.jazzmine.dev/react

---

License

Apache 2.0, see LICENSE for details.