How Headless Gives You an AI Head-Start - CourtneyR.dev's 2nd Brain

How Headless Gives You an AI Head-Start ![rw-book-cover](https://img.youtube.com/vi/QfbJ9h2O_GU/maxresdefault.jpg) 🔗 **Source:** [How Headless Gives You an AI Head-Start](https://www.youtube.com/watch?v=QfbJ9h2O_GU) > [!note]+ Document Notes > tags: #headless-wordpress #artificial-intelligence #content-management #developer-tools #api-integration > author: WP Engine > source: YouTube > reference: https://www.youtube.com/watch?v=QfbJ9h2O_GU > date created: 2024-12-19 15:30 > > # 🏷️ Title: How Headless Gives You an AI Head-Start >  ## 🧰 Action Inbox - [H1] Review MCP server integration patterns for content retrieval — demo architecture #headless-wordpress - [H2] Implement server-sent events for real-time AI chat responses — Next.js API routes #api-integration - [H3] Set up WP Engine headless platform deployment workflow — git-based deployment #developer-tools ## 🧭 Table of Contents - [[#📝 Summary]] - [[#📖 Main Content]] - [[#🗒️ Notes]] - [[#📚 References]] - [[#🗣️ Paraphrase]] - [[#📰 Newsletter]] - [[#✅ Action Items]] - [[#🧪 Hypotheses]] - [[#📊 Methodology]] - [[#❓ Questions]] - [[#🔮 Future Research]] - [[#💡 Implications]] - [[#🧠 Learning Styles Assessment]] - [[#📊 Accessibility Assessment]] - [[#🌍 DEIB Assessment]] - [[#✅ Logical Validity]] - [[#🛡️ DARVO Analysis]] - [[#🎯 Conclusion]] ### 🔗 References - [WP Engine Headless Platform](https://wpengine.com/headless-wordpress/) - [Smart Search AI Documentation](https://wpengine.com/smart-search/) ## 📝 Summary - Fran and Teresa from WP Engine demonstrate how headless WordPress architecture provides advantages for AI integration - Why it matters: Traditional WordPress tightly couples content with presentation, making programmatic AI access difficult - Key stakeholders: WordPress developers, DevRel teams, AI implementers using content management systems - Risks and tradeoffs: Increased complexity vs. improved AI integration capabilities and scalability - Bottom line takeaway: Headless architecture transforms WordPress content into structured, API-accessible data that AI systems can efficiently consume ## 📖 Main Content The presentation argues that headless WordPress is essential for modern AI integration because it decouples content management from presentation layers. In traditional WordPress, content is tightly bound to theme logic and page rendering, making it difficult to retrieve and transform programmatically for AI systems. Headless architecture solves this by exposing content through APIs (REST and GraphQL), creating a clean data layer for LLMs, vector search, agents, and recommendation systems. This architectural shift enables content to be treated as modular, structured data rather than static pages. Key trends shaping AI integration include agentic workflows (multi-agent collaboration), context engineering over prompt engineering, model decentralization through AI gateways, and sovereign/vertical AI using specialized small language models for industry-specific applications. The technical demonstration shows a complete stack including a WordPress admin copilot plugin, WP Engine's Smart Search AI MCP server, and a Next.js orchestration layer that handles real-time chat responses through server-sent events. ## 🗒️ Notes #### ⏱️ [00:00](https://youtu.be/QfbJ9h2O_GU?t=0) — [H1] Introduction and speaker credentials - Key idea: Fran focuses on headless WordPress, AI, and MCP development at WP Engine - Evidence: "I spend a lot of time working across APIs, content systems, agentic workflows, MCPs" #### ⏱️ [01:45](https://youtu.be/QfbJ9h2O_GU?t=105) — [H2] Why headless is prerequisite for AI integration - Key idea: AI systems require structured content and reliable API access - Evidence: "Traditional CMS content is often tightly bound to theme logic page rendering and makes it harder to retrieve transform and reuse programmatically" #### ⏱️ [02:30](https://youtu.be/QfbJ9h2O_GU?t=150) — [H1] Content as data transformation concept - Key idea: Headless architecture shifts content from pages to modular structured data - Evidence: "This turns those pages into modular structured data" #### ⏱️ [03:15](https://youtu.be/QfbJ9h2O_GU?t=195) — [H2] 2026 AI trends shaping tooling landscape - Key idea: Rise of agentic workflows defining 2026 shift - Evidence: "The defining shift of 2026 is agentic workflows" #### ⏱️ [04:00](https://youtu.be/QfbJ9h2O_GU?t=240) — [H3] Context engineering vs prompt engineering - Key idea: Focus moves from perfect prompts to curated datasets - Evidence: "The goal has moved away from writing the perfect prompt to curating the perfect data set for the AI to analyze" #### ⏱️ [04:30](https://youtu.be/QfbJ9h2O_GU?t=270) — [H3] Model decentralization strategy - Key idea: Enterprises moving from single model to AI gateway routing - Evidence: "Enterprises are beginning to move away from a one model strategy instead using AI gateways to route tasks to the most effective model per nature of the task" #### ⏱️ [05:00](https://youtu.be/QfbJ9h2O_GU?t=300) — [H2] Sovereign and vertical AI emergence - Key idea: Small language models trained on proprietary industry data for privacy and precision - Evidence: "Rise of the small language models which are trained on proprietary industry data" #### ⏱️ [06:00](https://youtu.be/QfbJ9h2O_GU?t=360) — [H1] Comparison infographic walkthrough - Key idea: Traditional vs headless WordPress shows clear AI integration advantages - Evidence: "AI has to parse the entire page to find relevant data" vs "structured JSON or GraphQL data" #### ⏱️ [07:15](https://youtu.be/QfbJ9h2O_GU?t=435) — [H2] Delivery speed improvements - Key idea: Headless enables pre-built or client-side rendering vs server-on-demand - Evidence: "API-driven headless sites can provide substantial increases in speed especially if they're static" #### ⏱️ [08:00](https://youtu.be/QfbJ9h2O_GU?t=480) — [H2] Multi-channel context capabilities - Key idea: Single content piece feeds RAG systems powering multiple contexts - Evidence: "Single piece of content feeds to a retrieval augmented generation and that system then can power multiple types of contexts simultaneously" #### ⏱️ [09:00](https://youtu.be/QfbJ9h2O_GU?t=540) — [H1] Security and scale advantages - Key idea: Headless hides database behind API gateway and CDN for better security - Evidence: "If you deploy an AI agent that generates thousands of landing pages an hour based on a single WordPress entry, a headless setup can more easily handle that load" #### ⏱️ [10:30](https://youtu.be/QfbJ9h2O_GU?t=630) — [H1] Live demo introduction - Key idea: Demo includes WordPress admin copilot, Smart Search AI MCP, and Next.js backend - Evidence: "Core application architecture that includes WordPress admin copilot, WP engines smart search AI, an MCP" #### ⏱️ [11:00](https://youtu.be/QfbJ9h2O_GU?t=660) — [H2] WP Admin chatbot demonstration - Key idea: Custom plugin renders chatbot with server-sent events for real-time responses - Evidence: "It's saying it's sending this response back and this is done through server sent events" #### ⏱️ [13:00](https://youtu.be/QfbJ9h2O_GU?t=780) — [H2] Technical stack file walkthrough - Key idea: Three main files handle MCP integration, tool calling, and API routing - Evidence: "There's going to be three main files that I want to go over" #### ⏱️ [15:30](https://youtu.be/QfbJ9h2O_GU?t=930) — [H1] WP Engine headless platform deployment - Key idea: Git-based workflow with environment variables for production deployment - Evidence: "This is a git based workflow. You get commit and push and it updates the WP Engine platform" ## 📚 References - [Smart Search AI MCP Documentation](https://wpengine.com/smart-search/) - [WP Engine Headless Platform](https://wpengine.com/headless-wordpress/) - [Next.js API Routes Documentation](https://nextjs.org/docs/api-routes/introduction) - [WordPress REST API](https://developer.wordpress.org/rest-api/) - [GraphQL for WordPress](https://www.wpgraphql.com/) ## 🗣️ Paraphrase - Headless WordPress separates content management from presentation, making content accessible to AI systems through structured APIs instead of page-bound data - Modern AI trends focus on multi-agent workflows, curating quality datasets over prompt optimization, and using specialized models for different tasks - The demonstrated architecture combines WordPress content management with real-time AI chat capabilities through MCP servers and Next.js orchestration ## 📰 Newsletter **Headless WordPress + AI: Your Technical Foundation for 2026** Ready to future-proof your WordPress development? Fran and Teresa from WP Engine just demonstrated how headless architecture isn't just about speed—it's your gateway to AI integration. **Key Learning**: Traditional WordPress binds content to themes, making AI access clunky. Headless exposes your content as structured JSON/GraphQL data that AI systems can actually use effectively. **Practical Benefits**: - Content becomes reusable across channels and AI systems - Better security through API-first architecture - Scalability for AI-generated content at volume - Real-time capabilities through server-sent events The demo showed a complete working stack: WordPress admin chatbot + Smart Search AI MCP + Next.js orchestration. All deployable on WP Engine's headless platform with git-based workflows. **Community Connection**: This aligns with WordPress's API-first future and the growing ecosystem of AI-powered developer tools. Resources: [Learn WordPress](https://learn.wordpress.org/), [WP-CLI](https://wp-cli.org/), [WP Engine Headless Docs](https://wpengine.com/headless-wordpress/) ## ✅ Action Items #### DevRel - Developer advocacy: Create technical talks demonstrating headless + AI integration patterns, measure adoption metrics - Education: Develop workshops on MCP server integration and agentic workflows for WordPress developers - Developer experience: Improve documentation for Smart Search AI MCP and Next.js integration patterns - Developer marketing: Create content series on AI-first WordPress architecture and headless benefits - Community management: Moderate discussions on AI integration challenges and collect developer feedback #### WordPress - Core: Evaluate API-first architecture priorities for improved AI system integration - Core AI: Develop guardrails for AI-generated content and evaluation frameworks for content quality - Documentation: Create comprehensive guides for headless AI integration patterns and MCP implementation - Community: Support meetup content on AI + WordPress integration and headless architecture benefits - Training: Develop learning paths for transitioning from traditional to headless WordPress development - CLI: Add scaffolding commands for headless + AI project setups and MCP server configurations - Meta: Improve API reliability and performance for high-volume AI content generation scenarios ## 🧪 Hypotheses - Headless WordPress adoption will accelerate as AI integration becomes essential for content management workflows - Server-sent events will become standard for real-time AI interactions in WordPress applications - MCP (Managed Content Platform) servers will emerge as critical infrastructure for AI-powered content systems - Traditional WordPress themes will need API-first redesigns to remain competitive with headless alternatives ### 📊 Methodology - Study design: Compare AI integration complexity between traditional vs headless WordPress implementations - Data sources: Performance benchmarks of API response times, content retrieval speeds, and AI processing efficiency - Experiments: A/B test user experiences with traditional vs headless AI-powered content delivery ### ❓ Questions - How will WordPress Core evolve to better support AI-first content architectures? - What security implications emerge when AI systems have direct API access to content management? - Can traditional WordPress hosting providers compete with specialized headless platforms for AI workloads? ### 🔮 Future Research - Performance impact analysis of MCP servers on WordPress hosting infrastructure - Developer experience studies comparing headless vs traditional WordPress for AI integration - Security research on AI agent access patterns and content management vulnerabilities ### 💡 Implications - Practice: WordPress developers need to learn API-first development and AI orchestration patterns - Policy: Content management policies must address AI agent access and automated content generation - Security: API endpoints become critical attack surfaces requiring enhanced monitoring and rate limiting - Education: Developer training programs need modules on headless architecture and AI integration - Funding: Investment shifts toward headless hosting platforms and AI-specialized WordPress tools ### 🧠 Learning Styles Assessment Reading level estimate: 12-14 (Technical content with specialized terminology) #### 👀 Visual learners - Present: Architecture diagrams comparing traditional vs headless WordPress - Improve: Add data flow visualizations for MCP server communication patterns #### 🔊 Aural learners - Present: Video demonstration with spoken explanations of technical concepts - Improve: Create accompanying podcast episode with deeper technical discussion #### 🗣️ Verbal learners - Present: Clear definitions of MCP, agentic workflows, and headless architecture - Improve: Add glossary with WordPress-specific AI terminology and analogies #### 🧩 Kinesthetic learners - Present: Live code demonstration and file walkthrough in VS Code - Improve: Provide downloadable starter project and step-by-step setup checklist #### 🧠 Logical learners - Present: Clear cause-and-effect relationships between architecture choices and AI capabilities - Improve: Add performance metrics and decision trees for choosing headless vs traditional #### 🧑‍🤝‍🧑 Social learners - Present: Collaborative presentation format with two speakers building on each other's points - Improve: Create discussion prompts for developer teams evaluating headless adoption #### 🧘‍♀️ Solitary learners - Present: Reference to accompanying written article for self-paced learning - Improve: Add self-assessment quiz on headless vs traditional architecture trade-offs #### 🌿 Naturalistic learners - Present: Discussion of ecosystem evolution and emerging trends in AI tooling - Improve: Connect to broader technology lifecycle patterns and sustainability considerations ### 📊 Accessibility Assessment #### Screen reader semantics - Present: Video has speakers who identify themselves clearly - Improve: Add detailed alt text for architectural diagrams and code screenshots #### Keyboard navigation - Present: Standard YouTube player controls available - Improve: Ensure accompanying written materials have proper heading structure #### Contrast and readability - Present: Code demonstrations use standard VS Code themes - Improve: Verify code examples meet WCAG contrast requirements in documentation #### Text resizing and reflow - Present: YouTube player responsive design handles zoom well - Improve: Test accompanying article layout at 200% zoom #### Media and captions - Present: Video content available - Improve: Add professional captions and downloadable transcript #### Forms and interactions - Present: Standard video player interactions - Improve: Ensure any linked forms have proper labels and error handling ### 🌍 DEIB Assessment #### Cultural breadth - Present: Technical content focused on global developer community - Improve: Include examples from diverse geographic regions and use cases #### Inclusive language - Present: Gender-neutral terms used throughout presentation - Improve: Define technical jargon more consistently for non-native English speakers #### Neurodiversity support - Present: Content broken into clear sections with timestamps - Improve: Add content warnings for rapid code switching and technical complexity #### Representation - Present: Mixed-gender presenting team with different technical backgrounds - Improve: Include diverse developer perspectives in case studies and examples #### Psychological safety - Present: Presenters acknowledge learning challenges ("when I was in boot camp") - Improve: Add explicit encouragement for developers at different skill levels ### ✅ Logical Validity #### Strong reasoning - Deductive strength: Clear logical progression from AI needs → structured data → headless architecture - Inductive strength: Multiple examples supporting headless advantages (speed, security, scale) - Causal reasoning: Well-established links between architectural choices and technical outcomes - Analogical strength: Effective comparison between traditional and headless approaches --- ## Full Transcript [00:17] Howdy y'all. I'm Fran and I work in [00:19] developer relations here at WP Engine [00:21] with a focus on headless WordPress AI [00:24] and MCP development. A lot of what I do [00:26] here is build technical demos, create [00:28] documentation, and make developer [00:30] content that helps people build modern [00:32] apps and sites. So, I spend a lot of [00:35] time working across APIs, content [00:37] systems, agentic workflows, MCPs, and I [00:41] what I really actually do is enjoy [00:42] making complex technical ideas easier to [00:46] understand and actually useful in the [00:48] real world. But more than anything, this [00:51] is my mantra, y'all. I'm super stoked [00:53] about making headless WordPress more [00:56] powerful, more flexible, and more [00:58] connected to growing world of AI and [01:00] developer tools. Now, I'm going to pass [01:02] it along to my cohort and one of my [01:04] favorite people in the world and [01:06] developers, uh, Terry Goble. [01:08] >> Thanks, Fran. I'm Teresa, a software [01:10] engineer at WP Engine, building better [01:12] business solutions. And my experience [01:15] includes optimizing backend efficiency, [01:18] scaling infrastructure, building [01:19] WordPress plugins, and integrating [01:21] front-end tools with headless WordPress. [01:24] Um, I enjoy streamlining systems to [01:27] bridge gaps between legacy data and [01:29] modern automated workflows. And when I'm [01:33] not uh organizing hackathons and [01:35] exploring WordPress features, um, I love [01:39] writing science fiction and bird [01:40] watching. So, but we're not going to [01:42] talk about those two things today. We're [01:44] going to get into how Headless gives you [01:47] an AI head start. So, why is Headless [01:50] the prerequisite for modern AI [01:51] integration? [01:53] >> Well, Terry, you've asked the correct [01:55] question to the right guy, and I have [01:57] the right answer for you. Boy, do I. So, [02:00] headless is the prerequisite for modern [02:03] AI integration because AI systems need [02:05] structured content and reliable API [02:08] access. So as you all know in a [02:10] traditional CMS content is it's often [02:13] tightly bound right to theme logic page [02:15] rendering and it makes it harder to [02:18] retrieve transform and reuse it [02:20] programmatically. Now trust me when I [02:23] was in boot camp in a young dev I had [02:25] the hardest time doing this [02:26] programmatically but y'all headless. It [02:30] solves that by decoupling the content [02:32] management from presentation and [02:34] exposing through APIs like REST and love [02:38] of my life, Terry, GraphQL. You know, I [02:41] love a good GraphQL API. So, that gives [02:44] developers a really clean way to feed [02:46] into [02:48] LLMs. They'll feed their data into LLMs, [02:51] vector search, agents, recommendation [02:55] systems, and multi-channel apps. So if [02:59] you think about it really the value ad [03:00] is not just architectural flexibility [03:03] but Terry it's a content layer that is [03:05] usable by the AI systems today and that [03:09] everchanging ecosystem. So that's that's [03:11] why [03:12] >> thanks Fran. It sounds to me like the [03:14] key point here is data transformation. [03:17] So let's go ahead and dig into that a [03:19] little bit further. So as Fran said [03:22] there is a shift happening. Content is [03:25] data not pages. So in a traditional [03:28] monolithic WordPress setup, we have the [03:30] content and the layout and the [03:32] functionality all locked together. But [03:34] in a headless environment or decoupled [03:37] architecture, we separate the content [03:39] management from the display layer. So [03:43] why does AI care? Well, going back to [03:46] Fran's point, it's because this turns [03:49] those pages into modular structured [03:52] data. So that core shift that Fran was [03:55] talking about is an adoption of headless [03:59] WordPress architecture where [04:01] organizations convert their content [04:03] library into a structured reusable [04:05] content data set instead. Headless [04:08] WordPress doesn't just manage your [04:10] content, it provides the content to be [04:12] actioned by the next generation of uh [04:16] incredible intelligent systems that are [04:18] on their way to us. So let's touch base [04:21] briefly on what trends are shaping the [04:23] AI tooling landscape. Now I know y'all [04:26] have gone to uh some of the keynote [04:28] speakers who have talked at length about [04:30] this but a couple of key points to take [04:33] away from our talk is there's a rise of [04:36] agentic workflows. The defining shift of [04:39] 2026 is agentic workflows. [04:44] Users can now deploy those workers, [04:46] agentic workers that collaborate in [04:48] multi- aent systems to solve end-to-end [04:51] business problems. [04:53] You'll also see a lot of context [04:55] engineering versus prompt engineering. [04:58] This year, the goal has moved away from [05:00] writing the perfect prompt to curating [05:03] the perfect data set for the AI to [05:06] analyze. [05:08] We're also touching base on model [05:10] decentralization. [05:13] So enterprises are beginning to move [05:15] away from a one model strategy instead [05:18] using AI gateways to route tasks to the [05:22] most effective model per nature of the [05:25] task. [05:27] And then of course um sovereign and [05:30] vertical AI uh which is the rise of the [05:34] small language models uh which are [05:36] trained on proprietary industry data. So [05:40] uh those of you here who are working on [05:43] legal or healthcare or finance related [05:47] um endeavors, you're going to see a lot [05:49] of those small language models to ensure [05:52] uh data privacy and high precision. So [05:56] essentially 2026 [05:58] um is AI as electricity. So it's [06:02] invisible. It's everywhere and it's a [06:05] fundamental utility upon which all [06:08] modern business is built. So let's take [06:12] a look at this infographic [06:14] which shows us traditional monolithic [06:16] WordPress compared to headless WordPress [06:19] and how AI can make a better product and [06:22] workflow for your team. So this first [06:24] row we have strategic drivers. So [06:27] traditional WordPress [06:29] um has to parse uh AI has to parse the [06:32] entire page to find relevant data. [06:36] In headless WordPress, that same content [06:40] is structured JSON or GraphQL data, so [06:44] blocks or custom fields. [06:48] And the way that AI can make this better [06:50] is that AI models actually ingest [06:52] labeled semantic data way better, [06:55] increasing accuracy and understanding of [06:57] user intent. [06:59] We also have a huge one that many of you [07:01] are already familiar with, which is that [07:03] delivery speed. So pages in monolithic [07:07] traditional WordPress are typically [07:09] rendered by the server on demand. when [07:12] we go into headless WordPress territory, [07:15] the front end is pre-built um or renders [07:18] client side. [07:21] And then with that change, APIdriven [07:24] headless sites can provide substantial [07:26] increases in speed um especially if [07:28] they're static. Of course, [07:31] we also have multi-channel context um [07:34] which is consumed by AI um much better [07:37] in headless. So publishing to apps or [07:40] assistants in traditional WordPress is [07:43] difficult. We all know that the API [07:46] delivers the content anywhere in [07:48] headless WordPress. the front end adapts [07:51] the view and so with AI and headless a [07:56] single piece of content feeds to a [07:58] retrieval augmented generation for [08:00] example and that system then can power [08:03] multiple types of contexts [08:05] simultaneously which opens up your [08:07] options [08:09] and lastly we have security and scale [08:12] which is going to be huge coming up over [08:15] the next several years traditional [08:17] WordPress the single server handles [08:20] everything, login, content, traffic [08:22] spikes, making it a target for DDOS and [08:25] injection attacks. But headless all by [08:28] itself, that backend uh the database is [08:32] hidden behind other things, the API [08:35] gateway, a CDN. So that by itself [08:38] increases security and scale um [08:41] exponentially. If you deploy an AI agent [08:45] that, for example, generates thousands [08:47] of landing pages an hour based on a [08:49] single WordPress entry, a headless setup [08:52] can more easily handle that load uh [08:55] without crashing and can keep you uh at [08:58] scale and secure. So, that's just a [09:00] really general walkthrough of some of [09:02] the things that um will help you with [09:06] starting off with AI if you move to a [09:08] headless structure. Let's talk a little [09:10] bit about what Fran is about to demo. [09:14] Now, uh for his demo, there is a core [09:17] application architecture that includes [09:19] WordPress admin copilot, WP engines [09:22] smart search AI, an MCP, which is a [09:25] smart searched managed content platform [09:28] server, and then we also have Nex.js uh [09:31] API backend in use um coupled with Open [09:35] AI. [09:36] >> Thank you so much for handing that off [09:37] to me, y'all. I'm super stoked. We're [09:39] going to get into the demo and all those [09:41] pieces that Terry mentioned, you're [09:43] going to see it and you're gonna I'm [09:45] gonna deep dive into the files here. And [09:47] I have a surprise for y'all. I'm going [09:50] to drop the bomb today in the session [09:53] chat description. And as collateral, [09:56] this demo that I'm doing is an actual [09:59] howto guide that has been published by [10:02] yours truly. So throughout this demo, as [10:05] you're following along, if you want to [10:06] follow along, deep dive into the [10:08] article, you can. So let's get right to [10:11] it, y'all. So we're in WP Admin now, and [10:14] let me start this off by showing how [10:16] this works. [10:19] Once the plugin is downloaded, this [10:21] renders a custom chatbot, as you can see [10:24] here, and then it has an input box. And [10:27] I'm going to ask about index content [10:28] right now. So, let's ask about Star [10:31] Wars, which I know is in here. [10:45] So, down here, it's giving you a chat AI [10:49] chat experience, and it's saying it's [10:52] sending this response back [10:55] and this is done through server sent [10:57] events. And here is the response back [11:00] with the data that matches and tracks on [11:03] what you asked for. It asked for I asked [11:06] for Star Wars content and it gave me the [11:08] Mandalorian, a Return of the Jedi movie [11:11] review and then a uh the Return of the [11:14] Jedi um triumph scene. So now following [11:20] up, let me ask it a followup uh query [11:23] here. [11:28] Second result. [11:32] Awesome. And so it summarized the second [11:34] result. Uh, as you can see, the document [11:36] is a review of the MU Return of the [11:37] Jedi, which tracks on the second result. [11:41] All right, let's dive into the text [11:42] stack and see how this works. The first [11:44] thing is this WP admin copilot right [11:47] here. This is a custom plugin that I've [11:50] created. [11:52] It uh uses PHP and JavaScript and it's [11:55] just a regular uh custom plugin uh for [11:59] WordPress. [12:01] When you download this plugin, it's [12:02] going to render this and then it's going [12:04] to give you an option here on the left [12:06] hand side menu that says WP Copilot. We [12:10] click on that and we have our settings [12:11] and variables that we need in here. The [12:14] first thing is that agent endpoint URL [12:17] and I'll show you where that's coming [12:19] from at the end of this demo. [12:22] And then we have a shared secret token [12:23] which is a randomized string that you [12:25] can make up for your own secret [12:27] authentication. [12:30] So [12:31] once we have these in place, the other [12:33] thing that we're going that we need to [12:35] make this work is the smart search AI [12:37] MCP server. And within that um the [12:41] plug-in credentials when you get a smart [12:44] search AI license you will have that MCP [12:47] access with the O token right here um [12:51] next to this GraphQL endpoint and this [12:53] GraphQL access token. And just for full [12:57] disclosure at the time I did this demo [13:00] the Smart Search AIM MCP was in closed [13:04] beta. This is why you're not seeing it, [13:06] but it is an open beta now for everybody [13:08] to consume. So, you will see that uh on [13:11] the uh user interface in the WP admin [13:14] when you do get a smart search license. [13:17] Next, let's go ahead and go to Visual [13:19] Studio Code. So, I can discuss the files [13:22] that are necessary in the next.js [13:24] application, which acts as the [13:26] orchestration layer to this AI chatbot [13:30] um text stack and how this works. and [13:32] I'm going to go through three main files [13:34] here. So, let's dive into Visual Studio [13:37] Code. I'm going to open my code editor [13:38] here. There's going to be three main [13:41] files that I want to go over. The first [13:43] one is going to live in the lib folder. [13:45] And this is the mcp.ts file. Let me [13:48] scroll all the way up to the top here. [13:51] And [13:53] this file is the integration layer [13:55] between our app and the smart search MCP [13:58] server. So I'm going to go over a couple [14:01] of important things in this file. At the [14:03] top we define TypeScript types for JSON [14:06] RPC payloads right here and tool [14:09] arguments search args and fetch args. [14:15] The main class is smart search MCP [14:17] client. It stores the MCP URL bearer [14:21] token and session ID for stateful [14:23] communication. [14:26] The key method is called tool which [14:29] executes MCP tools either search or [14:32] fetch. The critical reliability feature [14:35] here is session recovery. [14:38] If errors suggest a stale or missing [14:40] session, it automatically reinitializes [14:43] and retries once. [14:46] search wraps call tool and returns both [14:48] raw payload and normalized results [14:50] through a defensive parser that handles [14:52] multiple MCP response formats. [14:57] Fetch retrieves full documents by ID. So [15:01] this file you can think of as the [15:02] transport and parsing backbone for MCP [15:06] communication. [15:09] The next file I want to go over is in [15:11] the same folder and it's the tools.ts [15:14] file. Let me click on that. And we're at [15:17] the top of the file. You can think of [15:20] this as the bridge um which bridges [15:22] OpenAI tool calling and our MCP client. [15:26] So let's go over the most important [15:28] things in this one. [15:31] So here it exports open AI tools. This [15:36] is the canonical tool list exposed to [15:38] the model. [15:40] Smart search search for semantic search [15:43] with query optional filter and [15:46] pageionation. [15:48] Smart search fetch for full document [15:51] retrieval by ID. [15:54] Each has strict JSON schema with [15:57] required fields. [16:00] The central function is execute tool. [16:03] Now this routes by tool name, normalizes [16:07] arguments, calls the MCP client and [16:10] updates last search state which is [16:14] critical for supporting follow-ups like [16:17] pageionation or summarizing prior [16:20] results. [16:23] This file is intentionally thin. It [16:26] decouples input validation and tool [16:28] execution from the API route. [16:31] If tool interfaces change later, updates [16:34] happen here without having to rewrite [16:36] the whole controller. [16:40] The next file I want to go over is the [16:42] route.ts file. This is the endpoint uh [16:45] that is the Nex.js application and we're [16:48] going to go over to that exact file. Uh [16:51] this lives in the API folder. Within its [16:54] subfolder is the chat folder and then [16:57] it's the route.ts file. So let's break [17:01] this down with the most important things [17:02] within this file. [17:05] So this file this handles off cores and [17:09] streams responses over server sent [17:11] events also known as SSC. [17:15] The post handler validates origin and [17:17] token then opens a server sent events [17:20] stream. [17:22] Now inside there are three guarded [17:26] paths. The first one is non-indexed [17:30] queries about users, roles or plugins. [17:34] This gets an immediate limitation [17:36] message. [17:38] Second guarded path pageionation [17:40] requests like show more or use prior [17:43] query and offset deterministically. [17:47] And the third guarded path is summarize [17:51] the nth result which fetches that [17:54] document and runs a focused open AI [17:57] call. [17:58] Now for all other requests it runs [18:01] iterative open AAI tool calling as [18:03] follows. [18:05] Sends messages to open AAI [18:09] execute requested tools via execute [18:11] tool. [18:13] append tool outputs back into [18:15] conversation. [18:18] Repeat up to five rounds [18:20] and then stream the final answer. So [18:23] this is the control plane. This secures [18:26] O takes smart shortcuts and executes a [18:30] gentic orchestration over SSE. [18:35] The last file that I want to show you is [18:37] the&env.example [18:39] file. And if you're going to run this [18:41] locally, you would uh add this into the [18:45] env.local file. But just for the [18:47] example, these are the environment [18:49] variables that you're going to want to [18:50] keep and copy and paste into your WP [18:54] Engine headless platform account. These [18:57] are what make the Nex.js route and the [19:01] orchestration layer connect all together [19:03] with these environments. Now, if you run [19:07] this locally on Nex.js, JS as you guys [19:09] know it'll spin up on port 3000 on [19:13] localhost. So if you were running lo [19:16] this locally you could copy this [19:18] endpoint in with the slappi/ chat path [19:22] into that WPadmin copilot settings and [19:25] it would run. However you would want [19:28] this to sustain over a hosted platform [19:32] like the headless platform that WP [19:34] Engine has. And that is the endpoint [19:36] that I have in [19:39] uh my WP admin right [19:44] here. [19:46] Now if I replace that with localhost [19:48] 3000/ API/ chat, it'll work as long as [19:51] that Nex.js local server is running. [19:54] Now this is the endpoint that's [19:56] provisioned by the WP Engine headless [19:58] platform. And let me show you where that [20:01] is. So, I'm going to go over to my user [20:03] portal account here at the WP Engine [20:05] platform, headless. [20:08] And this is the first application uh [20:10] site here. And that is it. That's the [20:13] endpoint that I pasted into the WP admin [20:17] to connect the co-pilot. Now, what this [20:21] is is a git based workflow. um you get [20:24] commit and push and it updates the WP [20:27] Engine platform once it's connected to [20:29] whatever remote repository you have. [20:32] Now, just wanted to show you exactly [20:34] where this is. If I click on main and I [20:38] go to variables, everything in that [20:40] environment variable file that's [20:42] necessary for this application to [20:43] connect and run via Nex.js and WP admin [20:47] is in this environment variable um [20:50] settings input box page. So, that's [20:54] pretty handy here and it's very easy to [20:57] use. The other thing, too, is it has [20:59] other things like a main overview [21:01] dashboard of your site's statistics and [21:05] your last commit, the details. You've [21:07] got build logs in there, and you've got [21:09] runtime logs as well. All right, y'all. [21:12] And that concludes the demo. [21:14] >> Thank you for that demo, Fran. We hope [21:16] you've learned something new today. [21:18] >> Absolutely, Terry. You all are welcome. [21:20] Don't forget to check out the article. [21:22] And until then, I'll see you all next [21:23] time. [21:24] >> Thank you for watching.  📄 **Full text:** ![[Full Document Contents/Articles/How Headless Gives You an AI Head-Start.md|How Headless Gives You an AI Head-Start by YouTube]] ## Highlights - really general walkthrough of some of the things that um will help you with starting off with AI if you move to a headless structure. Let's talk a little bit about what Fran is about to demo. Now, uh for his demo, there is a core application architecture that includes WordPress admin copilot, WP engines smart search AI, an MCP, which is a smart searched managed content platform server, and then we also have Nex.js uh ([View Highlight](https://read.readwise.io/read/01kr20knkzs11xwgss0abzzn89)) - Tags: 👻 ai highlighted - So here it exports open AI tools. This is the canonical tool list exposed to the model. Smart search search for semantic search with query optional filter and pageionation. Smart search fetch for full document retrieval by ID. Each has strict JSON schema with required fields. ([View Highlight](https://read.readwise.io/read/01kr20knn0se2wt2hwg8wnrez8)) - Tags: 👻 ai highlighted - If tool interfaces change later, updates happen here without having to rewrite the whole controller. The next file I want to go over is the route.ts file. This is the endpoint uh that is the Nex.js application and we're going to go over to that exact file. Uh this lives in the API folder. Within its subfolder is the chat folder and then it's the route.ts file. So let's break ([View Highlight](https://read.readwise.io/read/01kr20knp6epr6zr01374wq58v)) - Tags: 👻 ai highlighted - like the headless platform that WP Engine has. And that is the endpoint that I have in uh my WP admin right here. Now if I replace that with localhost 3000/ API/ chat, it'll work as long as that Nex.js local server is running. Now this is the endpoint that's provisioned by the WP Engine headless platform. And let me show you where that ([View Highlight](https://read.readwise.io/read/01kr20knr8d9k8cjjchmeq3756)) - Tags: 👻 ai highlighted