teach-chrome-built-in-ai-with-examples

I want to make Chrome Built-In-AI easier for my students and others to get started, so I made one page that does most of the abilities and then smaller pages that get started with specific skills

Comment

Inspiration

This project, "Everything but the Kitchen Sink," was inspired by the need to provide students with a single, comprehensive, and beginner-friendly resource that demonstrates the full suite of Chrome's Built-in AI APIs. This is not about one tool; it is a showcase of an entire, on-device AI platform. It serves as a necessary starting point for students to explore every available client-side AI capability, from simple text-to-text to advanced multimodal and streaming applications.

What it Does (The Full Suite of Chrome Built-in AI)

This application demonstrates all major Chrome Built-in AI capabilities using static web pages and simple JavaScript. Each demo runs entirely on-device using models like Gemini Nano and specialized expert models, ensuring maximum privacy and speed once the model is downloaded.

The project includes working examples of:

  • LLM Prompt API: The foundational API, demonstrating core Generative AI capabilities, including both non-streamed and streaming (token-by-token) text output.
  • Multimodal Input: Examples showcasing the ability to process more than just text, including images and audio within a single prompt.
  • Summarizer API: Condensing long articles or documents into concise, useful summaries.
  • Translator API: Fast, on-device translation between multiple supported languages.
  • Language Detector API: Instantly identifying the language of any given text input.
  • Writer and Rewriter APIs: Demonstrating content creation from a prompt (Writer) and modifying the tone or style of existing text (Rewriter).
  • Proofreader API: Providing real-time, on-device grammatical and stylistic corrections.
  • Live Transcription (Web Speech API): While the other tasks use the LanguageModel APIs, this project includes a dedicated, simple Web Speech API example to show the correct tool for real-time, continuous audio transcription—a vital lesson in API selection.

How We Built It (For Students)

The project adheres to your teaching philosophy of simplicity, clarity, and foundational JavaScript:

  • Simple Code Structure: All examples are contained in simple, single-page HTML files with minimal-to-no CSS, making the JavaScript logic the focus.
  • Async/Await & myCamelCase: All asynchronous operations use the modern async/await pattern, and all variables and functions follow the preferred myCamelCase naming convention (e.g., myTranslateText, mySummarizerObject).
  • Static Links over Listeners: Functions are called using static onclick="..." links to simplify the event model for beginner coders.
  • Single Source of Truth: This "Everything" page acts as the central hub, linking to all basic and creative demos, giving students a clear starting point for every built-in AI feature.

Accomplishments That We're Proud Of

We are proud of consolidating the entire, complex landscape of Chrome's on-device AI into a set of simple, transparent, and functional examples. This approach demystifies the browser's powerful new capabilities, turning an advanced topic into an accessible coding lesson that truly empowers students to start creating with cutting-edge AI.

Built With

Share this project:

Updates