Recipes

Experimental AI-assisted Filter Creation

Turn natural language into a draft query, validate it, preview it, and require user confirmation.

This demo uses a mock service

This interactive demo simulates the backend or AI provider. In your app, validate requests on your server and keep API keys and access checks there.

What this recipe builds

Natural-language input produces a draft, not an active filter.
Only supported fields and operators pass validation before rendering.
Editable preview plus explicit human confirmation.

Loading the interactive recipe demo...

Install and imports

Install / imports

npm install @vojtechportes/react-query-builder
# Add the server-side AI SDK and validation library used by your app.

Fields and initial query

Typed field configuration

const fields: IBuilderFieldProps[] = [
  {
    field: 'status',
    label: 'Status',
    type: 'LIST',
    value: statuses,
    operators: ['EQUAL', 'NOT_EQUAL'],
  },
  {
    field: 'total',
    label: 'Total',
    type: 'NUMBER',
    operators: ['EQUAL', 'LARGER_EQUAL', 'SMALLER_EQUAL'],
  },
];

const emptyQuery: DenormalizedQuery = [
  { type: 'GROUP', value: 'AND', isNegated: false, children: [] },
];

Builder implementation

React implementation

import '@vojtechportes/react-query-builder/styles.css';

const [applied, setApplied] = useState(emptyQuery);
const [draft, setDraft] = useState<DenormalizedQuery>();

const generateDraft = async (prompt: string) =>
  setDraft(validateAiDraft(await requestDraft(prompt), fields));

return (
  <>
    <PromptForm onGenerate={generateDraft} />
    {draft && (
      <>
        <Builder
          fields={fields}
          data={draft}
          onChange={setDraft}
          showValidation
        />
        <button
          onClick={() => {
            setApplied(draft);
            setDraft(undefined);
          }}
        >
          Confirm and apply
        </button>
      </>
    )}
    <Results query={applied} />
  </>
);

Validate the model response before preview

// Run on your server, then validate again in the client.
const draft = filterSchema.parse(modelJson);
assertAllowedFieldsAndOperators(draft, allowedSchema);
return { draft, warnings: explainDraft(draft) };
// Never auto-apply: show the editable draft and require confirmation.

Validation and safety

Experimental: model output is untrusted and may be incorrect or adversarial.
Keep AI credentials on the server and validate every generated field, operator, and value.
Check what the user is allowed to access separately, and require confirmation before applying a generated filter.

Production notes

Show a plain-language explanation and warnings with the draft.
If you collect edits or outcomes, get user consent and avoid storing sensitive prompts by default.

Related guides

Frequently asked questions

Should an AI-created filter run immediately?

No. Check it first, show it as an editable draft, and let the user confirm it.

What if the AI returns an unsupported field or operator?

Reject that part of the filter and show a clear error. Only accept fields and operators provided by your application.

Do I need a specific AI provider?

No. The Builder only needs valid filter data. Your backend can create that data with any provider or SDK.