Table of Contents<\/strong><\/p>\n\n\n\n Retrieval-augmented generation (RAG) is a technique that enables AI models to retrieve and incorporate new information.<\/p>\n\n\n\n It modifies interactions with a large language model (LLM) so that the model responds to user queries with reference to a specified set of documents, using this information to supplement information from its pre-existing training data. This allows LLMs to use domain-specific and\/or updated information.<\/p>\n\n\n\n Our use case in this article will include providing chatbot access to our data from Smart Search.<\/p>\n\n\n\n Here\u2019s an overview of WP Engine\u2019s AI Toolkit and the core capabilities it brings to both traditional and headless WordPress sites:<\/p>\n\n\n\n At its heart, the AI Toolkit includes WP Engine Smart Search\u2014a drop-in replacement for WordPress\u2019s native search that\u2019s typo-tolerant, weight-aware, and ultra-fast. Out of the box, you get three modes: Full-Text (stemming and fuzzy matching), Semantic (NLP-driven meaning over mere keywords), and Hybrid (a tunable blend of both). Behind the scenes, Smart Search automatically indexes your Posts, Pages, Custom Post Types, ACF fields, WooCommerce products, and more\u2014so you can serve richer, more relevant results without writing a line of search logic yourself.<\/p>\n\n\n\n You don\u2019t need to stand up or scale your own vector store\u2014WP Engine\u2019s AI Toolkit manages that for you. As new content is published or edited, the plugin streams updates in real time to its vector database. Queries are encoded into embeddings, nearest-neighbor lookups happen in milliseconds, and the freshest site content is always just a search away. This under-the-hood Vector DB also powers the AI aspects of Hybrid Search, ensuring that semantic similarity and context ranking work against live data.<\/p>\n\n\n\n For sites using WP Engine\u2019s Headless Platform, all of these features\u2014Smart Search querying, vector indexing, AI-powered hybrid ranking, and recommendations\u2014are exposed through GraphQL. The AI Toolkit installs and configures both WPGraphQL and Smart Search automatically, so your front-end app can orchestrate retrieval and generation without extra middleware. An AI-driven content discovery feature that helps you surface \u201cRelated\u201d or \u201cTrending\u201d posts (or custom post types) anywhere on your site\u2014whether you\u2019re using the Gutenberg editor or building a headless front end via WPGraphQL.<\/p>\n\n\n\n The Google Gemini API offers developers a powerful and versatile interface to access Google’s state-of-the-art Gemini AI models. These multimodal models are designed to seamlessly understand and generate content across various data types, including text, code, images, audio, and video. <\/p>\n\n\n\n For our chatbot integration, the Gemini API provides advanced natural language understanding, allowing it to interpret user queries and generate human-like responses. It supports multi-turn conversations, maintaining context over extended interactions, which is crucial for building engaging and intelligent conversational experiences. We will leverage the API’s flexibility to customize chatbot behavior, tone, and style, enabling a wide range of use cases from customer service to creative content generation.<\/p>\n\n\n\n To benefit from this article, you should be familiar with the basics of working with the command line, headless WordPress<\/a> development, Next.js<\/a>, and the WP Engine User Portal<\/a>. 1. Set up an account on WP Engine<\/a> and get a WordPress install running. <\/p>\n\n\n\n 2. Add a Smart Search license. Refer to the docs here<\/a> for adding a license.<\/p>\n\n\n\n 4. Next, navigate to 5. After saving the configuration, head on over to the 6. Create an API account on Google Gemini<\/a> (Or whatever AI model you choose, e.g., OpenAI API<\/a>). Once created, navigate to your project\u2019s dashboard. If you are using the Gemini API, go to the Google AI Studio. In your project\u2019s dashboard, go to API Keys. You should see a page like this:<\/p>\n\n\n\n Generate a new key, copy, and save your API key because we will need this later. The API key is free on Google Gemini, but the free tier has limits.<\/p>\n\n\n\n 7. Head over to your terminal or CLI and create a new Next.js<\/a> project by pasting this utility command in:<\/p>\n\n\n Once the Next project is done scaffolding, 8. In your Next.js project, create a Here is the link to the final code repo<\/a> so you can check step by step and follow along.<\/p>\n\n\n\n The first thing we need to do is set up the request to the Smart Search API using the Similarity query. Create a file in the \n
RAG<\/h2>\n\n\n\n
WP Engine\u2019s AI Toolkit<\/h2>\n\n\n\n
\n
\n
\n
<\/p>\n\n\n\n\n
Google Gemini API (AI API\u2019s)<\/h2>\n\n\n\n
<\/p>\n\n\n\nPrerequisites<\/h2>\n\n\n\n
<\/p>\n\n\n\nSteps for setting up:<\/h3>\n\n\n\n
3. Navigate to the WP Admin of your install. Inside your WP Admin, go to WP Engine Smart Search > Settings<\/code><\/strong>. You will find your Smart Search URL and access token here. Copy and save it. We will need it later. You should see this page:<\/p>\n\n\n\n![\"\"](\"https:\/\/wpengine.com\/builders\/wp-content\/uploads\/2025\/06\/Screenshot-2025-06-27-at-10.14.49\u202fAM-1024x567.png\")
<\/figure>\n\n\n\nConfiguration<\/code>, select the Hybrid<\/code> card, and add the post_content<\/code> field in the Semantic settings<\/code> section. We are going to use this field as our AI-powered field for similarity searches. Make sure to hit Save Configuration<\/code> afterward.<\/p>\n\n\n\n![\"\"\/](\"https:\/\/lh7-rt.googleusercontent.com\/docsz\/AD_4nXfPSAjg4QZU_jBbZFI6UPq21KJ4kiKK23IKOUEgLCw9s7g_fp9d4fDsIDXI2aYNusQlkW_F6mh0MLViUbTy0vWNtUvb_ap6O4SSGH2DALW-_wkX16jwcxmw3G0wfqjO9_VkwXnJdA?key=qNKp1XJj5ZE7i5HzOmh0EA\")
Index data<\/code> page, then click Index Now<\/code>. <\/em>It will give you this success message once completed :<\/em>
<\/p>\n\n\n\n![\"\"\/](\"https:\/\/lh7-rt.googleusercontent.com\/docsz\/AD_4nXe37oM4pSLurBZzGtf6l6eZ344jy9vMsDOaIOEev2Y7dcp03T-q_S8LTQt8z8G8JwBltM9Z_XQudFfGTTp9KrfJQCKv_whPgWNuYg3ZKrNI0j1nxqXrKILphqr9UF_HNAeovazvcg?key=qNKp1XJj5ZE7i5HzOmh0EA\")
![\"\"\/](\"https:\/\/lh7-rt.googleusercontent.com\/docsz\/AD_4nXf-PXmctmj2to4zSu92y5LrDgDTxJ-uR3kdD6EcPlVfjSuZUA4oUMeQc9N_j4AO-fMFxR9Fbo-kUkcb8uEmTxh80s9Gz4U-rnO3uYZa8_YTG38iXhJ5vvFzpYSlr2VhhDjLBGOV1g?key=qNKp1XJj5ZE7i5HzOmh0EA\")
npx<\/span> create-next-app<\/span>@latest<\/span> name-of-your-app\n<\/span><\/span><\/code><\/span>Code language:<\/span> CSS<\/span> (<\/span>css<\/span>)<\/span><\/small><\/pre>\n\n\n
You will receive prompts in the terminal asking you how you want your Next.js<\/a> app scaffolded. Answer them accordingly:<\/p>\n\n\nWould you like to use TypeScript? Yes\n<\/span><\/span>Wold you like to use ESLint? Yes\n<\/span><\/span>Would you like to use Tailwind CSS? Yes\n<\/span><\/span>Would you like to use the `src\/`<\/span> directory? Yes\n<\/span><\/span>Would you like to use App Router? Yes\n<\/span><\/span>Would you like to customize the default<\/span> import<\/span> alias (@\/*)? No<\/span>\n<\/span><\/span><\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\n
Once your Next.js<\/a> app is created, you will need to install the dependencies needed to ensure our app works. Copy and paste this command in your terminal:
<\/p>\n\n\nnpm<\/span> install<\/span> @ai-sdk<\/span>\/google ai openai-edge react-icons react-markdown \n<\/span><\/span><\/code><\/span>Code language:<\/span> CSS<\/span> (<\/span>css<\/span>)<\/span><\/small><\/pre>\n\n\ncd<\/code> into the project and then open up your code editor.<\/p>\n\n\n\n.env.local<\/code> file with the following environment variables:<\/p>\n\n\nGOOGLE_GENERATIVE_AI_API_KEY=\"<your key here>\"<\/span> # if you chose another AI model, you can name this key whatever you want<\/span>\n<\/span><\/span>SMART_SEARCH_URL=\"<your smart search url here>\"<\/span>\n<\/span><\/span>SMART_SEARCH_ACCESS_TOKEN=\"<your smart search access token here>\"<\/span>\n<\/span><\/span><\/code><\/span>Code language:<\/span> PHP<\/span> (<\/span>php<\/span>)<\/span><\/small><\/pre>\n\n\nMake Requests to the WP Engine Smart Search API<\/h2>\n\n\n\n
src\/app<\/code> directory called utils\/context.ts<\/a><\/code>. Copy the code below and paste it into that file:<\/p>\n\n\n\/\/ These are the types that are used in the `getContext` function<\/span>\n<\/span><\/span>type Doc = {\n<\/span><\/span> id<\/span>: string;\n<\/span><\/span> data: Record<string, unknown>;\n<\/span><\/span> score: number;\n<\/span><\/span>};\n<\/span><\/span>\n<\/span><\/span>type Similarity = {\n<\/span><\/span> total<\/span>: number;\n<\/span><\/span> docs: Doc[];\n<\/span><\/span>};\n<\/span><\/span>\n<\/span><\/span>export<\/span> type GraphQLSimilarityResponse = {\n<\/span><\/span> data<\/span>: {\n<\/span><\/span> similarity<\/span>: Similarity;\n<\/span><\/span> };\n<\/span><\/span> errors?: { message<\/span>: string }[];\n<\/span><\/span>};\n<\/span><\/span>\n<\/span><\/span>const<\/span> QUERY = \/* GraphQL *\/<\/span> `<\/span>\n<\/span><\/span> query GetContext($message: String!, $field: String!) {<\/span>\n<\/span><\/span> similarity(<\/span>\n<\/span><\/span> input: { nearest: { text: $message, field: $field } }<\/span>\n<\/span><\/span> ) {<\/span>\n<\/span><\/span> total<\/span>\n<\/span><\/span> docs {<\/span>\n<\/span><\/span> id<\/span>\n<\/span><\/span> data<\/span>\n<\/span><\/span> score<\/span>\n<\/span><\/span> }<\/span>\n<\/span><\/span> }<\/span>\n<\/span><\/span> }<\/span>\n<\/span><\/span>`<\/span>;\n<\/span><\/span>\n<\/span><\/span>