Getting Started
Pick an integration mode quickly, install once, and get a working chat UI running in under five minutes.
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
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:
npm install react react-dom react-markdown remark-gfm remark-math rehype-katex katexImport package styles once at app entry:
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 — provide a client and render the component.
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}
assistantName="Jazzmine AI"
placeholder="Ask anything..."
defaultMessage="Welcome! Ask me anything to get started."
onError={(error) => console.error('JazzmineChat error:', error)}
/>
</div>
);
}Minimal working example: ChatInterface
Use this when your app needs complete control over state and actions.
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' }]);
setIsLoading(true);
try {
setMessages((prev) => [
...prev,
{ id: crypto.randomUUID(), text: `Echo: ${text}`, sender: 'assistant' },
]);
} finally {
setIsLoading(false);
}
};
return (
<div style={{ height: '100vh' }}>
<ChatInterface
chats={chats}
activeChatId={activeChatId}
messages={messages}
onSend={onSend}
onNewChat={() => {}}
onSelectChat={setActiveChatId}
isLoading={isLoading}
defaultMessage="Welcome! Ask me anything to get started."
/>
</div>
);
}