🌑 Aura AI Chat — The Velvet Void

A premium dark-themed AI character chat application built with React, Vite, Zustand, and Google Gemini API.

Experience immersive, persona-calibrated AI character roleplay, streaming responses, multi-character group chats, autonomous long-term memory extraction, and voice narration — wrapped in an exquisite obsidian & terracotta design system.

🔗 Live Demo:https://prashant371.github.io/aura/
💻 GitHub:https://github.com/prashant371/aura

---

🌟 Overview

Aura AI Chat is an AI-native roleplay and character conversation platform built with React 18 and Google Gemini API. Unlike generic, plain-text chatbot interfaces, Aura delivers a deeply atmospheric user experience centered around "The Velvet Void" aesthetic — combining high-contrast obsidian backgrounds, warm terracotta highlights, Cormorant Garamond typography, and smooth micro-animations.

Users can engage in one-on-one roleplay with 8 pre-configured AI personas, create fully custom characters, initiate multi-character group room conversations, extract persistent user memories across sessions, and listen to spoken responses via Web Speech API voice synthesis.

---

🚀 Key Features

• 🎭 8 Pre-Configured Personas: Distinct, curated characters across Sci-Fi, Dark Fantasy, Stoic Philosophy, Anime, Psychology, and Cosmic Exploration — each with calibrated system instructions, tone parameters, and unique avatars.
• 💬 Streaming Gemini AI Responses: Powered by Google Gemini API (gemini-1.5-flash / gemini-2.5-flash) for low-latency streaming text generation.
• 🗣️ Voice Playback & Speech Synthesis: Integrated Web Speech API (speechSynthesis) narrates character replies with pitch and rate modulation customized per character.
• 👥 Multi-Character Group Chat: Create custom group rooms where multiple AI personas interact with both the user and each other in a multi-agent dialogue loop.
• 🧠 Autonomous Long-Term Memory System: Automatically analyzes conversation history to extract key facts, preferences, and personal details about the user, injecting them as contextual memory in future turns.
• 🎨 Custom Character Creator Studio: Build and publish custom AI personas with custom system prompts, avatar URLs, greeting messages, personality traits, and speech parameters.
• 🖼️ In-Chat Image Generation: Direct integration for requesting and rendering generated visual assets within the chat stream.
• 🔞 Configurable Safety Controls: Adjustable Gemini safety thresholds (BLOCK_NONE, BLOCK_MEDIUM, BLOCK_HIGH) for creative freedom.
• 💾 Zustand State Persistence: Complete client-side state management storing character profiles, active chat rooms, memory graphs, and local API keys in localStorage.
• 🌑 "The Velvet Void" Design System: Custom luxury dark theme featuring obsidian (#050508), terracotta (#C85A32), gold accents (#D4AF37), Cormorant Garamond headings, and glassmorphism panels.

---

🛠 Tech Stack

Layer	Technology
Frontend Framework	React 18 (Vite Build System)
State Management	Zustand (with persist middleware for LocalStorage sync)
AI Model & API	Google Gemini API (gemini-1.5-flash / gemini-2.5-flash)
Audio & Voice	HTML5 Web Speech API (SpeechSynthesisUtterance)
Typography	Google Fonts (Cormorant Garamond & Outfit)
Styling System	Custom CSS3 Variables, Glassmorphism, CSS Grid/Flexbox
Deployment	GitHub Pages (Client-Side Single-Page Application)

---

🧠 Technical Architecture & Engineering Highlights

┌─────────────────────────────────────────────────────────────┐
│ React 18 UI Shell │
│ │
│ ┌──────────────────┐ ┌─────────────────┐ ┌─────────────┐ │
│ │ Character Select │ │ Group Chat Room │ │ Memory Hub │ │
│ └────────┬─────────┘ └────────┬────────┘ └──────┬──────┘ │
└───────────┼─────────────────────┼──────────────────┼────────┘
│ │ │
▼ ▼ ▼
┌─────────────────────────────────────────────────────────────┐
│ Zustand Global State Store │
│ (Active Persona, Memory Graph, Chat Logs, API Key) │
└───────────┬─────────────────────────────────────────────────┘
│
├──────────────────────────┬──────────────────────────┐
▼ ▼ ▼
┌───────────────────────┐ ┌───────────────────────┐ ┌───────────────────────┐
│ Google Gemini API │ │ Web Speech API │ │ LocalStorage Sync │
│ (Streaming Chat) │ │ (Voice Synthesis) │ │ (Client State) │
└───────────────────────┘ └───────────────────────┘ └───────────────────────┘

1. Memory Graph Extraction Pipeline

During active conversation turns, a background routine sends user messages to a specialized Gemini extraction prompt. Extracted user facts (e.g., "User is a software engineer", "Prefers sci-fi over fantasy") are appended to the character's long-term memory store and prepended to future system prompts:

SystemPrompt=`${BaseCharacterPrompt}[RECALLED MEMORIES ABOUT USER]:${userMemories.map(m=>`- ${m}`).join('\n')}`

2. Multi-Agent Group Chat Orchestration

In Group Chat mode, the application coordinates multi-character turns. When the user sends a message, the room manager loops through participating characters, prompting each persona with room history while preserving individual system prompts and character identities.

3. Pure Client-Side Privacy Architecture

• The Gemini API key is stored securely in browser localStorage.
• All requests flow directly from the client browser to Google's official API endpoints via HTTPS.
• No intermediary proxy server or database logs user conversations or personal memories.

---

📁 Project Structure

aura/
├── index.html # Main HTML entry point & font links
├── vite.config.js # Vite bundler configuration
├── package.json # Package dependencies & npm scripts
├── style.css # "Velvet Void" design system tokens & component styles
├── app.js # Core React application components & Zustand store
├── test_gemini.js # API connection test script
└── README.md

---

💻 Running Locally

Prerequisites

• Node.js (v18+)
• A Google Gemini API Key

Setup Instructions

1. Clone the repository:

   git clone https://github.com/prashant371/aura.git
   cd aura

2. Install dependencies:

   npm install

3. Launch development server:

   npm run dev

4. Open http://localhost:5173 in your browser.
5. Click Settings in the top navigation bar and enter your Gemini API Key.

---

🚀 Future Roadmap

• WebSockets support for real-time multiplayer AI roleplay rooms.
• ElevenLabs / WebRTC voice synthesis integration for human-grade voice acting.
• Export / Import character cards in JSON / TavernAI format.
• Vector database (Pinecone/ChromaDB) semantic search for massive long-term memory retrieval.

---

📄 License

This project is open source under the MIT License.