Short demo of generating and customizing a Retro Hero component with Blutui AI Components.
AI Components
AIA production-grade component generator that uses RAG and LLMs to produce valid Blutui syntax from natural language prompts.
Tech Stack
- Next.js
- AI SDK
- Mongo DB
- Tailwind CSS
Links
Overview
Blutui is a CMS with its own proprietary syntax, built to expose the platform’s full feature set. You can find their documentation here. Unlike widely-documented templating languages like Shopify Liquid, Blutui’s syntax had minimal representation in LLM training data which was a real barrier to reliable code generation.
To close that gap, I evaluated several approaches before settling on a combination of carefully engineered system prompts and a RAG (Retrieval-Augmented Generation) pipeline. The RAG layer grounds the model in Blutui’s documentation at inference time, which was a good fix for early hallucination issues where the model would confidently produce plausible but invalid syntax.
The end goal was a generative system capable of producing production-ready Blutui components from natural language, including the platform’s templating syntax, CMS bindings, and dynamic functions. Blutui AI Components is the result.
The tech stack includes Next.js for the frontend, MongoDB for the Database. The AI layer is built on the AI SDK, which also helps keep the system model-agnostic. Model selection is driven by benchmark performance against Blutui-specific generation tasks. We evaluate and swap as better options emerge. Generated component previews are accessible in the sidebar and the Favourites section.
Email: dionpinto000@gmail.com