Embed & Developer

React Component AI Integration

Drop-in React chat component with a headless hook option

What is it?

About React Component

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

Integration capabilities

How BeforeQuery works with React Component

Everything you can do once the React Component integration is connected.

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

useBeforeQueryChat 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 BeforeQuery 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 connect React Component

Step 01
Install the package: npm install @beforequery/react
Step 02
Import <BeforeQueryChat /> and render it with your knowledgeBaseId and clientKey props — or use the useBeforeQueryChat hook for a custom UI.
Step 03
Optionally configure theme, placeholder text, and initial suggested questions as props.

Explore

Related integrations

Web Widget

The BeforeQuery web widget embeds in any HTML page. One script tag, full style customization, mobile-ready, WCAG AA accessible.

JavaScript SDK

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

MCP Server

An MCP server at api.beforequery.com/mcp, scoped to a knowledge base by its client key, lets any MCP-aware AI tool query your knowledge base as structured tools.

React Component — Frequently Asked Questions

Common questions about connecting BeforeQuery to React Component.

<BeforeQueryChat /> is a fully-built chat UI component you drop into your React app with minimal props. useBeforeQueryChat 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 useBeforeQueryChat 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. <BeforeQueryChat /> 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