@beforequery/react - BeforeQuery

Install

npm install @beforequery/react @beforequery/sdk

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

`<BeforeQueryChat />`

A fully-styled, zero-configuration chat panel:

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

export default function DocsPage() {
  return (
    <BeforeQueryChat
      projectId="proj_xxx"
      clientKey="bq_pk_..."
      welcomeMessage="Hi! Ask me anything about our documentation."
      theme={{ primaryColor: "#5b21b6" }}
    />
  );
}

Props

Prop	Type	Default	Description
`projectId`	`string`	required	Your BeforeQuery project ID
`clientKey`	`string`	required	Public client key (`bq_pk_…`)
`baseUrl`	`string`	`https://api.agents.beforequery.com`	Override the API base URL
`placeholder`	`string`	`"Ask a question…"`	Input placeholder text
`welcomeMessage`	`string`	—	Greeting shown before the first message
`theme`	`BeforeQueryTheme`	—	Visual customisation
`className`	`string`	—	Extra class name(s) on the outer wrapper
`getCaptchaToken`	`() => Promise<string>`	—	Async function returning a reCAPTCHA v3 token

Theme tokens

Token	Type	Default	Description
`primaryColor`	`string`	`#343CED`	Brand colour for buttons, accents, citation badges
`borderRadius`	`string`	`12px`	Border radius for panel and bubbles

`useBeforeQueryChat`

Headless hook — bring your own UI, the hook handles streaming, state, and errors:

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

function MyChat() {
  const { messages, ask, isStreaming, error, reset, threadId, sendFeedback } =
    useBeforeQueryChat({
      projectId: "proj_xxx",
      clientKey: "bq_pk_...",
    });
  // render messages; call ask(input) to send
}

Options

Option	Type	Description
`projectId`	`string`	Your BeforeQuery project ID
`clientKey`	`string`	Public client key (`bq_pk_…`)
`baseUrl`	`string`	Override the API base URL
`getCaptchaToken`	`() => Promise<string>`	Async function returning a reCAPTCHA v3 token

Return value

Property	Type	Description
`messages`	`ChatMessage[]`	Ordered user and assistant messages
`ask`	`(query: string) => Promise<void>`	Send a query; streams tokens into the last assistant message
`isStreaming`	`boolean`	`true` while a response streams
`error`	`BeforeQueryError \| null`	Last error, if any
`threadId`	`string \| undefined`	Active conversation thread ID
`reset`	`() => void`	Clear messages, abort in-flight stream, reset thread
`sendFeedback`	`(id, rating: 1-5, comment?) => Promise<void>`	Submit message feedback

Feedback

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

await sendFeedback(messageId, 5);          // 5 = helpful
await sendFeedback(messageId, 1, "Wrong"); // 1 = not helpful, with comment

Local testing

<BeforeQueryChat projectId="…" clientKey="bq_pk_…" baseUrl="http://localhost:8280" />
// or: useBeforeQueryChat({ projectId, clientKey, baseUrl: "http://localhost:8280" })