Table of Contents<\/strong><\/p>\n\n\n\n To benefit from this article, you should be familiar with WordPress development, Next.js API routes<\/a>, and basic environment variable setup. You will need:<\/p>\n\n\n\n – Node.js 20+<\/a><\/p>\n\n\n\n – A WordPress install on WP Engine<\/a><\/p>\n\n\n\n – Smart Search AI license<\/a> enabled for that environment<\/p>\n\n\n\n – An OpenAI API key<\/a><\/p>\n\n\n\n Copy the MCP endpoint and its token.<\/p>\n\n\n\n 4. In Smart Search configuration, select Hybrid mode, to incorporate both keyword and semantic search structures:<\/p>\n\n\n\n Then and add semantic fields such as:<\/p>\n\n\n 5. Go to Index data and click Index now<\/strong>, and wait. Wait for indexing to complete before testing.<\/p>\n\n\n\n If you want to, you can build your own plugin instead of using the one in this repo. To work with this backend, your plugin must:<\/p>\n\n\n\n <\/p>\n\n\n\n 6. Next we need to create a Next.js<\/a> app. You can find the docs on how to get one set up here<\/a>. Once you have created your Next.js app, we will need to configure our environment variables.<\/p>\n\n\n\n Create Generate the shared token:<\/p>\n\n\n Fill them in with your true values.<\/p>\n\n\n\n Now that we have everything set up, let’s add the code we need and the files necessary to make this demo work. Let\u2019s start by building the foundational piece that handles communication with the Smart Search MCP server.<\/p>\n\n\n\n Go to the root of your Next.js project and add a folder called Here is the complete code content that you will need to copy and paste into your file:<\/p>\n\n\n\n\n
<\/em><\/p>\n\n\n\nPrerequisites<\/h2>\n\n\n\n
<\/p>\n\n\n\nSteps for setting up<\/h2>\n\n\n\n
\n
\n
\n
![\"\"](\"https:\/\/wpengine.com\/builders\/wp-content\/uploads\/2026\/04\/Screenshot-2026-04-27-at-12.50.27-PM-1024x579.png\")
<\/figure>\n\n\n\n![\"\"](\"https:\/\/wpengine.com\/builders\/wp-content\/uploads\/2026\/04\/image-3-1024x417.png\")
<\/figure>\n\n\n\n- `post_title`<\/span>\n<\/span><\/span>\n<\/span><\/span>- `post_content`<\/span>\n<\/span><\/span>\n<\/span><\/span>- `post_excerpt`<\/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\/2026\/04\/image-4-1024x282.png\")
<\/figure>\n\n\n\n![\"\"](\"https:\/\/wpengine.com\/builders\/wp-content\/uploads\/2026\/04\/image-5-1024x344.png\")
<\/figure>\n\n\n\nTechnical integration requirements<\/h3>\n\n\n\n
\n
`POST`<\/code> requests to `\/api\/chat`<\/code><\/li>\n\n\n\n`x-wp-admin-copilot-token`<\/code> header<\/li>\n\n\n\n`WP_ADMIN_ORIGIN`<\/code><\/li>\n\n\n\n`{ message, history, state }`<\/code><\/li>\n\n\n\n`status`, `delta`, `done`, and `error`<\/code><\/li>\n<\/ul>\n<\/div>\n\n\n\n`.env.local`<\/code> at your project root and add these key\/value pairs:<\/p>\n\n\n```bash\n<\/span><\/span>OPENAI_API_KEY=\"sk-proj-...\"<\/span>\n<\/span><\/span>OPENAI_MODEL=\"gpt-4.1-mini\"<\/span>\n<\/span><\/span>SMART_SEARCH_MCP_URL=\"https:\/\/your-site-atlassearch-xxxxx-uc.a.run.app\/mcp\"<\/span>\n<\/span><\/span>SMART_SEARCH_MCP_TOKEN=\"your-mcp-token\"<\/span>\n<\/span><\/span>WP_ADMIN_COPILOT_TOKEN=\"<generate-with-openssl-rand-hex-32>\"<\/span>\n<\/span><\/span>WP_ADMIN_ORIGIN=\"https:\/\/your-wordpress-site.com\"<\/span>\n<\/span><\/span><\/code><\/span>Code language:<\/span> PHP<\/span> (<\/span>php<\/span>)<\/span><\/small><\/pre>\n\n\n\n<\/span><\/span>``<\/span>`bash<\/span>\n<\/span><\/span>openssl rand -hex 32<\/span>\n<\/span><\/span>`<\/span>``<\/span>\n<\/span><\/span><\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\nThe Next.js Backend<\/h2>\n\n\n\n
<\/p>\n\n\n\nThe `lib\/mcp.ts` file<\/h2>\n\n\n\n
\/lib<\/code> with a file called `mcp.ts`<\/code>. <\/p>\n\n\n\n<\/summary>
\/\/ JSON-RPC success payload type\n<\/span><\/span>export type JsonRpcSuccess = {\n<\/span><\/span> jsonrpc: \"2.0\";\n<\/span><\/span> id?: string | number;\n<\/span><\/span> result?: unknown;\n<\/span><\/span>};\n<\/span><\/span>\n<\/span><\/span>\/\/ JSON-RPC error payload type\n<\/span><\/span>export type JsonRpcError = {\n<\/span><\/span> jsonrpc: \"2.0\";\n<\/span><\/span> id?: string | number;\n<\/span><\/span> error: {\n<\/span><\/span> code: number;\n<\/span><\/span> message: string;\n<\/span><\/span> data?: unknown;\n<\/span><\/span> };\n<\/span><\/span>};\n<\/span><\/span>\n<\/span><\/span>\/\/ Tool argument type for search\n<\/span><\/span>export type SearchArgs = {\n<\/span><\/span> query: string;\n<\/span><\/span> filter?: string;\n<\/span><\/span> limit?: number;\n<\/span><\/span> offset?: number;\n<\/span><\/span>};\n<\/span><\/span>\n<\/span><\/span>\/\/ Tool argument type for fetch\n<\/span><\/span>export type FetchArgs = {\n<\/span><\/span> id: string;\n<\/span><\/span>};\n<\/span><\/span>\n<\/span><\/span>\/\/ Flexible SearchResultItem shape (MCP result payloads can vary)\n<\/span><\/span>export type SearchResultItem = {\n<\/span><\/span> id?: string;\n<\/span><\/span> title?: string;\n<\/span><\/span> url?: string;\n<\/span><\/span> snippet?: string;\n<\/span><\/span> [key: string]: unknown;\n<\/span><\/span>};\n<\/span><\/span>\n<\/span><\/span>\/\/ parseJsonRpcResponse - validates response shape and centralizes protocol-level error handling\n<\/span><\/span>function parseJsonRpcResponse(payload: unknown): JsonRpcSuccess {\n<\/span><\/span> if (!payload || typeof payload !== \"object\") {\n<\/span><\/span> throw new Error(\"Invalid JSON-RPC response payload.\");\n<\/span><\/span> }\n<\/span><\/span>\n<\/span><\/span> const maybeError = payload as JsonRpcError;\n<\/span><\/span> if (maybeError.error) {\n<\/span><\/span> throw new Error(\n<\/span><\/span>