The latest articles on DEV Community by Liam Dio (@diochuks). https://dev.to/diochuks https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F1486294%2F66343854-15ea-490b-86d7-d34fa5988399.jpeg https://dev.to/diochuks en Liam Dio Sun, 29 Jun 2025 23:43:52 +0000 https://dev.to/diochuks/storyboost-an-ai-powered-blog-assistant-built-with-storyblok-nextjs-4mh6 https://dev.to/diochuks/storyboost-an-ai-powered-blog-assistant-built-with-storyblok-nextjs-4mh6 <p><em>This is a submission for the <a href="https://dev.to/challenges/storyblok">Storyblok Challenge</a></em></p> <h2> What I Built </h2> <p><strong>StoryBoost – AI Blog Assistant</strong> is a fully functional, AI-powered blogging platform built with <strong>Next.js 15</strong>, <strong>React 19</strong>, and <strong>Storyblok CMS</strong>. Designed to enhance the writing experience for bloggers and content creators, StoryBoost offers:</p> <ul> <li>Real-time content editing with Storyblok’s visual editor</li> <li>AI-powered blog title generation</li> <li>Text expansion from short notes into full paragraphs</li> <li>A clean, responsive, SEO-friendly blog UI</li> </ul> <p>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.</p> <h2> Demo </h2> <p><strong>Live Demo:</strong><br> <a href="https://storyboost-ai.vercel.app" rel="noopener noreferrer">https://storyboost-ai.vercel.app</a> <br> <strong>Storyblok Space:</strong> <br> Content is fully powered by Storyblok and viewable on the live demo site.</p> <p><strong>Code Repository:</strong><br><br> <a href="https://github.com/DioChuks/storyboost-ai" rel="noopener noreferrer">https://github.com/DioChuks/storyboost-ai</a></p> <p><strong>Demo Video or Screenshots</strong><br> *Screenshots:</p> <p><a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Focq7wd0m5b8nk8tcak2v.png" class="article-body-image-wrapper"><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Focq7wd0m5b8nk8tcak2v.png" alt="Image description" width="800" height="432"></a></p> <p><a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fs9cp8sdxm8pbpbq604gh.png" class="article-body-image-wrapper"><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fs9cp8sdxm8pbpbq604gh.png" alt="Image description" width="800" height="774"></a></p> <p><a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fyh3383s2f16osqke28mh.png" class="article-body-image-wrapper"><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fyh3383s2f16osqke28mh.png" alt="Image description" width="322" height="669"></a></p> <h2> Tech Stack </h2> <ul> <li>Next.js 15.3.0 with App Router</li> <li>React 19.0.0</li> <li>Storyblok React SDK 4.6.0</li> <li>Google GenAI</li> <li>Tailwind CSS</li> </ul> <h3> How I Used Storyblok </h3> <p>Storyblok was central to the content architecture:</p> <ul> <li> <strong>Visual Editor Integration</strong>: Real-time content preview and inline editing</li> <li> <strong>Dynamic Rendering</strong>: All blog content (title, excerpt, content, images) fetched from Storyblok via its API</li> <li> <strong>Rich Text Handling</strong>: Using <code>@storyblok/richtext</code> for rendering complex blog content</li> <li> <strong>Component-based setup</strong>: Modular design with reusable components driven by Storyblok schema</li> </ul> <h3> AI Integration </h3> <p>StoryBoost leverages <strong>Google Gemini 2.5 Flash API</strong> to enhance the authoring experience:</p> <ul> <li>🔤 <strong>AI Title Generator</strong>: Produces 5 creative blog titles based on any topic input</li> <li>📝 <strong>Text Expander</strong>: Turns a short note or phrase into a full paragraph, respecting context and tone</li> <li>🧠 <strong>Context-Aware Suggestions</strong>: Maintains writing style consistency</li> <li>🚫 <strong>Graceful Error Handling</strong>: Detects and handles failed API responses with user-friendly messages</li> </ul> <p>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.</p> <h2> Learnings and Takeaways </h2> <p>This project was a deep dive into combining <strong>headless CMS</strong> with <strong>AI assistance</strong>, and I’m proud to have:</p> <ul> <li>Created a seamless editorial workflow using Storyblok and Next.js</li> <li>Integrated a production-ready AI tool with real-time feedback</li> <li>Solved real-world problems for content creators</li> <li>Worked with cutting-edge tech like React 19 and Gemini 2.5 Flash</li> <li>Built a clean, responsive UI that performs well across devices</li> </ul> <h3> Challenges: </h3> <ul> <li>Working under a tight deadline while ensuring both functionality and polish</li> <li>Testing real-time AI API calls without hitting rate limits</li> <li>Ensuring proper SSR/ISR behavior with external CMS data</li> <li>Working with multiple versions of the Storyblok SDK to fit with modern practices</li> </ul> <p><strong>Team Submission:</strong> Solo project<br> License: <a href="https://opensource.org/licenses/MIT" rel="noopener noreferrer">MIT</a><br> Thanks to Storyblok and DEV for this awesome challenge! 🚀</p> devchallenge storyblokchallenge webdev api