| name | create-googoobear-story |
| description | Create and publish a new Goo Goo Bear illustrated story on googoobear.com — story JSON, OpenAI chapter illustrations, ElevenLabs narration, website registration, and deploy. Use when the user asks for a new story, chapter images, narration audio, or to publish/deploy a story to the website. |
Create a Goo Goo Bear Story
End-to-end workflow for a new illustrated story with chapter narration on googoobear.com.
Repositories
| Repo | Path (sibling) | Role |
|---|
| googoobear-website | this repo | Site, lib/storyData.ts, public/ assets |
| googoo-images | ../googoo-images | Generation scripts, stories/*.json, local generated/ output |
Both repos share the same parent directory (e.g. ~/dev/googoo/).
Prerequisites
googoo-images/.env (never commit):
OPENAI_API_KEY=...
ELEVENLABS_API_KEY=...
ELEVENLABS_VOICE_ID=P6K05ygygndZ6kli0Su6
Install deps once in googoo-images: npm install
Workflow checklist
- [ ] 1. Write story JSON in googoo-images/stories/{file-slug}.json (include closing lesson in last chapter)
- [ ] 2. Register story in lib/storyData.ts (+ storyOrder)
- [ ] 3. Generate chapter illustrations (OpenAI gpt-image-2)
- [ ] 4. Copy images + cover to public/
- [ ] 5. Generate chapter audio (ElevenLabs)
- [ ] 6. Commit + push googoobear-website (deploys via Vercel)
- [ ] 7. Commit + push googoo-images story JSON
Run steps in order. Check in with the user between major steps if they prefer incremental review.
Step 1: Story JSON
Create ../googoo-images/stories/{file-slug}.json. The file slug is short (rainier, tokyo); the site slug inside JSON is kebab-case (mount-rainier-adventure).
Copy structure from story-template.json or existing stories (stories/tokyo.json, stories/rainier.json).
Fields
| Field | Notes |
|---|
slug | URL slug → /stories/{slug}/1 |
title | Display title |
description | One-line summary for story cards |
storyImage | Cover filename in public/ (e.g. story9.png) — pick next unused storyN.png |
styleAnchor | Always ../googoobear-website/public/scene2.png (National Parks watercolor style) |
references | Character refs: carolyn-goo-goo.png, carolyn.png, goo-goo-bear.png |
chapters[].number | 1-based |
chapters[].title | Chapter N: … |
chapters[].content | Narration text — short sentences, read aloud naturally |
chapters[].scene | Detailed illustration prompt (setting, action, mood, lighting) |
chapters[].output | Chapter image filename (e.g. rainier01.png) |
chapters[].references | Optional — override story-level refs for this chapter (e.g. drop Carolyn refs when she is not in the scene) |
chapters[].skipStyleAnchor | Optional — omit styleAnchor when a prior chapter image already sets style + side character look |
Writing guidelines
- 5 chapters is the standard length (adjust if user asks).
- content: Simple picture-book prose. One or two sentences per beat.
- scene: Be specific — characters, props, background, lighting. Include visual details the user requested (snow, animals, vehicles, etc.).
- No text in images — the model prompt already forbids speech bubbles and watermarks.
Side character consistency
Any recurring side character (uncles, cousins, shopkeepers, animals with names, etc.) must look the same in every chapter — fur/hair color, face shape, relative size, and clothing.
When introducing a side character, lock in a character sheet in the first chapter they appear:
| Detail | Example (Uncle Gus) |
|---|
| Species / type | Large brown grizzly bear |
| Fur / skin | Warm shaggy brown fur (never black) |
| Face | Round, friendly |
| Clothing | Red-and-green plaid flannel shirt, tan khaki work apron |
| Size vs Goo Goo | About three times Goo Goo's height standing |
Copy that exact description into every later scene prompt where the character reappears.
Workflow for consistency across chapters:
- Generate the side character's intro chapter first (e.g. chapter 3) and approve the look.
- For later chapters, add chapter-level overrides in the story JSON:
"references": ["../googoobear-website/public/goo-goo-bear.png", "generated/{intro-chapter-output}.png"]"skipStyleAnchor": true — the intro chapter image already carries style + side character look
- In the
scene prompt, say "must be IDENTICAL to the reference image" and repeat the full character sheet (fur color, shirt, apron, size).
- Regenerate any chapter where the side character drifts — do not move on until they match.
Characters who should NOT appear: if someone is far away or only mentioned (e.g. Carolyn in Seattle while Goo Goo is home), drop them from references for that chapter and state explicitly in the scene prompt that they must NOT appear.
Closing lesson (final chapter)
Every story should end with 1–2 warm closing sentences in the last chapter's content — a gentle lesson, feeling, or takeaway tied to the adventure. This is read aloud in narration, so keep it simple and heartfelt.
Pattern: the final chapter describes the main action first, then adds the closing beat.
Example (Mount Rainier, chapter 5):
They strapped on snowshoes and grabbed hiking poles. Together with Winefred and Elora,
they crunched through the deep snow, laughing as Mount Rainier sparkled in the sun.
After a long winter apart, it felt wonderful to be together again.
Goo Goo promised to visit Winefred and Elora every spring.
When drafting a new story, offer the user 3–4 closing options if they haven't specified one. Themes that work well:
| Theme | Example closing |
|---|
| Family / friends | It was so nice to see family again. Goo Goo knew adventures are even better when shared with the ones you love. |
| Reunion | After a long winter apart, it felt wonderful to be together again. Goo Goo promised to visit every spring. |
| Nature | Goo Goo learned that mountains are beautiful in every season — and that good friends make every adventure special. |
| Simple warmth | It was so nice to see Winefred and Elora again. Goo Goo smiled all the way home. |
After adding or changing the closing, regenerate audio for the last chapter:
node generate-audio.js {file-slug} --chapter 5
The closing does not need a new illustration — the last chapter image shows the adventure scene; the lesson is narration only.
Step 2: Register on the website
Edit lib/storyData.ts:
- Add a new key under
storyData matching slug from JSON.
- Map each chapter:
title, content, image: "/{output}".
- Set story-level
image: "/{storyImage}".
- Prepend the slug to
storyOrder so it appears first on the homepage (unless user says otherwise).
Audio paths are derived automatically: /audio/{slug}/chapter-01.mp3 via lib/audio.ts.
Step 3: Generate illustrations
From googoo-images/:
node generate-story.js {file-slug} --chapter 1
node generate-story.js {file-slug} --chapter 2
Or loop all chapters:
for i in 1 2 3 4 5; do
node generate-story.js {file-slug} --chapter $i
done
Output lands in googoo-images/generated/{output}.
Model: OpenAI gpt-image-2 via images.edit with reference images. Do not change unless user asks.
Regenerate a single chapter if the user rejects an image — same command with that chapter number.
Step 4: Copy images to public/
cd ../googoo-images
cp generated/{prefix}*.png ../googoobear-website/public/
Cover image: Copy the best chapter image (usually chapter 2 or a hero scene) to public/{storyImage}:
cp generated/rainier02.png ../googoobear-website/public/story8.png
Step 5: Generate narration audio
From googoo-images/:
node generate-audio.js {file-slug}
node generate-audio.js {file-slug} --chapter 3
Audio is saved locally and auto-copied to googoobear-website/public/audio/{slug}/chapter-NN.mp3.
Voice settings (approved — do not change without user approval)
| Setting | Value |
|---|
| Voice ID | P6K05ygygndZ6kli0Su6 |
| Model | eleven_multilingual_v2 |
| stability | 0.50 |
| similarity_boost | 0.80 |
| style | 0.20 |
| use_speaker_boost | false |
| speed | 0.88 |
Narration format: chapter title, blank line, then one sentence per line (line breaks guide pauses — no SSML).
Step 6: Deploy
Commit and push googoobear-website only when the user asks to deploy/send/publish:
git add lib/storyData.ts public/
git commit -m "Add {title} story with illustrations and chapter narration."
git push origin main
Vercel deploys from main. Story URL: https://googoobear.com/stories/{slug}
Step 7: Commit story source
Commit the JSON in googoo-images:
cd ../googoo-images
git add stories/{file-slug}.json
git commit -m "Add {title} story config."
git push origin main
Generated images/audio in googoo-images/generated/ are gitignored — finals live in googoobear-website/public/.
Character & art reference
Carolyn: young girl, long straight brown hair, large dark dot eyes, gentle smile.
Goo Goo Bear: round teddy bear, yellow fur with soft pastel pink/blue/orange patches, teal cable-knit sweater. About two-thirds Carolyn's height when sitting.
Art style: soft watercolor and colored-pencil picture book; warm golden palette; muted tones; paper grain; soft brown outlines; gentle diffused lighting; cozy whimsical mood.
Style anchor: public/scene2.png (Yellowstone / National Parks — the target look).
Troubleshooting
| Problem | Fix |
|---|
Missing OPENAI_API_KEY | Add key to googoo-images/.env |
Missing ELEVENLABS_API_KEY | Add key to googoo-images/.env |
| Image wrong style/characters | Regenerate with --chapter N; tighten scene prompt |
| Side character looks different across chapters | Use intro chapter PNG as references; repeat full clothing/appearance sheet in scene; set skipStyleAnchor: true |
| Audio sounds robotic | Ensure no SSML; use line-break formatting only |
| Story thumbnail broken | Confirm next.config.mjs has images.unoptimized: true |
| Play button missing on chapter | Audio file must exist at public/audio/{slug}/chapter-NN.mp3 |
Additional resources
- JSON template: story-template.json
- Live examples:
../googoo-images/stories/tokyo.json, ../googoo-images/stories/rainier.json, ../googoo-images/stories/seattle-roadtrip.json (side character consistency with Uncle Gus)
