<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.

​
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).The Developer SDKs tab beside it shows the code below with your knowledge base ID and a public key filled in. The ID is also the part of the dashboard address after /knowledge-bases/.
2

Install the package

npm install @keluhq/react
It needs react and react-dom 18 or later in your app.
3

Render the panel

"use client";
import { KeluChat } from "@keluhq/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. The package is marked "use client", so in the Next.js App Router this works from a server component too. On app.kelu.dev a public key also needs a reCAPTCHA token for each question; the panel gets one for you (see CAPTCHA).
4

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. Each message’s content is Markdown: render it with renderMarkdown from @keluhq/sdk, as in Showing a message. 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 @keluhq/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 or captcha_failed: no reCAPTCHA token reached Kelu. The panel loads Google’s reCAPTCHA script itself, so check that an ad blocker or your Content Security Policy is not blocking https://www.google.com and https://www.gstatic.com (see CAPTCHA). If you pass your own getCaptchaToken, check that it returns a fresh token.
  • “Functions cannot be passed directly to Client Components” (Next.js): a function prop such as getCaptchaToken was passed from a server component. Render the panel from a file that starts with "use client".
  • No thumbs under an answer: the workspace keeps no chat data (zero retention), so there is nothing to rate.