React Chat Agent

Clean, production-ready React chat component. Bring your own API - you control everything.

Features

- ✅ External Token Management - You control authentication
- ✅ Automatic Token Refresh - Handles expiry seamlessly
- ✅ Dual Mode - WebSocket or SSE streaming
- ✅ Session Management - Clean session lifecycle
- ✅ Type Safety - Full TypeScript support
- ✅ Customizable - Dark/light themes, custom styling
- ✅ Production Ready - Error handling, retry logic, file uploads

Installation

``bash
npm install react-ai-agent
`

Then import the ui in your app:

`javascript
import 'react-ai-agent/ui.css';
`

Quick Start

`javascript
import {
ChatProvider,
DefaultPanel,
tokenManager,
sessionManager
} from 'react-ai-agent';

function App() {
// 1. Configure token refresh
tokenManager.setRefreshCallback(async (refreshToken) => {
const res = await fetch('/api/token/refresh', {
method: 'POST',
body: JSON.stringify({ refreshToken })
});
return await res.json(); // { accessToken, refreshToken, expiresIn }
});

// 2. Configure session creation
sessionManager.setCreateSessionCallback(async () => {
const res = await fetch('/api/session/create', { method: 'POST' });
return await res.json(); // { sessionId, accessToken, refreshToken, expiresIn }
});

// 3. Initialize tokens
tokenManager.setTokens({
sessionId: 'your-session-id',
accessToken: 'your-token',
refreshToken: 'your-refresh-token',
expiresIn: 900
});

return (

onCreateSession={async () => await sessionManager.createSession()}
config={{
chatUrl: 'https://api.example.com/chat',
historyUrl: 'https://api.example.com/history'
}}
/>

);
}
`

Documentation

See INTEGRATION_GUIDE.md for complete documentation including:
- Architecture overview
- API reference
- Backend requirements
- Message format specifications
- Complete examples

Package Exports

`javascript
import {
ChatProvider, // Context provider
DefaultPanel, // Main chat component
useChatContext, // Hook to access chat state
tokenManager, // Token lifecycle management
sessionManager, // Session lifecycle management
chatApi, // API client
streamService, // Stream handler
webSocketService // WebSocket client
} from 'react-ai-agent';
`

Examples

- examples/App.jsx - Simple SSE example
- examples/App-with-session.jsx` - Complete session management example

License

MIT