YomaAI — Creative Idea Generator

YomaAI is an AI-powered creative assistant that helps you brainstorm original, non-cliché ideas for your creative projects — manga, books, anime, comics, visual novels, games, and more.

Built with a unique hand-drawn paper notebook aesthetic.

Features

• 20 Flexible Settings — Fine-tune your idea: genre, country, medium, character names, tone, era, conflict type, power system, and more
• Additional Details — Free-text field for extra context: fanfiction source material, custom characters, lore, specific wishes, and more
• Fanfiction Support — Mention any existing universe (anime, manga, book, game) and Yoma will craft an idea within that world
• AI-Powered Generation — Supports Claude (Anthropic) and OpenRouter APIs
• Anti-Cliché System — Crafted prompts with compliance plan and self-check validation ensure genuinely original ideas, not rehashed tropes
• Markdown Rendering — AI responses are beautifully formatted with headings, lists, bold, and more
• Yoma Dialog — A charming typewriter intro dialog (can be skipped or disabled in settings)
• Rainbow Create Button — Nyancat-style animated gradient
• Paper Aesthetic — Hand-drawn style with sketchy buttons and crumpled paper background

Tech Stack

Layer	Technology
Frontend	React, TypeScript, Tailwind CSS
Bundler	Vite
Backend	Express.js (Node.js)
AI	Claude API / OpenRouter API

Getting Started

1. Clone the repository

git clone https://github.com/FenchsApps/YomaAI.git
cd YomaAI

2. Install dependencies

npm install

3. Configure environment variables

Copy the example and fill in your API keys:

cp .env.example .env

Edit .env:

# Which AI provider to use: "Claude" or "Openrouter"
WhatAIYomaWillUse=Claude

# OpenRouter settings
OpenrouterAPI=your_openrouter_key_here
OpenrouterModel=openai/gpt-4o

# Claude (Anthropic) settings
ClaudeAPI=your_claude_key_here
ClaudeModel=claude-sonnet-4-20250514

4. Run the project

Start both frontend and backend:

npm run dev:full

Or run them separately:

# Frontend (Vite dev server)
npm run dev

# Backend (Express API server)
npm run server

The frontend runs on http://localhost:5173 and the backend on http://localhost:3001.

Project Structure

YomaAI/
├── server/
│   └── index.ts               # Express API server with anti-cliché system prompt
├── src/
│   ├── components/
│   │   ├── Header.tsx          # Navigation header (Walter Turncoat font)
│   │   ├── Footer.tsx          # Footer with license & credits
│   │   └── TypewriterDialog.tsx # Yoma intro dialog with typewriter effect
│   ├── data/
│   │   └── ideaOptions.ts     # 20 configurable idea settings
│   ├── pages/
│   │   ├── MainPage.tsx        # Landing page
│   │   ├── CreateIdeaPage.tsx  # AI idea generator (dialog → settings → result)
│   │   └── SettingsPage.tsx    # App settings (skip dialog toggle)
│   ├── App.tsx                 # App routes
│   ├── main.tsx                # Entry point
│   └── index.css               # Global styles, paper theme, rainbow button
├── tests/
│   ├── conftest.py            # Pytest fixtures (desktop, mobile, tablet drivers)
│   ├── test_yomaai.py         # Core tests (site load, settings, AI generation)
│   ├── test_yomaai_extended.py # Extended tests (responsive, localStorage, errors, dialog)
│   └── requirements.txt       # Python test dependencies
├── .env.example                # Environment variables template
├── index.html                  # HTML entry
├── vite.config.ts              # Vite config with Tailwind & proxy
├── package.json
├── TESTS.md                    # Test documentation
├── LICENSE                     # AGPL-3.0
└── README.md

Testing

YomaAI includes 24 automated end-to-end tests built with pytest and Selenium across two test files:

Suite	What it covers	Backend needed?
Site loading	Page renders, navigation, CTA button	No
Settings	Skip dialog toggle on/off	No
AI generation	Full Create → result flow (real API)	Yes
Responsiveness	Mobile (375×812) & tablet (768×1024) viewports, overflow, font sizes	No
localStorage	Persistence after reload, cleanup restores default	No
Error handling	API error (500) & network failure messages	No (mocked)
Result buttons	"Create Another Idea" reset & "Regenerate" re-generation	No (mocked)
Yoma dialog	Next, Let's go!, Skip dialog buttons	No

See TESTS.md for full documentation.

Quick start:

uv run --with pytest --with selenium pytest tests/ -v

The app must be running (npm run dev:full) before you execute the tests.

License

This project is licensed under the GNU Affero General Public License v3.0 (AGPL-3.0).

See LICENSE for details.

Author

FenchsApps — https://github.com/FenchsApps