Make custom elements a first class citizen

[josca42]

Quickly creating beautiful UI elements in claude and adding them as custom elements in chainlit enables creating beautiful UX flows that differentiate from the just another chat bot experience. A quick example of this is shown in this video .

Claude natively uses shadcn and recharts so everything almost work out of the box but a few key changes are needed. More tailwind styling needs to be made available to the custom elements. And since a lot of chainlit users will likely be using it related to analysis workflows - preferring chainlit to streamlit etc. - then the charting functionality used by claude should be available. This means recharts and the shadcn chart component.

This also addresses #2328

[josca42]

As promised @asvishnyakov

[josca42]

If these changes are something you would like to add then I'd be happy to create some good docs on how to use this kind of workflow to quickly create custom UI elements that you can integrate in your chatbot :-).

[hayescode]

Thanks for this contribution @josca42 this looks very promising! Do you have some examples code to run and see how this works?

Docs/Cookbook will be very helpful for the community once this is released for sure.

[sandangel]

some example usage would be great. currently I'm not sure how to use this component.

[github-actions[bot]]

This PR is stale because it has been open for 14 days with no activity.

[sergiossm]

any update on this?