About the Project

project github link : https://github.com/Google-Chrome-Built-in-AI-Challenge/CSChatBot

Inspiration

The idea for CSChatBot began with a simple question:
Can we create a fully functional AI chatbot without any cloud dependency?

Most chatbots rely on server-side models, meaning every user message must be sent to a remote server.
This exposes privacy risks, increases latency, and breaks functionality when offline.

When Chrome announced its Built-in AI (Gemini Nano) capabilities, I realized this was the perfect foundation to explore a truly local-only AI experience — one that runs entirely within the browser itself.

---

What I Built

CSChatBot is a 100% client-side AI chatbot powered by Chrome’s Gemini Nano and the Built-in AI API Suite (Prompt API, Writer API, Translator API).
It enables users to:

• Chat, translate, proofread, and summarize text directly in the browser
  
• Register FAQs and Markdown articles to teach the chatbot about a brand or product
  
• Customize the chatbot’s persona — tone, style, and greeting — without writing a single line of code
  
• Experience instant, private, and offline responses with zero data transmission

The entire system runs inside a React-based browser environment with no external database, backend, or API calls.

---

What I Learned

• Browser AI can be powerful. Gemini Nano performs real-time inference entirely on-device.
  
• Prompt design matters. Persona tuning, translation normalization, and FAQ routing rely on well-structured multi-stage prompts.
  
• LocalStorage can act as a lightweight database. It’s enough to simulate admin tools like FAQ management, persona presets, and document learning.
  
• Privacy and UX can coexist. A fast, private AI experience feels more trustworthy to users — especially when you can say “nothing leaves your device.”

---

How I Built It

The project architecture is fully front-end:

1. React + TypeScript for UI and routing
   
2. React-Chatbot-Kit to manage dialogue flow
   
3. Chrome’s Built-in AI APIs for inference and translation
   
4. LocalStorage to store persona data, FAQs, and Markdown documents
   
5. A custom pipeline that performs:
   • Language detection and normalization
     
   • FAQ pre-filtering and intent matching
     
   • Document search and citation
     
   • Persona-based style correction
     

All processing occurs client-side, creating a truly offline-first chatbot.

---

Challenges

• Local model initialization: Handling Gemini Nano availability checks and fallback behavior was critical for stability.
  
• Translation consistency: Maintaining multilingual accuracy between English (model language) and Korean (user input) required custom normalization logic.
  
• FAQ similarity matching: Implementing semantic matching locally, without vector databases or embeddings, demanded creative use of prompt-based intent scoring.
  
• Performance optimization: Streaming long responses through the Prompt API while keeping UI responsive in React took fine-tuning.

---

What’s Next

Future development will focus on:

• Hallucination Control: Preventing AI from generating non-existent answers
  
• Hybrid Support: Allowing export/import of chatbot presets and knowledge files
  
• Enhanced Local Indexing: Faster article search with embedded keyword maps
  

---

Summary

CSChatBot demonstrates that modern browsers can host a complete AI system —
no servers, no data transfer, just instant intelligence.
It redefines what “personal AI” means by proving that privacy and performance can truly coexist, right inside the browser.

Built With

• promptai
• react
• translatorai
• writerai