Introduction

Chrome ha empezado a integrar modelos de IA directamente en el navegador. Esto significa que, sin usar servicios externos ni APIs en la nube, podemos acceder a capacidades como detección de idioma, traducción, resumen, reescritura o generación de texto. Todo esto ocurre localmente, usando el motor de Chrome y, cuando está disponible, modelos como Gemini Nano (que se descarga la primera vez que lo usas).

El resultado: IA integrada, rápida y con más privacidad. Y lo mejor es que se puede usar en páginas web tradicionales, aplicaciones web modernas e incluso extensiones de Chrome.

¿Qué son las APIs de IA en Chrome?

Son un conjunto de APIs —algunas estables y otras aún experimentales— que permiten interactuar con modelos integrados directamente en el navegador. Entre las más destacadas:

• Language Detector: detecta automáticamente el idioma de un texto.
• Translator: traduce contenido dentro del navegador.
• Summarizer: genera resúmenes breves a partir de textos largos.
• Writer: crea textos nuevos según una instrucción.
• Rewriter: modifica un texto existente cambiando tono, estilo o estructura.
• Proofreader: corrige gramática y estilo.
• Prompt API: acceso directo al modelo para prompts generalistas.

Estas APIs permiten añadir funciones “inteligentes” sin depender de servicios externos. Incluso pueden probarse directamente desde la consola de desarrollador de Chrome. Permiten añadir funciones “inteligentes” a tus aplicaciones sin depender de servicios externos.

Algunos ejemplos de estas APIS

Detectar el idioma de un texto y traducir dicho texto al Español

const lang = await navigator.ai.languageDetector.detect(text);

if (lang !== 'es') {
  const translator = await Translator.create();
  const out = await translator.translate(text, { targetLanguage: 'es' });
  console.log(out);
}

const lang = await navigator.ai.languageDetector.detect(text);

if (lang !== 'es') {
  const translator = await Translator.create();
  const out = await translator.translate(text, { targetLanguage: 'es' });
  console.log(out);
}

Reescribir un texto con otro tono

const rewriter = await Rewriter.create({
  tone: "friendly",
  length: "short"
});

const output = await rewriter.rewrite({
  text: "Por favor proceda a validar la configuración del sistema."
});

console.log(output);
// → "¿Puedes echar un vistazo rápido a la configuración?"

const rewriter = await Rewriter.create({
  tone: "friendly",
  length: "short"
});

const output = await rewriter.rewrite({
  text: "Por favor proceda a validar la configuración del sistema."
});

console.log(output);
// → "¿Puedes echar un vistazo rápido a la configuración?"

¿Se pueden usar en proyectos con Node, NestJS o Next.js?

Esta es una duda habitual, especialmente si sueles probar librerías en pequeños proyectos de backend o full stack. En este caso, la respuesta es simple:

Backend Node / NestJS

No pueden usarse.
Estas APIs necesitan el entorno de Chrome, por lo que no funcionan en Node ni en entornos puramente backend.

Next.js

Depende del lado donde se ejecuten:

• Componentes de cliente (client components) → Sí funcionan.
• Componentes de servidor, API routes o middleware → No funcionan.

También pueden usarse sin problemas en cualquier SPA hecha con React, Vue o similares, siempre que el código se ejecute en el navegador.

Un ejemplo de componente podría ser:

"use client";

export default function SummaryComponent() {
  const summarize = async (text) => {
    const summarizer = await Summarizer.create();
    const result = await summarizer.summarize(text);
    console.log(result);
  };

  <button onClick={() => summarize("Texto a resumir")}>Resumir</button>
}

"use client";

export default function SummaryComponent() {
  const summarize = async (text) => {
    const summarizer = await Summarizer.create();
    const result = await summarizer.summarize(text);
    console.log(result);
  };

  <button onClick={() => summarize("Texto a resumir")}>Resumir</button>
}

¿Cómo encajan en un proyecto real?

El reparto de responsabilidades quedaría así:

Backend (NestJS/Node):

• Lógica de negocio
• Gestión de datos
• Autenticación
• APIs propias

Frontend:
Uso de las APIs del navegador para:

• mejorar formularios
• generar texto dinámico
• traducir contenido
• ayudar al usuario a escribir
• resumir artículos o descripciones

Este modelo híbrido evita saturar el backend generando texto y te permite no depender de servicios de IA externos.

Conclusion

Chrome está empujando fuerte para que la IA forme parte del navegador, igual que la geolocalización o la cámara. Estas APIs abren la puerta a desarrollar funcionalidades muy potentes sin depender de servidores externos, con más privacidad y mejor rendimiento.

No sirven directamente en backend Node o NestJS, pero sí pueden integrarse sin problemas en proyectos Next.js (en el cliente) y en cualquier frontend moderno. Si el navegador del usuario lo soporta, puedes ofrecer experiencias de IA sin costos adicionales y con un setup mínimo.

Find out more at our blog