DEV Community

aileen vl
aileen vl

Posted on • Edited on

WebAI - Using Google Built-in AI APIs

#webai #ai #googleio

With the many advancements in artificial intelligence, it's common to experience certain challenges.

Among them are the feelings of being left behind at work or falling short if you're not actively building or creating AI-powered apps.

But what if I told you that you can now use language models and machine learning directly from your browser?

This is possible regardless of whether you're a web developer or not — even if you have no prior experience working with AI.

This new opportunity comes in the form of Web AI:

An initiative that allows you to run AI models locally in the browser without sending data to the cloud.

What is Web AI?

Web AI is a way to use language models directly from the Chrome browser, thanks to Google’s Gemini Nano model.

This model is designed to run on your own computer (desktop or laptop), which offers two big advantages:

  • Greater privacy, since data doesn’t get sent to external servers
  • Less dependence on internet connectivity, as everything is processed on your device

The best part? You can start experimenting with these tools without having to install anything complex or waste valuable resources like your time.

Chrome’s New Built-In AI APIs

Google is testing a set of AI APIs built directly into Chrome.

They are part of an experimental feature (origin trial) available from Chrome versions 131 to 137.

Image description

Here’s what each API does:

  1. Translator API

    Dynamically translates user-generated or changing content.

  2. Language Detector API

    Automatically detects the language of a given text.

  3. Summarizer API

    Summarizes long texts — perfect for lengthy articles, emails, or dense content.

  4. Writer & Rewriter API

    • Writer: generates new text based on a specific task (e.g., product descriptions or emails)
    • Rewriter: restructures and improves an existing piece of text.

  5. Prompt API

    Allows you to directly interact with the language model, unlocking more advanced features (though it requires some understanding of prompt engineering).

How to Try Them

Google has enabled limited origin trials for each API. To participate:

  1. Choose the API you want to try:

    • Translator API
    • Language Detector API
    • Summarizer API
    • Prompt API

  2. Click Register

  3. Enter your site’s origin or extension ID (e.g., chrome-extension://YOUR_EXTENSION_ID)

  4. Submit the form and copy the provided token

  5. Add that token to the pages where you want the API to be enabled

  6. If you're building a Chrome extension, follow the specific instructions for extensions

Technical Requirements

To use these APIs in your browser, you’ll need:

  • Chrome version 131 to 137
  • Windows 10/11 or macOS 13 or higher
  • At least 22 GB free on the drive where your Chrome profile is stored
  • GPU with more than 4 GB of VRAM
  • Unmetered internet connection

⚠️ Note: These APIs do not work on mobile devices (yet).

How to Enable in Chrome

  1. Open Chrome and go to:

    chrome://flags/#prompt-api-for-gemini-nano

  2. Enable the corresponding flag

  3. Restart Chrome

How to use them

  • Translator API 
const translator = await Translator.create({
  sourceLanguage: "en",
  targetLanguage: "ja"
});

const text = await translator.translate("Hello, world!");
const readableStreamOfText = await translator.translateStreaming(`
  Four score and seven years ago our fathers brought forth, upon this...
`);
Enter fullscreen mode Exit fullscreen mode
  • Language Detector API 
const detector = await LanguageDetector.create();

const results = await detector.detect(someUserText);
for (const result of results) {
  console.log(result.detectedLanguage, result.confidence);
}
Enter fullscreen mode Exit fullscreen mode
  • Summarizer API 
const summarizer = await Summarizer.create({
  sharedContext: "An article from the Daily Economic News magazine",
  type: "headline",
  length: "short"
});

const summary = await summarizer.summarize(articleEl.textContent, {
  context: "This article was written 2024-08-07 and it's in the World Markets section."
});
Enter fullscreen mode Exit fullscreen mode
  • Writer & Rewriter API 
const writer = await Writer.create({
  tone: "formal"
});

const result = await writer.write(
  "A draft for an inquiry to my bank about how to enable wire transfers on my account"
);
Enter fullscreen mode Exit fullscreen mode 
const rewriter = await Rewriter.create({
  sharedContext: "A review for the Flux Capacitor 3000 from TimeMachines Inc."
});

const result = await rewriter.rewrite(reviewEl.textContent, {
  context: "Avoid any toxic language and be as constructive as possible."
});
Enter fullscreen mode Exit fullscreen mode
  • Prompt API 
const session = await LanguageModel.create();

// Prompt the model and wait for the whole result to come back.
const result = await session.prompt("Write me a poem.");
console.log(result);

// Prompt the model and stream the result:
const stream = await session.promptStreaming("Write me an extra-long poem.");
for await (const chunk of stream) {
  console.log(chunk);
}
Enter fullscreen mode Exit fullscreen mode

My experience

I had the incredible opportunity to collaborate in a project to use this API's to help write with a Chrome extension, I thought right away how valuable that was, having so many things to read, write and share about, we are in the time where GenAI is being used to create content, but how can we keep it personal, valuable and human? I'm truly amazed by the power of AI, I myself am a web Developer and this type of APIs definitely helps you get acquainted to the use and benefits of AI while in the same space you have experience. We web developers shape a lot of what users consume day to day on the web, so it only makes sense for us to have the ability to create solutions using AI, to enhance the users experience, to help improve a product, to reinvent how the users use the web today and also how they are growing to learn how to interact with it.

Not only to mention, the close interaction web developers have to browsers, our daily tool to work with most of our projects, having the API's available just the same way we interact with other browser API's is an incredible approach by Google, also browsers have evolved so much with the power of resources available to run this models. The Chrome team continues to help evolve the WebAssembly and WebGPU standards to improve the web platform for machine learning.

The Good

  • The ability to run in the browser
  • Provide any user a way to run models without worrying about how to run them if not enough compute in cloud or locally
  • The API's to help write content one of the most useful task in GenAI today
  • The support and documentation provided by the team and forums to get help on building with these API's
  • Gemini Nano is a neat model to tackle these task
  • The focus and power given to web developers to open new possibilities to build the next frontier of web apps
  • Familiar syntax of the API's if you are already used to using other llms from the cloud

What can be improved?

  • Since it's still experimental, it can definitely fail at times—especially in the Prompt API. In several cases, the model didn’t return any response at all, not even a low-quality one. It would silently fail or hang, particularly on longer or more structured prompts.

  • Memory usage would sometimes skyrocket, causing the browser to slow down or freeze temporarily. I was testing on a MacBook Pro M1 with 16GB RAM. Generation tasks typically took around 20 seconds, and summarization tasks around 12 seconds. Running multiple tasks in sequence or on larger content made the slowdown much more noticeable.

  • Context window limitations often meant that RAG (retrieval-augmented generation) was necessary. Depending on the content size, this could lead to needing a cloud-hosted vector database, which defeats the purpose of a purely client-side setup. This was especially noticeable when summarizing larger documents—while there are workarounds, it still introduces friction and limits flexibility.

  • I'd love to see more use cases in Google products. Nothing validates a feature better than seeing it applied in real-world tools. Google has many powerful products (like Gmail, Docs, Sheets, etc.) that could benefit from this technology, but we’re not yet seeing it showcased or integrated.

  • Consider enabling support for more LLM models in-browser, or improving the current nano model's capabilities (e.g., quantization, progressive loading, caching strategies). More flexibility here would allow broader experimentation and more robust client-side apps.

*Lastly, standardization across browsers would be ideal. I really admire the Chrome team's work on these APIs and hope that similar efforts will extend to other browsers. A cross-browser standard would help make the ecosystem more open, accessible, and developer-friendly.

Last words

WebAI represents a pivotal moment in how we interact with artificial intelligence. It brings the power of machine learning models closer to the people who use the web every day and even closer to those of us who build it.

By lowering the barriers to entry, it empowers developers, educators, creators, and learners to explore what AI can do without feeling overwhelmed. It invites us to reimagine the browser not just as a tool for accessing content, but as a platform for creativity, intelligence, and innovation.

We’re just scratching the surface of what’s possible. But if this is the beginning, I’m incredibly excited to see where it leads.

Top comments (0)