Embedding custom React Components, specifically Recharts charts

[cgil]

Love the project, we're experimenting with using it internally. We have an entire Charting library and set of custom React client-side components built out using Recharts that we'd like to utilize in conversations with the GPT. Ideally letting the AI generate and display our components in the chat.

Is there a way to do this?

[OvidijusParsiunas]

Hi @cgil. In order to include your components inside the chat, they must be custom elements or shadow DOM elements (web components).

There are multiple different libraries/methods that will allow you to wrap/convert your React components into web components. E.g. react-to-web-component or convert-react-to-web-component and another example here. Google will be your best friend here :)

Then once you've done this, you will need to publish your component as an npm package (if it is in a different project). Once again Google/ChatGPT should be able to get you there.

After this is all done, you should be able to import and reference your component in messages using the html property. See the Custom Element - Chart example in the example list.

Mind you I have not created web components using React, but it is 100% possible using the steps above. Let me know if you have any questions. Thanks!

[cgil]

Thanks for the idea! Our team attempted this approach but although it's theoretically possible to convert to shadow DOM elements using some of the tools mentioned here, in practice the tooling isn't there yet. It's fairly straightforward to convert simple buttons or inputs, but converting complex components like custom Recharts charts is nonfunctional.

Is there a way to actually embed a React component without having to go through the workaround? I imagine in general this would be very powerful for users of this library to be able to use their own components in communication with a GPT.

[OvidijusParsiunas]

I wish this was possible, however Deep Chat renders its messages from strings (via innerHTML) and React (or any other framework) do not recognise dynamically rendered html as being part of their ecosystem, hence the components never get rendered.

There is unfortunately no real framework agnostic way of allowing the parent framework to recognise internal elements, therefore we use the only current possible solution which is web components.

Apologies for the shortcoming.