IA Rodando Direto no Navegador — Sem Servidor, Sem API Key

Imagina rodar um modelo de linguagem direto no Chrome, sem mandar nenhum dado para a nuvem, sem pagar por token, sem configurar servidor. Parece bom demais? Pois é exatamente isso que a Prompt API do Chrome faz.

O Google embarcou o Gemini Nano — uma versão compacta do Gemini otimizada para rodar on-device — dentro do próprio navegador. E criou uma API JavaScript nativa para que desenvolvedores front-end possam fazer inferência de IA com meia dúzia de linhas de código.

Eu testei, fuçei a documentação, li os relatos de devs no Hacker News, e vou te contar o que funciona, o que não funciona, e quando vale a pena trocar sua chamada de API por essa abordagem local.

O Que é a Prompt API (e Por Que Ela Existe)

A Prompt API é uma interface JavaScript nativa do Chrome que dá acesso ao Gemini Nano — um modelo de linguagem pequeno que roda inteiramente no dispositivo do usuário. Nada vai para a nuvem. Nenhum dado sai do navegador.

A motivação do Google é clara: privacidade e latência. Em vez de cada site precisar fazer chamadas para APIs como OpenAI ou Anthropic (pagando por token e dependendo de rede), o modelo já está ali, no computador do usuário.

O fluxo é simples:

1. O Chrome baixa o Gemini Nano automaticamente na primeira vez que um site usa a API
2. O modelo fica armazenado localmente (~22 GB de espaço necessário)
3. A inferência acontece via WebGPU/WebAssembly, sem servidor

Na prática, é como ter um “mini ChatGPT” embutido no navegador — só que menor, mais rápido para tarefas simples, e completamente offline depois do download inicial.

Requisitos: Nem Todo Mundo Pode Usar (Ainda)

Antes de sair codando, precisa saber que a Prompt API tem requisitos de hardware significativos:

Isso já corta uma fatia considerável dos usuários. Qualquer laptop com GPU integrada de 4 GB ou menos fica de fora. E mobile? Esquece — por enquanto.

A real é que o Google está mirando em desktops e laptops mais potentes primeiro. Faz sentido: rodar um LLM local exige recursos que a maioria dos smartphones simplesmente não tem.

Setup: Como Ativar a Prompt API no Chrome

Se você está no Chrome 138+ (Dev ou Canary), ativar é relativamente simples:

Passo 1: Habilitar as flags

Acesse chrome://flags e ative:

chrome://flags/#optimization-guide-on-device-model → Enabled
chrome://flags/#prompt-api-for-gemini-nano → Enabled

Para entrada multimodal (imagens e áudio):

chrome://flags/#prompt-api-for-gemini-nano-multimodal-input → Enabled

Passo 2: Verificar o download do modelo

Abra chrome://on-device-internals e confirme que o modelo Gemini Nano foi baixado. Na primeira ativação, o Chrome inicia o download automaticamente — mas pode levar alguns minutos dependendo da sua conexão.

Passo 3: Testar no console

Abra o DevTools (F12) e rode:

const availability = await LanguageModel.availability();
console.log(availability);
// 'available', 'downloading', ou 'unavailable'

Se retornar 'available', está tudo pronto.

Mão na Massa: Código Real com a Prompt API

Chega de teoria. Vamos ver como usar isso na prática.

Uso básico: uma pergunta, uma resposta

// Verifica se a API está disponível
const status = await LanguageModel.availability();

if (status !== 'unavailable') {
  // Cria uma sessão
  const session = await LanguageModel.create();

  // Faz uma pergunta
  const response = await session.prompt(
    'Resuma em uma frase o que é WebAssembly.'
  );

  console.log(response);
  // "WebAssembly é um formato binário que permite executar código
  //  de alto desempenho no navegador."
}

Sim, são literalmente 5 linhas de código útil. Sem fetch, sem API key, sem CORS.

Streaming: respostas em tempo real

Para respostas mais longas, o streaming evita que o usuário fique olhando para uma tela em branco:

const session = await LanguageModel.create();

const stream = session.promptStreaming(
  'Liste 5 boas práticas de segurança para APIs REST.'
);

for await (const chunk of stream) {
  document.getElementById('output').textContent = chunk;
}

O promptStreaming() retorna um ReadableStream que vai entregando tokens conforme o modelo gera. A experiência é idêntica ao que você vê no ChatGPT — o texto aparecendo letra por letra.

System Prompt: definindo o comportamento

Você pode configurar um “system prompt” para controlar como o modelo se comporta:

const session = await LanguageModel.create({
  systemPrompt: `Você é um assistente de code review. Analise o código
  fornecido e aponte problemas de segurança, performance e legibilidade.
  Seja direto e técnico. Responda em português.`
});

const review = await session.prompt(`
function login(user, pass) {
  const query = "SELECT * FROM users WHERE name='" + user + "' AND pw='" + pass + "'";
  return db.execute(query);
}
`);

console.log(review);
// O modelo vai identificar a SQL injection, falta de hash no password, etc.

Respostas estruturadas com JSON Schema

Uma das features mais úteis: você pode forçar o modelo a responder em um formato JSON específico.

const session = await LanguageModel.create({
  systemPrompt: 'Classifique o sentimento de textos.'
});

const schema = {
  type: 'object',
  properties: {
    sentiment: {
      type: 'string',
      enum: ['positivo', 'negativo', 'neutro']
    },
    confidence: {
      type: 'number'
    },
    keywords: {
      type: 'array',
      items: { type: 'string' }
    }
  },
  required: ['sentiment', 'confidence']
};

const result = await session.prompt(
  'O novo recurso ficou incrível, parabéns ao time!',
  { responseConstraint: schema }
);

const parsed = JSON.parse(result);
// { sentiment: 'positivo', confidence: 0.95, keywords: ['incrível', 'parabéns'] }

Isso é ouro para quem precisa de dados estruturados — classificação de reviews, extração de entidades, categorização automática. Sem regex, sem parsing manual.

Entrada multimodal: imagens e áudio

O Gemini Nano no Chrome também aceita imagens e áudio como entrada:

const session = await LanguageModel.create({
  expectedInputs: [
    { type: 'text' },
    { type: 'image' }
  ]
});

// Usando um elemento <img> da página
const imgElement = document.querySelector('#product-photo');

const description = await session.prompt([
  { role: 'user', content: [
    { type: 'text', value: 'Descreva este produto em uma frase para SEO.' },
    { type: 'image', value: imgElement }
  ]}
]);

Isso abre possibilidades interessantes: alt text automático para acessibilidade, descrição de produtos em e-commerce, análise de screenshots — tudo rodando localmente.

Gerenciamento de Sessões: O Que Ninguém Te Conta

Aqui mora um detalhe que a documentação oficial não enfatiza o suficiente: gerenciamento de memória.

Cada sessão consome recursos significativos. O Gemini Nano não é leve — ele precisa de VRAM da GPU para rodar. Se você criar sessões e esquecer de destruí-las, vai acumular consumo até o Chrome ficar lento.

let session;
try {
  session = await LanguageModel.create();
  const result = await session.prompt('...');
  // usa o resultado
} finally {
  // SEMPRE destrua a sessão quando terminar
  session?.destroy();
}

Outras dicas importantes:

// Monitorar uso de contexto
const usage = session.contextUsage;
console.log(`Tokens usados: ${usage.used} / ${usage.total}`);
// O Gemini Nano tem limite de ~4096 tokens de contexto

// Clonar sessão (preserva o contexto sem criar do zero)
const clone = await session.clone();

// Cancelar uma requisição em andamento
const controller = new AbortController();
const result = session.prompt('...', {
  signal: controller.signal
});
// Depois: controller.abort();

O limite de 4096 tokens de contexto e 1024 tokens por prompt é bem restritivo comparado com APIs na nuvem. Não dá para jogar um artigo inteiro e pedir um resumo, por exemplo.

Skills no Chrome: Prompts Viram Ferramentas de Um Clique

Em abril de 2026, o Google lançou uma feature complementar que turbina a Prompt API: Skills no Chrome.

A ideia é transformar prompts frequentes em ferramentas reutilizáveis. Você cria um “Skill” — basicamente um prompt salvo com nome e ícone — e ele vira um botão de um clique no Chrome.

Exemplos práticos:

• “Resumir página” — seleciona texto, clica no Skill, recebe resumo
• “Extrair dados de contato” — roda em qualquer página e puxa emails/telefones
• “Comparar produtos” — executa em múltiplas abas simultaneamente

O diferencial é a execução multi-tab: um Skill pode rodar em várias abas ao mesmo tempo. Imagina abrir 5 páginas de produtos diferentes e pedir para o Skill gerar uma tabela comparativa. Tudo local, tudo instantâneo.

Para desenvolvedores, Skills são como “atalhos de IA” que o próprio usuário pode criar e compartilhar. O Google está apostando nisso como a próxima camada de personalização do navegador.

Quando Usar (e Quando NÃO Usar) a Prompt API

Eu já vi gente empolgada querendo substituir toda a stack de IA por essa API. Calma. Ela tem um nicho muito específico.

Vale a pena usar quando:

NÃO use quando:

Comparação: Prompt API vs. APIs na Nuvem

Para deixar mais tangível, aqui vai uma comparação direta:

A Prompt API não substitui APIs na nuvem. Ela complementa. O cenário ideal é um sistema híbrido: tarefas simples (classificação, formatação, extração) rodam local via Prompt API, e tarefas complexas (geração longa, raciocínio, criatividade) vão para a nuvem.

Um Exemplo Prático: Review Classifier para E-commerce

Para sair do hello world, vou montar um classificador de reviews de produto que roda 100% no navegador:

class ReviewClassifier {
  #session = null;

  async init() {
    const available = await LanguageModel.availability();
    if (available === 'unavailable') {
      throw new Error('Prompt API não disponível neste dispositivo');
    }

    this.#session = await LanguageModel.create({
      systemPrompt: `You are a product review classifier. For each review,
      return JSON with: sentiment (positive/negative/neutral),
      rating_estimate (1-5), key_topics (array of strings),
      has_complaint (boolean). Be concise and accurate.`
    });
  }

  async classify(reviewText) {
    const schema = {
      type: 'object',
      properties: {
        sentiment: { type: 'string', enum: ['positive', 'negative', 'neutral'] },
        rating_estimate: { type: 'number', minimum: 1, maximum: 5 },
        key_topics: { type: 'array', items: { type: 'string' } },
        has_complaint: { type: 'boolean' }
      },
      required: ['sentiment', 'rating_estimate', 'key_topics', 'has_complaint']
    };

    const result = await this.#session.prompt(reviewText, {
      responseConstraint: schema
    });

    return JSON.parse(result);
  }

  destroy() {
    this.#session?.destroy();
  }
}

// Uso
const classifier = new ReviewClassifier();
await classifier.init();

const analysis = await classifier.classify(
  'Produto chegou rápido, qualidade excelente. Só achei o preço um pouco alto.'
);

console.log(analysis);
// {
//   sentiment: 'positive',
//   rating_estimate: 4,
//   key_topics: ['entrega', 'qualidade', 'preço'],
//   has_complaint: true
// }

classifier.destroy(); // Não esqueça!

Esse classificador roda no navegador do usuário. Sem backend, sem custo de API, sem latência de rede. Para um e-commerce com milhares de reviews, isso pode economizar centenas de dólares por mês em chamadas de API.

Monitorando o Download do Modelo

Um detalhe importante para UX: o Gemini Nano precisa ser baixado na primeira vez. São alguns gigabytes, e o usuário precisa de feedback:

const session = await LanguageModel.create({
  monitor: (monitor) => {
    monitor.addEventListener('downloadprogress', (event) => {
      const percent = Math.round(event.loaded * 100);

      // Atualiza uma barra de progresso na UI
      document.getElementById('ai-progress').style.width = `${percent}%`;
      document.getElementById('ai-status').textContent =
        `Baixando modelo de IA... ${percent}%`;
    });
  }
});

document.getElementById('ai-status').textContent = 'IA pronta!';

Se você simplesmente chamar LanguageModel.create() sem feedback, o usuário vai achar que a página travou. Sempre mostre progresso.

O Que Vem Pela Frente

A Prompt API ainda está em origin trial — não é um recurso estável do Chrome. Mas a direção é clara: o Google quer que IA local seja tão natural quanto usar localStorage ou fetch.

Alguns sinais do que está por vir:

• Mais idiomas: português, francês, alemão e coreano estão nos planos
• Modelos especializados: além do Gemini Nano genérico, modelos focados em tradução, código e visão
• Android: a API deve chegar ao Chrome mobile quando os chips mobile tiverem NPUs suficientes
• Integração com Web Workers: rodar inferência em background sem bloquear a thread principal

Para quem trabalha com front-end, vale começar a experimentar agora. A API é simples, a barreira de entrada é baixa, e quando isso sair do origin trial para GA, quem já tiver experiência vai estar na frente.

Se você quer testar hoje, a documentação oficial está no Chrome for Developers e existe um starter kit no GitHub que facilita o primeiro contato. A era da IA no navegador já começou — e desta vez, ela roda na sua máquina.