TUTORIAL • WORDPRESS • AI AGENTS
Build, edit, and design Divi 5 pages programmatically using AI agents. Connect the DiviOps MCP server to Hermes Agent and let your AI assistant handle WordPress design while you focus on content.
What You Can Do
AI-Powered Divi Design at Your Fingertips
Programmatic Page Building
Create, update, and design Divi pages entirely through natural language. Your AI agent handles sections, rows, modules, and styling while you describe what you want.
Full Design System Control
Manage global colors, fonts, presets, and variables programmatically. Build consistent design systems across your entire site without clicking through the Visual Builder.
Safe Rollback Snapshots
Every write operation supports automatic backups. If something goes wrong, restore any previous state with a single command. Experiment fearlessly.
Divi 5 introduced a modern block-based architecture that makes it the perfect target for AI-assisted design. Combined with the Model Context Protocol (MCP), you can now give AI agents like Hermes direct, structured access to your WordPress site. The result? You describe what you want in plain English, and your AI assistant builds it.
This guide walks you through the complete setup: installing the DiviOps plugin, connecting the MCP server to Hermes Agent, and using it to build and modernize pages. By the end, you will have an AI design partner that understands Divi's module system, presets, global colors, and even the Theme Builder.
Prerequisites
Before you begin, make sure you have the following in place:
- A WordPress site running Divi 5.1+ with the Divi theme active. Divi 5's block-based architecture is required for the MCP server to work correctly.
- Hermes Agent installed on your machine. You can use either the desktop app or the CLI version.
- Administrator access to your WordPress site. You will need this to install plugins and create application passwords.
- Node.js 18+ on your machine. The DiviOps MCP server runs as an npm package via npx.
Step 1: Install the DiviOps Agent Plugin
The DiviOps Agent plugin is the bridge between your WordPress site and the MCP server. It exposes a REST API that the MCP server uses to read and write Divi content.
1.1 Download the Plugin
Get the latest diviops-agent.zip from the DiviOps GitHub repository releases page. The plugin is open source (MIT license) and works with both Divi 5 Free and Divi 5 Pro.
1.2 Upload and Activate
In your WordPress admin panel, navigate to Plugins → Add New → Upload Plugin. Choose the diviops-agent.zip file and click Install Now. Once installed, click Activate.
After activation, you should see a new DiviOps menu item in your WordPress admin sidebar. The plugin is now ready to accept connections from the MCP server.
Verification: Visit DiviOps → Status in your WordPress admin. You should see a green checkmark confirming the REST API is active and Divi 5 is detected.
Step 2: Create a WordPress Application Password
The MCP server authenticates with your WordPress site using an Application Password. This is more secure than using your main account password and can be revoked at any time.
2.1 Generate the Password
In your WordPress admin, go to Users → Profile and scroll down to the Application Passwords section. Enter a name like "Hermes MCP" and click Add New.
WordPress will display a password like abcd EFGH 1234 ijkl MNOP 5678. Copy this immediately — it will not be shown again.
2.2 Remove the Spaces
WordPress displays the password with spaces for readability, but the API requires the spaceless form. Remove all spaces before using it. For example, abcd EFGH 1234 ijkl MNOP 5678 becomes abcdEFGH1234ijklMNOP5678.
Security note: The WordPress user must have at least the Editor role to create and modify posts via the MCP server. For full design system access (global colors, fonts, Theme Builder), an Administrator account is recommended.
Step 3: Connect the MCP Server to Hermes Agent
Now you will register the DiviOps MCP server with Hermes Agent. This gives your AI assistant direct access to your WordPress site through structured tools.
3.1 Add the MCP Server
Open your terminal and run the following command, replacing the placeholder values with your actual site details:
hermes mcp add diviops --command npx --env WP_URL=https://your-site.com --env WP_USER=your-username --env WP_APP_PASSWORD=your-spaceless-password --args -y @diviops/mcp-serverLet's break down each part:
- hermes mcp add diviops - Registers a new MCP server named 'diviops'
- --command npx - Uses npx to run the server (no global install needed)
- --env WP_URL=... - Your WordPress site URL (with https://)
- --env WP_USER=... - Your WordPress admin username
- --env WP_APP_PASSWORD=... - The spaceless application password from Step 2
- --args -y @diviops/mcp-server - The npm package to run (must be the LAST flag)
3.2 Restart Hermes
After adding the MCP server, restart Hermes Agent for the changes to take effect. The DiviOps tools will appear in your agent's tool list prefixed with mcp__diviops__.
Important: The
--argsflag must be the last argument in the command. Everything after--argsis passed directly to npx. If you put other flags after it, they will be sent to the MCP server instead of the hermes CLI.
Step 4: Verify the Connection
Once Hermes is restarted, you can verify that the MCP server is connected and working properly.
4.1 Test the Ping
In your Hermes chat, simply ask your agent to check the connection:
"Ping my WordPress site via DiviOps"
The agent will call the mcp__diviops__diviops_meta_ping tool and should respond with the Divi version number. If you see "Connected to Divi 5.x.x", everything is working.
4.2 List Your Pages
Try asking your agent to list your site's pages:
"Show me all pages on my WordPress site"
The agent will call mcp__diviops__diviops_page_list and return a list of all pages with their IDs, titles, and statuses.
4.3 Explore Available Tools
The DiviOps MCP server exposes over 90 tools covering pages, sections, modules, presets, global colors, fonts, variables, the Theme Builder, and more. Ask your agent to show you the full catalog:
"What DiviOps tools are available?"
Step 5: Build Your First AI-Generated Page
Now for the fun part. Let's walk through a real example of building a page with your AI agent.
5.1 Create a New Page
Simply tell your agent what you want:
"Create a new page called 'My Services' with a hero section, three feature blurbs, and a call-to-action at the bottom. Use a dark gradient hero and a clean white content area."
The agent will create the page as a draft, then build it section by section using the DiviOps tools. You can review it in WordPress before publishing.
5.2 Key Building Blocks
The agent uses these core tools to construct pages:
- diviops_page_create - Creates a new page (draft or published)
- diviops_section_append - Adds a new section to the end of a page
- diviops_section_replace - Replaces an existing section (useful for hero redesigns)
- diviops_page_update_content - Replaces the entire page content at once
For complex pages with code blocks, the agent builds incrementally with section_append to avoid JSON escaping issues. Each section can contain rows, columns, text modules, blurbs, buttons, and more.
5.3 Design Tokens and Presets
Beyond page building, your agent can manage your entire design system:
- Global Colors - Create, update, and organize your color palette
- Global Fonts - Register Google Fonts or custom fonts site-wide
- Presets - Save and reuse module configurations across pages
- Variables - Define fluid typography, spacing, and radius scales
Step 6: Best Practices and Pro Tips
After building several pages with the DiviOps MCP server, here are the patterns that make the experience smooth and reliable.
6.1 Always Use Backups
Every write operation supports automatic rollback snapshots. Always ask your agent to pass backup=true on content mutations. If something goes wrong, you can restore any previous state with a single command. Snapshots are stored for 7 days.
6.2 Build Incrementally
For complex pages with code blocks, prefer building section by section with section_append rather than replacing the entire content at once. This avoids JSON escaping issues and makes each change independently reversible.
6.3 Use Templates as Starting Points
The DiviOps server includes built-in templates for common patterns: hero sections, feature grids, CTA banners, and card layouts. Ask your agent to load a template with diviops_template_get and customize it rather than building from scratch.
6.4 Search for Icons
Don't guess Font Awesome icon codes. Use diviops_meta_find_icon to search by keyword. The tool returns the exact unicode, type, and weight needed for blurb modules and icon elements.
6.5 Validate Before Publishing
Before publishing a page, ask your agent to validate the block markup with diviops_validate_blocks. This catches structural issues like missing required attributes or malformed block comments before they affect your live site.
6.6 Flush the Cache When Needed
Divi caches compiled CSS per page. If style changes don't appear on the frontend, ask your agent to flush the cache with diviops_meta_flush_cache for the affected page IDs.
Start Building with AI Today
The DiviOps MCP server turns your AI agent into a full-stack WordPress designer. Install it today and give your agent the power to build, style, and manage your Divi site programmatically.