@nas/chatbot-widget (1.0.0)

Published 2026-04-27 22:31:34 +00:00 by nas in nas/chatbot-widget

Setup this registry in your project .npmrc file:

@nas:registry=

To install the package using npm, run the following command:

npm install @nas/chatbot-widget@1.0.0

or add it to the package.json file:

"@nas/chatbot-widget": "1.0.0"

For more information on the npm registry, see the documentation.

ChatWidget

Lightweight React chat widget with streaming responses and optional Cloudflare Turnstile support.

Usage

import { ChatWidget } from "your-package-name";
import "your-package-name/styles.css";

export default function Page() {
  return (
    <ChatWidget
      apiUrl="https://your-api.com/chat"
      placeholder="Type a message..."
      sendLabel="Send"
    />
  );
}

Props

Prop	Type	Required	Description
`apiUrl`	`string`	yes	Endpoint that receives `{ query: string }` and returns a streamed response
`placeholder`	`string`	yes	Input placeholder text
`sendLabel`	`string`	yes	Submit button label
`title`	`string`	no	Header title
`description`	`string`	no	Header description
`initialMessages`	`string[]`	no	Initial assistant messages
`onClose`	`() => void`	no	Called when close button is clicked
`errorMessage`	`string`	no	Fallback error message
`turnstileSiteKey`	`string`	no	Cloudflare Turnstile site key
`turnstileAction`	`string`	no	Turnstile action name

API Requirements

The widget sends:

{
  "query": "user message"
}

Expected response:

text/plain stream (chunked)
Each chunk is appended to the assistant message

Turnstile (Optional)

If turnstileSiteKey is provided:

Token is fetched automatically
Sent via header:

x-turnstile-token: <token>

Styling

The component requires:

import "chatbot-widget/styles.css";

Styles use CSS variables for easy customization:

--primary
--background
--border
--radius
--font-sans

Development

A demo app is included for local development.

npm run dev

Notes

React is a peer dependency
Built with Vite in library mode
ES module output
Supports streaming responses

Development dependencies

ID	Version
@types/node	^25.6.0
@types/react	^19.2.14
@types/react-dom	^19.2.3
@vitejs/plugin-react	^6.0.1
react	^19.2.5
react-dom	^19.2.5
typescript	^6.0.3
vite	^8.0.10
vite-plugin-dts	^4.5.4

Peer dependencies

ID	Version
react	>=18
react-dom	>=18

Details

npm

nas/chatbot-widget

2026-04-27 22:31:34 +00:00

3.9 KiB

Assets (1)

chatbot-widget-1.0.0.tgz 3.9 KiB

Versions (2) View all

1.0.1

2026-04-27

1.0.0