Working with AI on WordPress has always involved a frustrating gap. You type a prompt in an external tool, wait for a response, then flip back to your WordPress dashboard to see what changed. If something broke or looked wrong, you repeated the whole cycle. We have been following Novamira’s development since it first introduced MCP-based WordPress access. Their new Visual Mode changes that two-window workflow entirely.
Visual Mode is an experimental feature that lets AI build directly inside your open page builder canvas while you watch every change happen in real time. No switching tabs, no guessing what the agent did. You see it open elements, apply styles, and reference your global design tokens as it works. Paul from WPTuts demonstrated this live using Bricks Builder. The results are worth understanding in detail.
For context on how Novamira fits into the broader WordPress AI ecosystem, read our comparison of WordPress 7 vs Novamira and our guide on how to connect Claude AI to WordPress using Novamira MCP.
📚 New to WordPress? Start with our WordPress Basics and Installation guide before connecting AI agents to your site.
TL;DR: What You Need to Know About Novamira Visual Mode
- Visual Mode connects an external AI agent to your open WordPress page builder and builds in real time.
- The free version supports Gutenberg. Novamira Pro adds Elementor and Bricks Builder support.
- Setup requires a system prompt injection and a visual token handshake rather than a standard MCP configuration.
- The builder window must stay open throughout the session for the visual connection to hold.
- This feature is experimental. Always test on staging, never on a live production site.
What Makes Visual Mode Different From Standard MCP Integration
Standard Novamira MCP integration is powerful but invisible. You instruct the AI agent through your terminal or chat interface, it executes PHP against your WordPress installation, and the changes appear in your dashboard when you check. The process works well for data migrations, bulk operations, and code generation, but the experience is disconnected from the visual layer of your site.
Visual Mode bridges that gap by functioning like a remote desktop connection directly inside your page builder. The agent opens modules, adjusts margins, positions components, and applies styling while you watch the canvas update in front of you. Every structural decision the AI makes becomes immediately visible. If something looks wrong, you correct it with a follow-up prompt rather than discovering the problem after the fact.
This distinction matters enormously for design-intensive workflows. Agencies building client sites in Elementor or Bricks Builder spend significant time in visual iteration cycles: adjust, preview, adjust again. Visual Mode compresses those cycles by keeping the human and the AI agent in the same visual context.
Watch the full live demonstration from Paul at WPTuts below:
How to Set Up the Visual Mode Connection
Visual Mode requires a different setup process than standard MCP configuration. The connection uses a token-based visual handshake rather than a direct server URL and application password. Here is exactly how it works.
Log into your WordPress site and navigate to the Novamira dashboard. Select the Visual option, which appears with a red experimental banner indicating its current development status. Click Get Started and choose your preferred AI client from the supported menu. Novamira generates a specialised system prompt.
Copy that system prompt and paste it directly into your AI terminal, whether that is Claude, Codeex, or another supported client. The AI returns a unique visual handshake token. Paste that token back into the Novamira wizard and grant session permissions. The connection establishes.
Navigate to the page you want to build and open your builder of choice. Keep that builder window open continuously. Closing it breaks the visual link entirely. If you experience a connection delay during initial setup, restarting your AI client forces a clean reconnect.
ℹ️ Note: Visual Mode is experimental. The Novamira team is explicit about this. Small styling quirks and unexpected behaviours are possible. Test exclusively on staging environments or local installations. The Novamira website maintains current documentation and known limitations for the Visual Mode release.
What the AI Actually Built: Live Results From the Demonstration
Paul tasked the AI with building a Hero section inside Bricks Builder using a design.md file mapped into the project directory. That file defined specific design system rules: global theme styles, layout parameters, and utility variables for the AI to reference.
Three areas typically requiring careful manual attention all resolved from that single build command.
Semantic accuracy came first. The AI correctly assigned H1 to the primary title block and H2 to subheaders without explicit instruction. Clean heading hierarchy matters for both accessibility and SEO. The agent handled it without any prompting.
Responsive breakpoints followed. Desktop was only the starting point. The agent actively configured mobile and tablet stacking, correctly adjusting column behaviour for portrait orientations on smaller screens. Anyone who has manually configured Bricks Builder responsive rules knows how much time this step consumes.
Global variable usage was the most technically impressive aspect. Rather than injecting hardcoded pixel values or hex colour codes, the AI referenced existing design tokens for padding scales and typography sizing. Output integrated cleanly with the existing design system rather than creating a parallel set of inline styles to manage separately.
💡 Pro Tip: Prepare a design.md file before your first Visual Mode session. Map your global CSS variables, typography scale, and colour tokens into that file and add it to your project directory. The AI uses this reference to generate output that fits your design system rather than generic layouts needing manual alignment afterwards.
Iterating With Follow-Up Prompts
One of the most useful aspects of Visual Mode is how naturally it handles refinements. After the initial Hero build, the demonstration sent a follow-up request: update the primary button to use the global primary colour and apply a corner radius of M.
The agent fetched the –primary-color variable, applied the radius-M utility class, updated the button visually on the canvas, and stored that decision for consistency across subsequent pages. Seconds elapsed rather than the multiple clicks and panel navigations a manual adjustment requires.
This iterative pattern is where Visual Mode genuinely changes the design workflow. The AI handles structural generation while the designer handles direction and refinement. Both operate within the same visual environment rather than alternating between a terminal and a browser window.
What This Means for Your WordPress Workflow in 2026
Visual Mode is early and experimental, but the direction it points is clear. AI-assisted WordPress development is moving from blind code execution toward shared visual collaboration between human designers and AI agents. For agencies managing multiple client builds, this reduces the distance between AI-generated structure and design-system-compliant output significantly.
The broader context matters here too. As WordPress 7.0 introduces centralised AI infrastructure and search optimisation expands to cover AI-generated answers, the tools that help you build and optimise WordPress sites faster carry compounding value. WordPress.com’s guide to preparing your site for AI search engines covers the SEO side of that shift, and our own mastering WordPress SEO guide connects those strategies to your content workflow.
Our roundup of the best AI code generation WordPress plugins places Novamira within the broader tool ecosystem. WPBeginner’s honest reviews of the nine best AI automation tools and HubSpot’s account of levelling up a site with AI both offer useful comparison perspectives.
We are excited about where Novamira Visual Mode is heading. The experimental label is honest and appropriate. Test on staging, prepare your design system files, and follow the Novamira team’s updates as the feature matures. Getting comfortable with it now positions you ahead of agencies still switching between two separate windows.
Additional Resources
- How to Connect Claude AI to WordPress Using Novamira MCP
- WordPress 7 vs Novamira: Which AI Tool Do You Actually Need?
- Best AI Code Generation WordPress Plugins of 2026
- Mastering WordPress SEO: Your Ultimate Guide to Higher Rankings
- WordPress Basics and Installation: Complete Beginner Guide
- Novamira: Full WordPress Access for AI Agents
- 9 Steps to Prepare Your WordPress Site for AI Search Engines
- I Tested 9 Best AI Automation Tools for WordPress (Honest Reviews)
