How to Put a Vibe-Coded App on WordPress (2026)

You had an idea, described it to Claude, ChatGPT, or Cursor, and a few minutes later you had a working app — a calculator, a little game, a dashboard, whatever you needed. That part felt like magic.

Then you hit the wall everyone hits: it works on your screen, but how do you actually put it online? The AI built the app. It didn’t set up hosting, and it didn’t explain what to do with the folder it just made.

If you already have a WordPress site, the answer is simpler than you’d think. In this guide, I’ll show you how to take a vibe-coded app from a folder on your computer to a live URL on your site — with no FTP, no separate host, and no code.

Why this is usually harder than it should be

Here’s the trap. Your app is “built” — it’s a folder of HTML, JavaScript, and assets that runs in a browser. But the usual advice for publishing it is either:

Stand up a whole new stack — buy a domain, learn Netlify or Vercel, wire up a deploy. That’s a lot of moving parts for one small app.
Force it into WordPress the hard way — FTP it into a subfolder, or paste it into a page and watch your theme mangle it.

Neither is fun, and neither is necessary if you’ve already got a WordPress site sitting there. That’s the gap App To Page fills: it serves your built app at a URL on your existing site.

Step 1: Ask your AI for a deploy-ready build

Most “it won’t load” problems come from one thing — the build assumes it lives at the root of a domain. The fix is a relative base, and the easiest way to get it is to ask up front. Paste this into your AI tool before it builds:

Build a production version of this app, deploy-ready for the App To Page WordPress plugin.

- Use a relative base so it works at any URL:
  Vite -> base: './'   |   CRA -> "homepage": "."   |   Vue CLI -> publicPath: './'
  Plain HTML/JS -> use relative asset paths (href="style.css", not "/style.css")
- Keep a single top-level index.html as the entry point.
- Bundle all assets (models, fonts, images) inside the build and reference them relatively.
- Run the production build, then zip the CONTENTS of dist/ so index.html is at the top.

There’s more on this — including downloadable skills for Claude Code and Cursor — in the AI build kit.

Step 2: Get the built folder

If the AI edited a project on your machine, run its build command (usually npm run build) and grab the dist/ folder.
If it’s an in-browser tool like Bolt or v0, use the export or download option to get the files.

Either way, you want a folder with index.html at the top. Zip the contents of that folder (not the folder itself), so index.html sits at the top of the archive.

Step 3: Drop it on your WordPress site

Install the free App To Page plugin, then go to App To Page » Apps, drag your .zip onto the dropzone, pick a URL like /my-app, and publish. It’s live at your-site.com/my-app in about a minute, running exactly like it did on your screen — no theme wrapper, no broken styles.

The full walkthrough with screenshots is in Deploy your first app.

Frequently asked questions

How do I publish an app that ChatGPT or Claude built?

Get the built files (run the build, or use the tool’s export), zip the contents so index.html is at the top, and upload the zip with App To Page. It serves the app at a URL on your WordPress site — no FTP or separate host.

Where can I host an AI-generated app?

If you already have a WordPress site, host it right there with App To Page. Otherwise you’d typically use a static host like Netlify or Vercel — but that means a new account and setup for one app.

My AI-built app is a blank page when I upload it. Why?

Almost always the build uses an absolute base. Ask your AI to rebuild with a relative base (base: './' for Vite), or see Troubleshooting.

Do I need to know how to code?

No. You don’t write any code — you get the built files from your AI tool and upload them. The plugin handles serving the app.