Feature Request: Expose React/ReactDOM globally for advanced custom_js usage

[slovx2]

trafficstars

Feature Request: Expose React/ReactDOM globally for advanced custom_js usage

Problem

Chainlit supports custom_js for UI customization, but building complex interactive components requires React. Currently, there's no way to access the React instance that Chainlit uses internally.

Use Case

Building custom React components (e.g., fixed-position buttons, custom panels) that integrate seamlessly with Chainlit's UI:

// In custom_js file
function MyCustomUI() {
  const { useState } = window.React;
  const [count, setCount] = useState(0);
  return React.createElement('button', { onClick: () => setCount(count + 1) }, count);
}

Proposed Solution

Add an optional config to expose React globals:

[ui]
expose_react = false  # default: disabled for safety

When enabled:
// frontend/src/main.tsx
if (config.ui?.exposeReact) {
  window.React = React;
  window.ReactDOM = ReactDOM;
}

Benefits

• ✅ Extends existing custom_js capability without breaking changes
• ✅ Opt-in (disabled by default)
• ✅ Enables advanced users to build richer custom UIs
• ✅ Similar to WordPress Gutenberg, many plugin systems

Alternative

If this approach doesn't fit Chainlit's vision, would you accept documentation on maintaining a fork with this feature?

---

I'm happy to submit a PR if this feature is something you'd consider merging.