open-reaction-database
diff --git a/‎app/src/App.tsx‎
Lines changed: 5 additions & 0 deletions b/‎app/src/App.tsx‎
Lines changed: 5 additions & 0 deletions
diff --git a/‎app/src/components/HeaderNav.tsx‎
Lines changed: 2 additions & 0 deletions b/‎app/src/components/HeaderNav.tsx‎
Lines changed: 2 additions & 0 deletions
diff --git a/‎app/src/hooks/useNLQuery.ts‎
Lines changed: 71 additions & 0 deletions b/‎app/src/hooks/useNLQuery.ts‎
Lines changed: 71 additions & 0 deletions
diff --git a/‎app/src/types/search.ts‎
Lines changed: 42 additions & 0 deletions b/‎app/src/types/search.ts‎
Lines changed: 42 additions & 0 deletions
diff --git a/‎app/src/views/nl-search/MainNLSearch.scss‎
Lines changed: 215 additions & 0 deletions b/‎app/src/views/nl-search/MainNLSearch.scss‎
Lines changed: 215 additions & 0 deletions
@@ -24,6 +24,7 @@ import About from './views/About';
 import MainBrowse from './views/browse/MainBrowse';
 import MainSelectedSet from './views/browse/selected-set/MainSelectedSet';
 import MainSearch from './views/search/MainSearch';
+import MainNLSearch from './views/nl-search/MainNLSearch';
 import MainDatasetView from './views/dataset-view/MainDatasetView';
 import MainReactionView from './views/reaction-view/MainReactionView';
 import './App.scss';
@@ -55,6 +56,10 @@ const AppContent: React.FC = () => {
           path="/search"
           element={<MainSearch />}
         />
+        <Route
+          path="/ask"
+          element={<MainNLSearch />}
+        />
         <Route
           path="/dataset/:datasetId"
           element={<MainDatasetView />}
 
@@ -50,6 +50,8 @@ const HeaderNav: React.FC = () => {
               >
                 Search
               </Link>
+              {/* The /ask route exists but is intentionally unlisted while the
+                  natural-language feature is in development. */}
             </div>
             <div className="nav-item header-nav__nav-item">
               <a
 
@@ -0,0 +1,71 @@
+/**
+ * Copyright 2026 Open Reaction Database Project Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { useQuery } from '@tanstack/react-query';
+import reaction_pb from 'ord-schema';
+import { base64ToBytes } from '../utils/base64';
+import { fetchJson } from '../utils/api';
+import type {
+  NLInterpretation,
+  NLQueryResponse,
+  ResolvedComponent,
+  SearchResult,
+} from '../types/search';
+
+export interface NLQueryData {
+  interpretation: NLInterpretation;
+  resolvedComponents: ResolvedComponent[];
+  queryComponents: string[];
+  results: SearchResult[];
+  dryRun: boolean;
+}
+
+/**
+ * Runs a natural-language search against `/api/nl_query`.
+ *
+ * Unlike structured search, the backend translates and executes in a single
+ * synchronous request, so this is a plain fetch rather than the submit/poll
+ * protocol of {@link useSearchTask}. Result protos are deserialized here the
+ * same way, and the model's interpretation is surfaced so the page can show the
+ * user how their question was understood.
+ */
+export function useNLQuery(query: string | null, enabled: boolean, dryRun = false) {
+  return useQuery<NLQueryData>({
+    queryKey: ['nl-query', query, dryRun],
+    enabled: enabled && query !== null && query.trim() !== '',
+    retry: false,
+    staleTime: Infinity,
+    queryFn: async (): Promise<NLQueryData> => {
+      const url =
+        `/api/nl_query?q=${encodeURIComponent(query as string)}` +
+        (dryRun ? '&dry_run=true' : '');
+      const raw = await fetchJson<NLQueryResponse>(url, undefined, 'nl_query');
+      const results: SearchResult[] = raw.results.map(r => ({
+        ...r,
+        data: reaction_pb.Reaction.deserializeBinary(
+          new Uint8Array(base64ToBytes(r.proto)),
+        ).toObject(),
+      }));
+      return {
+        interpretation: raw.interpretation,
+        resolvedComponents: raw.resolved_components,
+        queryComponents: raw.query_components,
+        results,
+        dryRun: raw.dry_run,
+      };
+    },
+  });
+}
@@ -49,3 +49,45 @@ export interface Dataset {
   description?: string;
   num_reactions: number;
 }
+
+// Mirrors ord_interface.api.nl_query.NLComponent.
+export interface NLComponent {
+  identifier: string;
+  target: 'INPUT' | 'OUTPUT';
+  mode: 'EXACT' | 'SIMILAR' | 'SUBSTRUCTURE' | 'SMARTS';
+}
+
+// Mirrors ord_interface.api.nl_query.NLQuery: how the model understood the
+// question. Component-level constraints plus optional numeric/flag filters.
+export interface NLInterpretation {
+  components: NLComponent[];
+  min_yield?: number | null;
+  max_yield?: number | null;
+  min_conversion?: number | null;
+  max_conversion?: number | null;
+  reaction_smarts?: string | null;
+  similarity_threshold?: number | null;
+  use_stereochemistry?: boolean | null;
+  limit?: number | null;
+}
+
+// Mirrors ord_interface.api.nl_query.ResolvedComponent: a component after its
+// name has been resolved to a concrete SMILES (shown for transparency).
+export interface ResolvedComponent {
+  identifier: string;
+  smiles: string;
+  resolver: string;
+  target: 'INPUT' | 'OUTPUT';
+  mode: 'EXACT' | 'SIMILAR' | 'SUBSTRUCTURE' | 'SMARTS';
+}
+
+// Raw /api/nl_query payload, before result protos are deserialized.
+export interface NLQueryResponse {
+  query: string;
+  interpretation: NLInterpretation;
+  resolved_components: ResolvedComponent[];
+  // JSON-encoded ComponentSpec strings that would be executed (shown for dry runs).
+  query_components: string[];
+  results: Omit<SearchResult, 'data'>[];
+  dry_run: boolean;
+}
@@ -0,0 +1,215 @@
+/**
+ * Copyright 2026 Open Reaction Database Project Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+.nl-search {
+  max-width: 960px;
+  margin: 0 auto;
+  padding: 2rem 1rem;
+
+  &__title {
+    margin-bottom: 0.25rem;
+  }
+
+  &__subtitle {
+    color: #555;
+    margin-bottom: 1.5rem;
+  }
+
+  &__form {
+    display: flex;
+    gap: 0.5rem;
+  }
+
+  &__input {
+    flex: 1;
+    padding: 0.6rem 0.75rem;
+    font-size: 1rem;
+    border: 1px solid #ccc;
+    border-radius: 4px;
+  }
+
+  &__button {
+    padding: 0.6rem 1.25rem;
+    font-size: 1rem;
+    border: none;
+    border-radius: 4px;
+    background: #1a73e8;
+    color: #fff;
+    cursor: pointer;
+
+    &:disabled {
+      opacity: 0.6;
+      cursor: default;
+    }
+  }
+
+  &__examples {
+    margin-top: 0.75rem;
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.5rem;
+  }
+
+  &__example {
+    padding: 0.3rem 0.6rem;
+    font-size: 0.85rem;
+    border: 1px solid #d0d7de;
+    border-radius: 999px;
+    background: #f6f8fa;
+    color: #1a73e8;
+    cursor: pointer;
+  }
+
+  &__interpretation {
+    margin: 1.5rem 0;
+    padding: 0.75rem 1rem;
+    background: #f6f8fa;
+    border: 1px solid #d0d7de;
+    border-radius: 6px;
+  }
+
+  &__layer + &__layer {
+    margin-top: 1rem;
+    padding-top: 1rem;
+    border-top: 1px solid #e1e4e8;
+  }
+
+  &__interpretation-title {
+    font-weight: 600;
+    margin-bottom: 0.4rem;
+  }
+
+  &__provenance {
+    font-weight: 400;
+    font-size: 0.8rem;
+    color: #777;
+  }
+
+  &__interpretation-list {
+    margin: 0;
+    padding-left: 1.2rem;
+
+    code {
+      color: #b5179e;
+    }
+  }
+
+  &__resolution-list {
+    margin: 0;
+    padding: 0;
+    list-style: none;
+
+    li {
+      display: flex;
+      align-items: baseline;
+      gap: 0.5rem;
+      padding: 0.15rem 0;
+    }
+
+    code {
+      color: #b5179e;
+    }
+  }
+
+  &__identifier {
+    font-weight: 600;
+  }
+
+  &__arrow {
+    color: #999;
+  }
+
+  &__role {
+    text-transform: uppercase;
+    font-size: 0.7rem;
+    letter-spacing: 0.03em;
+    color: #777;
+  }
+
+  &__mode,
+  &__resolver {
+    color: #777;
+    font-size: 0.85rem;
+  }
+
+  &__muted {
+    color: #777;
+    font-size: 0.9rem;
+  }
+
+  &__raw {
+    margin-top: 0.5rem;
+    font-size: 0.85rem;
+
+    summary {
+      cursor: pointer;
+      color: #1a73e8;
+    }
+  }
+
+  &__raw-json {
+    margin: 0.5rem 0 0;
+    padding: 0.6rem 0.75rem;
+    background: #fff;
+    border: 1px solid #d0d7de;
+    border-radius: 6px;
+    overflow-x: auto;
+    font-size: 0.8rem;
+  }
+
+  &__error {
+    margin: 1.5rem 0;
+    padding: 0.75rem 1rem;
+    background: #fde8e8;
+    border: 1px solid #f5b5b5;
+    border-radius: 6px;
+    color: #8a1f1f;
+  }
+
+  &__empty {
+    margin: 1.5rem 0;
+    color: #555;
+  }
+
+  &__banner {
+    margin-bottom: 1rem;
+    padding: 0.6rem 1rem;
+    background: #fff8e1;
+    border: 1px solid #f0d58c;
+    border-radius: 6px;
+    color: #6b5400;
+    font-size: 0.9rem;
+  }
+
+  &__dry-run-toggle {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    margin: 0.75rem 0 0;
+    font-size: 0.9rem;
+    color: #555;
+    cursor: pointer;
+  }
+
+  &__dry-run {
+    margin: 1.5rem 0;
+  }
+
+  &__dry-run-title {
+    font-weight: 600;
+    color: #555;
+  }
+}
Original file line number	Diff line number	Diff line change
`@@ -50,6 +50,8 @@ const HeaderNav: React.FC = () => {`
`50`	`50`	`>`
`51`	`51`	`Search`
`52`	`52`	`</Link>`
	`53`	`+ {/* The /ask route exists but is intentionally unlisted while the`
	`54`	`+ natural-language feature is in development. */}`
`53`	`55`	`</div>`
`54`	`56`	`<div className="nav-item header-nav__nav-item">`
`55`	`57`	`<a`