A modern, open-source web assistant built to demonstrate how AI interfaces work under the hood โ ideal for students, teachers, schools, and anyone curious about building their own AI-powered chat system.
This project is part of the Slizยฎ ecosystem and was created to help beginners understand the mechanisms behind conversational AI, UI logic, and browser-based local data storage.
A clean, responsive chat UI that mimics modern AI assistants โ messages, avatars, typing animations, etc.
Uses gemini-2.0-flash:generateContent to provide real-time responses.
Your prompts are wrapped with a custom instructional system for fine-tuned output behavior.
Conversations are saved inside browser cookies โ no backend needed.
Inside the built-in settings modal, users can:
- Change display name
- Set a custom avatar
- Adjust message border radius
- See live avatar preview
Smooth mobile experience with slide-in sidebar and adaptive layout.
You get a modern typing indicator for AI messages โ extra โจ vibes.
(Insert your screenshots here, e.g. interface.png, settings.png)
| Layer | Technology |
|---|---|
| Frontend | HTML5, CSS3, JavaScript (Vanilla) |
| AI Backend | Google Gemini API |
| Storage | Cookies |
| Icons | SVG / PNG |
| Compatibility | Chrome, Firefox, Safari, Mobile browsers |
The structure is split into:
- Sidebar (chat list, new chat button, settings)
- Main area (messages)
- Modal window (settings)
- Input area (message field + send button)
All elements are dynamically updated with renderChats() and renderMessages().
Chats are stored as objects:
{
id: 12345678,
title: "New Chat",
messages: [
{ role: "user", content: "Hello!" },
{ role: "ai", content: "Hi there!" }
],
createdAt: "2024-01-01T00:00:00Z"
}Each update triggers:
setCookie('fhomeai_data', JSON.stringify({chats, settings}), 365);This makes the project fully local and privacy-friendly.
When user sends a message:
- It's added to chat history
- Visual typing indicator appears
- All previous messages are assembled into the Gemini request format
- The user message is wrapped in a custom instruction block
- API returns the answer
- AI response is appended to chat
You need a Google AI Studio API key: https://aistudio.google.com
Update the key:
const API_KEY = "YOUR_API_KEY_HERE";-
Clone the repo:
git clone https://github.com/SlizR/FHome_AI.git
-
Enter the directory:
cd FHome_AI -
Open
index.htmlin a browser. Thatโs it โ no backend, no dependencies. Itโs 100% client-side.
If you want local hosting:
npx serve/
โโโ index.html # main app file
โโโ icon.png # project icon
โโโ README.md # documentation
โโโ LICENSE # Apache 2.0 license
All main UI gradients live in CSS:
background: linear-gradient(135deg, #0a4d3c, #1a7a5e);Edit the getSystemInstruction() function:
function getSystemInstruction(userMessage) {
return `
...instructions...
Please answer the following message: ${userMessage}
`.trim();
}Change the endpoint:
const API_URL = "https://generativelanguage.googleapis.com/v1beta/models/another-model:generateContent";- Cookies can store limited data (roughly 3โ4 MB)
- No streaming support โ responses appear after full generation
- Switch cookies โ IndexedDB
- Add real-time streaming
- Add dark/light theme toggle
- Add custom model selection menu
- Cloud sync for chats
This project is licensed under the Apache License 2.0.
- Original author: Slizยฎ
- First public version: Mavox-ID (Creator Slizยฎ)
Full license is available in the LICENSE file.
FHome AIยฎ was built to teach โ not to replace industrial AI tools โ and shows how surprisingly small and understandable an AI chat interface can be.
If you use or modify it, just keep the attribution lines (as required by the Apache 2.0 license) and enjoy building cool things ๐ (Latest stable version: 939.stable)
For the beta and two stable versions, you received news via site notifications and important information about major updates, as well as a new counter for how many requests remain to FHome AIยฎ (50 per 24 hours; and this is true for AI without registration: Go to AI, write, and leave a AI website).
- Latest version of project: v939.stable
- Latest stable version: v939.stable
- Previous version: v938.stable
- Latest alpha version: v902.alpha
- Latest beta version: v937.beta
- Latest LTS version: v901.latest
- Latest test version: v920.testm
- First version: n.a.start.gbl.game_doom
The first version of the project was a game with AI, not just AI. The project was changed later, but this version (the first one) was private and cannot be accessed. (Game name: Cardoom, a light version of a similar game to Doom, can be launched using 15 bytes of information and a handler) The game is no longer available and has been removed.
