Help determine UI Improvements & UI Framework for the AI Spec Builder

[charleslavon]

Help to define an ideal end state for the UI structure of the AI Spec builder: https://app.near.ai/dev.near/widget/Index. perhaps then handing this off to Dima to implement alongside Vadim (because they are geographically closer to each other)

[calebjacob]

Hey @gabehamilton @shelegdmitriy, I left a comment on a UI docs epic to help give a summary of our 3 options for building UI. Option 2 (decentralized hosting) will probably end up being a great fit for the AI UI whenever it's ready to use.

In the mean time, my recommendation would be to set up a standard React project with Vite: https://blog.logrocket.com/build-react-typescript-app-vite/

Building a standard React SPA (as opposed to using a SSR meta framework like Next JS) should allow you to very easily switch over to the decentralized hosting solution that will eventually be built by @mpeterdev's team. In the mean time, you'll simply host the React application with a standard Web 2 hosting provider (eg: Vercel). From what I've seen so far, our AI product wouldn't really benefit or require SSR - so a SPA should be a good fit.

I had a quick chat with @charleslavon and it sounds like we don't need the UI for the AI product to match the Pagoda (AKA DIG) component style guide. This means we can pull in an existing, robust component library to get you building efficiently without reinventing the wheel or having to worry about styling.

Here are two, richly featured UI component libraries that could be great options:

• Prime React
• Mantine

Other libraries I'd highly recommend:

• Data fetching and async state management: https://tanstack.com/query
• Form validation: https://www.react-hook-form.com
• Global state management: https://github.com/pmndrs/zustand

Hopefully these recommendations are helpful! Feel free to do your own research and suggest alternative tooling. This is just meant to give you a good starting place. The only strong opinion I'd share is that we should always use TypeScript moving forward - but I'm pretty sure we're all in agreement there already. :)

[shelegdmitriy]

Thank you so much for this recommendation @calebjacob! +1 to typescript, react-hook-form, zustand actually everything you've mentioned here 😁

[gabehamilton]

@zavodil Some recommendations from @calebjacob for the longer term UI.

[gabehamilton]

@calebjacob or @gagdiez Looks like this is the code we'd need in a standalone app in order to use FastAuth (and the similar libraries for wallet selector and social functions). https://github.com/near/near-discovery/blob/5f0012d9dd7e389f9eecf6c8c38139b3835f5aa6/src/components/vm/VmInitializer.tsx#L97 The nice benefit of a BOS component is that is all configured already. Maybe our standard template for a standalone react app can include that?

[calebjacob]

Sure, that's a great example of something we can create a template for. In the mean time, you can use the react-on-chain repo as an example of how to initialize the wallet selector:

https://github.com/near/bos-web-engine/tree/main/packages/wallet-selector-control https://github.com/near/bos-web-engine/blob/main/apps/web/src/pages/_app.tsx https://github.com/near/bos-web-engine/blob/main/apps/web/src/constants.ts