Table of Contents<\/strong><\/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. 1. Set up an account on WP Engine<\/a> and get a WordPress install running. You can get a free headless platform sandbox here:<\/p>\n\n\n\n Headless The all-in-one platform for 2. Add a Smart Search AI license. Refer to the docs here<\/a> for adding a license After you add the license, opt in for the Smart Search AI MCP. 3. Navigate to the WP Admin of your install.\u00a0 Inside your WP Admin, go to WP Engine Smart Search > Settings<\/strong>.\u00a0 You will find your Smart Search AI MCP URL here.\u00a0 Currently, this shows your GraphQL endpoint. This is correct and what you want to see. <\/strong><\/p>\n\n\n\n What you need to do is manually remove the So your endpoint should look like this after replacing it:<\/p>\n\n\n <\/p>\n\n\n\n 4. Next, navigate to Configuration<\/strong>, select the Hybrid<\/strong> card, and add the 5. After saving the configuration, head on over to the Index data<\/strong> page, then click Index Now. <\/em>It will give you this success message once completed :<\/em> 6. Create an API account on Google Gemini<\/a> (Or whatever AI model you choose, e.g., OpenAI API). Once created, navigate to your project\u2019s dashboard. If you are using 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: You will receive prompts in your terminal asking you how you want your Next.js<\/a> app scaffolded. Answer them accordingly:<\/p>\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\n <\/p>\n\n\n\n Note: We are using Google\u2019s AI sdk for this article. Please refer to the docs in relation to whatever AI model you choose. You can download their npm package.<\/em><\/strong> Once the Next project is done scaffolding, 8. In your Next project, create a <\/p>\n\n\n\n\n
Prerequisites<\/h2>\n\n\n\n
<\/p>\n\n\n\nSteps For Setting Up<\/h2>\n\n\n\n
Platform<\/p>\n\n\n\n
radically fast headless sites.<\/p>\n\n\n\n
<\/p>\n\n\n\n\/graphql<\/code> and add \/mcp<\/code>. <\/p>\n\n\n\nhttps:\/\/your-wpenginesite-0999A-atlassearch-fkdfjckuaa-uc.a.run.app\/mcp<\/span>\n<\/span><\/span><\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\n![\"\"](\"https:\/\/wpengine.com\/builders\/wp-content\/uploads\/2025\/10\/Screenshot-2025-10-14-at-9.58.22\u202fAM-1024x480.png\")
<\/figure>\n\n\n\n`post_content`<\/code> and `post_title`<\/code> fields in the Semantic settings<\/strong> section. We are going to use this field as our AI-powered field for similarity searches. Make sure to hit Save Configuration<\/strong> afterward.
<\/p>\n\n\n\n![\"\"](\"https:\/\/wpengine.com\/builders\/wp-content\/uploads\/2025\/10\/image-1024x552.png\")
<\/figure>\n\n\n\n
<\/p>\n\n\n\n![\"\"](\"https:\/\/wpengine.com\/builders\/wp-content\/uploads\/2025\/10\/image-1-1024x499.png\")
<\/figure>\n\n\n\n![\"\"](\"https:\/\/wpengine.com\/builders\/wp-content\/uploads\/2025\/10\/image-2-1024x488.png\")
<\/figure>\n\n\n\n`npx create-next-app@latest name-of-your-app`<\/code><\/p>\n\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\nnpm<\/span> install<\/span> @ai-sdk<\/span>\/google react-icons react-markdown @modelcontextprotocol\/sdk @ai-sdk\/react @ai\n<\/span><\/span>\n<\/span><\/span><\/code><\/span>Code language:<\/span> CSS<\/span> (<\/span>css<\/span>)<\/span><\/small><\/pre>\n\n\n
<\/p>\n\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<\/span> you chose another AI model, you can name this<\/span> key whatever you want)\n<\/span><\/span>\n<\/span><\/span>AI_TOOLKIT_MCP_URL=\"<your smart search mcp url here>\"<\/span>\n<\/span><\/span><\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\n