> For the complete documentation index, see [llms.txt](https://docs.uichemy.com/llms.txt).
> Use it to discover all available pages before exploring further.

# Set Up AI to WordPress

Connect UiChemy MCP to run AI Express Mode conversions from Claude, Cursor, Codex, or Antigravity.


The Figma plugin is the recommended way to use AI Express Mode. If you'd rather build with AI tools you already use, UiChemy MCP is for you.

<Callout kind="info">
**What it is:** connect UiChemy MCP and run conversions from tools like Claude, Cursor, Codex, or Antigravity, right where you work, without switching tabs. For example, share a Figma design link with your AI tool and ask it to convert the design into a [Composer](/uichemy-composer/uichemy-widget/what-is-a-uichemy-widget) on your connected site. It's optional, and available for Elementor for now. Conversions run through MCP draw from the same shared UiChemy Credits balance as the Figma plugin path, see [How Do UiChemy Credits Work?](/introduction/understanding-credits).
</Callout>

### Before You Start

- You've set up the WordPress plugin and can reach **UiChemy → Home**. See [Set up the UiChemy WordPress plugin](/introduction/set-up-wordpress-plugin).
- **Node.js 18 or newer** is installed on your computer (your AI tool uses it to connect).
- You're signed in as an Administrator.

### Step 1: Generate Your Connection

Go to **UiChemy → Home** and select the **AI Agent (MCP)** tab.

Click **Generate connection**. This issues a secure Application Password so your AI tool can reach this site.

<div style="border: 4px solid transparent; border-radius: 16px; background: linear-gradient(135deg, #FD6A35, #FEA686) border-box; overflow: hidden; margin: 1.5rem auto; max-width: 640px;">
  <div style={{margin: '-24px 0', lineHeight: 0}}>
    <Image src="https://res.cloudinary.com/ekxmy1t9/image/upload/v1788958597/uichemy-docs/ai-to-wordpress/set-up/mcp-connection.png" alt="" width={1600} height={1308} style={{display: 'block', width: '100%', height: 'auto', borderRadius: '8px', margin: 0}} priority={true} fetchPriority="high" />
  </div>
</div>
<p style="text-align: center; font-size: 0.875rem; color: var(--text-color-secondary, #6b7280); margin-top: 0.5rem;"><em>The AI Agent (MCP) tab, connection, tool picker, and prompt</em></p>

### Step 2: Pick Your AI Tool

Choose your tool from the cards: **Claude Desktop**, **Cursor**, **Codex**, **Antigravity**, or **Other**. UiChemy gives you the exact config to add for whichever one you pick.

<Callout kind="tip">
Don't see your tool listed? Pick **Other**, any MCP-compatible tool works. See [Supported AI Tools](/ai-to-wordpress/supported-tools) for the full picture.
</Callout>

### Step 3: Add the MCP Server

What UiChemy shows here depends on which tool you picked in Step 2, the config format and the save path both change. Whichever tool you picked, a **Prompt / Config** switch lets you choose how you'd rather add it. Pick your tool below for both options.

<Tabs>
  <Tab title="Claude Desktop">
    **Config**, paste this in yourself:

    ```json
    {
      "mcpServers": {
        "your-site-name-uichemy-mcp": {
          "command": "npx",
          "args": ["-y", "@automattic/mcp-wordpress-remote"],
          "env": {
            "WP_API_URL": "https://yoursite.com/index.php?rest_route=/uichemy/v2/mcp",
            "WP_API_USERNAME": "admin",
            "WP_API_PASSWORD": "your-application-password"
          }
        }
      }
    }
    ```

    Save to `~/Library/Application Support/Claude/claude_desktop_config.json` (macOS), `%APPDATA%\Claude\claude_desktop_config.json` (Windows), or `~/.config/Claude/claude_desktop_config.json` (Linux).

    <Callout kind="tip">
    **Prompt**, prefer not to edit the file yourself? On the UiChemy dashboard, switch its **Prompt / Config** switch to **Prompt** instead and copy the ready-made prompt. Paste it into Claude Desktop and it edits its own config file for you, after checking that Node.js 18+ and `npx` are available, and keeping any MCP servers you already have configured.
    </Callout>
  </Tab>

  <Tab title="Cursor">
    **Config**, paste this in yourself:

    ```json
    {
      "mcpServers": {
        "your-site-name-uichemy-mcp": {
          "command": "npx",
          "args": ["-y", "@automattic/mcp-wordpress-remote"],
          "env": {
            "WP_API_URL": "https://yoursite.com/index.php?rest_route=/uichemy/v2/mcp",
            "WP_API_USERNAME": "admin",
            "WP_API_PASSWORD": "your-application-password"
          }
        }
      }
    }
    ```

    Save to `~/.cursor/mcp.json`, or `.cursor/mcp.json` inside a specific project.

    <Callout kind="tip">
    **Prompt**, prefer not to edit the file yourself? On the UiChemy dashboard, switch its **Prompt / Config** switch to **Prompt** instead and copy the ready-made prompt. Paste it into Cursor and it edits its own config file for you, after checking that Node.js 18+ and `npx` are available, and keeping any MCP servers you already have configured.
    </Callout>
  </Tab>

  <Tab title="Codex">
    Codex gets TOML instead of JSON.

    **Config**, paste this in yourself:

    ```toml
    [mcp_servers.your-site-name-uichemy-mcp]
    command = "npx"
    args = ["-y", "@automattic/mcp-wordpress-remote"]

    [mcp_servers.your-site-name-uichemy-mcp.env]
    WP_API_URL = "https://yoursite.com/index.php?rest_route=/uichemy/v2/mcp"
    WP_API_USERNAME = "admin"
    WP_API_PASSWORD = "your-application-password"
    ```

    Save to `~/.codex/config.toml`.

    <Callout kind="tip">
    **Prompt**, prefer not to edit the file yourself? On the UiChemy dashboard, switch its **Prompt / Config** switch to **Prompt** instead and copy the ready-made prompt. Paste it into Codex and it edits its own config file for you, keeping it valid TOML and any existing tables intact, after checking that Node.js 18+ and `npx` are available.
    </Callout>
  </Tab>

  <Tab title="Antigravity">
    **Config**, paste this in yourself:

    ```json
    {
      "mcpServers": {
        "your-site-name-uichemy-mcp": {
          "command": "npx",
          "args": ["-y", "@automattic/mcp-wordpress-remote"],
          "env": {
            "WP_API_URL": "https://yoursite.com/index.php?rest_route=/uichemy/v2/mcp",
            "WP_API_USERNAME": "admin",
            "WP_API_PASSWORD": "your-application-password"
          }
        }
      }
    }
    ```

    Save to `~/.gemini/config/mcp_config.json`.

    <Callout kind="tip">
    **Prompt**, prefer not to edit the file yourself? On the UiChemy dashboard, switch its **Prompt / Config** switch to **Prompt** instead and copy the ready-made prompt. Paste it into Antigravity and it edits its own config file for you, after checking that Node.js 18+ and `npx` are available, and keeping any MCP servers you already have configured.
    </Callout>
  </Tab>

  <Tab title="Other">
    You get a natural-language prompt instead of a config file. Paste it directly into your AI tool, it figures out which client or IDE it's running in on its own (Claude Desktop, Cursor, Codex, Antigravity, Windsurf, VS Code, or similar) rather than asking you, picks that app's own MCP config file, and edits it using the correct format, JSON with an `mcpServers` object for most apps, or TOML for Codex. It checks Node.js 18+ and `npx` are available first, and keeps any MCP servers already in the file.
  </Tab>
</Tabs>

Click **Copy** to copy whichever one you're shown exactly. The real `WP_API_URL`, `WP_API_USERNAME`, and `WP_API_PASSWORD` values only appear once you've generated a connection in Step 1.

<Callout kind="tip">
Always use the path UiChemy shows at the time you connect, not one from memory, tool vendors can move where this file lives between versions.
</Callout>

### Step 4: Restart & Start Building

Restart your AI tool, then ask it to build or edit a page. It works through UiChemy on this site.

The output is the same native, editable [Composer](/uichemy-composer/uichemy-widget/what-is-a-uichemy-widget) you get from the Figma plugin.

<Callout kind="warning">
Keep your Application Password private. Anyone with it can connect to this site.
</Callout>

### If It Doesn't Work

- **Your tool can't connect.** Confirm **Node.js 18+** is installed, then restart the tool.
- **"Administrator access required."** MCP needs an Administrator account.
- **The config looks incomplete.** Generate your connection in Step 1 first, the real values only appear once one exists.
- **Still stuck?** The [Figma plugin](/introduction/install-figma-plugin) path always works without MCP.

### Frequently Asked Questions

<ExpandableGroup>
  <Expandable title="Why do I need Node.js?" default-open="false">
    Your AI tool starts the UiChemy MCP connection with `npx`, which comes with Node.js. Install **Node.js 18 or newer** before adding the config, or the tool can't connect.
  </Expandable>

  <Expandable title="Can I connect more than one AI tool to the same site?" default-open="false">
    Yes. Pick each tool on the **AI Agent (MCP)** tab and add its config. Every tool connects to the same UiChemy MCP server on your site.
  </Expandable>

  <Expandable title="What if my Application Password stops working?" default-open="false">
    Go back to **UiChemy → Home → AI Agent (MCP)**, click **Generate connection** again, copy the new config, and replace the old values in your AI tool's config file. Then restart the tool.
  </Expandable>

  <Expandable title="Do I need an Administrator account?" default-open="false">
    Yes. MCP needs an Administrator account on your WordPress site. Other roles see an "Administrator access required" message.
  </Expandable>
</ExpandableGroup>