> ## Documentation Index
> Fetch the complete documentation index at: https://docs.wpos.ai/llms.txt
> Use this file to discover all available pages before exploring further.

# Quickstart — Elementor MCP Setup for Claude Code & Cursor

> From nothing to a deployed, verified Elementor V4 page on a local WordPress in a few minutes.

This guide boots a local WordPress, scaffolds a project, and ships a page you can
open in the Elementor editor. Everything runs on your machine; no Docker, no PHP,
no database setup.

A real first run, recorded live: one starter prompt into Claude Code, which does the
whole setup itself while the site comes alive alongside (setup timelapsed; the edit near the
end reached the page in 85 seconds):

<video controls muted playsInline className="w-full rounded-xl" src="https://mintcdn.com/wpos/47ZznIpP2VUoaoK9/videos/ultra/04-first-run-agent.mp4?fit=max&auto=format&n=47ZznIpP2VUoaoK9&q=85&s=6761c549f1ad1df1651044c83bd4dd9d" data-path="videos/ultra/04-first-run-agent.mp4" />

Prefer the commands yourself? The same flow by hand, in about a minute:

<video controls muted playsInline className="w-full rounded-xl" src="https://mintcdn.com/wpos/uGBY_YzWnQaMHOrj/videos/ultra/01-quickstart.mp4?fit=max&auto=format&n=uGBY_YzWnQaMHOrj&q=85&s=d645a29bd8e529f2f8da939e7f005ee4" data-path="videos/ultra/01-quickstart.mp4" />

<Note>
  You need Node.js 18 or newer. The verification step also needs Playwright
  (`npm i playwright`). See [Install](/ultra/install) for the full requirements.
</Note>

<Steps>
  <Step title="Boot a local WordPress">
    ```bash theme={null}
    npx @algorismus/elementor-ultra-playground
    ```

    First run downloads a \~50 MB snapshot once, then boots. You get a local site
    with Elementor, the V4 atomic experiments already on, and the companion
    plugin active:

    ```text theme={null}
    WordPress   http://127.0.0.1:8899/wp-admin   (admin / password)
    Elementor   4.2.1 (free) + Elementor Ultra companion plugin

    For the MCP server and `exjsx deploy`:
        WP_URL=http://127.0.0.1:8899
        WP_USER=admin
        WP_APP_PASSWORD=...
    ```

    The application password printed at boot is baked into the snapshot. It is a
    throwaway credential for a local-only dev site. Copy the three values; the
    deploy step needs them. Details in [Playground](/ultra/playground).
  </Step>

  <Step title="Scaffold a project">
    In another terminal:

    ```bash theme={null}
    npm i -D @algorismus/elementor-jsx
    npx exjsx init site
    ```

    ```text theme={null}
    scaffolded site/
      theme.mjs · site.config.mjs · pages/home.page.jsx

    next:
      exjsx build site
      WP_URL=... WP_USER=... WP_APP_PASSWORD=... exjsx deploy site/site.bundle.json
    ```

    Prefer a guided setup that also wires your AI client (Claude Code, Cursor,
    Windsurf, VS Code)? Run `npx @algorismus/create-elementor-ultra` instead.
  </Step>

  <Step title="Edit the page">
    Open `site/pages/home.page.jsx`. It is a small component that receives your
    theme tokens:

    ```jsx theme={null}
    export const meta = {
      title: 'Home',
      seo: { title: 'site', description: 'Built with elementor-jsx.' },
    };

    export default ({ theme: t }) => (
      <box tw="flex flex-col w-full items-center" pad={0} bg={t.color.paper}>
        <section tw="flex flex-col items-center gap-6 w-full max-w-[960px] px-6 py-28 text-center">
          <heading tag="h1" w="100%" size={64} weight={600} font={t.font.head} color={t.color.ink} mobile={{ size: 40 }}>
            Hello, Elementor.
          </heading>
          <text size={17} font={t.font.body} color={t.color.muted} lh={1.65} maxw={520}>
            This page is compiled from pages/home.page.jsx. Edit it, run the build, deploy, repeat.
          </text>
        </section>
      </box>
    );
    ```

    Change the headline, tweak a color in `theme.mjs`, add a section. The
    authoring surface is documented in [Components](/ultra/components) and
    [Styling](/ultra/styling).
  </Step>

  <Step title="Build">
    ```bash theme={null}
    npx exjsx build site
    ```

    ```text theme={null}
    project site: 1 page file(s), theme
    built site: 1 page(s), 8 variables, 2 fonts
      dedup: 4 local styles -> 4 shared classes
      bundle -> site/site.bundle.json
    ```

    The dedup line is the compiler collapsing repeated styles into shared global
    classes, so the Elementor Class Manager stays clean.
  </Step>

  <Step title="Deploy">
    ```bash theme={null}
    WP_URL=http://127.0.0.1:8899 WP_USER=admin WP_APP_PASSWORD=<printed at boot> \
    npx exjsx deploy site/site.bundle.json --fast
    ```

    ```text theme={null}
    deployed: 8 variables + 4 classes (2 kit writes), 1 page(s)
    ```

    `--fast` skips the in-deploy CSS priming; the check in the next step
    regenerates it through its page visits. Deploys are idempotent: run it again
    any time. See [Deploy](/ultra/deploy) for all flags.
  </Step>

  <Step title="Verify">
    ```bash theme={null}
    npm i -D @algorismus/elementor-ultra-studio playwright
    npx eu-studio check --pages /
    ```

    ```text theme={null}
    ✓ / @1200: sw=1200 h1=1
    ✓ / @1920: sw=1920 h1=1
    ✓ / @390: sw=390 h1=1
    {"pass":true,"structural":{"pass":true,...},"interactions":{"pass":true,"results":[]}}
    ```

    One call, one browser session: every page at three widths, checked for
    horizontal overflow, heading structure, console errors, and a set of
    forensic probes. See [Verify](/ultra/verify).
  </Step>
</Steps>

<Tip>
  Open `http://127.0.0.1:8899/?page_id=<id>` in your browser, or the page in the
  Elementor editor on a real site. What you deployed is a native V4 page. On the
  playground specifically, avoid opening pages in the editor; see the note in
  [Playground](/ultra/playground).
</Tip>

## Next steps

<CardGroup cols={2}>
  <Card title="Projects" icon="folder-tree" href="/ultra/projects">
    The full fs-project layout and page meta.
  </Card>

  <Card title="Install on a real site" icon="download" href="/ultra/install">
    Point the same pipeline at any WordPress with the companion plugin.
  </Card>

  <Card title="Verify" icon="clipboard-check" href="/ultra/verify">
    Structural matrix, interaction tests, and the doctor.
  </Card>

  <Card title="API card" icon="book" href="/ultra/api-card">
    Everything on one page. Also `npx exjsx api` offline.
  </Card>
</CardGroup>