Integration inquiry: Access OpenUI capabilities into current AntD/X based project

[yyt520]

Hello!
For the past year, I have been researching and developing generative UI interaction applications within my company. Our project is positioned to focus solely on frontend rendering. Internally, we integrate our project with backend agents from other services, so our data source comes from the integrated backend services.
Currently our project is an all-in-one frontend and backend solution. The frontend is built with Ant Design X (https://ant-design-x.antgroup.com/components/introduce-cn/). All rendered components are customized based on Ant Design, with some charts implemented using G2.
However, I feel our current approach is not truly generative. We are still constantly adding and defining new components manually. That’s why I was really excited to discover OpenUI.
I would like to ask how I can integrate your full set of capabilities into our existing project architecture. We hope to adopt and leverage your capabilities.
Looking forward to your reply, thank you very much!

[zahlekhan]

Hey @yyt520, thanks for checking us out!

For your use case, you can follow the concepts here:
https://www.openui.com/docs/openui-lang/overview

At a high level, the integration would look like this:

1. Define a Zod schema for each Ant Design / customized Ant Design component. The schema should describe all supported props, plus guidance on when the model should use that component.
2. Register those wrapped components as an OpenUI component library.
3. Use that component library to generate the system prompt. Since your backend is responsible for LLM calls and prompt generation, this system prompt should be added on the backend side.
4. The model will respond using the OpenUI-lang schema.
5. Pass that OpenUI-lang response back to the frontend, where the OpenUI renderer will render your wrapped React components.

You do not need to rewrite your existing customized Ant Design components. You can wrap them and expose them to OpenUI through schemas.

We also have React reference code that should be useful for your stack.

A couple of questions so I can point you to the right example:

1. Are you building a chat assistant, copilot, or another type of generative UI product?
2. What backend / LLM stack are you using? For example: LangChain, Vercel AI SDK, a custom agent framework, or something else?

Also, we are very active on Discord if you’d like to discuss directly:
https://discord.com/invite/Pbv5PsqUSv