index.html
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <!-- Google tag (gtag.js) --> 5 <script async src="https://www.googletagmanager.com/gtag/js?id=G-CFP3KXWLNX"></script> 6 <script> 7 window.dataLayer = window.dataLayer || []; 8 function gtag(){dataLayer.push(arguments);} 9 gtag('js', new Date()); 10 gtag('config', 'G-CFP3KXWLNX'); 11 </script> 12 <meta charset="UTF-8"> 13 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 14 <title>RESTai for WordPress — AI superpowers for any WP site</title> 15 <meta name="description" content="Generate content, SEO meta, images, translations, AI search and an embedded chat — powered by your own RESTai instance. Auto-provisions everything on first connect."> 16 <meta property="og:title" content="RESTai for WordPress — AI superpowers for any WP site"> 17 <meta property="og:description" content="Content, SEO, images, translations, AI search, comments, WooCommerce, embeddable chat — one plugin, all powered by your RESTai."> 18 <meta property="og:image" content="https://raw.githubusercontent.com/apocas/restai/master/readme/assets/wordpress2.png"> 19 <link rel="icon" href="https://raw.githubusercontent.com/apocas/restai/master/readme/assets/restai-logo.png"> 20 <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet"> 21 <style> 22 *,*::before,*::after{box-sizing:border-box;margin:0;padding:0} 23 :root{ 24 --bg:#0a0a1a;--bg2:#111128;--bg3:#1a1a3e; 25 --text:#e2e8f0;--text2:#94a3b8;--text3:#64748b; 26 --accent1:#6366f1;--accent2:#8b5cf6;--accent3:#06b6d4; 27 --wp:#21759b;--wp-glow:rgba(33,117,155,.25); 28 --glow:rgba(99,102,241,.15); 29 --radius:16px;--radius-sm:10px; 30 } 31 html{scroll-behavior:smooth} 32 body{font-family:'Inter',system-ui,sans-serif;background:var(--bg);color:var(--text);line-height:1.7;overflow-x:hidden} 33 a{color:var(--accent3);text-decoration:none;transition:color .2s} 34 a:hover{color:var(--accent1)} 35 img{max-width:100%;height:auto;display:block} 36 code{font-family:'JetBrains Mono',monospace;font-size:.85em;background:rgba(255,255,255,.06);padding:.15em .45em;border-radius:5px;color:var(--accent3)} 37 pre{background:var(--bg2);border:1px solid rgba(255,255,255,.06);border-radius:var(--radius-sm);padding:1.25rem 1.5rem;overflow-x:auto;font-family:'JetBrains Mono',monospace;font-size:.85rem;line-height:1.7} 38 pre code{background:transparent;padding:0;border-radius:0;color:var(--text)} 39 .comment{color:var(--text3);font-style:italic} 40 41 /* Nav */ 42 nav{position:fixed;top:0;left:0;right:0;z-index:100;backdrop-filter:blur(20px);background:rgba(10,10,26,.8);border-bottom:1px solid rgba(99,102,241,.1);transition:box-shadow .3s} 43 nav.scrolled{box-shadow:0 4px 30px rgba(0,0,0,.4)} 44 .nav-inner{max-width:1200px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;padding:0 2rem;height:64px} 45 .nav-brand{display:flex;align-items:center;gap:.6rem;font-weight:700;font-size:1.2rem;color:#fff} 46 .nav-brand img{width:32px;height:32px} 47 .nav-links{display:flex;gap:1.5rem;align-items:center} 48 .nav-links a{color:var(--text2);font-size:.9rem;font-weight:500;transition:color .2s} 49 .nav-links a:hover{color:#fff} 50 .nav-cta{background:linear-gradient(135deg,var(--accent1),var(--accent2));color:#fff!important;padding:.45rem 1.2rem;border-radius:8px;font-weight:600;font-size:.85rem} 51 .nav-cta:hover{opacity:.9;color:#fff} 52 @media(max-width:768px){.nav-links{display:none}} 53 54 /* Hero */ 55 .hero{min-height:88vh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:8rem 2rem 4rem;position:relative;overflow:hidden} 56 .hero::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 80% 60% at 50% 20%,rgba(99,102,241,.18),transparent 70%),radial-gradient(ellipse 60% 50% at 80% 80%,var(--wp-glow),transparent);pointer-events:none} 57 .hero-glow{position:absolute;width:600px;height:600px;border-radius:50%;filter:blur(120px);opacity:.13;animation:float 8s ease-in-out infinite} 58 .hero-glow.g1{background:var(--accent1);top:-200px;left:-100px} 59 .hero-glow.g2{background:var(--wp);bottom:-200px;right:-100px;animation-delay:4s} 60 @keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(30px)}} 61 .hero-logos{display:flex;align-items:center;justify-content:center;gap:1.4rem;margin-bottom:1.5rem;position:relative;z-index:1} 62 .hero-logos img{width:96px;height:96px;border-radius:24px;background:#fff;padding:14px;box-shadow:0 8px 30px rgba(0,0,0,.5)} 63 .hero-logos .x{font-size:2rem;font-weight:300;color:var(--text2)} 64 .badge-pill{display:inline-block;padding:.35rem 1rem;border-radius:99px;font-size:.78rem;font-weight:600;text-transform:uppercase;letter-spacing:.1em;background:rgba(99,102,241,.12);color:var(--accent1);border:1px solid rgba(99,102,241,.25);margin-bottom:1rem;position:relative;z-index:1} 65 .hero h1{font-size:clamp(2.2rem,5.5vw,4rem);font-weight:900;letter-spacing:-.03em;background:linear-gradient(135deg,#fff 30%,var(--accent3));-webkit-background-clip:text;-webkit-text-fill-color:transparent;position:relative;z-index:1} 66 .hero .tagline{font-size:clamp(1rem,2.2vw,1.3rem);color:var(--text2);max-width:720px;margin:1rem auto 2rem;position:relative;z-index:1;font-weight:300} 67 .hero-btns{display:flex;gap:1rem;flex-wrap:wrap;justify-content:center;position:relative;z-index:1} 68 .btn{display:inline-flex;align-items:center;gap:.5rem;padding:.85rem 2rem;border-radius:12px;font-weight:600;font-size:1rem;transition:all .3s;border:none;cursor:pointer} 69 .btn-primary{background:linear-gradient(135deg,var(--accent1),var(--accent2));color:#fff;box-shadow:0 4px 20px rgba(99,102,241,.3)} 70 .btn-primary:hover{transform:translateY(-2px);box-shadow:0 8px 30px rgba(99,102,241,.4);color:#fff} 71 .btn-outline{background:transparent;color:#fff;border:1px solid rgba(255,255,255,.2)} 72 .btn-outline:hover{border-color:var(--accent1);background:rgba(99,102,241,.1);color:#fff} 73 .hero-meta{margin-top:2.5rem;display:flex;flex-wrap:wrap;justify-content:center;gap:.5rem 2rem;font-size:.85rem;color:var(--text3);position:relative;z-index:1} 74 .hero-meta span::before{content:'·';color:var(--text3);margin-right:1rem;font-weight:700} 75 .hero-meta span:first-child::before{display:none} 76 77 /* Sections */ 78 section{padding:5rem 2rem;position:relative} 79 .container{max-width:1200px;margin:0 auto} 80 .section-badge{display:inline-block;padding:.3rem 1rem;border-radius:20px;font-size:.75rem;font-weight:600;text-transform:uppercase;letter-spacing:.1em;background:rgba(99,102,241,.12);color:var(--accent1);border:1px solid rgba(99,102,241,.2);margin-bottom:1rem} 81 .section-title{font-size:clamp(2rem,4vw,3rem);font-weight:800;margin-bottom:1rem;letter-spacing:-.02em} 82 .section-sub{font-size:1.05rem;color:var(--text2);max-width:720px;margin-bottom:3rem} 83 84 /* Feature grid */ 85 .grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr));gap:1.25rem} 86 .fcard{background:var(--bg2);border:1px solid rgba(255,255,255,.06);border-radius:var(--radius);padding:1.6rem;transition:all .3s;position:relative;overflow:hidden} 87 .fcard::after{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,var(--accent1),var(--accent2));opacity:0;transition:opacity .3s} 88 .fcard:hover{border-color:rgba(99,102,241,.3);transform:translateY(-3px);box-shadow:0 12px 30px rgba(0,0,0,.3)} 89 .fcard:hover::after{opacity:1} 90 .fcard .ico{width:42px;height:42px;border-radius:11px;display:flex;align-items:center;justify-content:center;font-size:1.3rem;margin-bottom:.9rem;background:linear-gradient(135deg,rgba(99,102,241,.15),rgba(139,92,246,.15));border:1px solid rgba(99,102,241,.18)} 91 .fcard h3{font-size:1.05rem;font-weight:700;margin-bottom:.4rem;color:#fff} 92 .fcard p{font-size:.9rem;color:var(--text2);line-height:1.55;margin:0} 93 94 /* Steps */ 95 .steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr));gap:1.5rem;margin-top:2rem;counter-reset:step} 96 .step{background:var(--bg2);border:1px solid rgba(255,255,255,.06);border-radius:var(--radius);padding:2rem 1.6rem;position:relative;counter-increment:step} 97 .step::before{content:counter(step);position:absolute;top:-22px;left:24px;width:44px;height:44px;border-radius:50%;background:linear-gradient(135deg,var(--accent1),var(--accent2));display:flex;align-items:center;justify-content:center;font-weight:800;font-size:1.1rem;color:#fff;box-shadow:0 6px 20px rgba(99,102,241,.4)} 98 .step h3{margin-top:.8rem;font-size:1.15rem;font-weight:700;margin-bottom:.5rem;color:#fff} 99 .step p{font-size:.9rem;color:var(--text2);margin:0;line-height:1.6} 100 .step code{font-size:.78rem} 101 102 /* Screenshot showcase */ 103 .shots{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(420px,100%),1fr));gap:1.5rem} 104 .shot{background:var(--bg2);border:1px solid rgba(255,255,255,.06);border-radius:var(--radius);overflow:hidden;cursor:pointer;transition:all .3s;position:relative} 105 .shot:hover{transform:translateY(-3px);border-color:rgba(99,102,241,.3);box-shadow:0 16px 40px rgba(0,0,0,.4)} 106 .shot img{display:block;width:100%;height:auto} 107 .shot .cap{padding:1rem 1.25rem;border-top:1px solid rgba(255,255,255,.06);font-size:.9rem;color:var(--text)} 108 .shot .cap span{display:block;font-size:.78rem;color:var(--text3);margin-top:.15rem} 109 110 /* Tasks list */ 111 .tasks{display:grid;grid-template-columns:repeat(2,1fr);gap:.75rem 2rem;margin-top:2rem} 112 .tasks li{list-style:none;padding-left:1.7rem;position:relative;font-size:.95rem;color:var(--text);line-height:1.55} 113 .tasks li::before{content:'';position:absolute;left:0;top:.45rem;width:14px;height:14px;border-radius:50%;background:linear-gradient(135deg,var(--accent1),var(--accent2));box-shadow:0 0 0 4px rgba(99,102,241,.15)} 114 .tasks li b{color:#fff;font-weight:700} 115 @media(max-width:720px){.tasks{grid-template-columns:1fr}} 116 117 /* Quickstart */ 118 .qs-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(360px,100%),1fr));gap:1.5rem;margin-top:1rem} 119 .qs-card{background:var(--bg2);border:1px solid rgba(255,255,255,.06);border-radius:var(--radius);padding:1.5rem 1.5rem 1.75rem} 120 .qs-title{font-weight:700;color:var(--accent3);font-size:.9rem;margin-bottom:.9rem} 121 122 /* Lightbox */ 123 .lightbox{position:fixed;inset:0;background:rgba(0,0,0,.92);display:none;align-items:center;justify-content:center;z-index:200;padding:2rem;cursor:zoom-out} 124 .lightbox.open{display:flex} 125 .lightbox img{max-width:96vw;max-height:88vh;border-radius:var(--radius);box-shadow:0 20px 80px rgba(0,0,0,.6)} 126 .lb-close{position:absolute;top:1.5rem;right:1.5rem;width:42px;height:42px;border-radius:50%;background:rgba(255,255,255,.08);color:#fff;border:0;font-size:1.6rem;cursor:pointer;display:flex;align-items:center;justify-content:center;backdrop-filter:blur(8px)} 127 .lb-close:hover{background:rgba(255,255,255,.18)} 128 .lb-cap{position:absolute;bottom:2rem;left:50%;transform:translateX(-50%);background:rgba(0,0,0,.6);padding:.6rem 1.2rem;border-radius:99px;color:#fff;font-size:.9rem;backdrop-filter:blur(10px)} 129 130 /* Footer */ 131 footer{padding:3rem 2rem 2rem;border-top:1px solid rgba(255,255,255,.06);background:var(--bg);text-align:center} 132 footer .container{display:flex;flex-direction:column;align-items:center;gap:1.2rem} 133 footer .links{display:flex;gap:1.5rem;flex-wrap:wrap;justify-content:center} 134 footer .links a{color:var(--text2);font-size:.9rem} 135 footer .links a:hover{color:#fff} 136 footer .copy{color:var(--text3);font-size:.8rem} 137 138 /* Reveal */ 139 .reveal{opacity:0;transform:translateY(20px);transition:opacity .6s ease,transform .6s ease} 140 .reveal.in{opacity:1;transform:translateY(0)} 141 </style> 142 </head> 143 <body> 144 145 <nav id="nav"> 146 <div class="nav-inner"> 147 <a href="https://restai.cloud/" class="nav-brand"> 148 <img src="https://raw.githubusercontent.com/apocas/restai/master/readme/assets/restai-logo.png" alt="RESTai"> 149 RESTai 150 </a> 151 <div class="nav-links"> 152 <a href="https://restai.cloud/#features">Platform</a> 153 <a href="https://restai.cloud/#quickstart">Install RESTai</a> 154 <a href="https://github.com/apocas/restai/tree/master/wordpress">Source</a> 155 <a class="nav-cta" href="#install">Get the plugin</a> 156 </div> 157 </div> 158 </nav> 159 160 <!-- Hero --> 161 <section class="hero"> 162 <div class="hero-glow g1"></div> 163 <div class="hero-glow g2"></div> 164 165 <div class="hero-logos"> 166 <img src="https://raw.githubusercontent.com/apocas/restai/master/readme/assets/restai-logo.png" alt="RESTai"> 167 <span class="x">+</span> 168 <img src="https://s.w.org/style/images/about/WordPress-logotype-wmark.png" alt="WordPress" onerror="this.src='https://upload.wikimedia.org/wikipedia/commons/9/98/WordPress_blue_logo.svg'"> 169 </div> 170 <span class="badge-pill">Official WordPress plugin</span> 171 <h1>RESTai superpowers for WordPress</h1> 172 <p class="tagline"> 173 Generate content, SEO meta, images, translations, AI search and an embedded chat — all powered by <b>your own</b> RESTai instance. 174 Each capability runs on its own RESTai project so models, prompts and budgets stay tunable per task. 175 </p> 176 <div class="hero-btns"> 177 <a class="btn btn-primary" href="#install">Install plugin</a> 178 <a class="btn btn-outline" href="https://github.com/apocas/restai/tree/master/wordpress" target="_blank" rel="noopener">View source</a> 179 </div> 180 <div class="hero-meta"> 181 <span>WordPress 6.0+</span> 182 <span>PHP 7.4+</span> 183 <span>Self-hosted RESTai</span> 184 <span>GPL-2.0+</span> 185 </div> 186 </section> 187 188 <!-- What it does --> 189 <section id="features"> 190 <div class="container"> 191 <span class="section-badge reveal">Features</span> 192 <h2 class="section-title reveal">One plugin, every AI surface in WordPress</h2> 193 <p class="section-sub reveal">Each capability is wired through to a dedicated RESTai project. Auto-provisioned on first connect, fully editable from your RESTai admin afterwards.</p> 194 195 <div class="grid"> 196 <div class="fcard reveal"> 197 <div class="ico">✍️</div> 198 <h3>Content writer</h3> 199 <p>Generate post bodies and excerpts straight from Gutenberg. Optional brief, replaces or appends to the editor with one click.</p> 200 </div> 201 <div class="fcard reveal"> 202 <div class="ico">🔎</div> 203 <h3>SEO assistant</h3> 204 <p>Title, meta description, focus keyphrase and tag suggestions in JSON. Writes directly into Yoast and Rank Math fields.</p> 205 </div> 206 <div class="fcard reveal"> 207 <div class="ico">🖼️</div> 208 <h3>Featured image generation</h3> 209 <p>Calls whichever image generator your team has access to (Flux, SDXL, DALL·E…). Auto-attaches as the featured media.</p> 210 </div> 211 <div class="fcard reveal"> 212 <div class="ico">🌍</div> 213 <h3>Translations</h3> 214 <p>Translate any post into N languages, saved as drafts. Polylang/WPML aware so the language gets attached automatically.</p> 215 </div> 216 <div class="fcard reveal"> 217 <div class="ico">💬</div> 218 <h3>Comment moderation</h3> 219 <p>Pre-publish AI moderation flags spam and toxic content, suggests replies for your team — before anything hits your site.</p> 220 </div> 221 <div class="fcard reveal"> 222 <div class="ico">🛒</div> 223 <h3>WooCommerce</h3> 224 <p>Product description generator and FAQ shortcode driven by your catalog data. Cached so repeat visitors don't re-bill.</p> 225 </div> 226 <div class="fcard reveal"> 227 <div class="ico">📚</div> 228 <h3>Knowledge sync</h3> 229 <p>Every published post and page is auto-pushed into a Support Bot RAG project, so the bot is always current.</p> 230 </div> 231 <div class="fcard reveal"> 232 <div class="ico">🧠</div> 233 <h3>AI site search</h3> 234 <p>Replace native WordPress search with semantic answers from the support bot — citing your own pages back to visitors.</p> 235 </div> 236 <div class="fcard reveal"> 237 <div class="ico">💭</div> 238 <h3>Embeddable chat widget</h3> 239 <p>One toggle adds a chat bubble to public pages. Plugin auto-creates the right widget key, allow-lists your domain — no copy/paste needed.</p> 240 </div> 241 <div class="fcard reveal"> 242 <div class="ico">📨</div> 243 <h3>Email personalization</h3> 244 <p>Welcome, password reset, abandoned cart — rewritten to feel personal and on-brand via the wp_mail filter.</p> 245 </div> 246 <div class="fcard reveal"> 247 <div class="ico">📊</div> 248 <h3>Analytics in WP admin</h3> 249 <p>Token usage, cost and request volume mirrored into your WP dashboard. No need to leave to know what AI is actually spending.</p> 250 </div> 251 <div class="fcard reveal"> 252 <div class="ico">🤖</div> 253 <h3>Image alt text</h3> 254 <p>Optional auto alt text on uploads using a vision model — accessibility compliance without thinking about it.</p> 255 </div> 256 </div> 257 </div> 258 </section> 259 260 <!-- Screenshots --> 261 <section style="background:var(--bg2)"> 262 <div class="container"> 263 <span class="section-badge reveal">Inside</span> 264 <h2 class="section-title reveal">See it inside WordPress</h2> 265 <p class="section-sub reveal">Native to the WP admin and the Gutenberg editor. No iframes, no detours.</p> 266 267 <div class="shots"> 268 <div class="shot reveal" onclick="openLightbox(0)"> 269 <img src="https://raw.githubusercontent.com/apocas/restai/master/readme/assets/wordpress1.png" alt="WordPress plugin settings"> 270 <div class="cap">Settings & connection<span>Pick a team, map tasks to RESTai projects, auto-provision starter projects.</span></div> 271 </div> 272 <div class="shot reveal" onclick="openLightbox(1)"> 273 <img src="https://raw.githubusercontent.com/apocas/restai/master/readme/assets/wordpress2.png" alt="Gutenberg sidebar"> 274 <div class="cap">Gutenberg sidebar<span>Generate body, excerpt, SEO meta, featured image and translations from one panel.</span></div> 275 </div> 276 <div class="shot reveal" onclick="openLightbox(2)"> 277 <img src="https://raw.githubusercontent.com/apocas/restai/master/readme/assets/wordpress3.png" alt="Analytics & knowledge sync"> 278 <div class="cap">Analytics & knowledge sync<span>Token usage from your RESTai mirrored into WP admin, plus a one-shot push to the support bot.</span></div> 279 </div> 280 <div class="shot reveal" onclick="openLightbox(3)"> 281 <img src="https://raw.githubusercontent.com/apocas/restai/master/readme/assets/wordpress4.png" alt="Live on a site"> 282 <div class="cap">Live on a site<span>Embedded chat widget, AI-powered site search and translated drafts ready to publish.</span></div> 283 </div> 284 </div> 285 </div> 286 </section> 287 288 <!-- How it works --> 289 <section id="install"> 290 <div class="container"> 291 <span class="section-badge reveal">How it works</span> 292 <h2 class="section-title reveal">Up and running in three steps</h2> 293 294 <div class="steps"> 295 <div class="step reveal"> 296 <h3>Install the plugin</h3> 297 <p>Upload the plugin zip via <code>Plugins → Add New → Upload Plugin</code>, or drop the folder into <code>wp-content/plugins/restai</code> and activate.</p> 298 </div> 299 <div class="step reveal"> 300 <h3>Connect to your RESTai</h3> 301 <p>In <code>Settings → RESTai</code>, paste your RESTai URL + API key, click <b>Test connection</b>, pick a team from the dropdown, save.</p> 302 </div> 303 <div class="step reveal"> 304 <h3>Auto-provision projects</h3> 305 <p>Click <b>Auto-provision starter projects</b>. The plugin creates Content Writer, SEO Assistant, Translator, Support Bot, and 4 others on your RESTai. Re-map any to a different project later.</p> 306 </div> 307 </div> 308 </div> 309 </section> 310 311 <!-- Tasks created --> 312 <section style="background:var(--bg2)"> 313 <div class="container"> 314 <span class="section-badge reveal">Auto-provisioned</span> 315 <h2 class="section-title reveal">Eight RESTai projects, ready on day one</h2> 316 <p class="section-sub reveal">Each task the plugin performs is one RESTai project — so you can swap models per capability, set per-project budgets, audit usage independently, version prompts, and re-use the same projects from the API or other clients.</p> 317 318 <ul class="tasks reveal"> 319 <li><b>wp-content-writer</b> — Gutenberg / classic editor body and excerpts</li> 320 <li><b>wp-seo-assistant</b> — JSON-only SEO meta + tag suggestions</li> 321 <li><b>wp-translator</b> — HTML-preserving translations to N languages</li> 322 <li><b>wp-comment-moderator</b> — spam / toxicity / suggested replies</li> 323 <li><b>wp-support-bot (RAG)</b> — knowledge synced from posts & pages</li> 324 <li><b>wp-product-writer</b> — WooCommerce descriptions and FAQs</li> 325 <li><b>wp-email-personalizer</b> — rewrites transactional emails</li> 326 <li><b>wp-image-alt</b> — vision-model alt text for new uploads</li> 327 </ul> 328 </div> 329 </section> 330 331 <!-- Install snippets --> 332 <section> 333 <div class="container"> 334 <span class="section-badge reveal">Install</span> 335 <h2 class="section-title reveal">Three ways to install</h2> 336 337 <div class="qs-grid"> 338 <div class="qs-card reveal"> 339 <div class="qs-title">From WordPress admin (recommended)</div> 340 <pre><span class="comment"># 1. Download the latest release zip</span> 341 curl -LO https://github.com/apocas/restai/releases/latest/download/restai-wordpress.zip 342 343 <span class="comment"># 2. Plugins → Add New → Upload Plugin → choose zip → Install Now → Activate</span></pre> 344 </div> 345 <div class="qs-card reveal"> 346 <div class="qs-title">From source (development)</div> 347 <pre><span class="comment"># Clone the RESTai repo</span> 348 git clone https://github.com/apocas/restai 349 cp -r restai/wordpress/restai \ 350 /path/to/wp-content/plugins/restai 351 352 <span class="comment"># Then activate from the admin UI</span></pre> 353 </div> 354 <div class="qs-card reveal"> 355 <div class="qs-title">With WP-CLI</div> 356 <pre><span class="comment"># Build a zip and install in one shot</span> 357 cd restai/wordpress && zip -r restai.zip restai 358 wp plugin install restai.zip --activate</pre> 359 </div> 360 </div> 361 </div> 362 </section> 363 364 <!-- Privacy / compliance strip --> 365 <section style="background:var(--bg2);padding:3.5rem 2rem"> 366 <div class="container" style="display:grid;grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr));gap:1.5rem"> 367 <div class="reveal"> 368 <h3 style="font-size:1.05rem;font-weight:700;color:#fff;margin-bottom:.4rem">You own the data</h3> 369 <p style="font-size:.92rem;color:var(--text2);margin:0">Calls go from your WordPress to <i>your</i> RESTai instance. No third-party SaaS in between, no telemetry from the plugin.</p> 370 </div> 371 <div class="reveal"> 372 <h3 style="font-size:1.05rem;font-weight:700;color:#fff;margin-bottom:.4rem">Per-task budgets</h3> 373 <p style="font-size:.92rem;color:var(--text2);margin:0">Each WP capability is a separate RESTai project — set rate limits and budgets per project to cap spend on any one feature.</p> 374 </div> 375 <div class="reveal"> 376 <h3 style="font-size:1.05rem;font-weight:700;color:#fff;margin-bottom:.4rem">Built for WP</h3> 377 <p style="font-size:.92rem;color:var(--text2);margin:0">Sanitised input, escaped output, capability checks, nonces, i18n-ready. GPL-2.0+ — same model as WordPress itself.</p> 378 </div> 379 </div> 380 </section> 381 382 <!-- CTA --> 383 <section style="text-align:center;padding:6rem 2rem"> 384 <div class="container"> 385 <h2 class="section-title reveal">Bring AI to your WordPress site today</h2> 386 <p class="section-sub reveal" style="margin-left:auto;margin-right:auto">You'll need a reachable RESTai instance with at least one LLM configured. Don't have one yet? <a href="https://restai.cloud/#quickstart">Spin one up in 30 seconds.</a></p> 387 <div class="hero-btns reveal" style="justify-content:center"> 388 <a class="btn btn-primary" href="https://github.com/apocas/restai/tree/master/wordpress">Get the plugin</a> 389 <a class="btn btn-outline" href="https://restai.cloud/">Back to RESTai</a> 390 </div> 391 </div> 392 </section> 393 394 <!-- Lightbox --> 395 <div class="lightbox" id="lightbox" onclick="closeLightbox(event)"> 396 <button class="lb-close" onclick="closeLightbox()">×</button> 397 <img id="lbImg" alt=""> 398 <div class="lb-cap" id="lbCap"></div> 399 </div> 400 401 <footer> 402 <div class="container"> 403 <div class="links"> 404 <a href="https://restai.cloud/">RESTai platform</a> 405 <a href="https://github.com/apocas/restai">GitHub</a> 406 <a href="https://github.com/apocas/restai/tree/master/wordpress">Plugin source</a> 407 <a href="https://restai.cloud/swagger/">API docs</a> 408 </div> 409 <div class="copy">© RESTai · Licensed under Apache 2.0 · Plugin under GPL-2.0+</div> 410 </div> 411 </footer> 412 413 <script> 414 // Nav scroll 415 const nav = document.getElementById('nav'); 416 window.addEventListener('scroll', () => nav.classList.toggle('scrolled', window.scrollY > 8)); 417 418 // Reveal on scroll 419 const obs = new IntersectionObserver((entries) => { 420 entries.forEach((e) => { if (e.isIntersecting) { e.target.classList.add('in'); obs.unobserve(e.target); } }); 421 }, { threshold: .12 }); 422 document.querySelectorAll('.reveal').forEach((el) => obs.observe(el)); 423 424 // Lightbox 425 const shots = Array.from(document.querySelectorAll('.shot')).map((s) => ({ 426 src: s.querySelector('img').src, 427 cap: s.querySelector('.cap').textContent, 428 })); 429 function openLightbox(i) { 430 document.getElementById('lbImg').src = shots[i].src; 431 document.getElementById('lbCap').textContent = shots[i].cap; 432 document.getElementById('lightbox').classList.add('open'); 433 document.body.style.overflow = 'hidden'; 434 } 435 function closeLightbox(e) { 436 if (e && e.target.tagName === 'IMG') return; 437 document.getElementById('lightbox').classList.remove('open'); 438 document.body.style.overflow = ''; 439 } 440 document.addEventListener('keydown', (e) => { 441 if (e.key === 'Escape') { 442 document.getElementById('lightbox').classList.remove('open'); 443 document.body.style.overflow = ''; 444 } 445 }); 446 </script> 447 448 </body> 449 </html>