Quick decision guide
| If you need... | Pick | Why |
|---|---|---|
| Fastest production integration | JazzmineChat | It manages conversation lifecycle, history, search, and loading/error handling. |
| Full control over state, fetching, and actions | ChatInterface | You own every data flow and callback while reusing the same UI system. |
Install
install.sh
npm install @jazzmine-ui/reactReact runtime required
@jazzmine-ui/react is a React UI package and requires React 18+ to run.
Install peer dependencies if your app does not already provide them:
peer-deps.sh
npm install react react-dom react-markdown remark-gfmImport package styles once at app entry:
main.tsx
import '@jazzmine-ui/react/styles';Why peer dependencies matter
The package relies on your app's React runtime and markdown stack. Keeping these as peer dependencies avoids duplicate React instances and keeps markdown rendering consistent.
Minimal working example: JazzmineChat
This is the fastest path. You provide a client and render the component.
App.tsx
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-jazzmine-api.example.com', {
apiKey: 'your-api-key',
defaultUserId: 'user',
});
export function App() {
return (
<div style={{ height: '100vh' }}>
<JazzmineChat
client={client} /* Required: backend client that matches IJazzmineClient */
assistantName="Jazzmine AI" /* Optional: assistant label in UI */
placeholder="Ask anything..." /* Optional: composer placeholder */
defaultMessage="Welcome! Ask me anything to get started." /* Optional: empty-state message */
onError={(error) => {
/* Optional: handle recoverable errors in one place */
console.error('JazzmineChat error:', error);
}}
/>
</div>
);
}Minimal working example: ChatInterface
Use this when your app needs complete control over state and actions.
App.tsx
import React from 'react';
import { ChatInterface } from '@jazzmine-ui/react';
import type { Chat, Message } from '@jazzmine-ui/react';
import '@jazzmine-ui/react/styles';
export function App() {
const [messages, setMessages] = React.useState<Message[]>([]);
const [chats] = React.useState<Chat[]>([]);
const [activeChatId, setActiveChatId] = React.useState<string>();
const [isLoading, setIsLoading] = React.useState(false);
const onSend = async (text: string) => {
setMessages((prev) => [
...prev,
{ id: crypto.randomUUID(), text, sender: 'user', timestamp: new Date().toISOString() },
]);
setIsLoading(true);
try {
const reply = `Echo: ${text}`;
setMessages((prev) => [
...prev,
{
id: crypto.randomUUID(),
text: reply,
sender: 'assistant',
timestamp: new Date().toISOString(),
},
]);
} finally {
setIsLoading(false);
}
};
return (
<div style={{ height: '100vh' }}>
<ChatInterface
chats={chats} /* Required: sidebar conversations */
activeChatId={activeChatId} /* Optional: currently selected chat id */
messages={messages} /* Required: current feed data */
onSend={onSend} /* Required: send handler */
onNewChat={() => {}} /* Required: create chat trigger */
onSelectChat={setActiveChatId} /* Required: chat selection handler */
isLoading={isLoading} /* Optional: show assistant loading row */
defaultMessage="Welcome! Ask me anything to get started." /* Optional: empty-state message */
/>
</div>
);
}