+
+
AI Summary
+ {!resultSearchTerm ? "Ask anything!" : parse(aiSummary)}
+
+
+ );
+};
+
+export default withSearch(({ results, searchTerm, resultSearchTerm }) => ({
+ results,
+ searchTerm,
+ resultSearchTerm,
+ AiSummary,
+}))(AiSummary);
diff --git a/supporting-blog-content/add-ai-generated-summaries/app-search-reference-ui-react-master/src/App.js b/supporting-blog-content/add-ai-generated-summaries/app-search-reference-ui-react-master/src/App.js
new file mode 100644
index 00000000..f9713a35
--- /dev/null
+++ b/supporting-blog-content/add-ai-generated-summaries/app-search-reference-ui-react-master/src/App.js
@@ -0,0 +1,82 @@
+import React from "react";
+import ElasticsearchAPIConnector from "@elastic/search-ui-elasticsearch-connector";
+import {
+ ErrorBoundary,
+ SearchProvider,
+ SearchBox,
+ Results,
+ Facet,
+} from "@elastic/react-search-ui";
+import { Layout } from "@elastic/react-search-ui-views";
+import "@elastic/react-search-ui-views/lib/styles/styles.css";
+import AiSummary from "./AiSummary";
+
+const connector = new ElasticsearchAPIConnector(
+ {
+ host: "http://localhost:1337/api",
+ index: "search-labs-index",
+ },
+ (requestBody, requestState) => {
+ if (!requestState.searchTerm) return requestBody;
+ requestBody.query = {
+ semantic: {
+ query: requestState.searchTerm,
+ field: "semantic_text",
+ },
+ };
+ return requestBody;
+ }
+);
+
+const config = {
+ debug: true,
+ searchQuery: {
+ search_fields: {
+ semantic_text: {},
+ },
+ result_fields: {
+ title: {
+ snippet: {},
+ },
+ article_content: {
+ snippet: {
+ size: 10,
+ },
+ },
+ meta_description: {},
+ url: {},
+ meta_author: {},
+ meta_img: {},
+ },
+ facets: {
+ "meta_author.enum": { type: "value" },
+ },
+ },
+ apiConnector: connector,
+ alwaysSearchOnInitialLoad: false,
+};
+
+export default function App() {
+ return (
+