A React-based random NPC (Non-Player Character) generator for tabletop RPGs. Generate fully randomized characters with race-appropriate names, stats, and traits, all presented in a beautiful fantasy-themed UI.

• Race-appropriate names - Names are selected based on the generated race
• 14 races - Human, Dwarf, Elf, Half-Elf, Half-Orc, Halfling, Gnome, Tiefling, Dragonborn, Genasi, Goliath, Aasimar, Firbolg, and Tabaxi
• Randomized stats - D&D-style stat generation (4d6 drop lowest) with race modifiers
• Age calculation - Race-appropriate age ranges
• Random occupations - Various professions and roles
• Unique traits - Quirky personality traits and physical characteristics
• AI-generated details - Powered by Google Gemini AI:
  • Vivid physical descriptions
  • Rich background stories
  • Character goals and motivations

• Fantasy-themed UI - Dark theme with race-based accent colors
• Dynamic color scheme - Each race has its own accent color (e.g., Dragonborn = ember orange, Elf = light green)
• Card-based layout - Centered card design with subtle borders and glowing effects
• Typography hierarchy - Clear visual distinction between name, labels, and values
• Race highlight - Race value displayed with colored background matching the accent
• Responsive grid - Stats displayed in a clean 3-column grid (2 columns on mobile)
• Smooth animations - Hover effects and transitions throughout

• Node.js (v17+ recommended, but works with v16+ using OpenSSL legacy provider)
• npm or yarn

npm install
# or
yarn install

To enable AI-generated character details, you'll need a Google Gemini API key:

1. Get your API key from Google AI Studio
2. Create a .env file in the root directory:

   cp .env.example .env

3. Add your API key to the .env file:

   REACT_APP_GEMINI_API_KEY=your_api_key_here
   

Note: The app will still work without the API key, but AI-generated details (physical description, background, goals) will not be available.

npm start
# or
yarn start

Runs the app in development mode. Open http://localhost:3000 to view it in the browser.

Note: If you're using Node.js v17+, the app uses the --openssl-legacy-provider flag to ensure compatibility with the older webpack version used by react-scripts.

npm run build
# or
yarn build

Builds the app for production to the build folder. The build is optimized and minified.

npm test
# or
yarn test

Launches the test runner in interactive watch mode.

1. Open the app in your browser
2. A random NPC will be generated automatically
3. Character details (physical description, background, goals) will be automatically generated using AI
4. Click the "🎲 New NPC" button to generate a new character
5. Each character will have:
   • A unique name appropriate to their race
   • Randomized stats with race modifiers applied
   • An age within their race's typical range
   • A random occupation
   • A distinctive trait
   • AI-generated physical description
   • A rich background story
   • A list of goals and motivations

• React 17 - UI framework
• TypeScript - Type safety
• Styled Components - CSS-in-JS styling
• Google Gemini AI - AI-powered character detail generation
• Create React App - Build tooling
• Prettier - Code formatting
• ESLint - Code linting

src/
├── components/          # Character generation logic
│   ├── NewChar.ts      # Main character generator
│   ├── GetRace.ts      # Race selection
│   ├── GetName.ts      # Name generation
│   ├── GetStats.ts     # Stat calculation
│   ├── GetAge.ts       # Age calculation
│   ├── GetOccupation.ts
│   ├── GetTrait.ts
│   ├── StatsContainer.tsx
│   └── Interfaces.ts
├── data/               # JSON data files
│   ├── races.json
│   ├── names.json
│   ├── occupations.json
│   └── traits.json
├── utils/
│   └── raceColors.ts   # Race-to-color mapping
├── services/
│   └── geminiService.ts # Gemini AI integration
├── App.tsx             # Main application component
└── index.js            # Entry point

Stats are generated using the standard D&D method:

• Roll 4d6 for each stat
• Drop the lowest die
• Sum the remaining three
• Apply race modifiers

The generator supports 14 different races, each with:

• Unique stat modifiers
• Age ranges
• Race-specific name pools

This project is private and not licensed for public use.