MythosAI - AI Storytelling App

An interactive, AI-powered storytelling platform where users can craft and visualize branching story paths — one choice at a time.

---

🚀 Overview

• 🧠 AI Plot Generation: Input a prompt, get 3 unique plot continuations.
• 🌲 Branch Visualization: Tree structure showing each decision path (selected & alternatives).
• 🔁 Rebranching: Backtrack at any point and shape your story differently.
• 💾 Save & Resume: Stories persist across sessions and can be rebuilt.
• 📜 Final Story Compilation: Linear story based on your choices.

---

🧱 Tech Stack

• Frontend: React, React Router, React Flow, Axios, Tailwind CSS, Toastify
• Backend: Node.js, Express.js, MongoDB, JWT, OpenAI API (or local AI)
• AI Logic: config/ai.js handles plot generation and distribution

---

📂 Folder Structure

ai-storytelling-app/
│
├── client/                # React frontend
│   ├── pages/             # StoryPage, BranchPage
│   ├── components/        # BranchTree, BranchNode, etc.
│   ├── context/           # AppContext for auth/session
│   └── ...
│
├── server/                # Node.js backend
│   ├── models/            # storyModel, userModel
│   ├── config/ai.js       # AI logic
│   ├── middleware/        # authMiddleware (JWT)
│   └── app.js             # Main backend routes

---

⚙️ Setup Instructions

1️⃣ Clone the repository

git clone https://github.com/your-username/ai-storytelling-app.git
cd ai-storytelling-app

2️⃣ Install dependencies

# Backend
cd server
npm install

# Frontend
cd ../client
npm install

3️⃣ Create .env file in server/

PORT=5000
MONGODB_URI=your_mongodb_connection_string
JWT_SECRET=your_jwt_secret
OPENAI_API_KEY=your_openai_key  # if using OpenAI

4️⃣ Run the app

# Backend
cd server
npm run dev

# Frontend
cd ../client
npm run dev

---

🧪 How It Works

1. User starts with a prompt (e.g., "A girl wakes up in a floating city").
2. AI returns 3 plot options → user selects one.
3. Each choice becomes a node in the tree.
4. At any node, user can rebranch by picking a different option.
5. When satisfied, user saves the story → saved as one compiled path with all branch metadata.

---

🔐 Auth & Sessions

• JWT-based login/register

• Token stored in localStorage

• Protected routes use authMiddleware

• In-memory session:

  • userInitialInput[userId]
  • sessionStory[userId]
  • sessionChoices[userId]

Cleared on save or logout.

---

📘 API Endpoints (Simplified)

Method	Route	Purpose
POST	/login	User login
POST	/register	User registration
POST	/get-recommendations	Get 3 AI-generated plots
POST	/rebuild-session	Restore session from saved story
POST	/save	Save/overwrite current story

---

📸 UI Highlights

• ✅ Story Page: Prompt, AI choices, and selection flow
• 🌿 Branch Page: Tree of all choices + rebranch
• 🧭 Navigation: navigate("/branch", { state: { storyId } })
• 🌈 Design: Tailwind for minimal aesthetic