LangCSS

• 

  Landing page

Inspiration

After witnessing the power of AI chat to power apps and do more than just talk, I decided to embark on building an app to make Tailwind design a lot easier and faster.

What it does

You chat to the assistant and it generates HTML, Tailwind CSS and Tailwind Config to meet your needs. You can then make manual edits on any of this, and carry on the chat, seeing an up to date preview at all times. Tailwind that usually needs compiling on a dev machine is done directly in the browser.

How I built it

I used Visual Studio to create a SPA app using Vite and .NET. Then carried on the project in VSCode. Used React for the front end and C# for the back.

Challenges I ran into

The main challenge is context length of LLMs is too short for long HTML documents, and hallucinations can happen. These are still challenges I am looking to solve. Also LLMs aren't too artistic.

Accomplishments that I'm proud of

Getting Tailwind to compile in the browser. Tailwind is designed to run in Node.js (Rust for v4) so it is a challenge getting that to work in the browser when it assumes things like fs exist. There was no current working open source code for this so I made a go of it myself and open sourced that part.

What's next for LangCSS

More minor quality of life features in the editor etc. Overhaul of how the AI works, so it can handle larger documents.

Built With

• c#
• openai
• react
• typescript