StoryTeller is an experimental web application that creates short audio stories for pre-school kids.
![]() |
![]() |
![]() |
demo-recording.mp4
The main flow from the diagram can be found in generateStoryFlow. Most of the UI is implemented in index.tsx.
-
Install dependencies:
npm i
-
Setup
.env
with required keys and base url:NEXT_PUBLIC_BASE_URL="http://localhost:3001" OPENAI_API_KEY="sk-..." ELEVENLABS_API_KEY="..." LMNT_API_KEY="..." STABILITY_API_KEY="sk-..."
You can get the API keys from the respective services:
-
Start Fastify server (runs on port 3001):
npm run fastify
-
Start Next.js server for UI (runs on port 3000):
npm run next
-
Go to localhost:3000
- Build the Next.js app:
npm run build
. This exports the app to theout
folder, so it can be served by Fastify.
StoryTeller can be deployed as a Render web service.
- Build command:
npm i; npm run build
- Start command:
npm start
- Configure the
NEXT_PUBLIC_BASE_URL
environment variable to the Render service URL (base url must not have trailing slash) - Add the API keys to the Render Environment settings.
StoryTeller is built with the following libraries:
The following AI APIs are used:
- No persistent execution with error handling
- No user accounts / persistent data (only storage of image and audio files)
- No user authentication / authorization
- Limited error handling on the client
- Tested on Chrome Desktop (Mac). Other browsers & operating systems may not work.