AI Layout Assistant

A WordPress plugin that generates AI-powered layout variations directly inside the Gutenberg block editor using WordPress core blocks.

---

Description

AI Layout Assistant adds a sidebar panel to the WordPress block editor, allowing users to describe a layout type and style preference, then generate three distinct design variations using an AI language model. Each variation is rendered as valid Gutenberg block markup and can be inserted into the post with a single click.

The plugin communicates with the AiML API service using Google's Gemma 3 model. It reads the active theme's global design settings to produce results that respect your site's typography, spacing, and color tokens.

---

Features

• Adds an AI Layout Assistant panel to the Gutenberg editor sidebar
• Generates 3 layout variations per request
• Supports configurable style presets: minimal, bold, modern
• Adjustable AI temperature parameter to control output creativity
• Uses only WordPress core blocks — no third-party block dependencies
• Theme-aware: passes WordPress global settings to the AI for contextually consistent output
• Inserts selected variation directly into the editor via the block API
• Secured with WP nonce and edit_posts capability check

---

Requirements

Requirement	Minimum
WordPress	5.0+ (Gutenberg required)
PHP	7.4+
AiML API key	Required

---

Installation

1. Upload the ai-layout-assistant folder to /wp-content/plugins/.
2. Activate the plugin through Plugins > Installed Plugins in the WordPress admin.
3. Set your AiML API key (see Configuration below).
4. Open any post or page in the block editor — the AI Layout Assistant panel will appear in the right sidebar.

---

Configuration

The plugin requires an AiML API key to function. There is no settings UI included; the key must be stored directly in the WordPress options table.

Option name: my_ai_api_key

Setting the API key via WP-CLI

wp option add my_ai_api_key "your-api-key-here"

To update an existing key:

wp option update my_ai_api_key "your-api-key-here"

Setting the API key programmatically

Add this to your theme's functions.php or a custom plugin — run it once, then remove it:

update_option( 'my_ai_api_key', 'your-api-key-here' );

Note: Keep your API key private. Never commit it to version control or expose it in client-side code.

---

Usage

1. Open any post or page in the block editor.
2. Locate the AI Layout Assistant panel in the editor sidebar (right side).
3. Enter a Layout Type (e.g., hero section, pricing table, team grid).
4. Choose a Style from the dropdown: minimal, bold, or modern.
5. Click Generate Variations.
6. A modal will appear showing 3 variations with previews.
7. Click any variation tile to insert its blocks at the current cursor position.

---

Project Structure

ai-layout-assistant/
├── ai-layout-assistant.php        # Plugin bootstrap, constants, hook registration
├── assets/
│   └── editor.js                  # Gutenberg sidebar panel and modal UI
└── includes/
    ├── class-ai-service.php       # AI API communication and response parsing
    └── class-rest-controller.php  # REST API endpoint registration and handling

File Responsibilities

File	Responsibility
ai-layout-assistant.php	Defines plugin constants, loads includes, registers hooks
class-ai-service.php	Builds prompts, calls AiML API, parses JSON response
class-rest-controller.php	Registers POST /wp-json/ai-layout/v3/generate endpoint
assets/editor.js	Renders sidebar UI, calls REST endpoint, inserts blocks

---

REST API

POST /wp-json/ai-layout/v3/generate

Generates layout variations for the given layout type and style.

Authentication: Requires a valid WP nonce and the edit_posts capability.

Request Body

Parameter	Type	Required	Default	Description
layout	string	Yes	—	Layout type to generate (e.g., hero section)
style	string	No	""	Style preset: minimal, bold, or modern
temperature	float	No	0.7	AI creativity level, range 0.0–1.0

Example Request

{
  "layout": "pricing table",
  "style": "modern",
  "temperature": 0.8
}

Example Response

{
  "variations": [
    {
      "title": "Variation 1",
      "markup": "<!-- wp:group -->...<!-- /wp:group -->"
    },
    {
      "title": "Variation 2",
      "markup": "<!-- wp:columns -->...<!-- /wp:columns -->"
    },
    {
      "title": "Variation 3",
      "markup": "<!-- wp:cover -->...<!-- /wp:cover -->"
    }
  ]
}

Error Response

{
  "code": "api_key_missing",
  "message": "AI API key is not configured.",
  "data": { "status": 500 }
}

---

External Service

This plugin communicates with a third-party API to generate layouts.

Detail	Value
Provider	AiML API
Endpoint	https://api.aimlapi.com/v1/chat/completions
Model	google/gemma-3-4b-it
Data sent	Layout type, style, theme global settings, temperature
Data returned	JSON array of Gutenberg block markup strings

Requests are made server-side from PHP. No user data beyond layout preferences is transmitted. Review AiML API's privacy policy before deploying in production.

---

Security

• All user input is sanitized via sanitize_text_field() and floatval() before use.
• The REST endpoint requires edit_posts capability — subscribers and unauthenticated users cannot call it.
• Editor requests are authenticated with a WP nonce via wp.apiFetch.
• No direct database queries are made; SQL injection is not applicable.
• The API key is stored in wp_options and is only accessible to WordPress administrators.

---

Known Limitations

• No admin UI for managing the API key — it must be set via WP-CLI or code.
• No caching: each click generates a fresh API request.
• No rate limiting or quota tracking on the plugin side.
• No internationalization (i18n) — all strings are in English.
• The plugin does not include a settings or status page to verify the API key is working.

---

Changelog

1.0.0

• Initial release
• Gutenberg sidebar panel for layout generation
• Three style presets: minimal, bold, modern
• REST endpoint POST /wp-json/ai-layout/v3/generate
• Theme-aware prompt context via wp_get_global_settings()

---

License

This plugin is open-source software. License details are not specified in the current release.