This is a submission for the Storyblok Challenge
What I Built
I built an AI powered chatbot for Storyblok documentation and support. The chatbot answers user questions using content fetched from a Storyblok powered FAQ space, providing instant, context aware help. My goal was to create a seamless, always available support experience for Storyblok users.
The chatbot fetches live FAQ data from Storyblok and uses OpenRouter's Mistral 7B to generate accurate, markdown formatted responses in a conversational style.
Demo
Demo showcases how users can interact with the chatbot by asking various questions about Storyblok documentation. The chatbot retrieves and displays relevant answers in real time, demonstrating its ability to handle a wide range of queries efficiently.
https://storyblok-chatbot-sunder-kumars-projects.vercel.app
Storyblok Space:
Here’s a public API endpoint that returns all published FAQ content from my Storyblok space in JSON format. View Published FAQ Content
Code Repository:
Checkout the repo for detailed instructions and to see all available tools. You can view the full list of tools directly in the Tools Section of the README.
https://github.com/Sunder-Kumar/storyblok_chatbot
Demo Screenshots
Chatbot Interface
How to login in Storyblok?
Who designed you?
Stoyblok Preview
Tech Stack
- Next.js (React)
- Tailwind CSS
- Storyblok (Headless CMS)
- OpenRouter (AI API)
- Axios
How I Used Storyblok
I used Storyblok as the backend platform to manage the FAQ content seamlessly. The chatbot retrieves FAQs directly from a designated Storyblok space by leveraging the Content Delivery API. This approach guarantees that responses remain consistently accurate and up to date. Additionally, the intuitive interface of the Storyblok editor makes managing and editing content straightforward and efficient.
AI Integration
For the Awesome AI category, I integrated OpenRouter’s API (Mistral model) to generate answers. The AI is prompted with Storyblok FAQ content and instructed to answer only using that information, ensuring accuracy and relevance.
Learnings and Takeaways
This project was a rewarding journey that taught me a great deal about combining cutting edge technologies to solve real world problems. One of the most significant challenges I faced was ensuring that the AI strictly relied on Storyblok content for its responses. Achieving this required careful experimentation with prompt engineering and API configurations.
I’m particularly proud of how quickly I was able to build a functional and valuable tool by leveraging Storyblok’s flexible content management system alongside modern AI APIs. This experience deepened my understanding of integrating headless CMS platforms with AI solutions, as well as the importance of building intuitive, user friendly chat interfaces.
Beyond the technical aspects, this project reinforced the importance of user centric design and the value of creating tools that enhance accessibility and efficiency. By providing instant, reliable support, this chatbot empowers Storyblok users to make the most of the platform, ultimately contributing to a more productive and satisfying experience.
Solo Submission by: Sunder Kumar
Top comments (0)