React Component

@beforequery/react gives you two ways to put your assistant inside a React app:

<BeforeQueryChat /> — a polished, self-contained chat panel: streaming answers, numbered source citations, thread continuity, error states, and thumbs up/down feedback, all built in.
useBeforeQueryChat — a headless hook that manages streaming, state, and errors while you own every pixel of the UI.

Set up the component

Install the packages

npm install @beforequery/react @beforequery/sdk

react and react-dom (>= 18) are peer dependencies.

Get a client key

In the dashboard at app.beforequery.com, open Project → Integration Credentials and create a public client key (bq_pk_…). Public keys are safe to ship in browsers — they’re scoped to one project and support an origin allowlist. Copy the key and your project ID.

Embed the chat panel

import { BeforeQueryChat } from "@beforequery/react";

export default function HelpPage() {
  return (
    <BeforeQueryChat
      projectId="proj_xxx"
      clientKey="bq_pk_..."
      welcomeMessage="Hi! Ask me anything about our documentation."
    />
  );
}

Run your app and ask a question — you should see a streamed answer with Sources citations and feedback buttons under each reply.

Customize the look

Match your brand with the theme prop, and tune the copy:

<BeforeQueryChat
  projectId="proj_xxx"
  clientKey="bq_pk_..."
  placeholder="Search the docs…"
  welcomeMessage="Hi! How can I help?"
  theme={{ primaryColor: "#5b21b6", borderRadius: "16px" }}
  className="my-chat-panel"
/>

Component props

Prop	Type	Default	Description
`projectId`	`string`	required	Your BeforeQuery project ID
`clientKey`	`string`	required	Public client key (`bq_pk_…`)
`baseUrl`	`string`	production API	Override for local testing / self-hosting
`placeholder`	`string`	`"Ask a question…"`	Input placeholder text
`welcomeMessage`	`string`	—	First message shown when the chat is empty
`theme`	`{ primaryColor?, borderRadius? }`	`#343CED`, `12px`	Brand color and corner radius
`className`	`string`	—	Extra class name(s) on the outer wrapper
`getCaptchaToken`	`() => Promise<string>`	—	Supply a reCAPTCHA v3 token if your project requires captcha

Build your own UI with the hook

When the prebuilt panel doesn’t fit, useBeforeQueryChat gives you the same streaming machinery with none of the styling:

import { useState } from "react";
import { useBeforeQueryChat } from "@beforequery/react";

function MyChat() {
  const { messages, ask, isStreaming, error, reset } = useBeforeQueryChat({
    projectId: "proj_xxx",
    clientKey: "bq_pk_...",
  });
  const [input, setInput] = useState("");

  return (
    <div>
      <button onClick={reset}>New chat</button>
      <ul>
        {messages.map((m) => (
          <li key={m.id}>
            {m.role}: {m.content}
            {m.citations?.map((c, i) => (
              <a key={i} href={c.url}>[{i + 1}]</a>
            ))}
          </li>
        ))}
      </ul>
      {isStreaming && <p>Thinking…</p>}
      {error && <p role="alert">{error.message}</p>}
      <input
        value={input}
        onChange={(e) => setInput(e.target.value)}
        onKeyDown={(e) => {
          if (e.key === "Enter") {
            void ask(input);
            setInput("");
          }
        }}
      />
    </div>
  );
}

The hook returns messages, ask(query), isStreaming, error, threadId, reset(), and sendFeedback(). Follow-up questions automatically continue the same thread — call reset() to start over.

Collect feedback

Assistant messages carry a server-assigned messageId once streaming completes — use it to record ratings (1–5):

const { messages, sendFeedback } = useBeforeQueryChat({ projectId, clientKey });

await sendFeedback(message.messageId!, 5);                  // helpful
await sendFeedback(message.messageId!, 1, "Wrong version"); // not helpful, with comment

Ratings feed knowledge-gap analytics, so every thumbs-down helps you find what to document next.

Test against a local backend

Point the component (or hook) at a locally running API with baseUrl:

<BeforeQueryChat
  projectId="proj_xxx"
  clientKey="bq_pk_..."
  baseUrl="http://localhost:8280"
/>

Troubleshooting

401/403 errors — check the client key belongs to the same project as projectId, and that your page’s origin is on the key’s allowlist.
Captcha errors — if your project enforces reCAPTCHA, pass getCaptchaToken returning a fresh v3 token per request.

See the full @beforequery/react reference for hook types and advanced usage.

Get Started

Knowledge Sources

Knowledge Connectors

Community Sources

Helpdesk Tickets

Deploy

Platform

Account Management

Set up the component

Component props

Build your own UI with the hook

Collect feedback

Test against a local backend

Troubleshooting

​Set up the component

​Component props

​Build your own UI with the hook

​Collect feedback

​Test against a local backend

​Troubleshooting

Set up the component

Component props

Build your own UI with the hook

Collect feedback

Test against a local backend

Troubleshooting