FITC Storyblok 2024 Talk

My first experience with content management was in high school using "CushyCMS"—a simple system where you'd mark editable regions in HTML files with data attributes and provide FTP credentials. The system would then update files directly on the server. While it lacked features like databases or version control, it let me update content without coding. I was instantly hooked.

I spent most of my career working in CMS’s from there. I started off in college in Drupal 6, and worked my way over to some freelance Wordpress. In my first job in advertising I worked on a homegrown Rails solution, and subsequently vowed to never do that again. I then moved on to enterprise solutions like Adobe Experience Manager, EpiServer (now known as Optimizely), and Sitecore. Each had their positives/negatives, and I spent the mid-point of my career migrating to and from these solutions.

Then along came hybrid and headless solutions like Sanity and Contentful. These solutions made it easier for a single development workflow using javascript to manage these experiences. While this improved the developer experience, it had some disadvantages in the editor experience: the author experience wasn’t intuitive or visual, and changes were sometimes slow to render.

This is where Storyblok comes in: their visual editor made it extremely easy for marketers and editors to be able to build out pages, preview what they would look like, and easily build great experiences from a single interface. The developer experience was stellar as well with their well-documented APIs and command-line interfaces (CLIs) for dealing with content. These APIs and CLIs also make it really easy to integrate with GenAI services like Anthropic’s Claude and OpenAI’s ChatGPT.

The GenAI Hypothesis

If the #1 reason for migrating to different CMS platforms is because their editors dislike it, how can we reduce friction by leveraging GenAI to make these experiences better?

There are many tasks in CMS that cause friction, and different types of users or roles may have different pain points. For our purposes, let’s take a look at the following:

• Accessibility specialists: generating alternative text for uploaded assets
• SEO Specialists: Generating meta tags and JSON+LD
• Editors: Enforce tone / voice / style guide for brand consistency.
• Marketers: Generating landing pages from scratch

Let’s take a look at how we can use GenAI for each of the pain points above.

Our Technology Solution Stack

The goal of this talk is to be technology agnostic, however we have to start somewhere. Today we’ll be using Next.js for our frontend, Netlify for our hosting provider, and OpenAI as our generative AI provider.

Storyblok CMS:

There are a number of features in Storyblok that make it a prime candidate for enhancing via our own AI workflows. It uses a robust rich text editor, built-in image editor, customizable data schemas, and a block-based editor. Storyblok exposes all content via an API, so interacting with it in a dynamic and programmatic way is easy.

Serverless Functions:

Since we can access all of our site’s data over an API, and trigger certain events utilizing Storyblok’s webhooks, we can leverage serverless functions to extend Storyblok’s functionality.

Each of these functions follows three main steps. First, we create a prompt to send to OpenAI—think of this like having a conversation with ChatGPT, except our function handles the communication. Second, we send this prompt along with our chosen model to OpenAI. Finally, we receive OpenAI's response and use it to update the content in Storyblok.

Enhancing Storyblok with Generative AI: Demos

Automatically adding Alt Text to User-uploaded Images

For our first example, let’s try something relatively easy for our Gen AI Large Language Model (LLMs) to do. What if whenever we uploaded a a visual image (png, jpg, gif, etc) we could ask OpenAI’s ChatGPT 4o vision model to tell us what is in the image, and return that as a string, then upload that string back to Storyblok as the alt description of the image?

Here’s a visual representation of what we are trying to do with this workflow.

1. A user uploads an image to Storyblok, triggering a webhook to our external serverless function
2. Our serverless function converts the image to base64 format
3. The function sends the base64 image to OpenAI with instructions to generate descriptive alt text under 100 characters
4. OpenAI returns the generated alt text
5. The function uses the Storyblok Content API to add the alt text to the image

While this involves multiple steps, the entire process only takes a few seconds to complete.

Here is a screen recording of this in action:

Enforcing Style Guide or Visual Voice automatically in Content

Over the years, I've worked with many marketing teams who take their brand standards seriously. Enforcing these standards can be challenging—especially with large teams, new employees, or tight deadlines. What if we could use generative AI to review our content and suggest changes that align with our brand style guide?

The way this works is:

1. We have a custom content type in Storyblok called “prompts”. This allows users to manage the brand style guide directly in the CMS.
2. On save of a piece of content, we send the content along with the “prompts” over to OpenAI and have OpenAI compare the content against the style guide to look for any content violations.
3. We return a list of suggested edits that we believe the user should make in order to meet the brand standards.

So how much does this all cost?

OpenAI and other AI service providers charge based on token usage in both prompts and responses. Tokens increase with the length and complexity of both inputs and outputs. The table below shows the average token count for each demo's prompts and responses presented in this article.

While results may vary, my total cost for developing and testing all these demos—including development and debugging—came in at just $1.29, well under my $20 budget. Of course, in a production environment with multiple users and frequent webhook triggers throughout the day, costs would increase.

Looking at realistic usage scenarios (100 images analyzed, 24 blog posts monthly, etc), these tools would cost less than $15 per month. This is a modest investment considering how it streamlines workflows and enhances the content creation experience for various team members managing your digital experiences.

In summary

One exercise we find to be successful with our clients is the idea of Value Mapping—plotting jobs-to-be-done on a chart where the Y-axis ranges from "time saving" at zero to "value creating" at the top, while the X-axis spans from "tools" to "innovations." While it's tempting to start with high-impact work in the upper right quadrant of "value creating" and "innovations," this approach often proves challenging at first. Instead, starting smaller in the bottom left and working upward is more effective, as teams gradually master the tools and their capabilities. This creates a staircase of measurable wins that ultimately leads to powerful software that unlocks significant potential.

The demos presented in this article followed this formula as well, starting with adding some alt text to images behind the scenes, to empowering marketers to generate landing pages on the fly. This thinking builds trust with small wins and snowballs to doing some potentially really powerful work.

Overall, the technology to enable this within Storyblok exists today, and gen AI and LLMs are getting more powerful all of the time. What else do you think could be possible with GenAI?