Tuli Builder

1. Requirements

• WordPress 6.0 or newer
• PHP 7.4 or newer
• An active Tuli Builder licence (one-time purchase, see pricing)
• Optional: an OpenRouter API key for the built-in AI assistant
• Optional: an MCP-compatible AI agent (Claude Code, Codex CLI, Gemini CLI, Cursor, Windsurf, VS Code, OpenCode, Antigravity, Claude Desktop)

Local and staging copies of a site do not count against your licence's site limit.

2. Install and activate Tuli Builder

1. Buy a licence on the pricing page. You get your licence key by email and in the Customer Portal.
2. In the Customer Portal, open Download and download the Tuli theme zip.
3. In WordPress go to Appearance → Themes → Add New → Upload Theme, choose the zip, then click Install Now and Activate.
4. Go to Tuli → License, paste your licence key and activate it.

Tuli is a theme and a page builder in one, so you don't need a separate builder plugin.

3. Build your first page

1. Create a page under Pages → Add New, or open an existing one.
2. Click Edit with Tuli. It appears on the edit screen, in the page list row actions and in the admin bar.
3. Drag elements from the element library (60+ elements, including sections, containers, headings, buttons, images, sliders, tabs, accordions, forms and menus), or ask the AI assistant to build the page.
4. Select any element to edit it in the style panel, or write CSS directly. The panel and the CSS stay in sync both ways.
5. Use the device toggles to set tablet and mobile styles. They are written as real CSS media queries.
6. Click Save.

By default the builder is enabled for Pages and Templates. You can turn it on for other post types in Tuli → Settings → General.

4. Convert HTML to WordPress

Paste HTML, CSS and JavaScript into the builder, and Tuli maps every tag into the Structure panel as an editable element. This works for hand-coded pages, templates you bought, and sites generated with ChatGPT, Claude, Lovable or other AI tools. Selectors, shorthands, comments and media queries are kept as they are. Class rules go into global CSS so you can reuse them on other pages.

Step-by-step guide: How to convert HTML to WordPress and From ChatGPT to WordPress.

5. Set up the AI assistant

1. Create an API key at openrouter.ai. One key gives you access to models from Anthropic (Claude), OpenAI (GPT), Google (Gemini), xAI, DeepSeek, Qwen and others. OpenRouter bills you per model.
2. In WordPress go to Tuli → Settings → OpenRouter, paste the key and choose a default model.
3. Open any page with Edit with Tuli and describe what you want in the AI Assistant panel. For example: "Build me a portfolio website for a photographer." Type @ to attach a page or template as context.
4. The assistant writes HTML, CSS and JavaScript live on the canvas. Review the preview, then click Save to keep the changes.

Your API key is stored on your server and is never sent to the browser.

6. Connect an AI agent with the MCP server

Tuli Builder includes a WordPress MCP server (Model Context Protocol, Streamable HTTP). Once an AI agent is connected, it can manage the site for you: pages, posts, Tuli layouts, templates, query loops, custom post types, taxonomies, media, plugins and global CSS/JS.

Turn it on

1. Go to Tuli → Settings → MCP Server and tick Enable the MCP server for this site. Save.
2. Under Application passwords, create a password. Name it, choose which user it acts as, tick the actions it's allowed to perform (or choose full access), and add optional instructions for the agent.
3. Copy the connection details straight away, because the password is shown only once. Tuli gives you a ready-made prompt for the agent plus config snippets for each client.

You can revoke any application password at any time. Agents can never change or switch your theme. The MCP server requires an active licence.

Connection details

• Endpoint: https://your-site.com/wp-json/tuli/v1/mcp
• Transport: HTTP (Streamable HTTP)
• Header: Authorization: Bearer YOUR_APPLICATION_PASSWORD

Claude Code

claude mcp add --transport http my-site https://your-site.com/wp-json/tuli/v1/mcp --header "Authorization: Bearer YOUR_APPLICATION_PASSWORD"

OpenAI Codex CLI

codex mcp add my-site -- npx -y mcp-remote https://your-site.com/wp-json/tuli/v1/mcp --header "Authorization: Bearer YOUR_APPLICATION_PASSWORD"

Gemini CLI

gemini mcp add --transport http my-site https://your-site.com/wp-json/tuli/v1/mcp --header "Authorization: Bearer YOUR_APPLICATION_PASSWORD"

Cursor, Windsurf, VS Code and other JSON-configured clients

{
  "mcpServers": {
    "my-site": {
      "type": "http",
      "url": "https://your-site.com/wp-json/tuli/v1/mcp",
      "headers": { "Authorization": "Bearer YOUR_APPLICATION_PASSWORD" }
    }
  }
}

Where the file goes: Cursor uses ~/.cursor/mcp.json or .cursor/mcp.json. Windsurf uses ~/.codeium/windsurf/mcp_config.json (with serverUrl instead of url). VS Code uses .vscode/mcp.json. OpenCode uses opencode.json. The Tuli settings screen shows the exact snippet for each client.

Claude Desktop and other stdio-only clients

{
  "mcpServers": {
    "my-site": {
      "command": "npx",
      "args": ["mcp-remote", "https://your-site.com/wp-json/tuli/v1/mcp", "--header", "Authorization: Bearer YOUR_APPLICATION_PASSWORD"]
    }
  }
}

This uses the mcp-remote bridge, which requires Node.js. Restart the client after saving.

What to ask the agent

• "Create a landing page for our spring sale with a hero, three feature cards and a signup CTA."
• "Add a Property custom post type with price, beds, baths and city fields, six sample listings and a filterable listings page."
• "Write and publish a blog post about our new pricing, with a featured image."
• "Build a header and footer template and show them on every page."

Video walkthrough: Build a WordPress website using Claude Code through the MCP server.

7. Templates: header, footer, single, archive

Under Tuli → Templates you can build headers, footers, single-post layouts, archives, 404 and search pages, plus reusable sections. Each template has display conditions: include and exclude rules with a priority, so you control exactly where it appears. Build a section once and reuse it on any page with the Template element.

8. Query loops and dynamic data

Turn on a query loop for any element and it repeats once per result. Sources include WP_Query (post type, count, order, taxonomy and meta filters), the main query, raw PHP, an ACF repeater, or WooCommerce relations. Add the Filter element for AJAX filtering and the Pagination element for paging.

To print live values in any text or attribute, use dynamic data tokens in curly braces:

• {get_the_title}: post title
• {get_permalink}: post URL
• {get_the_excerpt}: excerpt
• {get_the_post_thumbnail_url}: featured image URL
• {acf:field_name}: any Advanced Custom Fields value

You can call any WordPress or custom PHP function the same way, and inside a loop each token resolves for the current item.

9. WooCommerce, ACF and WP Grid Builder

• WooCommerce: 30+ native elements, including product title, price, add to cart, gallery, tabs, related products, cart, checkout, my account and mini cart. Guide: Build a WooCommerce store with AI.
• ACF: field names show up in the dynamic data picker automatically, and ACF repeaters can drive query loops.
• WP Grid Builder: the Facet, Grid and View More elements are supported.
• Everything else: Gutenberg blocks, any shortcode, raw PHP (can be disabled) and Google Fonts.

10. Support

Licences include lifetime updates and support. Watch the video tutorials, check the FAQ, or contact us. Manage your licences, sites and downloads in the Customer Portal.