BlockArt: Bringing GPT-4o Image Generation to Storyblok’s CMS

This is a submission for the Storyblok Challenge

What I Built

Meet BlockArt — an AI-powered image editing plugin that turns Storyblok into your creative playground.

No more jumping between tools or begging designers for assets. With BlockArt, your CMS becomes your studio. Generate images from text. Mask and edit like a pro. Inpaint with surgical precision. Drop in a wild prompt and watch it stream in, pixel by pixel, right inside Storyblok.

It’s not just about playing with images. This thing is smart. It writes your alt-texts, enhances your prompts, and syncs directly with Storyblok’s asset system.

Core Capabilities

🎨 AI-Powered Image Editing: Full image transformation and precise inpainting using OpenAI's GPT-4o Responses API
🖼️ Text-to-Image Generation: Create entirely new images from text descriptions
🎭 Advanced Mask Editor: Pixel-perfect selection tools for targeted editing
📝 Smart Prompt Enhancement: Leverage Storyblok's Prompt AI (Beta) for intelligent suggestion improvements
♿ Automatic Accessibility: AI-generated alt-text for SEO and accessibility compliance
📚 Version History: Track and revert between different edits
🔄 Seamless Asset Management: Complete integration with Storyblok's asset pipeline
🌍 Multi-Region Support: Works with all Storyblok regions (US, EU, CA, AP, CN)

Demo

youneslaaroussi / blockart

Generate and Edit Storyblok Assets with AI

BlockArt Storyblok Field Plugin

A powerful Storyblok field plugin for AI-powered image editing and asset management.

🎥 Watch the Videos

🚀 Demo Video

⚙️ Setup Instructions

Prerequisites

Before getting started, make sure you have the following installed and set up:

• Node.js (version 16 or higher)
• pnpm package manager
• Storyblok account with at least one space
• Git for version control
• OpenAI account with billing enabled and an API key

Quick Setup

Option 1: Direct Plugin Installation (Recommended)

The easiest way to get started is to use our pre-built plugin file:

Step	Screenshot	Instructions
1		Go to My Plugins in your Storyblok account and click New Field-type
2		Enter a name for your plugin (e.g., "my-blockart-plugin") and click Save
3		Copy the contents of ./build_plugin.js from this repository and paste it into the code editor, then click Save and Publish

Option 2: Build from Source

If you prefer to build the plugin…

View on GitHub

Here’s how it goes: you open your Storyblok editor, drop in the BlockArt field, and boom — instant image playground. You can start fresh with a text prompt or pick an existing asset. Want to tweak an image? Choose full edit or inpainting mode. Our built-in mask editor lets you paint over the part you want to change. Then feed it a smart prompt (manually or get help from Storyblok’s Prompt AI), and let GPT-4o work its magic.

As the image streams in, you watch it evolve in real-time. Once happy, you hit save and the image is stored back in your Storyblok assets, complete with metadata, alt-text, and version history. It’s buttery-smooth.

See the Github README or watch this Vimeo to setup BlockArt.

Storyblok Space: https://app.storyblok.com/#/me/spaces/285338869245722/

(note that this link is not publicly accessible)

Live Website that uses assets created using Storyblok: https://main.d1uj1niyggenq6.amplifyapp.com/landing?_storyblok_published=61822370039376
(but please note that the actual deliverable of my submission is the plugin itself, which is INSIDE the storyblok editor, and unfortunately spaces cannot be shared publicly so please setup the plugin within your own editor using instructions above)

And here is the repo with the demo space code: https://github.com/youneslaaroussi/blockart-demo-space

How I Used Storyblok

BlockArt demonstrates deep integration with Storyblok's ecosystem through multiple API layers and features:

Local Testing with Storyblok CLI

To rapidly prototype and test BlockArt in a realistic environment, I used the Storyblok CLI v4 to spin up a full-featured local demo space. This allowed me to:

• Scaffold a clean Storyblok space structure with demo components
• Test plugin integration directly within simulated content blocks
• Validate asset upload workflows and Prompt AI interactions without polluting a production space
• Iterate faster by decoupling plugin development from live projects
• Run a TLS Proxy to directly serve localhost and use it in Storyblok editor

This local CLI-powered setup was instrumental in refining the user experience and debugging complex edge cases during development.

🔧 Management API Mastery

• Complete Asset Lifecycle: From signed upload requests to S3 storage to asset finalization
• Multi-Region Architecture: Supports all Storyblok regions with dynamic API endpoint resolution
• Advanced Asset Management: Upload, update, delete, and retrieve operations with comprehensive error handling
• Metadata Management: Automatic alt-text and title updates for improved SEO and accessibility

🎨 Field Plugin SDK Integration

• Native UI Integration: Seamlessly blends with Storyblok's interface design system
• Real-time Content Sync: Bidirectional data flow between plugin and Storyblok
• Asset Browser Integration: Direct access to existing media library
• Plugin State Management: Persistent storage of edit history and user preferences

🤖 Storyblok Prompt AI (Beta) Integration

The plugin leverages Storyblok's cutting-edge Prompt AI for enhanced user experience:

// Example AI enhancement implementation
const enhancePrompt = async (action, originalPrompt) => {
  return await promptAIAction({
    action: action, // 'rephrase', 'extend', 'simplify', etc.
    text: originalPrompt,
    textLength: '160',
    basedOnCurrentStory: true,
  });
};

Supported Enhancement Actions:

• prompt: Generate creative suggestions
• rephrase: Improve clarity and effectiveness
• extend: Add rich descriptive details
• simplify: Make prompts more accessible
• adjust-tone: Modify style and mood
• fix_spelling_and_grammar: Ensure quality

Frontend & Core

• React 18.3 with TypeScript for robust type safety
• Vite 5.4 for lightning-fast development and optimized builds
• Storyblok Field Plugin SDK 1.6 for seamless CMS integration
• Lucide React for consistent iconography

AI & Image Processing

• OpenAI SDK 5.5 with GPT-4o Responses API for advanced image editing
• Custom Image Processing Pipeline for format conversion and optimization
• Real-time Streaming for progressive image generation feedback

Testing & Quality

• Vitest for comprehensive unit testing
• Testing Library for component testing
• ESLint with TypeScript rules for code quality

AI Integration

BlockArt pushes the boundaries of AI integration within Storyblok, creating a seamless bridge between creative vision and technical execution:

🚀 Cutting-Edge AI Models

• OpenAI GPT-4o Responses API: Leverages the latest multimodal capabilities for superior image understanding and generation
• Advanced Image Processing: Supports both full image editing and precise inpainting with mask-based editing
• Streaming Generation: Real-time progress updates with partial image previews for enhanced user experience

🎯 Intelligent Workflow Automation

• Context-Aware Processing: AI understands both image content and user intent for optimal results
• Automatic Alt-Text Generation: Uses vision models to create descriptive, SEO-friendly alt attributes
• Smart Prompt Enhancement: Integrates with Storyblok's Prompt AI to improve user prompts automatically
• Version Control Intelligence: Tracks editing decisions and suggests improvements based on history

🔄 Seamless Content Integration

The AI layer doesn't just generate images—it creates content that's immediately ready for production:

// Example of the complete AI-to-Storyblok pipeline
const processAndSaveImage = async (prompt: string, originalImage: string) => {
  // 1. AI processes the image
  const editedImage = await processImageWithStreaming(originalImage, prompt);

  // 2. AI generates accessible alt-text
  const altText = await generateAltText(editedImage);

  // 3. Save to Storyblok with metadata
  const asset = await storyblokAPI.uploadAsset(
    editedImage, 
    generateFilename(originalFilename, prompt),
    altText,
    `AI-edited: ${prompt}`
  );

  return asset;
};

📈 Performance Optimizations

• Streaming Updates: Users see progress in real-time, improving perceived performance
• Intelligent Caching: Reduces API calls while maintaining data freshness
• Adaptive Quality: Balances generation speed with output quality based on use case
• Error Recovery: Graceful handling of API failures with automatic retry mechanisms

Learnings and Takeaways

Building BlockArt has been an incredible journey that pushed the boundaries of what's possible when combining AI with modern CMS platforms.

🏆 What I'm Proud Of

Technical Innovation: Successfully integrated OpenAI's newest GPT-4o Responses API with Storyblok's Management API, creating a seamless AI-powered workflow that feels native to the platform.

User Experience Design: Created an intuitive multi-step interface that makes complex AI image editing accessible to content creators without technical backgrounds. The streaming updates and real-time previews provide immediate feedback that enhances the creative process.

Comprehensive Integration: Went beyond basic functionality to implement a complete asset management pipeline, version history, accessibility features, and multi-region support—making it production-ready for enterprise use.

Accessibility First: Automatic alt-text generation ensures every AI-created image meets accessibility standards, something often overlooked in AI image tools.

🔧 Technical Challenges Overcome

Complex Asset Pipeline: Implementing Storyblok's three-stage upload process (signed response → S3 upload → finalization) required deep understanding of cloud storage patterns and error handling.

AI Model Integration: Working with OpenAI's latest Responses API meant adapting to cutting-edge technology with limited documentation, requiring extensive experimentation and optimization.

Real-time Streaming: Building a responsive UI that handles streaming image generation while maintaining state consistency across React components was technically challenging but crucial for user experience.

Cross-Browser Compatibility: Ensuring the plugin works consistently across different browsers, especially handling canvas operations and file uploads in various environments.

💡 Key Insights

AI + CMS Synergy: The combination of AI capabilities with robust content management creates exponentially more value than either technology alone. Users can generate, edit, and immediately deploy content in a single workflow.

Progressive Enhancement: Starting with a solid foundation (Storyblok's infrastructure) and adding AI as an enhancement layer proved more successful than building AI-first and trying to integrate CMS features.

User-Centric AI: The most impactful AI features aren't the most technically impressive ones—they're the ones that solve real user problems, like automatic alt-text generation and prompt enhancement.

Developer Experience Matters: Storyblok's excellent documentation, SDK, and developer tools made it possible to focus on innovation rather than fighting with APIs.

🚀 Future Vision

This project demonstrates the incredible potential of AI-augmented content management. I envision a future where:

• Content creators can describe their vision in natural language and see it instantly realized
• Accessibility becomes automatic rather than an afterthought
• Creative workflows are enhanced, not replaced, by AI assistance
• CMS platforms become intelligent creative partners

BlockArt is just the beginning of this transformation, and I'm excited to continue pushing the boundaries of what's possible when human creativity meets artificial intelligence within powerful platforms like Storyblok.

---

Built with ❤️ for the Storyblok Developer Challenge

Comments

[Younes Laaroussi]

count how many times i said block in the demo 🤭