University of Lethbridge Logo

How the AI Story Idea Generator Works

The AI Story Idea Generator uses a structured, rule-based approach to create unique stories by randomly selecting elements from a predefined set. Each story is built using eight components: character, place, plot, quest, obstacle, companion, motivation, and resolution. These components are stored in a JSON file and are all AI-generated, ensuring a diverse and creative range of possibilities.

Story Components

The generator selects one element from each of the following categories to create a story:

How Stories Are Generated

Each time the generator is run, JavaScript accesses the JSON file containing the story components. It randomly selects one element from each category to construct a story. The selected elements are then combined into a narrative structured into four sentences:

  1. The first sentence introduces the character and place.
  2. The second sentence adds context with the companion and motivation.
  3. The third sentence outlines the action by detailing the quest and obstacle.
  4. The final sentence resolves the story with the resolution.

This setup ensures each story feels complete and engaging while maintaining a consistent structure.

Unique Story IDs

To facilitate easy reference and retrieval, each story is assigned a unique identifier. This ID is generated by concatenating the index of each selected element, formatted as a uniform-length string. For example, if the first element in each category is chosen, the ID will be "01010101010101," ensuring that each story is uniquely identifiable.

Story Generation Cycle

The generator automatically produces a new story every 60 seconds. Given the 126,904,825,484,800 possible combinations, it would take over 403 million years to exhaust all unique stories at this rate. This vast range of potential stories ensures that users rarely encounter duplicates, providing a continually fresh experience.

Conclusion

The AI Story Idea Generator exemplifies how AI can be integrated into educational and creative contexts in a low-cost, sustainable way. By using a rule-based approach and avoiding external API calls, it ensures accessibility and affordability, making it an ideal tool for academic and community engagement.


Back to the AI Story Idea Generator

Step-by-Step: How Does the Story Generator Work?

  1. All the story pieces are stored in a file called story_parts.json. This file is like a big box of LEGO bricks, with different types of pieces: characters, places, plots, quests, obstacles, companions, motivations, and resolutions. Each time a story is made, the generator picks one brick from each pile.
  2. The main web page (index.html) loads a script (scripts.js). This script is the set of instructions that tells the browser how to build a story from the pieces.
  3. Every 60 seconds, the script randomly picks one item from each category. This is like rolling a dice for each pile of LEGO bricks, so every story is different!
  4. The script puts the pieces together into a short story. The story is shown on the page, and a unique Story ID is created so you can tell exactly which pieces were used.

Directory & File Structure

The project is organized so that everything you need for the AI Story Idea Generator is in one folder. Here’s what you’ll find inside, with a quick explanation of what each file does:

projects/story/
├── how.html                     This page! Explains how the generator works
├── images-2.png                 Logo or decorative image for the site
├── index.html                   Main page: Where the story appears
├── scripts.js                   JavaScript: The code that builds and displays the story
├── site.webmanifest             Lets you add the site to your home screen as an app
├── story.json                   Simple example stories (not used in the main generator)
├── story_parts.json             All the story pieces: Characters, places, plots, and more
└── styles.css                   Visual style: Makes the site look nice and readable

Each file has a specific job. For example, scripts.js is like the brain of the generator, story_parts.json is the imagination, and styles.css is the wardrobe and set design! The icons and manifest files help make the site look good and work well on different devices, while index.html and how.html are the main pages you see and use.

Hosting and Cost: One of the best things about this project is how easy and affordable it is to share. All the files you see above can be uploaded to any regular webserver—no special software or expensive cloud services are needed. You could use a university webspace, a personal website, or even free static hosting services like GitHub Pages or Netlify. As long as you can put files on a web server, your story generator will work for anyone with a browser!

Why is this so much lower cost than most AI tools? While the story parts were originally created using generative AI (to get a fun, creative mix of ideas), the generator itself doesn’t use any AI services when people visit the site. There are no ongoing API calls, no cloud compute fees, and no need for user accounts or logins. Once the files are on your server, the only cost is basic web hosting—which is often free or just a few dollars a month. This makes it perfect for classrooms, libraries, or community groups who want to explore AI-powered creativity without worrying about budgets or privacy.

Privacy and Sustainability: Because everything runs in the browser and no data is sent to outside servers, users keep their privacy. There’s no tracking, no data collection, and no risk of surprise charges. Plus, static sites like this are very energy-efficient and easy to maintain, making them a sustainable choice for long-term educational or creative projects.

Example: What Does the Code Look Like?

Here’s a simplified version of the code that picks a random story:

// In scripts.js
fetch('story_parts.json')
  .then(response => response.json())
  .then(data => {
    // Pick a random item from each category
    const character = data.characters[Math.floor(Math.random() * data.characters.length)];
    const place = data.places[Math.floor(Math.random() * data.places.length)];
    // ...repeat for plot, quest, etc.
    // Build the story
    const story = `In ${place}, ${character} ...`;
    // Show the story on the page
    document.getElementById('story').innerText = story;
  });

This code runs in your web browser. It doesn’t send your data anywhere, and it doesn’t need a powerful computer or expensive cloud services.

What Does the Data Look Like?

The story pieces are stored in a file called story_parts.json. Here’s a sample:

{
  "characters": ["a brave knight", "a wise old woman", ...],
  "places": ["a mysterious island", "the University of Lethbridge campus", ...],
  // ...and so on for plots, quests, obstacles, companions, motivations, resolutions
}

What Does a Generated Story Look Like?

Here’s an example of a story the generator might create:

In the University of Lethbridge campus, a wise old woman studies Blackfoot language at the Galt Museum and Archives. Accompanied by a fellow researcher at the University of Lethbridge, their motivation is to highlight Indigenous culture and heritage. Along the journey, they embark on a quest to learn from the Napi stories of the Blackfoot people and live more respectfully on the land, facing a decline in native bird species at the Elizabeth Hall Wetlands. In the end, the journey leads to significant discoveries about Indigenous heritage...

Why Is This a Cost-Effective, Low-Risk AI Demo?

Want to Try It Yourself?

All you need is a web browser! You can even download the files and run them on your own computer, or share them with friends and students.