PromptBlok

Prompt Blok
Accessibility reviewer

Demo Video Link https://youtu.be/yiGru0iyr88?si=9WdDt1M4RqJooPyU

Inspiration

With the rapid advancements in AI, we saw an opportunity to reimagine how content is created using Storyblok.

Building components and assembling full stories can be time-consuming. We wanted to leverage AI to speed up the development process, helping teams generate structured components and entire stories in minutes instead of hours. By automating repetitive tasks and providing intelligent suggestions on the accessibility, PromptBlok aims to enhance the overall user experience, making content creation faster, more consistent, and more accessible.

What it does

PromptBlok is an AI-powered content assistant which can be extended as a Storyblok Space Plugin that transforms how teams create, manage, and optimize content. Its main capabilities include:

Story Generation

Users can select multiple components and provide a high-level story prompt.
AI intelligently assembles the components into a coherent story, suggesting headlines, text, and optional media.
The resulting story is ready for editing or publishing within Storyblok.

Accessibility & Quality Audits

PromptBlok analyzes any story for headings, alt text, links/buttons, readability, inclusive language, and SEO metadata.
Provides a score (0–100) along with actionable recommendations to improve accessibility and content quality.

Component Generation

Editors provide a prompt describing the type of content block they need (e.g., hero section, text block, call-to-action).
AI generates a fully structured component that can be instantly added to Storyblok.
This speeds up content creation while maintaining consistency across pages.

By integrating these capabilities into a Space Plugin, PromptBlok allows content teams to save time, ensure quality, and focus on creativity.

How we built it

PromptBlok was developed as a webapp for this hackathon but it can be extended to Storyblok Space Plugin it's build with a Next.js web application powering the AI interactions. Here’s how we built it:

Tech Stack

Frontend: Next.js and React for a dynamic, interactive interface within the Storyblok editor.
CMS: Storyblok Management/Content API to fetch create components and stories programmatically.
AI Integration: Google Gemini API for generating content blocks and story-level suggestions based on prompts.
Styling & UI: Tailwind CSS for a clean, responsive interface that feels native to the Storyblok editor.

Workflow

Component Generation
- Users provide a prompt describing the type of component they want.
- The app sends the prompt to the Gemini API, receives AI-generated content, and uses the Storyblok Management API to create the component directly in the space.
Story Generation
- Users views components and provide a story-level prompt.
- Gemini API assembles the components into a coherent story, generating headlines, text, and optional media.
- The completed story is saved in Storyblok using Management/Content API for further editing or publishing.
Accessibility & Quality Reporting
- The plugin analyzes headings, alt text, links/buttons, readability, inclusive language, and SEO metadata.
- Provides a score (0–100) along with actionable recommendations in a sidebar panel.

Challenges we ran into

While building PromptBlok, we encountered a few significant challenges:

LLM Hallucinations
- Occasionally, the AI would generate content that was irrelevant or factually incorrect.
- We mitigated this using prompt engineering and AI best practices, but it’s not completely eliminated.
Space Plugin Publishing Limitations
- We were unable to publish the plugin officially due to using a trial Storyblok account.
- This restricted testing with real users and deployment beyond the development environment.

Despite these challenges, we were able to build a fully functional prototype that demonstrates the potential of AI-driven content creation and accessibility auditing within Storyblok.

Accomplishments that we're proud of

With PromptBlok, we achieved several key milestones that demonstrate the potential of AI-powered content creation:

Complete Story Generation
- Successfully generate full stories and structured content using AI prompts, combining multiple components into coherent, ready-to-edit pages, providing a good start for users.
Accessibility and Readability Analysis
- Implemented automated accessibility and readability audits for stories.
- Provides a score along with actionable recommendations to improve headings, alt text, links, inclusive language, and overall content quality.

These accomplishments show that PromptBlok not only speeds up content creation but also ensures that the generated stories are accessible, high-quality, and editor-friendly.

What we learned

While building PromptBlok, we gained valuable insights and experience:

Deep Understanding of Storyblok
- Explored the Storyblok platform thoroughly, went through its documentation, and understood its core concepts.
- Learned how to work with components, stories, and spaces, and how to structure content effectively within a headless CMS.
APIs and Integration
- Gained hands-on experience with the Storyblok Management API for programmatically creating and updating components and stories.
AI-Powered Content Workflows
- Understood the nuances of prompt engineering to guide LLMs for structured content generation.
- Learned to balance AI creativity with practical constraints of CMS structures and accessibility requirements.

What's next for PromptBlok

We have big plans to evolve PromptBlok into a more powerful and versatile AI content assistant:

Official Space Plugin Deployment
- Publish PromptBlok as an official Storyblok Space Plugin, making it accessible to a wider audience.
Media & Interactive Content
- Extend AI generation to include images, videos, and interactive content blocks.