Getting Started with WP AI Connector

Quick Start (5 Minutes)

The fastest way to get your first AI agent working:

Result: A working AI form that sends data to your webhook and displays responses to users.

Step 1: Installation

Option A: Install from WordPress.org (Free Version)

The easiest method for most users:

1. Go to WordPress Admin → Plugins → Add New
2. Search for "WP AI Connector"
3. Click Install Now button
4. Click Activate after installation

Option B: Upload Plugin ZIP (Pro/Pro Plus)

For premium versions purchased from wpaiconnector.com:

1. Download your plugin ZIP file from your purchase email
2. Go to WordPress Admin → Plugins → Add New → Upload Plugin
3. Click Choose File and select your ZIP
4. Click Install Now
5. Click Activate Plugin

System Requirements

Ensure your server meets these minimum requirements:

• WordPress: 5.8 or higher (6.0+ recommended)
• PHP: 7.4 or higher (8.0+ recommended)
• MySQL: 5.6+ or MariaDB 10.0+
• Memory: 128MB minimum (256MB recommended)
• HTTPS: SSL certificate required for webhooks

Verify Installation

After activation, you should see:

• ✅ "AI Agents" menu in WordPress admin sidebar
• ✅ Settings page at AI Agents → Settings
• ✅ No error messages on plugins page

Step 2: Create Your First Agent

Agents are individual AI tools. Each agent has its own form, webhook, and settings.

What is an Agent?

Think of an agent as a single AI-powered tool:

• AI Chatbot - One agent
• Image Generator - Another agent
• Content Writer - Yet another agent

Each agent can have different forms, webhooks, and purposes.

Create New Agent

1. Go to AI Agents → Add New
2. Enter agent title: My First AI Agent
3. Add description in the editor:

   This AI agent helps you generate creative content based on your ideas. Just describe what you want, and AI will create it for you!

Agent Settings

In the right sidebar, you'll see several meta boxes:

Status

• Active: Agent is live and working
• Draft: Hidden from public, for testing
• Coming Soon: Shows teaser to users

Set to Active for now.

Categories & Tags

Organize your agents:

• Categories: Content Creation, Image Tools, Data Analysis, etc.
• Tags: ai, chatbot, generator, automation, etc.

Step 3: Build Your Form

Every agent needs a form for users to input data.

Access Form Builder

1. Scroll down to AI Agent Form Builder meta box
2. You'll see three tabs: Visual Builder, JSON Editor, Preview
3. Click Visual Builder (easiest for beginners)

Add Your First Field

Let's add a simple text input:

1. Click "+ Add Field" button
2. Configure the field:
   • Label: What do you want to create?
   • Field Type: Textarea
   • Placeholder: Describe your idea in detail...
   • Required: ✅ Yes
   • Rows: 4
   • Help Text: The more detail you provide, the better the result!
3. Click "Add to Form"

Add an Email Field

So users can receive results:

1. Click "+ Add Field" again
2. Configure:
   • Label: Your Email
   • Field Type: Email
   • Placeholder: you@example.com
   • Required: ✅ Yes
   • Help Text: We'll send your results here
3. Click "Add to Form"

Add a Select Field

Give users predefined choices:

1. Click "+ Add Field"
2. Configure:
   • Label: Output Style
   • Field Type: Select
   • Options: (one per line)

     Professional & Formal
     Casual & Friendly
     Creative & Fun
     Technical & Detailed

   • Required: ✅ Yes
   • Default: Casual & Friendly
3. Click "Add to Form"

Save Your Form

Click "Save Form" button at the bottom of the form builder.

Preview Your Form

1. Click the "Preview" tab in form builder
2. See how your form will look to users
3. Check field order and layout
4. Go back to Visual Builder to make changes if needed

Step 4: Connect to Webhook

Webhooks connect your WordPress form to AI services like n8n, Make, or Zapier.

What is a Webhook?

A webhook is like a phone number for your software:

User submits form → WordPress "calls" webhook → Webhook processes with AI → Sends result back → User sees response

Get Webhook URL from n8n

n8n is recommended (free, open-source, self-hosted):

1. Go to n8n.cloud or your self-hosted n8n
2. Click "Create New Workflow"
3. Click "+" to add a node
4. Search for "Webhook" and select it
5. Configure webhook:
   • HTTP Method: POST
   • Path: /my-first-agent
   • Response Mode: Wait for Response
6. Copy the Production URL

Your URL will look like: https://your-n8n.app.n8n.cloud/webhook/my-first-agent

Alternative: Make (Integromat)

1. Log into make.com
2. Click "Create a new scenario"
3. Add Webhooks → Custom Webhook module
4. Click "Add" and name it: "WordPress Agent"
5. Copy the webhook URL

Alternative: Zapier

1. Log into zapier.com
2. Click "Create Zap"
3. Search for "Webhooks by Zapier"
4. Choose "Catch Hook" as trigger
5. Copy the webhook URL

Add Webhook URL to WordPress

1. Back in WordPress, find the Webhook Settings meta box
2. Paste your webhook URL in the "Webhook URL" field
3. Click "Update" to save your agent

Simple n8n Workflow Example

Here's a basic workflow to return the submitted data:

1. Webhook Node (already added)
2. Add Code node, connect it to webhook
3. In Code node, paste:

   // Extract form data
   const formData = $json.body.form_data;
   const description = formData.field_description || '';
   const email = formData.field_email || '';
   const style = formData.field_style || '';
   
   // Create HTML response
   return {
     output_html: `
       <div class="ai-result">
         <h3>✅ Form Received!</h3>
         <p><strong>Description:</strong> ${description}</p>
         <p><strong>Email:</strong> ${email}</p>
         <p><strong>Style:</strong> ${style}</p>
         <p>This is a test response. Connect AI in next step!</p>
       </div>
     `,
     success: true
   };

4. Add Respond to Webhook node, connect to Code node
5. In Respond to Webhook:
   • Response Code: 200
   • Response Body: {{ $json }}
6. Click "Active" toggle in top-right to activate workflow

Step 5: Test Your Agent

Before displaying publicly, test that everything works.

Quick Test via Preview

1. In WordPress, edit your agent
2. Scroll to Quick Test section (below form builder)
3. Fill in test values in each field
4. Click "Test Webhook"
5. Wait for response (should appear within 3-5 seconds)

Expected result: You should see the HTML response from your webhook displayed.

Check n8n Execution

1. Go to n8n dashboard
2. Click "Executions" in left sidebar
3. Find your test execution (should have green checkmark)
4. Click to view input/output data

Common Test Issues

Problem: "Webhook error 500"

Solution:

• Check n8n execution for error details
• Verify Code node syntax is correct
• Ensure Respond to Webhook node is connected

Problem: "Security check failed"

Solution:

• Clear browser cache and cookies
• Hard refresh page (Ctrl+F5)
• Try in incognito window

Problem: No response shows

Solution:

• Check webhook is active in n8n/Make/Zapier
• Verify webhook URL is correct (no typos)
• Check browser console (F12) for JavaScript errors

Step 6: Display Agent on Your Site

Once tested, add your agent to any page or post using shortcodes.

Find Your Agent ID

When editing your agent, look at the URL:

https://yoursite.com/wp-admin/post.php?post=123&action=edit
                                                   ^^^
                                              This is your ID

Basic Shortcode

[ai_agent_form id="123"]

Add to Page (Block Editor)

1. Edit or create a page
2. Click "+" to add a block
3. Search for "Shortcode"
4. Paste: [ai_agent_form id="123"]
5. Click "Update" or "Publish"

Add to Page (Classic Editor)

1. Edit or create a page
2. Click "Text" tab (top-right)
3. Paste: [ai_agent_form id="123"]
4. Switch back to "Visual" tab
5. Click "Update" or "Publish"

Add to Page Builder (Elementor/Divi/Beaver)

1. Add a Shortcode widget/module
2. Paste: [ai_agent_form id="123"]
3. Save and publish

View Your Page

1. Visit your published page
2. You should see your agent form
3. Fill it out and test a real submission
4. Verify response displays correctly

Complete Examples

Example 1: AI Content Writer

Form fields:

• Topic (text)
• Tone (select: Professional, Casual, Humorous)
• Length (number: 100-2000 words)
• Email (email)

n8n workflow:

[Webhook] → [OpenAI Chat] → [Format Response] → [Respond]

Example 2: Image Generator

Form fields:

• Description (textarea)
• Art Style (select: Realistic, Digital Art, Oil Painting)
• Image Size (radio: Square, Portrait, Landscape)
• Email (email)

n8n workflow:

[Webhook] → [OpenAI Image] → [Format HTML] → [Respond]

Example 3: Document Analyzer

Form fields:

• Upload Document (file: PDF only)
• What to extract (select: Summary, Key Points, Action Items)
• Email (email)

n8n workflow:

[Webhook] → [Decode File] → [Extract Text] → [OpenAI Analyze] → [Email + Respond]

Next Steps

Learn Advanced Features

Get Inspiration

• AI Chatbot: Natural conversation with context
• Content Generator: Blog posts, social media, emails
• Image Creator: DALL-E, Stable Diffusion, Midjourney
• Code Helper: Debug, explain, optimize code
• Data Analyzer: Extract insights from spreadsheets
• Translator: Multi-language translation
• Summarizer: TL;DR for long documents
• SEO Optimizer: Meta descriptions, titles, keywords

Join the Community

• 💬 WordPress.org Forum - Ask questions, share tips
• 📧 Email Support - Direct help from our team
• 🐛 GitHub Issues - Report bugs, request features

Quick Troubleshooting

Agent not showing on page

• Check shortcode syntax: [ai_agent_form id="123"]
• Verify agent is published (not draft)
• Clear cache (browser + WordPress)

Form submits but no response

• Check webhook is active in n8n/Make/Zapier
• Verify webhook URL is correct
• Test webhook separately with cURL

Webhook error 500

• Check n8n execution log for error details
• Verify JSON response format is correct
• Test workflow with sample data