Dark Story AI

Dark Story AI generates personalized horror tales, eerie images, and chilling narrations—all from a single prompt.

Comment

InspirationProject Story – Dark Story AI

Inspiration

I've always loved the atmosphere of Halloween—dark, eerie, and full of imagination. I wanted to build an experience that blends horror storytelling, AI-generated images, and immersive narration, all inside a clean, modern interface.

The idea came from a simple question: “What if a user could write a tiny prompt, and the app returned a full horror story, illustrated and narrated like a spooky audiobook?”

That idea became Dark Story AI.

What It Does

Dark Story AI takes a user prompt and generates:

A personalized horror short story

Three spooky images based on the narrative

An eerie AI-generated narration (TTS)

The result is a fully immersive horror micro-experience.

How I Built It

I built the project using Next.js, TyoeScrit, React, TailwindCSS, Python (FastAPI) for the backend, and the Kiro IDE ecosystem.

Vibe Coding

I used conversational prompting to generate:

project structure

UI components

backend API endpoints

data flows between frontend and backend

This drastically accelerated the initial build.

Specs

I created a cross-stack spec defining the full workflow:

Frontend (Next.js):

requestStory(prompt)

requestImages(story)

requestAudio(story)

Backend (Python FastAPI):

/generate_story

/generate_images

/generate_audio

Specs kept Kiro’s generations consistent across iterations.

Agent Hooks

I used hooks to automate:

API calls after prompt submission

loading states

audio streaming handling

UI state transitions

This cleaned and simplified the overall architecture.

Steering Docs

Steering ensured a tone that was eerie, structured, dark, but still readable.

MCP

MCP extended the IDE, especially for:

integrating external TTS services,

generating and processing audio,

managing external modules smoothly.

What I Learned

How to orchestrate multi-modal AI pipelines (text + images + audio)

How to structure a React/Next.js frontend communicating with a Python FastAPI backend

How to use advanced Kiro tools: specs, steering, hooks, MCP

How to design dark-themed interfaces that remain readable

How to tune AI models for narrative coherence and horror style

Challenges

Avoiding slow chains when calling three AI services

Fixing CORS and MIME-type issues between Next.js and Python

Maintaining consistent horror tone while keeping story quality high

Designing a spooky UI that stays clear and readable

Keeping all Kiro-generated code synchronized across updates

Conclusion

Dark Story AI blends programming and creativity into an immersive Halloween-themed experience.

It captures the spirit of Kiroween, showing how creatively combined AI tools can produce something dark, magical, and memorable.

Application Deployment

Backend:

link

Frontend:

link

Github Repository:

link

Share this project:

Updates