The initial idea behind this library

[AmAzing129]

Look at this awesome smart-form demo, @Shinji-Li and I think maybe we can create some UI components with built-in AI. Developers use <SmartForm> directly and users can benefit from it.

So how to do it? What' the meaning of bringing AI magic to components?

For LLM (Large Language Models), it takes an input, and returns an output. That's it. It is just a function, nothing more. I don't need to worry about how the function is implemented; I just need to call it at the right time.

Now I have a UI component. And I want to add AI capabilities to it. I select some data, give it to the model, then get the returns and render it. There is nothing different from fetching regular data from servers via HTTP.

If you look at it in this way, it is a hook with side effects.

So maybe I can build a hooks library to let developers use LLM as simple as possible.

Then, people can write some apps or components on top of this. Form + useAIModel = SmartForm.

There are currently many large models, and more may appear in the future. Thanks to Vercel ai we have an unified API.

More ideas are welcomed for further building.

[AmAzing129]

Maybe I need to use react-query to get the state of every fetch. Though AI fetching is not about "synchronizing and updating server state".

[AmAzing129]

data binding

For an <Input> there are value and onChange.

useAIModal is just about the request. When the request is custom, it's normal useQuery. So the lib need to help developers bind the ai data to the exsiting UI components. MAKE IT SIMPLE.