Skip to main content

Storyblok AI Toolkit

A Storyblok plugin that includes a suite of tools based on OpenAI for efficient content management.

Storyblok AI Toolkit

Intro

This post serves as the documentation for a plugin created by our team for working with the StoryBlok headless CMS.

Here, you can familiarize yourself with the plugin, explore the tools added to it, and find instructions on how to integrate it into your project.

Installation

To add the plugin to your project, follow the link. INSTALLATION LINK.

You will see a window to select a Storyblok space. Choose the one you need and click install.

installation link

After that, go to your space and open any page, you need to find the plugin icon and click on it.

tools icon placement

You should see a warning, as in the screenshot below. Confirm, return to the page, and that's it. The plugin is ready for use.

warnings

Configuration

The plugin works in conjunction with field-level translations. You can read more about this here. The main thing you need to ensure is that the languages are set up in the space settings, and that the fields you want to translate are marked as translatable in their schema.

configuration step 1

configuration step 2

With that, the configuration is complete and you can begin using it.

Translations feature

The plugin offers OpenAI-powered translations of your stories into various languages.

To use this feature, open the plugin, select the language you want to translate the content into, and press the button. Within 10-20 seconds, we will prepare a translation of the page, taking into account the context and topic discussed in it.

Plugin preview

After that, at the top of the workspace, select the language and switch to it.

Changing language

The page will be fully updated and ready for use, however, the changes will not be published. Please publish them after reviewing, so they become available in production.

German content version

This way, you can translate any documents, the text fields of which are indicated in the schema as translatable.

Please remember that your Front-End application must support working with locales. Here is the official documentation link on one of the ways to do this.

If you need help integrating locales at the Next.js level, you can contact us, we will be happy to assist. You can find examples of our work in our case studies.

Summary feature

This tool allows you to quickly summarize information in your Story, to use it for SEO descriptions or other purposes, such as a brief blog post description to display its business card.

To use it, select the Summary tab, enter the story title, and press the button, we will prepare the rest for you.

AI Summary step 1

AI Summary step 2

Pricing

The plugin is distributed on a free basis and is in the early stages of testing. The plugin has a limit on the number of uses, after which you will receive a notification asking you to contact us to increase the limit.

If you are interested in other AI features, please let us know, we are ready to create custom solutions that will cover narrower areas of projects and are interested in interaction.

WRITTEN BY

Alex Hramovich

Alex Hramovich

TechLead at FocusReactive