Of course, AI Engine comes with built-in tools like chatbots, but it’s really just a bridge to bring AI to WordPress so you can create your own AI-powered tools. As an example, we’ll build a post widget that analyzes the current page’s content and generates an overview. You can try it right here.
The article discusses how to integrate AI capabilities into WordPress using AI Engine and Code Engine, specifically by creating a post widget that can analyze content and generate summaries. The workflow involves registering a shortcode in Code Engine, which processes the post content with the AI Engine API to produce an overview, key points, and a conclusion.
- — AI Engine serves as a bridge for creating custom AI tools in WordPress
- — A widget example demonstrates how to generate content summaries
- — The process includes creating a Content Snippet and using a shortcode on posts
- — Output is structured into overview
- — key points
- — and conclusion sections
This guide highlights the potential of AI integration in WordPress for enhancing content presentation.
The widget you see here has been generated at load time when opening this page with a shortcode.
For this, we only need Code Engine and AI Engine. You could also create your own shortcode manually; we’re using Code Engine for simplicity.
The workflow is simple: create a Content Snippet in Code Engine to register a shortcode, then place that shortcode on any post. When the post renders, it will run the code below. First, we fetch the post content, then use the AI Engine API to have a model analyze the content and generate an overview.
We split the output into three parts: overview, key points, and conclusion.
Next, we add HTML to define the layout, some styling to make everything look nice, and a small script to help us navigate the categories. And that’s it.
As you can see, AI Engine is only a small part of this solution—most of the code is native. You can build any AI-powered tool in a similar way. The AI Engine API is very versatile.
Below is the code we’re using, including caching, the query, markup, and styles. In a production setup, you’d likely separate these components.
global $mwai;
$page = get_post(get_the_ID());
if (!$page || !isset($page->post_content)) {
echo 'No Content.';
return;
}
// Cache key includes last modified so edits auto-bust the cache.
$modified_unix = (int) get_post_modified_time('U', true, $page); // GMT
$cache_key = 'mwai_pr_' . $page->ID . '_' . $modified_unix;
// Serve from cache if present
if (false !== ($cached = get_transient($cache_key))) {
echo $cached;
return;
}
/* ---------------- AI QUERY ---------------- */
$prompt = "<instructions>Given the content of the article, write a short overview of the article, the most important points, and a conclusion.<instructions><response>The response in JSON format should always use the following keys: overview ( string 2 - 3 sentences ), keypoints ( string separated by commas ), conclusion ( string 1 sentence ).</response> The article is: " . $page->post_content;
$res = $mwai->simpleJsonQuery($prompt);
$overview = isset($res['overview']) ? wp_kses_post($res['overview']) : '';
$keypointsS = isset($res['keypoints']) ? wp_kses_post($res['keypoints']) : '';
$conclusion = isset($res['conclusion']) ? wp_kses_post($res['conclusion']) : '';
$keypoints = array_filter(array_map('trim', explode(',', wp_strip_all_tags($keypointsS))));
$uid = esc_attr(wp_unique_id('mwai-pr-'));
/* --------------- Build HTML --------------- */
$overviewHtml = '<p>'. ( $overview !== '' ? $overview : esc_html__('No overview available.', 'mwai') ) .'</p>';
$keypointsHtml = !empty($keypoints)
? '<ul class="mwai-pr__list">'.implode('', array_map(fn($kp)=>'<li>— '.esc_html($kp).'</li>', $keypoints)).'</ul>'
: '<p>'. esc_html__('No key points provided.', 'mwai') .'</p>';
$conclusionHtml = '<p>'. ( $conclusion !== '' ? $conclusion : esc_html__('No conclusion available.', 'mwai') ) .'</p>';
$html = '<div class="mwai-pr" id="'.$uid.'"><div class="mwai-pr__wrap">';
$html .= '<div class="mwai-pr__header"><div class="mwai-pr__logo" aria-hidden="true">🤖</div><div class="mwai-pr__title">AI Summary</div></div>';
$html .= '<div class="mwai-pr__tabs" role="tablist" aria-label="AI Summary Tabs">
<button role="tab" aria-selected="true" data-panel="overview" class="mwai-pr__tab is-active">Overview</button>
<button role="tab" aria-selected="false" data-panel="keypoints" class="mwai-pr__tab">Key Points</button>
<button role="tab" aria-selected="false" data-panel="conclusion" class="mwai-pr__tab">Conclusion</button>
</div>';
$html .= '<div class="mwai-pr__panels">
<section role="tabpanel" class="mwai-pr__panel is-active" data-panel="overview">'.$overviewHtml.'</section>
<section role="tabpanel" class="mwai-pr__panel" data-panel="keypoints">'.$keypointsHtml.'</section>
<section role="tabpanel" class="mwai-pr__panel" data-panel="conclusion">'.$conclusionHtml.'</section>
</div>';
$html .= '<style>
.mwai-pr__wrap{background:#0b1220;border:1px solid #1f2937;border-radius:16px;padding:18px 20px;font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif}
.mwai-pr__header{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.mwai-pr__logo{width:28px;height:28px;border-radius:999px;background:#0f172a;display:grid;place-items:center;box-shadow:0 1px 2px rgba(0,0,0,.35)}
.mwai-pr__title{font-weight:800;font-size:22px;color:#e5e7eb}
.mwai-pr__tabs{display:flex;gap:10px;margin:6px 0 12px}
.mwai-pr__tab{border:1px solid #374151;background:#111827;padding:8px 14px;border-radius:999px;cursor:pointer;font-weight:700;font-size:14px;color:#e5e7eb;transition:background .15s,border-color .15s,transform .05s}
.mwai-pr__tab:hover{background:#0f172a;border-color:#475569}
.mwai-pr__tab:active{transform:translateY(1px)}
.mwai-pr__tab.is-active{background:#1f2937;border-color:#64748b}
.mwai-pr__panel{display:none}
.mwai-pr__panel.is-active{display:block}
.mwai-pr__panels p{color:#e2e8f0;line-height:1.75;margin:0}
.mwai-pr__list{list-style:none;margin:0;padding:0}
.mwai-pr__list li{margin:6px 0;color:#e2e8f0;line-height:1.7}
</style>';
$html .= '<script>(function(){const r=document.getElementById("'.$uid.'");if(!r)return;const tabs=r.querySelectorAll(".mwai-pr__tab");const panels=r.querySelectorAll(".mwai-pr__panel");tabs.forEach(t=>t.addEventListener("click",()=>{const target=t.getAttribute("data-panel");tabs.forEach(tb=>{tb.classList.remove("is-active");tb.setAttribute("aria-selected","false")});t.classList.add("is-active");t.setAttribute("aria-selected","true");panels.forEach(p=>p.classList.toggle("is-active",p.getAttribute("data-panel")===target));}));})();</script>';
$html .= '</div></div>';
/* -------- Save cache for one week -------- */
set_transient($cache_key, $html, WEEK_IN_SECONDS);
echo $html;We simply put all of this in Code Engine:
And we are done. Just reference our new widget in any post using the generated shortcode:
[code-engine id="3"]