AI-Kit JavaScript API für WordPress

AI‑Kit stellt die öffentliche Runtime über das WP Suite Global bereit:

• globalThis.WpSuite.plugins.aiKit — Plugin-Objekt (registriert durch AI‑Kit Plugin)
• globalThis.WpSuite.plugins.aiKit.features — Feature-Methoden + UI-Helfer

Alle Feature Methoden sind async und liefern ein Promise.

Runtime Helfer (gemeinsamer WP Suite Vertrag)​

WP Suite Plugins teilen einen kleinen gemeinsamen Laufzeitvertrag (aus @smart-cloud/wpsuite-core), inkl.:

Helper accessors​

Wenn Sie @smart-cloud/wpsuite-core bündeln, können Sie zusätzlich verwenden:

• getWpSuite() → gibt das globale WpSuite zurück (oder undefined)
• getPlugin("gatey" | "aiKit" | "...") → Plugin Objekt aus Registry

(diese Helfer sind kleine Wrapper um globalThis.WpSuite.)

Plugin Status​

WpSuite.plugins.aiKit.status kann sein:

• unavailable — Plugin nicht vorhanden / noch nicht initialisiert
• initializing — start-up
• available — nutzbar
• error — Initialisierung fehlgeschlagen

Auf Verfügbarkeit warten​

Drei gebräuchliche Muster:

1) onReady(cb)

globalThis.WpSuite?.plugins?.aiKit?.onReady?.(() => {
  console.log("AI‑Kit is ready");
});

2) availability() (mit Timeout)

Gibt available, unavailable oder error zurück (initializing wird nicht zurückgegeben).

const res = await globalThis.WpSuite?.plugins?.aiKit?.availability?.();
if (res !== "available") {
  console.warn("AI‑Kit not available:", res);
}

3) AI‑Kit Core Wrapper (waitForAiKitReady)

Bei Build mit AI‑Kit Core Package:

• getAiKitPlugin()
• waitForAiKitReady(timeoutMs = 8000)
• getStore(timeoutMs = 10000) — wartet auf Readiness und liefert Store Promise

Diese Helfer bauen auf den Events auf.

Readiness / Error Events​

AI‑Kit emittiert DOM Events:

• wpsuite:ai-kit:ready
• wpsuite:ai-kit:error

window.addEventListener("wpsuite:ai-kit:ready", () => console.log("ready"));
window.addEventListener("wpsuite:ai-kit:error", () => console.log("error"));

Feature APIs (programmatic)​

Die Async Helfer unter WpSuite.plugins.aiKit.features entsprechen den Exporten aus @smart-cloud/ai-kit-core.

Shared options (FeatureOptions)​

• context: "admin" | "frontend" (Standard "admin"; Frontend-Wrapper setzen automatisch "frontend")
• modeOverride: erzwinge einen einzelnen Modus "local-only" | "backend-fallback" | "backend-only"
• onDeviceTimeoutOverride: überschreibt Timeout für on-device (45 s oder 5 s für Quick Features)
• signal, headers, query: zur Backend-Dispatcher Weitergabe
• onStatus(event): Statusschritte wie decide, on-device:download, backend:request, done

Feature-spezifische Extras können im selben Objekt stehen, z. B. maxCandidates beim Sprachdetektor.

Methoden​

write(args, options?) → { result: string }

• args: { prompt, context?, sharedContext?, tone?, format?, length?, outputLanguage? }
• Backend-Aufrufe honorieren auch knowledgeBaseId / disableKB

rewrite(args, options?) → { result: string }

• args: { text, context?, sharedContext?, tone?, format?, length?, outputLanguage? }

summarize(args, options?) → { result: string }

• args: { text, context?, sharedContext?, type?, format?, length?, outputLanguage? }

translate(args, options?) → { result: string }

• args: { text, sourceLanguage, targetLanguage }

detectLanguage(args, options?) → { result: { candidates: LanguageDetectionResult[] } }

• args: { text }
• Für Backend-only Flows können Sie options.maxCandidates hinzufügen

proofread(args, options?) → { result: ProofreadResult }

• args: { text, expectedInputLanguages?, includeCorrectionTypes?, includeCorrectionExplanations?, correctionExplanationLanguage? }

prompt(args, options?) → { result: string, sessionId?, metadata? }

• args: { messages, sharedContext?, outputLanguage?, images?, responseConstraint?, topK?, temperature?, maxTokens?, knowledgeBaseId?, disableKB? }
• metadata.stopReason === "max_tokens" bedeutet Modell-Output-Limit erreicht; metadata.maxTokens zeigt angewandtes Limit.

sendChatMessage(args, options?) → { result: string, sessionId?, metadata? }

• args: { sessionId?, message, sharedContext?, images?, topK?, temperature?, maxTokens?, knowledgeBaseId?, disableKB? }
• Chat-Historie wird automatisch gespeichert, wenn sessionId fehlt.

sendFeedbackMessage(args, options?) → { result: string, sessionId?, metadata? }

• args: { feedbackType: "accepted" | "rejected", feedbackMessageId, sessionId }

sendSearchMessage(args, options?) → { result: string, sessionId?, citations?, metadata? }

• args: { query, sessionId?, sharedContext?, knowledgeBaseId?, topK?, temperature?, maxTokens? }
• result enthält Kurzantwort und optional citations (docs + chunks) bei Verfügbarkeit.

Helper für Feature-Optionen​

Für rohe Chrome API create() Optionen (z. B. für Vor-Caching von Modellen):

• getWriteOptions(partialArgs) / getRewriteOptions(partialArgs)
• getSummarizeOptions(partialArgs) / getTranslateOptions(partialArgs)
• getProofreadOptions() / getPromptOptions(partialArgs)

Jeder Helper liefert die passende *CreateCoreOptions Struktur der Chrome KI APIs.

Beispiel: String übersetzen​

const f = globalThis.WpSuite?.plugins?.aiKit?.features;
if (!f) return;

const { result } = await f.translate({
  text: "Hello world",
  sourceLanguage: "en",
  targetLanguage: "de",
});

console.log(result);

Beispiel: aktuellen Inhalt zusammenfassen (mit Fortschritt)​

const aiKit = globalThis.WpSuite?.plugins?.aiKit;
const f = aiKit?.features;
if (!aiKit || !f) return;

const ok = (await aiKit.availability?.()) === "available";
if (!ok) return;

const { result } = await f.summarize(
  { text: "Long article text...", type: "tldr", length: "short" },
  {
    onStatus: (ev) => {
      // ev.step: "decide" | "on-device:download" | "backend:request" | ...
      console.log(ev.step, ev.progress);
    },
  },
);

console.log(result);

UI injection (renderFeature)​

Für Custom Themes/Plugins kann AI‑Kit die interaktive UI in ein Ziel-Element rendern:

• WpSuite.plugins.aiKit.features.renderFeature(args) → liefert ein AiWorkerHandle

So kann der AI‑Kit Feature Block / Shortcode sein UI auch auf dem Frontend bereitstellen.

Minimalbeispiel: Modal Translate UI​

const f = globalThis.WpSuite?.plugins?.aiKit?.features;
if (!f) return;

let handle;
handle = await f.renderFeature({
  mode: "translate",
  title: "Translate",
  variation: "modal",
  onClose: () => handle?.close?.(),
  autoRun: false,
  default: {
    text: "Hello world",
    inputLanguage: "en",
    outputLanguage: "de",
  },
});

Aufräumen​

Ein typischer Handle enthält:

• container — Root-Element,
• close() — UI schließen,
• unmount() — unmount und cleanup.

UI injection (Doc Search)​

AI‑Kit kann auch die Doc Search UI in ein Ziel-Element rendern:

• WpSuite.plugins.aiKit.features.renderSearchComponent(args) → liefert ein AiWorkerHandle

So nutzen der AI‑Kit Doc Search Block / Shortcode dieselbe Runtime auf dem Frontend.

Minimalbeispiel: Doc Search rendern​

const f = globalThis.WpSuite?.plugins?.aiKit?.features;
if (!f) return;

let handle;
handle = await f.renderSearchComponent({
  target: "#doc-search",
  title: "Search docs",
  autoRun: false,
  topK: 10,
  snippetMaxChars: 160,
});

Store-Zugriff (erweitert)​

AI-Kit stellt einen verzögert erstellten Store bereit:

• WpSuite.plugins.aiKit.features.store → Promise<Store>

Das ist hilfreich, wenn Sie eine eigene Oberfläche entwickeln und Einstellungen oder Diagnosedaten beobachten möchten.

const storePromise = globalThis.WpSuite?.plugins?.aiKit?.features?.store;
const store = storePromise ? await storePromise : null;