DEV Community

Liam Dio
Liam Dio

Posted on

StoryBoost: An AI-Powered Blog Assistant Built with Storyblok & Next.js

#devchallenge #storyblokchallenge #webdev #api

This is a submission for the Storyblok Challenge

What I Built

StoryBoost – AI Blog Assistant is a fully functional, AI-powered blogging platform built with Next.js 15, React 19, and Storyblok CMS. Designed to enhance the writing experience for bloggers and content creators, StoryBoost offers:

  • Real-time content editing with Storyblok’s visual editor
  • AI-powered blog title generation
  • Text expansion from short notes into full paragraphs
  • A clean, responsive, SEO-friendly blog UI

The goal was to solve two major challenges for content creators: coming up with engaging blog titles and turning rough ideas into polished content — all within a beautifully integrated CMS + AI workflow.

Demo

Live Demo:
https://storyboost-ai.vercel.app
Storyblok Space:
Content is fully powered by Storyblok and viewable on the live demo site.

Code Repository:

https://github.com/DioChuks/storyboost-ai

Demo Video or Screenshots
*Screenshots:

Image description

Image description

Image description

Tech Stack

  • Next.js 15.3.0 with App Router
  • React 19.0.0
  • Storyblok React SDK 4.6.0
  • Google GenAI
  • Tailwind CSS

How I Used Storyblok

Storyblok was central to the content architecture:

  • Visual Editor Integration: Real-time content preview and inline editing
  • Dynamic Rendering: All blog content (title, excerpt, content, images) fetched from Storyblok via its API
  • Rich Text Handling: Using @storyblok/richtext for rendering complex blog content
  • Component-based setup: Modular design with reusable components driven by Storyblok schema

AI Integration

StoryBoost leverages Google Gemini 2.5 Flash API to enhance the authoring experience:

  • 🔤 AI Title Generator: Produces 5 creative blog titles based on any topic input
  • 📝 Text Expander: Turns a short note or phrase into a full paragraph, respecting context and tone
  • 🧠 Context-Aware Suggestions: Maintains writing style consistency
  • 🚫 Graceful Error Handling: Detects and handles failed API responses with user-friendly messages

Both tools are integrated directly into the blog post creation workflow and offer immediate utility for content creators working inside Storyblok or previewing their drafts.

Learnings and Takeaways

This project was a deep dive into combining headless CMS with AI assistance, and I’m proud to have:

  • Created a seamless editorial workflow using Storyblok and Next.js
  • Integrated a production-ready AI tool with real-time feedback
  • Solved real-world problems for content creators
  • Worked with cutting-edge tech like React 19 and Gemini 2.5 Flash
  • Built a clean, responsive UI that performs well across devices

Challenges:

  • Working under a tight deadline while ensuring both functionality and polish
  • Testing real-time AI API calls without hitting rate limits
  • Ensuring proper SSR/ISR behavior with external CMS data
  • Working with multiple versions of the Storyblok SDK to fit with modern practices

Team Submission: Solo project
License: MIT
Thanks to Storyblok and DEV for this awesome challenge! 🚀

Top comments (0)