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

There are two translation modes: field level and folder level.

For field-level translation, the main thing is that you need to make sure that the languages are configured in the space settings and that the fields you want to translate are marked as translatable in their schema.

configuration field level step 1

configuration field step 2

Folder level translation requires a folder structure and preferably have translatable fields (translatable fields are optional, the plugin can translate all text fields, but this feature is experimental and the resulting page may be broken).

Folder-level translation is all about folders (as you can guess). At the root level, you can have folders dedicated to different countries/languages, etc.

configuration folder level step 1

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 perform field-level translation, open the plugin, select the field mode, select the language you want to translate the content into, and click 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.

To translate at the folder level, select folder mode, select the folder where you want to place the translated page (a new page is created and translated in the folder as an alternate version of the current page, the current page remains untouched), enter the language you want to translate into, leave the option to translate only translatable fields if you have them, or select all fields (this will translate all text fields on the page, this feature is experimental)

Folder level UI

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.