In this tutorial, we'll show you step-by-step how to create your own AI storytelling app.
Students can collaboratively write stories sentence by sentence, guided by interactive AI-generated suggestions. No coding expertise is necessary—Rosebud AI handles that!
This post is adapted from our recent Rosebud AI livestream, where we walked through the process of vibe coding a collaborative story generator.
What We'll Cover:
- Setting up your storytelling app on Rosebud AI
- Creating an interactive, AI story prompt
- Integrating backend support to allow story sharing among students
- Troubleshooting common issues and customizing your app for classroom use
Step 1: Getting Started
To begin, head over to Rosebud AI and create an account if you haven't already.
Start by selecting the "Web App with Backend Support" template. This template is perfect for our collaborative storytelling project.
Click Remix to create your own editable copy.
Step 2: Designing Your AI Story Generator
Imagine your storytelling app as a virtual classroom activity: a teacher sets a story prompt, and students join the session with a unique PIN to add sentences in turn.
Here’s the basic structure:
- Main Menu: Choose Teacher or Student.
- Teacher Portal: Enter a story topic; AI generates the opening sentence.
- Student Portal: Join session with a PIN; add sentences turn by turn.
- AI Suggestions: Each student contribution triggers AI-generated suggestions for the next sentence.
Here's how you instruct Rosebud AI:
"Create an educational storytelling app. Teachers enter a prompt, AI generates the first line, then students collaboratively build the story, with AI offering interactive suggestions each step."
Rosebud AI will handle the initial setup for you!
Step 3: Adding Interactive AI Suggestions
To boost student creativity and engagement, our AI story generator will provide multiple AI-generated sentence options after each contribution.
Students can either write their own sentences or choose one of these interactive suggestions.
Prompt Rosebud like this:
"After each sentence added by a student, display 3 AI-generated suggestions to continue the story."
Rosebud takes care of embedding AI seamlessly into your app.
Step 4: Integrating Backend Support with Supabase
For your students to join from any device and share completed stories easily, you'll need backend integration.
We recommend using Supabase—a free, simple backend database.
- Sign up at Supabase and create a new project.
- Copy the provided URL and API key into your Rosebud project settings.
- Let Rosebud generate the SQL script for you—no coding needed!
Simply ask Rosebud:
"Set up Supabase backend to create unique session PINs for story sharing."
Paste the provided SQL into your Supabase dashboard, and you're ready to go!
Step 5: Testing & Troubleshooting
Test your app by entering a story prompt, generating an opening line, and seeing if AI suggestions appear.
If you encounter any issues (such as buttons not responding), simply ask Rosebud:
"This button isn't working. Can you fix it?"
Rosebud AI excels at understanding and troubleshooting technical issues—no coding knowledge needed!
Step 6: Customizing Your App for Educational Use
Make your storytelling app uniquely tailored for your classroom:
- Adapt themes to your current lesson (e.g., "Roman Empire," "Space Exploration").
- Ensure historical accuracy by instructing the AI accordingly:
"Make all stories factually accurate within the specified historical period."
- Adjust app appearance to suit your class level (e.g., more playful for younger students).
Final Thoughts
Using Rosebud AI to create an interactive AI story generator provides an exciting, collaborative way to enhance your teaching. It makes writing lessons engaging, sparks student creativity, and requires no prior coding experience.
Check out the full livestream or remix our completed storytelling project to kickstart your own creative classroom experience!
If you have any question, join our Discord community, we have a vibrant community to help you out.