Build and run a WordPress site by chatting with AI.
By the end of this guide your AI assistant (Claude or Codex) will be wired to your WordPress site — able to create pages and blog posts, add images, redesign sections, edit content, and track SEO — all from a normal conversation. Work through it at your own pace.
Watch the session
The full walkthrough — setup, a live build, and Q&A. The steps below mirror what’s on screen.
Open recording ↗A quick checklist
- A paid Claude or Codex plan. The build itself runs on Xyle’s free plan, but the assistant uses your AI credits — a paid tier keeps you from hitting limits mid-build.
- Basic WordPress comfort (you can log into
wp-admin, you know your domain). - Elementor Pro is recommended — the premium widgets unlock the full design range (plain-HTML builds work on free Elementor too).
Your AI assistant + one connection = a builder for your site
Think of MCP as a USB-C port for AI. You plug Xyle into your assistant once, and it can read and safely edit your real WordPress/Elementor site.
You
Describe what you want in plain English — “add a pricing page”, “swap this hero image”, “write a blog post about X”.
The connection (MCP)
Your assistant uses the Xyle tools to crawl, analyze, and edit — server-side, safely. You stay in the chat.
Your site
Changes land as drafts in WordPress/Elementor. You review and publish. Nothing happens behind your back.
Setup in 3 steps
Create your Xyle API key
Needed for Codex (Claude uses one-click sign-in — see Step 2).
- Open Xyle → Settings → Connect → API Keys.
- Click Generate New Key, name it (e.g.
laptop). - Copy it now — it’s shown once. It looks like
xyle_….
xyle_ saved safely.Add Xyle to your AI assistant
The server URL is always https://mcp.xyle.app/mcp.
Claude signs you in — no API key, no config files.
- Profile → Settings → Connectors.
- Customize → + Add connector.
- Name it
Xyle, paste the URL below, leave Client ID / Secret blank. - Connect → sign in with Google → approve.
https://mcp.xyle.app/mcp
- Open Connect to a custom MCP.
- Name
XYLE· toggle Streamable HTTP. - URL
https://mcp.xyle.app/mcp· leave the env-var field blank. - Under Headers add
Authorization= the value below → Save.
Bearer xyle_your_key_here
claude mcp add xyle --transport http https://mcp.xyle.app/mcp
Then run /mcp → Authenticate → sign in. Verify with claude mcp list.
Cursor — add to ~/.cursor/mcp.json, then Login in Settings → MCP:
{
"mcpServers": {
"xyle": { "url": "https://mcp.xyle.app/mcp" }
}
}VS Code (Copilot) — .vscode/mcp.json:
{
"servers": {
"xyle": { "type": "http", "url": "https://mcp.xyle.app/mcp" }
}
}Reconnect / restart the MCP session — clients fetch the tool list once when they connect.
Connect your WordPress site
Works on any host via the free Xyle Connector plugin — no SSH needed.
- WordPress → Plugins → Add New → Upload Plugin (
yoursite.com/wp-admin/plugin-install.php). - Upload the zip below, then Install & Activate:
https://api.xyle.app/wordpress/plugin/download
- Users → Profile → Application Passwords → name it
Xyle→ Add → copy it. - Back in chat, connect it:
Connect my WordPress site yoursite.com. Username is my-wp-login@email.com, application password is xxxx xxxx xxxx xxxx. Then enable writes.
The username is your wp-admin login (usually an email) — not the Application Password’s name. If it’s rejected, that’s what to fix.
Prompt recipes — the assistant in action
Paste and adapt. The assistant picks the tools; you describe the outcome. Everything lands as a draft first.
Build a new draft landing page for our AI services: a hero with two buttons, a row of three feature cards, a testimonial, and a contact CTA.
Write a draft blog post titled “5 ways to cut AI serving costs” — intro, five H2 sections, and a closing CTA.
Upload this image to my media library and use it as the hero on the AI services page: https://…/hero.jpg
Read my homepage, then change the hero heading to “Ship faster with AI” and swap the hero image — leave everything else untouched.
On page 12, set the ACF field hero_subtitle to “Built for busy founders”.
Run an SEO/AEO/GEO analysis of my homepage and fix the top three issues. Then track these keywords: “ai consulting”, “llm cost optimization”.
Take a screenshot of my homepage, tell me what’s weak about the design, then fix the footer contrast.
Working across sites — tell it which one
The assistant works on one site at a time. Open with the domain and it never has to guess.
List my sites with their domains, then we’ll work on one.
| Way | Example |
|---|---|
| By domain | “On scaleminds.co, create a pricing page.” |
| By name | “For the Scale Minds brand, run an SEO analysis.” |
| By site id | “Use site c6de060f… and list its pages.” |
Keep one chat per client — the assistant holds the context (which site, the brand voice, what changed last).
Elementor vs custom HTML/CSS — how much control?
Elementor — fast & structured
Containers, widgets, themes, global colors/fonts. Responsive by default. Covers ~90% of pages and stays editable in the WordPress UI.
Custom HTML/CSS — total control
Drop raw HTML + CSS into an HTML widget for a bespoke component. Reach for it last, not first.
The control ladder
Elementor best practices
- Use Containers, not legacy Sections — lighter and far easier to make responsive.
- Set Global Colors & Fonts once — change the brand in one place, the whole site updates.
- Design mobile-first — check tablet/mobile views; adjust stacking + sizes there.
- Keep the DOM lean for Core Web Vitals — sized images from the media library, not giant hot-linked files.
- Accessibility — one H1, alt text, 4.5:1 contrast.
Prompting techniques that move the needle
A good prompt isn’t longer — it’s clearer. Give the outcome, the context, and the constraints.
Context → Goal → Constraints → Done.
We sell [what] to [who]. On [site/page], [do exactly this]. Keep [constraint]; don’t [constraint]. It’s done when [check]. Make it a draft.
Eight techniques
- Lead with the site & page.
- Set guardrails — say what NOT to touch. “Change only the hero — leave the nav, footer, and every other section alone.” Precise edits honor this, so you can experiment without collateral damage.
- Give an example (few-shot). “Match the tone of this paragraph: …”
- Set constraints. “Keep our green; don’t touch the nav; max 60 words.”
- Ask for options. “Give me 3 hero headline directions before building.”
- Show, don’t tell. Paste a screenshot to match.
- Define done. “Done when it passes a contrast check and reads on mobile.”
- Iterate in tight loops.
Feed it your brand — and your sources
The biggest quality jump comes from your brand guidelines: typography, colors, spacing, voice.
- From a reference site: “Read navyaai.com for colors, fonts, and tone, then build to match.”
- From your files: point it at a Google Drive doc, a GitHub repo, or local files.
- Clone a layout: “Build a page like this URL” or paste a screenshot.
Paste the same short brief at the start of any build so the assistant stays on-brand — no re-explaining every time.
Brand: [name]. We sell [what] to [who]. Colors: [hex / hex]. Fonts: [heading / body]. Voice: [e.g. confident, plain-spoken]. Always: use our global colors & fonts, mobile-first, alt text on images. Never: touch the nav or footer, publish without my OK.
Break a big build into a flow
For a whole page, hand it the sequence in one message — divide-and-conquer, built in:
Build the page shell first (hero + empty sections), then fill each section one at a time and pause for my review, then wire the contact form, then check it on mobile.
For a tiny tweak — a color, a word, a font size — just edit it in Elementor directly; it’s faster by hand and saves your daily edit allowance. Use the assistant for structure, content, and redesigns.
Claude tends to produce the nicer design for landing pages. And the Xyle tools carry built-in prompting skills — talk in plain outcomes, not technical instructions.
Plan mode — look before you leap
For anything bigger than a quick tweak, have the assistant write a plan and wait for your approval before changing a thing.
- Claude Code (CLI): press Shift+Tab to cycle into Plan mode.
- Claude & Codex (chat): just ask — “Plan this first, don’t change anything until I approve.”
Before touching anything, give me a step-by-step plan to turn my homepage into a SaaS landing page. I’ll approve before you build.
Look at this page and tell me what you’d change and why — don’t edit anything yet.
Don’t keep firing the same prompt — more blind attempts usually make it worse. Stop, switch to plan mode, and have it investigate first. (More on this next.)
You approve the plan, then you approve the draft. Two cheap checkpoints before anything goes live.
Divide & conquer — build in slices
The fastest way to a great page is one section at a time. Small slices are easy to review and fix.
The longer a single conversation runs, the more it burns tokens and risks context poisoning (the model loses the plot). Build one page — or one service — at a time, and start a fresh thread for a big new task.
When it’s not doing what you want
Every so often the assistant fixates on the wrong thing or keeps “fixing” in circles. Don’t out-stubborn it — reset the loop.
This isn’t working. Don’t change anything yet — here’s a screenshot. Tell me what’s actually going on and suggest 2–3 fixes that won’t touch the rest of the page.
Quick fixes for the usual suspects
- WordPress login rejected? Use your wp-admin username (usually an email), not the Application Password’s name.
- Assistant can’t see a new tool? Reconnect / restart the MCP session — tools load once per connection.
- Image upload says “invalid”? Use a real image URL (jpg / png / webp).
- ACF not working? The ACF plugin has to be installed and active on the site.
- A change went too far? It’s a draft — revert via WordPress revisions, or ask for a smaller, guarded edit.
Safety & control — you’re always in charge
Writes are off by default
The assistant reads freely, but can’t change anything until you enable writes.
Draft-first
New pages and posts are drafts. Nothing goes live until you say “publish”.
Reversible
Edits go through WordPress revisions — roll back anytime.
Revocable
Your Application Password and API key can be revoked in seconds.
About to do a large redesign? Duplicate the page first, or keep the current one published and build the new version as a draft. WordPress saves a revision on every save, so you can always compare and roll back to a known-good version.
Guard layers stop the assistant from clobbering sensitive theme/core files, but treat a backup (host snapshot or a backup plugin like UpdraftPlus) as non-negotiable before any major change.
No — pages and posts the assistant created stay on your site; the plugin is just the bridge.
What the assistant can do
You never call these by name — describe the job. This is the range:
Build & edit WordPress
Connect/verify, list & read pages, create pages + blog posts, surgical patches, upload & reuse images, ACF custom fields, themes, homepage, publish, screenshot review.
SEO · AEO · GEO
Crawl, on-page analysis, AI-visibility scans, audits, technical health, Core Web Vitals, competitor research.
Keywords
Research sessions & clusters, track keywords on a brand, performance from Search Console, live rank checks.
Integrations, reports & account
Search Console & Analytics, Shopify, generate/download reports, sites, plan & usage, Elementor + design knowledge.
Cheat sheet
Key links
| What | Where |
|---|---|
| MCP server URL | https://mcp.xyle.app/mcp |
| WordPress plugin download | https://api.xyle.app/wordpress/plugin/download |
| Your API key | Xyle → Settings → Connect → API Keys (starts xyle_) |
| App Password | WordPress → Users → Profile → Application Passwords |
Gotchas
- Assistant can’t see a new tool? Reconnect the MCP — tools load once per session.
- WordPress login rejected? Use your wp-admin username, not the App Password’s name.
- Image upload says “invalid”? Use a real image URL (jpg/png/webp).
- Want a specific look? Give it a screenshot to match.
- Nervous about a change? Keep it a draft, review, then publish.
Q&A from the workshop
Can it make videos?
Skip AI video generation for now (costly, hard to verify). Embed an existing YouTube video instead.
Custom Elementor widgets?
Possible but advanced — custom-widget tooling is still beta. Build with standard widgets (or an HTML block) for now.
Can it help with security?
Yes — ask it to review plugins and flag malicious or risky ones, and to sanity-check for common issues.
Free vs Pro?
One site is free to build and edit (a generous daily edit allowance). Pro ($29/mo) unlocks more brands, far more edits, automation, and version history. See in-app pricing for current limits.