@useknest/widget-react

Native React component for the Knest chat widget with streaming support.

Installation

npm install @useknest/widget-react
# or
pnpm add @useknest/widget-react
# or
yarn add @useknest/widget-react

Usage

Basic Example

import { ChatWidget } from '@useknest/widget-react';

function App() {
	return (
		<div>
			<ChatWidget publishableApiKey="pk_your_key_here" />
		</div>
	);
}

That's it! Styles are automatically included - no separate CSS import needed.

Props

ChatWidget

| Prop | Type | Required | Description | | ------------------- | -------- | -------- | ---------------------------------- | | publishableApiKey | string | Yes | Your project's publishable API key |

Features

• ✅ Native React Component - Built with React hooks, no web component wrapper
• ✅ Streaming Support - Real-time message streaming via Server-Sent Events (SSE)
• ✅ TypeScript - Full TypeScript support with exported types
• ✅ Customizable - Fetches branding (avatar, colors, welcome message) from your project config
• ✅ Lightweight - ~28KB minified (~8.5KB gzipped)
• ✅ Framework-Agnostic Core - Shares business logic with other platform packages

TypeScript

The package includes TypeScript definitions. You can import types:

import { ChatWidget, type ChatWidgetProps, type Message } from '@useknest/widget-react';

Customization

The widget automatically loads customization from your project's configuration:

• Avatar image
• Brand color
• Welcome message
• Example questions

No additional props needed - just provide your publishableApiKey.

Architecture

This package uses @useknest/widget-core for all business logic (API calls, streaming, markdown rendering). The React component handles only the UI rendering with React-specific optimizations.

Benefits:

• Efficient re-renders during streaming
• Native React state management
• React DevTools compatibility
• Optimized bundle size

Browser Support

• Modern browsers (Chrome, Firefox, Safari, Edge)
• Requires native ES modules support
• Requires EventSource API for streaming (available in all modern browsers)

Examples

Full-Height Widget

import { ChatWidget } from '@useknest/widget-react';
import '@useknest/widget-react/dist/widget-react.css';

function FullPageChat() {
	return (
		<div style={{ height: '100vh', width: '100vw' }}>
			<ChatWidget publishableApiKey="pk_your_key_here" />
		</div>
	);
}

Widget in a Container

import { ChatWidget } from '@useknest/widget-react';
import '@useknest/widget-react/dist/widget-react.css';

function ChatContainer() {
	return (
		<div style={{ maxWidth: '900px', height: '600px', margin: '0 auto' }}>
			<ChatWidget publishableApiKey="pk_your_key_here" />
		</div>
	);
}

Troubleshooting

Streaming not working

Solution: Check that your backend API is running and accessible. The widget defaults to http://localhost:5173/api/v1 for local development.

TypeScript errors

Solution: Make sure you have React types installed:

npm install --save-dev @types/react @types/react-dom

License

MIT

Support

For issues and questions, please visit GitHub Issues.