<KeluChat /> is a ready-made chat panel for React apps. It streams answers, lists citations under Sources, keeps follow-up questions in one conversation, and shows thumbs up/down under each answer. For your own markup, use the useKeluChat hook.
@kelu/react is not on npm yet, so npm install @kelu/react fails today. Until it is published, embed the website widget or call the REST API directly.

​
Set up

1

Create a public client key

Open the knowledge base, go to Integrations, and under Client Keys click Create key. Choose Public key. Add your site under Allowed origins to stop other sites from using it, and untick Allow MCP access unless the key is also for AI tools (MCP ignores allowed origins).
2

Render the panel

"use client";
import { KeluChat } from "@kelu/react";

export default function HelpPage() {
  return (
    <KeluChat
      knowledgeBaseId="YOUR_KNOWLEDGE_BASE_ID"
      clientKey="kl_pk_..."
      welcomeMessage="Hi! Ask me anything about our documentation."
    />
  );
}
react and react-dom 18 or later are required. In the Next.js App Router, keep the "use client" line.
3

Ask a question

The answer streams in with a Sources list and thumbs up/down.

​
Build your own UI

const { messages, ask, isStreaming, error, reset, sendFeedback } = useKeluChat({
  knowledgeBaseId: "YOUR_KNOWLEDGE_BASE_ID",
  clientKey: "kl_pk_...",
});
The hook handles streaming, the conversation and errors; you render the messages. Label each citation with its index, not its position in the list, because the numbers can skip. Every prop, hook option and return value is in the @kelu/react reference.

​
Troubleshooting

  • unauthorized: the client key is missing, invalid or revoked, or your site is not in the key’s Allowed origins.
  • forbidden: the key belongs to a different knowledge base than knowledgeBaseId.
  • captcha_required: the deployment requires reCAPTCHA v3 for public keys. Pass getCaptchaToken and return a fresh token on every call.
  • “useState only works in Client Components” (Next.js): add "use client" to the top of the file that renders the panel.
  • No thumbs under an answer: the workspace keeps no chat data (zero retention), so there is nothing to rate.