Generally speaking the way how end user use this project comes down to two steps
- Step 1: make the app connect to AI model
- Step 2: tuning the theme, layout, and style
As a tech pre-sales guy, when I want to present yet another AI application or just a AI chat demo for our customers, I don't want to start from scratch. Picking-up a github project, evaluate and decide. At last couple of hours later the demo is done.
- So there is a demo of whole story not only present how it looks, but also how it works
- So there is a website to present the demo, but the app should be standalone and reusable
- So there is an AI app standalone.
- So there is a monorepo hosts both website and standalone all together
As a engineer, I ask myself where to start ? The UI or the State / Behavior ? What is the common sense to build a AI app ?
What i meant is that we have to start from beginning with something serious like workflow, right ?
The data returned from server is the single source of truth for an AI app. How many different kinds of data we have to deal with ? Emmmmm, with little effort to explore via Github, the vercel ai comes to rescue.
Still We need an agent to wrap it up and make it become the lower dependency. The agent itself is the real source of truth for the app.
In frontend word or more specifically in React word, the source of truth is the state / behavior. which is commonly encapsulated as hook. Let's see how Open Source community handle it as table below.
| Project | Data Layer | Comment |
|---|---|---|
| nextjs-vllm-ui | ai/react | coupled with ai/react |
| chatbot-ui | context | |
| ChatGPT-Next-Web | custom hook | desktop support |
| LibreChat | messages tree | how to use |
| Open Webui | ||
| dify | ||
| anything llm |
The implementation of the xyzchat should base on the design. No matter how your design is completed it will somehow end up with something called design system. It is not the industry standard, but every big company has its own design system. You can also easily trace it back to the Atomic Design. The author of Atomic Design, Brad Frost, is believed to be the first one to introduce the concept of design system. Great job! Brad.
Btw if you want to really appreciate the power of metaphor that Brad used in Atomic Design, you better review the related chemistry textbook. Trust me it is worth it.
Like how every living thing is made up of cells in a very sophisticated way.
Determining what design system is made of is never a easy job. However it is where the fun begins right? Just give it a try. Besides you never start from scratch. There are many tools out there for you. Many wonderful design systems are open sourced. Take polaris for example, we could build the design system based on it.
At this time I would like to start from layout the most basic part of design system. The glue connected every component together.
According to anatomy of shadcn-ui, a single component broken down to those parts
-
headless1
- state
- behavior
-
style
- structural
- visual
shadcn-ui gave us those tools below to customize the style of a component.
In short the tools below serve for the purpose of customizing the style of a component. It assumes that your component must has variants. And the style will be adjusted based on the variants. It is all about the style and the css behind it.
-
- a function for defining the variance of a component
- return another function applied styles conditionally
- an example in react cva + tailwind / react
-
VariantProps
- expose the available variants as an Enum on the variants prop
- generated the types for the variants prop
-
cn
- mix of clsx & twMerge libs
- clsx conditionally apply styles
- twMerge
fix
CSS Cascade affects Tailwindcaveat
Caveats:
- do use tailwind cli to do the css class tree shaking
Footnotes
-
headless/renderless: A example in vue.js. ↩