React Component
A drop-in React chat component with a headless hook option
What is React Component?
@keluhq/react is the Kelu package for React apps. It has two options: a finished chat panel (<KeluChat />) and a headless hook (useKeluChat) that handles streaming, state, and errors while leaving the UI to you. It runs on @keluhq/sdk, which installs with it, and needs react and react-dom 18 or later.
How Kelu works with React Component
Everything you can do once the integration is connected.
<KeluChat />: a finished chat panel
Streaming answers with citations in one component. Set the welcome message, placeholder, and brand color with props.
useKeluChat: your own markup
The hook returns messages, ask, isStreaming, error, and reset. You render them in your own design system.
Thumbs up and down
Both the component and the hook send per-message thumbs up and down feedback.
Same pipeline everywhere
The React package, the widget, and the API run the same retrieval, grounding, and citations.
How to set it up
- 1
Run npm install @keluhq/react. Your project needs react and react-dom 18 or later.
- 2
Create a public client key (kl_pk_...) under the knowledge base's Integrations > Client Keys. The Developer SDKs tab beside it shows the code with your knowledge base ID and key filled in.
- 3
Render <KeluChat knowledgeBaseId="..." clientKey="kl_pk_..." /> where the chat should appear, or call useKeluChat to build your own UI. In the Next.js App Router, put it in a client component ("use client").
Related integrations
Web Widget
The Kelu web widget embeds in any HTML page. One script tag, full style customization, mobile-ready, WCAG AA accessible.
View details
JavaScript SDK
Install @keluhq/sdk from npm for chat, search, and feedback in browsers, React Native, and Node.js 18 or later.
View details
MCP Server
An MCP server at app.kelu.dev/mcp, scoped to a knowledge base by its client key, lets any MCP-aware AI tool query your knowledge base as structured tools.
View detailsGot questions?
React Component — Frequently Asked Questions
Common questions about connecting Kelu to React Component.
Yes. Install it from npm with npm install @keluhq/react. It needs react and react-dom 18 or later.
Yes. The useKeluChat hook handles streaming, state, and errors, and returns messages, ask, isStreaming, error, and reset. You write the markup.
Yes. Use it from a client component: add "use client" at the top of the file that renders <KeluChat /> or calls useKeluChat.
The hosted widget is one script tag and adds a floating launcher to every page. In Next.js, load it with the next/script component. Use the React package when the chat should live inside your own pages and components.