React Chat Agent - A production-ready chat provider with WebSocket support
npm install react-chat-agentClean, production-ready React chat component. Bring your own API - you control everything.
- ✅ 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
``bash`
npm install react-chat-agent
Then import the ui in your app:
`javascript`
import 'react-chat-agent/ui.css';
`javascript
import {
ChatProvider,
DefaultPanel,
tokenManager,
sessionManager
} from 'react-chat-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 (
config={{
chatUrl: 'https://api.example.com/chat',
historyUrl: 'https://api.example.com/history'
}}
/>
);
}
`
See INTEGRATION_GUIDE.md for complete documentation including:
- Architecture overview
- API reference
- Backend requirements
- Message format specifications
- Complete examples
`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-chat-agent';
- examples/App.jsx - Simple SSE exampleexamples/App-with-session.jsx` - Complete session management example
-
MIT