React Component
Drop-in React chat component with a headless hook option
What is React Component?
The @beforequery/react package gives React developers 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.
How BeforeQuery works with React Component
Everything you can do once the integration is connected.
<BeforeQueryChat /> drop-in component
A pre-built chat UI ready for production. Pass your project 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.
How to set it up
Install the package: npm install @beforequery/react
Import <BeforeQueryChat /> and render it with your projectId and clientKey props — or use the useBeforeQueryChat hook for a custom UI.
Optionally configure theme, placeholder text, and initial suggested questions as props.
Related integrations
The BeforeQuery web widget embeds in any HTML page. One script tag, full style customization, mobile-ready, WCAG AA accessible.
@beforequery/sdk works in Vue, Svelte, React Native, vanilla JS, and Node.js — a single API for search and chat.
A per-project MCP server at api.beforequery.com/mcp/projects/:projectId lets any MCP-aware AI tool query your knowledge base as structured tools.
Ready to connect React Component?
Start free. No credit card required. Connect your first integration in under 5 minutes.