WP AI Design
A WordPress block plugin that uses AI to generate designs from text using LLMs.
Install
No release zip yet. The repository archive installs, but the folder name will carry the branch suffix and updates will not flow:
wp plugin install https://github.com/nathanonn/wp-ai-design/archive/refs/heads/main.zipReadme
=== WP AI Design ===
Contributors: Nathan Onn Tags: ai, design, block, pattern, llm, openai, anthropic, gemini, gpt-4o, claude-3.5-sonnet, gemini-1.5-pro Tested up to: 6.1 Stable tag: 0.1.0 License: GPL-2.0-or-later License URI: https://www.gnu.org/licenses/gpl-2.0.html
A WordPress block plugin that leverages AI to generate designs from text or images using various Language Learning Models (LLMs).
== Description ==
WP AI Design integrates multiple AI providers (OpenAI, Anthropic, Google Gemini) to help you generate WordPress block patterns and layouts directly in the block editor. Simply describe what you want, or upload a screenshot and the AI will generate the appropriate blocks and patterns.
== Features ==
- 🤖 Multiple AI Provider Support
- OpenAI
- Anthropic Claude
- Google Gemini
- 🎨 Block Pattern Generation
- 📝 Custom System Prompt
- 📊 Logging System
- ⚙️ Configurable Settings
== Quick Start Guide ==
Visit the Quick Start Guide for step-by-step instructions on setting up and using the plugin.
== Installation ==
- Upload the plugin files to
/wp-content/plugins/wp-ai-design, or install through WordPress plugins screen - Activate the plugin through 'Plugins' screen
- Configure API keys in Settings → WP AI Design
== Configuration ==
Access plugin settings at Settings → AI Design Block to:
- Configure API keys
- Add AI models
- Set default models
- Add custom system prompts
- View logs
== Usage ==
- Add the "AI Design Block" to your post/page
- Select your preferred AI provider
- Describe the design you want or upload an image
- The AI will generate the corresponding WordPress blocks
== Development ==
Prerequisites
- Node.js
- npm/yarn
- WordPress development environment
Setup
Install dependencies
npm install
Build assets
npm run build
Development mode
npm run start
File Structure
wp-ai-design/
├── build/ # Compiled assets
├── src/ # React/JS source files
│ ├── block/ # Main block components
│ ├── blockTest/ # Testing utilities
│ └── settings/ # Settings page components
├── includes/ # PHP classes
│ ├── api/ # AI provider integrations
│ └── prompt/ # AI system prompts
└── wp-ai-design.php # Plugin main file
== Contributing ==
- Fork the repository
- Create your feature branch (
git checkout -b feature/amazing-feature) - Commit changes (
git commit -m 'Add amazing feature') - Push to branch (
git push origin feature/amazing-feature) - Open a Pull Request
== License ==
GPL-2.0-or-later. See LICENSE for more information.
== Credits ==
Built by Nathan Onn