Blutui AI Components

Overview

Blutui is a CMS with its own specialised syntax designed to leverage various platform features. You can check out their documentation here for an example of the specific syntax the AI needs to generate.

Because Blutui is a relatively small startup, LLMs are not trained on its proprietary documentation as extensively as they are on something like Shopify Liquid. To bridge this gap, I experimented with various methods including system prompts and RAG-based (Retrieval-Augmented Generation) approaches to ensure the AI could accurately generate syntax it was not originally trained to understand. We did encounter a lot of hallucination in the early days of development, but were able to reign in that behaviour.

The objective was to engineer a generative system capable of producing production ready Blutui components from natural language prompts. (with all of the "special" syntax/functions needed to utilise the full suite of Blutui features). Blutui AI Components is a component generator built out of that request.

It uses Next.js as the front-end framework and the AI SDK to connect LLMs to the app. Using the AI SDK enables us to keep the project model-agnostic as such, we choose models based on how they perform at the task for building modern Blutui web components. For the DB, we use MongoDB, and the entire app is hosted on Vercel. An S3 bucket is used to store the generated images from the generated components, which can be viewed on the sidebar preview or when you add a component to the favourites section (you can use the carousel above to view that section).

While this overview highlights Blutui AI components, there are numerous nuances that I haven’t detailed here. If you’re interested in a technical deep-dive into the codebase or my design decisions, I’d be happy to discuss them further.

Email: dionpinto000@gmail.com