Flaire

Tired of writing CSS again and again? Me too...

Comment

Inspiration

I've been doing web dev for a few years now, and one of the most annoying parts about it are having to write CSS for big projects. You have to:

  1. Ensure that components maintain similar styling -> tough to do when iterating fast and developing new features and components daily.
  2. Write all of that CSS -> Kinda redundant to say, yeah, but writing CSS is so mind numbingly boring, so I felt like I had to lol

I wanted to build something to explore an AI agent framework I read about recently, and this seemed like the perfect opportunity.

What it does

TL;DR: Styles for you

Well, first of all, it styles for you.

Lets say you just finished writing the first webpage for a new project. Instead of styling it manually, or doing that whole back and forth with ChatGPT you're probably used to, you can just tell Flaire to style it for you.

Since it has an agentic framework, it keeps iterating and improving (it can render the style it outputs, which allows it to know exactly how the css would look in practice), as opposed to base LLMs - which are effectively just guessing and hoping they got it close enough.

But wait, there's more!

Flaire also has memory built in, which means it stores previously-output styles associated with certain components. So, when you come back to Flaire later with a new webpage in the same project, it already knows the kind of styling it has to do, and does it without even needing a prompt!

How we built it

TL;DR: Python, ReactJS, MongoDB, Google Cloud Program, Claude within an agentic framework.

Essentially, there is one main decision loop within the agent that has access to all the actions it can take. Since LLMs are the closest thing we have resembling actual thought so far, they are basically acting as the “brain” of the program.

For Flaire, I connected the LLM to the following actions: “reply ”, “screenshot”, “style”, “record ”, “finish”. This allows it to take the best decision in each run of the decision loop, allowing it to quickly serve the user’s queries.

For the sake of conciseness, I’ll just elaborate on the style action - that’s the main one. When the LLM decides to style the given code, it does the following sequentially:

  1. Splits the given html code into various UI components.
  2. Conducts memory retrievals based on those UI components.
    2.1. This includes retrievals for the typical best practices in CSS as well as retrievals from the particular project’s memory to understand how styling is to be done.
    2.2. Both of these were done using semantic search.
  3. Finally, once the memory had been retrieved, it is added to the working memory of the agent, which is then used as input for the LLM to decide the best way to style each separated UI component.
  4. This styling is then sent back directly to the user’s css input area.

Challenges we ran into

The main challenges I ran into was figuring out the best way to represent each cognitive component within the architecture in a computerized form.

This includes thinking about how to represent memory, reasoning, and learning, among other problems.

Eventually, I decided on representing

  • Reasoning through prompt engineering the LLM
  • Learning through making it record anything going wrong with the process or anything that it should remember.
  • Memory through storing sentences and their embeddings within a vector database.

Sidenote: I really wanted to include React support, but Flaire relies on actually rendering the provided code, so that the agent can have a look at what the style at a particular point looks like. And holy shit...re-rendering React inside a window is SUCH a nightmare. Scrapped that for now cus of time, but it's definitely something I'm adding soon.

Accomplishments that we're proud of

This was my first major research paper adaptation, and I'm personally proud of the fact that I was able to map the technical architecture effectively into code within 2 days.

I also think the output and use cases of this tool are super interesting - I can definitely see myself using it for future projects.

What we learned

I love the idea of building cognitive AI - it's pretty much my life's dream. The experience over the weekend taught me how to take ideas like memory, reasoning, and learning and represent them within code.

Another thing I learnt was how limited LLMs are in terms of actually replicating these cognitive architectures. While they are the best "brains" we have available today, it's interesting to see the differences between our own (human) intelligence and reasoning and the reasoning and intelligence developed in Flaire.

What's next for Flaire

I've got tons of ideas on how to make this much better:

Idea 1 : Add support for ReactJS (high priority)

Why? Devs primarily code in React and JSX, among other languages. While I chose HTML to work on during the hackathon (this is because rendering a sub-window of React is a nightmare), a production tool should have compatibility with React as well.

Idea 2: Make it a VS Code Extension running async as the users write code (high priority)

Why? Nobody wants to keep switching windows when they code. It's the main reason Cursor became so huge in the first place. Could this be another widespread tool if made into a VS Code extension? Maybe..

Idea 3: Changing the memory framework to a more symbolic architecture (med priority)

Why? Having a symbolic / relational architecture for memory as opposed to a semantic / embedding based one will help give a lot better results for the model, as the retrieval becomes a lot more accurate.

Built With

Share this project:

Updates