API de JavaScript de AI-Kit para WordPress
AI‑Kit expone una interfaz pública en tiempo de ejecución bajo el objeto global de WP Suite:
globalThis.WpSuite.plugins.aiKit— objeto del plugin (registrado por el plugin AI‑Kit)globalThis.WpSuite.plugins.aiKit.features— métodos de funciones y utilidades de interfaz
Todos los métodos de funciones son asíncronos y devuelven una Promise.
Use siempre el encadenamiento opcional (?.) por si AI‑Kit no está instalado en el sitio o la página actual.
Utilidades de tiempo de ejecución (contrato compartido de WP Suite)
Los plugins de WP Suite comparten un pequeño contrato común de tiempo de ejecución (procedente de @smart-cloud/wpsuite-core), que incluye:
Funciones de acceso auxiliares
Si incluye @smart-cloud/wpsuite-core en su paquete, también puede usar:
getWpSuite()→ devuelve el objeto globalWpSuite(oundefined)getPlugin("gatey" | "aiKit" | "...")→ devuelve un objeto de plugin del registro
(Son envoltorios ligeros de globalThis.WpSuite.)
Estado del plugin
WpSuite.plugins.aiKit.status puede tener uno de estos valores:
unavailable— el plugin no está presente o aún no se ha inicializadoinitializing— se está iniciandoavailable— está listo para usarseerror— no se pudo inicializar
Esperar hasta que AI‑Kit esté listo
Puede esperar de tres formas habituales:
1) onReady(cb)
globalThis.WpSuite?.plugins?.aiKit?.onReady?.(() => {
console.log("AI‑Kit is ready");
});
2) availability() (espera asíncrona con tiempo límite)
Devuelve available, unavailable o error (nunca devuelve initializing).
const res = await globalThis.WpSuite?.plugins?.aiKit?.availability?.();
if (res !== "available") {
console.warn("AI‑Kit not available:", res);
}
3) Envoltorios del núcleo de AI‑Kit (waitForAiKitReady)
Si su compilación incluye el paquete principal de AI‑Kit, puede usar sus envoltorios prácticos:
getAiKitPlugin()waitForAiKitReady(timeoutMs = 8000)getStore(timeoutMs = 10000)(espera a que esté listo y devuelve la promesa del almacén)
Son funciones auxiliares ligeras basadas en los eventos que aparecen a continuación.
Eventos de disponibilidad y error
AI‑Kit emite eventos del DOM que puede escuchar:
wpsuite:ai-kit:readywpsuite:ai-kit:error
window.addEventListener("wpsuite:ai-kit:ready", () => console.log("ready"));
window.addEventListener("wpsuite:ai-kit:error", () => console.log("error"));
wp.events de WordPressAlgunas compilaciones también vuelven a emitir estos eventos mediante WpSuite.events / wp.events. Los eventos del DOM anteriores son la opción más segura entre contextos.
API de funciones (llamadas programáticas)
Las funciones auxiliares asíncronas de WpSuite.plugins.aiKit.features reflejan las funciones exportadas desde @smart-cloud/ai-kit-core.
Opciones compartidas (FeatureOptions)
context:"admin" | "frontend"(valor predeterminado:"admin"; los envoltorios del frontend pasan"frontend"automáticamente)modeOverride: fuerza un modo de capacidad para una sola llamada —"local-only" | "backend-fallback" | "backend-only"onDeviceTimeoutOverride: sustituye el tiempo límite predeterminado de 45 s (o 5 s para las funciones rápidas) en el dispositivo al usar las API de Chromesignal,headers,query: se envían al distribuidor del backendonStatus(event): recibe pasos del progreso comodecide,on-device:download,backend:request,done- El mismo objeto puede contener opciones adicionales específicas de cada función (por ejemplo,
maxCandidatespara la detección de idioma en el backend)
Métodos
write(args, options?) → { result: string }
args:{ prompt, context?, sharedContext?, tone?, format?, length?, outputLanguage? }- Las llamadas al backend también respetan
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 }- Para los flujos que solo usan el backend, puede añadir
options.maxCandidates
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"significa que el modelo alcanzó el límite de salida;metadata.maxTokensmuestra el límite aplicado en el backend.
sendChatMessage(args, options?) → { result: string, sessionId?, metadata? }
args:{ sessionId?, message, sharedContext?, images?, topK?, temperature?, maxTokens?, knowledgeBaseId?, disableKB? }- Guarde automáticamente el historial del chat cuando se omite
sessionId
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? }- Devuelve una respuesta o resumen breve en
result, además decitationsopcionales (docs+chunks) cuando están disponibles.
Funciones auxiliares para las opciones de las funciones
Cuando necesite las opciones create() sin procesar de la API de Chrome (por ejemplo, para almacenar modelos en caché previamente), usa:
getWriteOptions(partialArgs)/getRewriteOptions(partialArgs)getSummarizeOptions(partialArgs)/getTranslateOptions(partialArgs)getProofreadOptions()/getPromptOptions(partialArgs)
Cada función auxiliar devuelve la estructura *CreateCoreOptions correspondiente de las API de IA integradas en Chrome.
Ejemplo: traducir una cadena
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);
Ejemplo: resumir el contenido actual (con progreso)
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);
Inserción de interfaz (renderFeature)
Para temas y plugins personalizados, AI‑Kit puede representar su interfaz interactiva dentro de un elemento de destino:
WpSuite.plugins.aiKit.features.renderFeature(args)→ devuelve unAiWorkerHandle
Así es como el bloque o shortcode AI‑Kit Feature puede crear una interfaz en el frontend.
Ejemplo mínimo: representar una interfaz modal de traducción
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",
},
});
Limpieza
El identificador devuelto suele incluir:
container— elemento raízclose()— cierra la interfaz (si corresponde)unmount()— desmonta y limpia
Inserción de interfaz (Doc Search)
Para temas y plugins personalizados, AI‑Kit también puede representar la interfaz Doc Search dentro de un elemento de destino:
WpSuite.plugins.aiKit.features.renderSearchComponent(args)→ devuelve unAiWorkerHandle
Esto es lo que usan el bloque y el shortcode AI‑Kit Doc Search en el frontend.
Ejemplo mínimo: representar Doc Search en un contenedor
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,
});
Acceso al almacén (avanzado)
AI‑Kit expone un almacén de creación diferida:
WpSuite.plugins.aiKit.features.store→Promise<Store>
Resulta útil si creas una interfaz personalizada y quiere observar ajustes o diagnósticos.
const storePromise = globalThis.WpSuite?.plugins?.aiKit?.features?.store;
const store = storePromise ? await storePromise : null;
