🏢 Exterior • 🚪 Reception • 👔 Vision • 📦 Product • ⚙️ Engineering • 🤖 Intelligence Lab • 🎯 Command Center

---

🏢 Exterior — Project Overview

Attribute	Details
Project Name	FlipAI
Version	1.0.0-beta
Status	Active Development
Type	Social AI Chat Application
Primary Stack	React, TypeScript, Wouter, TailwindCSS
Repository	prithishmisra23/FlipAI

"Bridging the gap between personal AI assistance and social discovery."

---

🚪 Reception — About the Project

FlipAI is a modern, responsive conversational AI interface that blends private chat capabilities with a public social feed and community leaderboard.

User Mapping

User Persona	Primary Use Case
Casual User	Ask questions, generate content, and explore the public feed.
Power User	Manage multiple chat threads and climb the community leaderboard.
Content Creator	Share interesting AI chat snippets to the global feed.

The Core Problem Solved

❌ Before
- Isolated AI chats stuck in personal silos
- Clunky interfaces with slow streaming responses
- No sense of community or shared discovery

✅ After
+ Seamless sharing of AI insights to a public feed
+ Lightning-fast UI built for real-time text streaming
+ Gamified leaderboards to encourage high-quality prompts

---

👔 Vision Floor

Design Philosophy

Principle	Application
Fluid Interactions	Streaming text generation is perfectly synchronized with UI scroll behaviors.
Social First	Good AI interactions should be easily broadcasted.
Minimalist Aesthetic	The UI gets out of the way of the content.

---

📦 Product Floor

Feature Set

Feature	Status	Description
💬 Active Chat	🟢 Live	Core conversational interface with real-time streaming hooks.
🌐 Public Feed	🟢 Live	Global feed of shared AI chats and insights.
🏆 Leaderboard	🟢 Live	Community ranking based on upvotes and prompt quality.
🧠 LLM Router	🟡 Beta	intelligent routing between different AI models (GPT-4, Claude).

🌊 User Flow: Chat Generation

flowchart TD
    A[User Submits Prompt] --> B[Append to UI as User Message]
    B --> C[Send to API Gateway]
    C --> D[LLM Provider]
    D --> E[Receive Data Stream]
    E --> F[useChatStream Hook]
    F --> G[Render Markdown Chunk-by-Chunk]

Loading

---

⚙️ Engineering Floor

System Architecture

graph TB
    Client[React SPA] --> API[Backend API]
    API --> LLM[LLM Gateway / OpenAI]
    API --> DB[(PostgreSQL)]
    
    subgraph Frontend
    Client --> Chat(Chat Interface)
    Client --> Feed(Social Feed)
    Client --> Stream(Stream Parsers)
    end

Loading

Technology Stack

Layer	Technology	Rationale
Frontend Framework	React 19 + Vite	High-performance dashboard rendering.
Streaming	Fetch API + custom hooks	Low-latency handling of SSE (Server-Sent Events).
Styling	TailwindCSS	Utility-first CSS for complex data grid layouts.

---

🤖 Intelligence Lab

AI Integration Details

FlipAI uses a flexible API architecture designed to swap LLM providers seamlessly.

Capability	Model Status	Rationale
Fast Completion	Llama 3 / GPT-3.5	Used for simple tasks and quick feed generation.
Deep Reasoning	GPT-4o / Claude 3.5	Used for complex coding or analytical tasks.

---

🎯 Command Center

Current Release Status: v1.0.0-beta

• Initial scaffold and routing setup.
• Chat UI, Feed UI, and Leaderboard scaffolding.
• Custom use-chat-stream hook built.
• Pending: Live backend connection to OpenAI/Anthropic APIs.
• Pending: User authentication and persistent sessions.

Known Limitations & Mitigation

Incomplete Feature	Current Mitigation	Target Milestone
Live LLM Connection	use-chat-stream currently simulates typing. Requires live API keys in backend.	v1.1.0
Auth System	Feed is public. Requires Supabase/Clerk for proper user profiles.	v1.2.0

---

"Amplify your thoughts."