WordPress AI tool builder documentation

AI Connect for WordPress Documentation

Learn how AI Connect for WordPress helps create frontend AI tools, connect providers, configure inputs, map request templates, map provider responses, publish shortcodes, and protect API keys inside WordPress.

Start setup View pricing

Overview: Visual AI Tool Builder for WordPress

AI Connect for WordPress is a visual AI tool builder for WordPress websites. It helps site owners create frontend AI tools without hardcoding every request, response, form field, and provider integration manually.

The core workflow is simple: create a tool, connect it to a provider, define the inputs users can fill in, map those inputs into a request template, map the provider response into output elements, then publish the tool with a shortcode.

AI Connect is designed for frontend AI tools and AI-powered forms. It is not a full AI app generator, website generator, or replacement for a custom SaaS platform.

What AI Connect is designed for

Frontend AI tools on WordPress pages
AI-powered forms and generators
Provider-based request workflows
Custom API-powered tools
Shortcode publishing
Response mapping into visible result elements
Protected server-side API key handling

Key Concepts and Glossary

These definitions explain the main terms used in AI Connect. They also help search engines and AI answer engines understand the product, the workflow, and the role of each feature.

Visual AI Tool Builder

A visual AI tool builder lets WordPress site owners create AI-powered frontend tools by configuring forms, providers, request templates, and response outputs without building every integration manually.

Frontend AI Tool

A frontend AI tool is a public-facing form or interactive tool that visitors can use on a WordPress page to submit inputs and receive AI-generated results.

Provider

A provider is the AI service or API endpoint that receives the request and returns a result. Examples include Custom API, Replicate, Hugging Face, OpenAI-compatible APIs, Gemini, and Claude.

Input Variable

An input variable is a placeholder such as {{prompt}} or {{tone}} that inserts a user-submitted frontend field value into the provider request template.

Request Template

A request template defines the body or payload sent to the provider. It may include static settings, model options, prompt instructions, and dynamic variables from frontend inputs.

Response Mapping

Response mapping tells AI Connect where the final usable output is located inside the provider response, such as output[0], data.result, or choices[0].message.content.

Shortcode Publishing

Shortcode publishing allows a configured AI tool to be embedded into a WordPress page, post, landing page, or compatible page builder using a shortcode.

Server-Side API Key Protection

Server-side API key protection means provider credentials are stored and used on the WordPress server instead of being exposed in frontend HTML or JavaScript.

Common Use Cases for AI Connect

AI Connect can be used to create practical AI-powered tools directly inside WordPress. The exact result depends on the selected provider, request template, input fields, and response mapping.

Content generators

Create prompt-based tools for blog ideas, product descriptions, social captions, summaries, and marketing copy.

Image tools

Build frontend image-generation or image-processing tools when the selected provider supports image workflows.

Custom API tools

Connect a custom endpoint and map user inputs into an API request, then display selected response fields.

Lead magnets

Offer simple AI-powered calculators, assistants, checkers, or generators on landing pages.

Client tools

Agencies can create branded AI tools for client websites without rebuilding each integration from scratch.

AI tool websites

Build a website with multiple public AI tools using shortcodes, forms, provider settings, and mapped outputs.

Lite vs Pro: Choosing the Right AI Tool Workflow

AI Connect is planned around Lite and Pro editions. Lite is designed to help users start building AI tools, while Pro is designed for advanced workflows, monetization, heavier usage, and business-focused AI tool websites.

Lite

Build AI tools

Visual AI tool builder
Frontend form publishing
Shortcode output
Basic provider access
Basic input templates with variables
Basic output mapping
Default frontend form style

Pro

Run an AI tool business

More advanced workflows
Usage limits and result history options
Premium frontend style presets
Advanced mapping controls
Monetization-related features
Analytics and logs where available
White-label or client-focused options where available

Free lets you build AI tools. Pro is designed to help you run an AI tool business.

Requirements for AI Connect for WordPress

AI Connect is designed for normal WordPress websites. Requirements may depend on the selected provider, tool type, and product edition.

WordPress installed
Administrator access to the WordPress dashboard
A supported AI provider or API endpoint
Provider API credentials when required
A page where the AI tool shortcode can be published
HTTPS recommended for production websites
Outgoing HTTPS requests allowed by the hosting server

For live websites, always test your AI tool workflow before publishing it for real users.

Getting Started with AI Connect for WordPress

A typical AI Connect workflow starts in the WordPress admin area and ends with a shortcode published on a public page.

Create a new AI tool in the WordPress dashboard.
Choose or configure the provider for that tool.
Add the frontend input fields users will complete.
Map input variables into the request template.
Define how the provider response should be displayed.
Test the tool from the admin test workflow.
Copy the shortcode.
Place the shortcode on a WordPress page.
Test the frontend tool as a real visitor.

AI Connect Workflow: Create, Configure, Test, and Publish

AI Connect follows a practical workflow so each tool can be configured and tested before it appears on the frontend.

Step	What happens	Why it matters
Create Tool	Create a new AI tool record in WordPress.	This keeps each AI tool separate and easier to manage.
Build Form	Add input fields such as prompt, topic, tone, or dropdown choices.	These fields collect user input on the frontend.
Configure Provider	Connect the tool to a provider such as Custom API, Replicate, Hugging Face, OpenAI-compatible APIs, Gemini, or Claude.	The provider controls where the request goes and how the result is generated.
Map Request	Insert variables like {{prompt}} into the request template.	This turns frontend input into a provider-ready request.
Map Response	Choose the response path that contains the useful result.	This tells AI Connect what to display to the user.
Test	Run an admin-side test before publishing.	This helps catch provider, mapping, or request-template issues early.
Publish	Copy the shortcode and place it on a public page.	This makes the configured AI tool available to visitors.

AI Providers and Custom API Connections

AI Connect is designed around a provider-based architecture. Each AI tool can be connected to one provider, and that provider controls how the request is sent and how the result is received.

Provider examples

Custom API endpoint
Replicate-style model APIs
Hugging Face-style inference APIs
OpenAI-compatible APIs
Gemini-style APIs
Claude-style APIs

The final provider list may depend on the product edition and release version. Always test the exact provider and model you plan to use before publishing a public tool.

Tool Builder: Configure AI Tools Without Hardcoding Everything

The Tool Builder is the central place where an AI tool is configured. It connects the form, provider, request template, response mapping, and published shortcode together.

Common tool settings

Tool name
Tool description
Provider selection
Input fields
Request template
Response path or result mapping
Frontend result layout
Shortcode output

The goal is to let site owners create practical AI tools without editing theme files or writing a custom integration for every idea.

Inputs and Variables for Frontend AI Forms

Inputs are the fields that users complete on the frontend. These values can be inserted into the provider request through variables.

Example input fields

Prompt
Topic
Audience
Tone
Style
Image URL
Custom text field
Select/dropdown field

Example variable usage

A frontend field named prompt can be mapped into a request template using a variable.

{ "prompt": "{{prompt}}", "tone": "{{tone}}", "audience": "{{audience}}" }

Request Templates for AI Provider Workflows

The request template defines what is sent to the provider. It can include static values, dynamic variables, model settings, and tool-specific parameters.

What a request template may include

Model or endpoint information
User input variables
Prompt instructions
Generation settings
Output format preferences
Provider-specific parameters

Example request template

{ "prompt": "Write a helpful answer for this topic: {{topic}}. Use this tone: {{tone}}.", "max_tokens": 500 }

Request templates should be tested carefully before publishing a frontend tool, because each provider may require a different request format.

Response Mapping: Display the Right AI Output

Response mapping tells AI Connect where the useful provider output is located and how it should appear on the frontend.

Common output examples

Generated text
Generated image URL
Prediction output array
JSON field value
Status message
Error message

Example response paths

output output[0] data.result choices[0].message.content candidates[0].content.parts[0].text content[0].text

Different providers return different response shapes, so each tool should be tested with the provider it uses.

Shortcode Publishing for WordPress AI Tools

AI Connect is designed to publish tools with shortcodes. A shortcode can be placed inside a WordPress page, landing page, product page, documentation page, or compatible page builder area.

Example shortcode concept

[ai_connect_tool id="123"]

The shortcode renders the configured frontend form, handles the submission workflow, and displays the mapped result according to the tool settings.

Security and Server-Side API Key Protection

AI Connect is designed so sensitive provider credentials are handled server-side. API keys should not be printed in frontend HTML, JavaScript, or public page source.

Important security principles

Keep API keys server-side.
Do not expose provider secrets in frontend code.
Validate frontend submissions before sending provider requests.
Use nonces and capability checks in admin workflows.
Protect against unsafe external requests.
Show safe, readable errors instead of exposing raw secrets.
Test public tools because each request may use provider credits or paid API usage.

Public AI tools should be tested carefully because each request may use provider credits, paid API usage, or third-party service limits.

Best Practices for Building AI Tools in WordPress

A clear tool setup usually creates better results and fewer provider errors. Start simple, test each part, and only add complexity after the basic workflow works.

Start with a simple tool

Use one provider.
Add only the required inputs first.
Test with a small request template.
Confirm the response path before publishing.

Prepare for real visitors

Use clear labels and helper text.
Show safe error messages.
Check provider cost and usage limits.
Test the shortcode on the final frontend page.

Troubleshooting AI Connect for WordPress

The frontend tool does not return a result

Check that the provider is configured correctly.
Confirm the API key or provider credential is valid.
Test the tool from the admin test workflow.
Check the request template for missing variables.
Check the response path or result mapping.

The response is empty or incomplete

Confirm the provider returns the expected response format.
Check whether the response path points to the correct field.
Try a simpler request template.
Review any provider error message.

The frontend form does not look right

Check the page builder or theme CSS.
Confirm the shortcode is placed in the correct page area.
Clear cache and test in a private browser window.
Test with a default theme if needed.

The provider request fails

Check the API credential.
Confirm the provider account has access to the selected model or endpoint.
Confirm billing or usage limits if required by the provider.
Make sure the website can make outgoing HTTPS requests.

Frequently Asked Questions

What is AI Connect for WordPress?

AI Connect for WordPress is a visual AI tool builder for WordPress websites. It helps site owners create frontend AI tools, connect providers, map inputs, map responses, and publish tools with shortcodes.

What kind of AI tools can I build with AI Connect?

AI Connect is designed for building AI-powered frontend forms and tools, such as prompt-based generators, content helpers, image tools, text processing tools, and custom API-powered workflows.

Does AI Connect generate a full website or app automatically?

No. AI Connect is not an AI app generator. It is a builder that helps WordPress site owners create and publish AI-powered tools using configured providers, inputs, request templates, and response mappings.

How are AI Connect tools published on a WordPress website?

AI Connect tools are published with shortcodes. After creating and testing a tool, the site owner can copy the shortcode and place it inside a WordPress page, landing page, post, or compatible page builder area.

Will API keys be exposed on the frontend?

No. AI Connect is designed so provider credentials remain protected on the server side and are not exposed directly inside frontend forms, JavaScript, or public page source.

Which providers can AI Connect work with?

AI Connect is designed around a provider-based architecture. Provider options may include Custom API, Replicate, Hugging Face, OpenAI-compatible APIs, Gemini, and Claude depending on the installed edition and release version.

Can I connect a custom API to AI Connect?

Yes. AI Connect is designed to support custom API workflows where the site owner can define request templates, input variables, headers, and response mappings.

Does AI Connect work with Elementor?

Yes. AI Connect publishes tools with shortcodes, so tools can usually be placed inside Elementor, Elementor Pro, Gutenberg, classic editor content, and most shortcode-compatible WordPress page builders.

Is AI Connect only for text generation?

No. AI Connect can be used for text-based tools, image-generation workflows, response-processing tools, and custom provider workflows depending on the provider, request template, and output mapping.

Do I need coding knowledge to use AI Connect?

AI Connect is designed to reduce manual coding, but some provider workflows may still require understanding request templates, JSON input, response paths, and provider documentation.

What is response mapping in AI Connect?

Response mapping tells AI Connect where the useful result is located in the provider response, such as output, output[0], data.result, choices[0].message.content, or another provider-specific path.

What is a request template in AI Connect?

A request template defines the data sent to the selected provider. It can include fixed values, model settings, prompt instructions, and dynamic variables such as {{prompt}}, {{tone}}, or {{audience}}.

Support for AI Connect for WordPress

If you need help with AI Connect for WordPress, contact Clugins support and include your product version, WordPress version, active theme, relevant plugins, provider name, error message, screenshots, and steps to reproduce the issue.

Contact support View WordPress plugins View products