What it solves
You can integrate in two ways: use JazzmineChatfor the fastest managed path, or use ChatInterface when your app must own every part of state and data flow.
SDK-agnostic by design
Any backend client that structurally matches the IJazzmineClient contract can power managed mode.
Package role in the ecosystem
- Renders chat layouts, message streams, sidebars, and search UI.
- Maps backend conversation and message data into UI state.
- Exposes reusable components for custom app-level composition.
- Stays SDK-agnostic at runtime through the IJazzmineClient contract.
Integration modes
| Mode | Best for | You manage | Package manages |
|---|---|---|---|
| JazzmineChat | Fastest production integration | Client instance + optional callbacks | Conversation create/list/search/delete/update, history loading, send flow, loading states |
| ChatInterface | Full custom state architecture | All data, state, and actions | Presentation, local UI interactions, context selection UX |
What you get
Conversation lifecycle
- Managed create, select, rename, and delete flows.
- Sidebar pagination and search modal integration.
Message experience
- Markdown + GFM + LaTeX rendering with react-markdown, remark-gfm, remark-math, and rehype-katex.
- Empty-state assistant message support through defaultMessage.
Context and branding
- Explicit context selection and forwarding support.
- History mapping from backend original_content and explicit_context data.
- Branding and avatar customization via logo and assistant avatar props.
Install
install.sh
npm install @jazzmine-ui/reactInstall peer dependencies if your app does not already provide them:
peer-deps.sh
npm install react react-dom react-markdown remark-gfm remark-math rehype-katex katexImport package styles once at app entry:
main.tsx
import '@jazzmine-ui/react/styles';Public exports
Components
- ChatInterface
- Sidebar
- MessageList
- FloatingChatWidget
- JazzmineChat
- SearchModal
Types
- ChatInterfaceProps
- SidebarProps
- MessageListProps
- FloatingChatWidgetProps
- JazzmineChatProps
- SearchModalProps
- IJazzmineClient
- Context
- Message
- Chat
Where to go next
Getting Started
Pick a mode quickly and get a working implementation in minutes.
JazzmineChat
Managed mode with lifecycle orchestration built in.
ChatInterface
Fully controlled mode for custom state architecture.
Client Contract
Understand the IJazzmineClient interface and shared data models.
Theming
Customize colors, spacing, and layout with CSS variables.