WP Agent AI

An intelligent content assistant for the WordPress Gutenberg block editor.

Describe what you want in plain English. WP Agent AI generates structured, ready-to-edit Gutenberg blocks — instantly.

Requirements

• WordPress 6.3+
• PHP 8.0+
• Node.js 23.8.0+ (for development)

Features

• AI Content Generator Block — Insert the block, describe your content, click Generate
• 8 Content Types — Hero, Blog Intro, FAQ, Features, CTA, About, Team, Testimonials
• 5 Writing Tones — Professional, Casual, Creative, Persuasive, Friendly
• Provider-Agnostic — Powered by OpenRouter, supporting Claude, GPT-4, Gemini, and more
• Native Block Output — Generated content appears as fully editable Gutenberg blocks
• Keyboard Shortcut — ⌘ + Enter to generate

Architecture

Follows the Spectra v3 plugin architecture pattern:

wp-agent-ai/
├── wp-agent-ai.php              # Plugin header + bootstrap (constants + autoloader)
├── includes/
│   ├── autoload.php             # PSR-4 autoloader (WPAgentAI namespace)
│   ├── Traits/
│   │   └── Singleton.php        # Singleton trait for manager classes
│   ├── BlockManager.php         # Scans build/blocks/ → register_block_type_from_metadata()
│   ├── AssetLoader.php          # Enqueues editor assets + localizes config
│   ├── RESTManager.php          # Initializes REST API controllers
│   ├── SettingsManager.php      # Admin settings page (Settings → WP Agent AI)
│   ├── REST/
│   │   └── GenerateController.php  # POST /wp-agent-ai/v1/generate
│   └── Helpers/
│       └── AIClient.php         # OpenRouter API client (wp_remote_post)
├── src/
│   ├── blocks/
│   │   └── content-generator/   # AI Content Generator block
│   │       ├── block.json       # Block metadata
│   │       ├── index.js         # registerBlockType
│   │       ├── edit.js          # React UI + data flow
│   │       ├── settings.js      # InspectorControls sidebar
│   │       └── editor.scss      # Editor-only styles
│   ├── helpers/
│   │   └── block-icons.js       # SVG block icons
│   └── extensions/              # Future extensions
├── build/                       # Compiled assets (generated by npm run build)
├── webpack.config.js            # Extends @wordpress/scripts config + path aliases
└── package.json

Data Flow

User clicks "Generate"
      │
      ▼
edit.js — apiFetch POST /wp-agent-ai/v1/generate
      │   (WP REST nonce auto-injected via X-WP-Nonce header)
      ▼
REST API validates nonce + current_user_can('edit_posts')
      │
      ▼
GenerateController::generate()
      │   Checks API key, reads model + max_tokens from wp_options
      ▼
AIClient::generate()
      │   Builds system prompt (WP block markup instructions + type guidance)
      │   Builds user message (prompt + content_type + tone)
      │   POST → openrouter.ai/api/v1/chat/completions (wp_remote_post)
      ▼
OpenRouter → Claude / GPT-4 / Gemini (configurable)
      │   Returns: "<!-- wp:heading {\"level\":1} -->..."
      ▼
PHP strips code fences → returns { blocks: "..." }
      ▼
edit.js — wp.blocks.parse( blocks ) → array of block objects
      ▼
insertBlocks( parsedBlocks, blockIndex, rootClientId )
removeBlock( clientId ) — generator block self-destructs
      ▼
Native Gutenberg blocks appear, fully editable ✓

Setup

1. Install & build

cd wp-content/plugins/wp-agent-ai
nvm use 23.8.0
npm install
npm run build

2. Activate

Activate WP Agent AI from WordPress Admin → Plugins.

3. Configure API key

Go to Settings → WP Agent AI and enter your OpenRouter API key.

OpenRouter provides access to Claude, GPT-4, Gemini, and more through a single API key. Free tier available.

4. Use it

Open any post/page in the block editor → Add Block → search AI Content Generator → insert it.

Development

nvm use 23.8.0
npm run start          # Development mode with hot reload
npm run build          # Production build
npm run build:fresh    # Clean build (removes build/ first)
npm run lint:js        # Lint JavaScript
npm run lint:css       # Lint SCSS

License

GPL-2.0-or-later