AI in Your Browser - Chrome Prompt API Demos

Bringing AI directly into your browser - no servers, no subscriptions, complete privacy.

This project explores Google Chrome's experimental Prompt API, which brings small AI models directly into the browser. With Gemini Nano running locally on your device, you can perform AI tasks without sending data to external servers, paying subscription fees, or worrying about privacy concerns.

🎯 What This Project Does

This repository contains three interactive demos showcasing the capabilities of on-device AI in Chrome:

1️⃣ AI Creative Writing Assistant (app.html)

Feed it a theme, mood, and desired length, and watch as it generates:

• 📝 Poems - Creative verses on any topic
• 📖 Short Stories - Narrative fiction with your chosen mood
• 💬 Dialogues - Conversational exchanges between characters
• ✨ Custom Content - Any creative writing you can imagine

2️⃣ AI Translation Assistant (translate.html)

Instant translation between multiple languages, all running locally:

• 🌍 Supports 12+ languages (English, Spanish, French, German, Japanese, Chinese, and more)
• ⚡ Real-time translation without cloud API calls
• 🔒 Complete privacy - text never leaves your device
• 🆓 No translation API costs

3️⃣ AI Vision Assistant (image.html)

Upload an image and let the browser's AI describe what it sees:

• 🖼️ Image analysis and description
• 🎨 Visual content understanding
• 📷 Object and scene recognition
• 💻 All processing happens locally on your PC

🤔 Why This Matters

Traditional AI applications require:

• ☁️ Cloud infrastructure and server costs
• 💳 Subscription fees or per-use API charges
• 🔓 Sending your data to external servers
• 📶 Constant internet connectivity
• ⏱️ Network latency for every request

On-device AI changes this:

• ✅ Runs directly in your browser
• ✅ Zero server costs
• ✅ Complete data privacy
• ✅ Works offline (after initial model download)
• ✅ Instant responses with no network latency
• ✅ Perfect for browser extensions and web apps

🚀 How to Run

Prerequisites

1. Google Chrome v128 or later (as of July 2025)

   • Download from: https://www.google.com/chrome/

2. Enable Experimental Flags

   Navigate to these Chrome flags and enable them:

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

   After enabling, restart Chrome.

3. First Run Model Download

   • The first time you use the API, Chrome will download Gemini Nano (~1-2GB)
   • This is a one-time download
   • Subsequent uses will be instant

Running the Demos

Option 1: Simple HTTP Server (Python)

# Navigate to the project folder
cd c:\DevTemp\promptai

# Start a local web server
python -m http.server 8000

Then open your browser:

• Creative Writing: http://localhost:8000/app.html
• Translation: http://localhost:8000/translate.html
• Image Analysis: http://localhost:8000/image.html
• Basic Demo: http://localhost:8000/PromptAPISample.html

Option 2: Direct File Access

You can also open the HTML files directly in Chrome:

• Right-click on any .html file → "Open with" → Google Chrome

🛠️ How It Works

The Technology Stack

• Chrome Prompt API - Browser-native AI interface
• Gemini Nano - Google's compact on-device AI model
• Vanilla JavaScript - No frameworks, pure web standards
• HTML5 & CSS3 - Modern, responsive interfaces

Behind the Scenes

1. Availability Check

   const availability = await LanguageModel.availability();

2. Session Creation

   const session = await LanguageModel.create({
     topK: params.defaultTopK,
     temperature: params.defaultTemperature
   });

3. Prompt Execution

   const response = await session.prompt(userInput);

4. Multimodal Input (for image analysis)

   const session = await LanguageModel.create({
     multimodal: true
   });
   const response = await session.prompt([text, imageBlob]);

Key Features

• Download Progress Monitoring - Track model download status
• Session Management - Efficient resource handling
• Error Handling - Graceful fallbacks for unsupported systems
• Responsive UI - Works on desktop and tablet devices
• Real-time Generation - Instant AI responses

📁 Project Structure

promptai/
│
├── app.html                    # Creative Writing Assistant
├── translate.html              # Translation Assistant  
├── image.html                  # Vision/Image Analysis
├── PromptAPISample.html        # Basic API test demo
├── code.html                   # Demo screenshots gallery
│
├── images/                     # Screenshots and assets
│   ├── 1.png                   # Creative writing demo
│   ├── 2.png                   # Translation demo
│   ├── 3.png                   # Image analysis demo
│   └── joke-visual.png         # Sample test image
│
└── cgi-bin/                    # Web server utilities
    ├── web.py                  # Simple Python CGI script
    └── web.md                  # Server instructions

🌟 Features by Demo

Creative Writing Assistant

• 4 content types (poem, story, dialogue, custom)
• Mood selection (happy, sad, mysterious, humorous, etc.)
• Length control (short, medium, long)
• Theme-based generation
• Beautiful gradient UI with animations

Translation Assistant

• 12+ language support
• Bidirectional translation
• Swap source/target languages
• Real-time translation
• Clean, intuitive interface
• Character count display

Image Description Assistant

• Drag-and-drop image upload
• File browser support
• Detailed image analysis
• Custom prompt support
• Example prompts included
• Sample images for testing

🔮 Future Possibilities

This is just the beginning. The Prompt API opens doors to:

• 🔌 Browser Extensions - AI-powered tools without backend infrastructure
• 📝 Content Tools - Writing assistants, grammar checkers, summarizers
• 🎨 Creative Apps - Story generators, code helpers, brainstorming tools
• 🔒 Privacy-First Apps - Sensitive data processing without cloud exposure
• 🌐 Offline-First Apps - AI that works without internet
• 📊 Data Analysis - Local processing of sensitive information

⚠️ Current Limitations

• Model Size - Gemini Nano is compact; complex tasks may need larger models like ChatGPT or Claude
• Browser Support - Currently Chrome 128+ only (Edge Canary has experimental support)
• Experimental Status - API may change before stable release
• Hardware Requirements - Works best with modern CPUs and GPUs
• Initial Download - ~1-2GB model download on first use

🌐 Browser Support

Browser	Status	Model
Chrome 128+	✅ Available (experimental)	Gemini Nano
Edge Canary	🧪 Testing	Phi-4
Firefox	❌ Not yet	-
Safari	❌ Not yet	-

📚 References & Resources

• Chrome Prompt API Documentation
• Web Machine Learning Community Group
• Gemini Nano Information
• Built-in AI Early Preview Program

🤝 Contributing

Feel free to:

• 🐛 Report bugs or issues
• 💡 Suggest new demo ideas
• 🔧 Submit pull requests
• 📖 Improve documentation
• 🌟 Share your experience with the Prompt API

📝 Development Notes

The HTML, CSS, and JavaScript for these demos were generated with assistance from Claude AI, following the official Prompt API documentation from the Web Machine Learning Community Group.

📄 License

This project is open source and available under the MIT License.

👤 Author

Created as an exploration of Chrome's experimental Prompt API and on-device AI capabilities.

Blog Post: AI is now inside your browser – Prompt API
Date: July 17, 2025

💬 Feedback

I'd love to hear about your experience with these demos! If you try them out, please share:

• What worked well
• What could be improved
• Ideas for new demos
• Your thoughts on on-device AI

---

⭐ If you find this project interesting, please star it on GitHub!

Built with curiosity, powered by on-device AI 🚀