Embed & Developer

React Component

Drop-in React chat component with a headless hook option

What is React Component?

The @kelu/react package gives teams two options: a fully-built chat component (<KeluChat />) that drops into any React app with minimal configuration, or a headless hook (useKeluChat) that provides all retrieval, streaming, and citation logic while leaving the UI entirely up to you.

Integration

How Kelu works with React Component

Everything you can do once the integration is connected.

<KeluChat /> drop-in component

A pre-built chat UI ready for production. Pass your knowledge base ID and client key as props — the component handles layout, streaming, citation display, and conversation history.

useKeluChat headless hook

For teams with a custom design system, the hook provides messages, streaming state, send function, and citations. Build any UI on top of the Kelu retrieval engine.

TypeScript-first

The package ships with full TypeScript types for all props, hook return values, and event callbacks. No @types package required.

SSR and Next.js compatible

The component and hook work in Next.js App Router with the 'use client' directive. SSR-safe with proper hydration handling.

Setup

How to set it up

Install the package: npm install @kelu/react

Import <KeluChat /> and render it with your knowledgeBaseId and clientKey props — or use the useKeluChat hook for a custom UI.

Optionally configure theme, placeholder text, and initial suggested questions as props.

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

@kelu/sdk works in Vue, Svelte, React Native, vanilla JS, and Node.js — a single API for search and chat.

View details

MCP Server

An MCP server at api.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 details

React Component — Frequently Asked Questions

Common questions about connecting Kelu to React Component.

<KeluChat /> is a fully-built chat UI component you drop into your React app with minimal props. useKeluChat is a headless hook that gives you full control over the chat UI — it provides messages, streaming state, the send function, and citation data, while you build the visual interface using your own design system.

Yes. Both the component and hook are client components compatible with Next.js App Router. Mark your wrapper with 'use client' and use them as you would any other React client component. SSR-safe hydration is handled internally.

Yes. The package ships with full TypeScript definitions for all props, hook return types, event callbacks, and citation data shapes. No separate @types package is required.

Yes. The useKeluChat hook is designed for this use case. It abstracts all retrieval, SSE streaming, and citation management while exposing a clean API — messages array, loading state, error state, and a send function — so you can render any UI on top.

Yes. <KeluChat /> maintains conversation history within the component's lifetime. History is preserved across page navigations when the component is mounted in a persistent layout, and can optionally be persisted to localStorage for cross-session continuity.

Ready to connect React Component?

Start free. No credit card required. Connect your first integration in under 5 minutes.

Get started free