This demo shows how a structured JSON blob generated by an LLM can be used as the data layer for a game world UI.
On each page load, the app picks a random world from data/worlds.json and drops the player into a randomly chosen starting city within it. The sidebar renders the world's cities and factions; the main panel generates a character seeded from the starting city name — so the same city always produces the same character, deterministically.
Each world in data/worlds.json follows the World type defined in types/types.ts:
- name / genre / tone / description — flavour text for the world
- cities — array of
Cityobjects, each with a name, region, type (capital, port, forest, etc.), population, and description - factions — array of
Factionobjects, each with a name, alignment, motto, and colours
This JSON is what an LLM would generate when prompted to build a game world. The app consumes it directly — no database, no API.
lib/seededRandom.ts hashes the city name into a numeric seed, then runs a deterministic PRNG over it to pick the character's job, mood, colour palette, and accessories. Same city → same character, every time.
npm install
npm run devOpen http://localhost:3000. Refresh to land in a different world.
| File | Purpose |
|---|---|
data/worlds.json |
The generated world data — swap this out to change the game world |
types/types.ts |
TypeScript types for World, City, Faction |
lib/seededRandom.ts |
Deterministic character generation from a city-name seed |
components/WorldSidebar.tsx |
Renders cities and factions from the active world |
components/WorldHeader.tsx |
Displays the world name, genre, and starting city |
components/CharacterMaker.tsx |
Generates and displays the player character |
components/Avatar.tsx |
SVG avatar driven by the character data |