Saved response
Hi. Ask me about installation, streaming or custom themes.
React component / Headless hooks
A conversation layer
for your website.
Streaming chat, in a small React package. Connect your backend, set your theme, and let visitors ask the next question.
Use the widget. Or just the hooks.
Chat state, SSE streaming and session history are available as standalone React hooks.
A small dependency surface.
React stays a peer dependency. No third-party runtime libraries or tracking scripts in the widget.
Integration
Two imports. Your backend.
Install the package and stylesheet.
Connect your endpoint when you’re ready.
$pnpm add @chitrank2050/ask-widget
import { ChatWidget } from '@chitrank2050/ask-widget';
import '@chitrank2050/ask-widget/styles.css';
// Your backend must handle POST /api/v1/chat.
export default function RootLayout({ children }: { children: React.ReactNode }) {
return (
<html lang="en">
<body>
{children}
<ChatWidget
title="Portfolio AI"
placeholder="Ask about my projects & stack..."
apiUrl="/api"
theme="dark"
position="bottom-right"
/>
</body>
</html>
);
}Your backend must handle POST /api/v1/chat in these examples. Keep provider credentials on the server.
Need something specific?
The docs cover the component API, streaming contract and custom interfaces.
Can I use my own backend?
Yes. Set apiUrl to your backend base URL; the widget sends chat requests to /v1/chat under that base. For a different response format, supply a streamResponse handler. Keep provider credentials on the server. An apiToken passed to the widget is visible in the browser.
Which React and Next.js versions are supported?
The package supports React 18 and 19, with ESM, CommonJS and TypeScript declarations. Its client entry point works with the Next.js App Router. The integration examples above show how to mount it.
Can I match my website’s theme?
Choose the light or dark theme, then override individual values with the colors prop. You can also style the widget using CSS variables such as --widget-primary, --widget-background and --widget-border.
Does the widget include tracking?
The published widget includes no analytics or telemetry scripts. Chat requests go to the endpoint you configure. If you provide a custom response handler, you control its network requests and data handling.
What dependencies does it ship?
React and React DOM are peer dependencies. The widget bundles no third-party runtime libraries and ships its own JavaScript, TypeScript declarations and stylesheet. Measure both JavaScript and CSS when comparing package sizes.