Using old React versions

This guide provides instructions for configuring assistant-ui to work with React 18 or older versions.

React 18

If you're using React 18, you need to update the shadcn/ui components to work with forwardRef. Specifically, you need to modify the Button component.

Updating the Button Component

Navigate to your button component file (typically /components/ui/button.tsx) and wrap the Button component with forwardRef:

// Before
function Button({
  className,
  variant,
  size,
  asChild = false,
  ...props
}: React.ComponentProps<"button"> &
  VariantProps<typeof buttonVariants> & {
    asChild?: boolean;
  }) {
  const Comp = asChild ? Slot : "button";
 
  return (
    <Comp
      data-slot="button"
      className={cn(buttonVariants({ variant, size, className }))}
      {...props}
    />
  );
}
 
// After
const Button = React.forwardRef<
  HTMLButtonElement,
  React.ComponentProps<"button"> &
    VariantProps<typeof buttonVariants> & {
      asChild?: boolean;
    }
>(({ className, variant, size, asChild = false, ...props }, ref) => {
  const Comp = asChild ? Slot : "button";
 
  return (
    <Comp
      data-slot="button"
      className={cn(buttonVariants({ variant, size, className }))}
      ref={ref}
      {...props}
    />
  );
});
Button.displayName = "Button";

Note: If you're using a lower React version (17 or 16), you'll also need to follow the instructions for that version.

React 17

For React 17 compatibility, in addition to the modifications outlined for React 18, you must also include a polyfill for the useSyncExternalStore hook (utilized by zustand).

Patching Zustand with patch-package

Since the assistant-ui uses zustand internally, which depends on useSyncExternalStore, you'll need to patch the zustand package directly:

1. Install the required packages:

npm install use-sync-external-store patch-package
# or
yarn add use-sync-external-store patch-package

2. Add a postinstall script to your package.json:

{
  "scripts": {
    "postinstall": "patch-package"
  }
}

3. Create a patch for zustand by creating a file at patches/zustand+5.x.x.patch (replace 5.x.x with the installed zustand version, which you can find by examining package-lock.json or yarn.lock) with the following content:

diff --git a/node_modules/zustand/react.js b/node_modules/zustand/react.js
index 7599cfb..64530a8 100644
--- a/node_modules/zustand/react.js
+++ b/node_modules/zustand/react.js
@@ -1,6 +1,6 @@
 'use strict';
 
-var React = require('react');
+var React = require('use-sync-external-store/shim');
 var vanilla = require('zustand/vanilla');
 
 const identity = (arg) => arg;
@@ -10,7 +10,7 @@ function useStore(api, selector = identity) {
     () => selector(api.getState()),
     () => selector(api.getInitialState())
   );
-  React.useDebugValue(slice);
+  //React.useDebugValue(slice);
   return slice;
 }
 const createImpl = (createState) => {

4. Run the postinstall script to apply the patch:

npm run postinstall
# or
yarn postinstall

This patch replaces the React import in zustand with the polyfill from use-sync-external-store/shim and comments out the useDebugValue call which isn't needed.

Note: If you're using React 16, you'll also need to follow the instructions for that version.

React 16

For React 16 compatibility, you need to apply all the steps for React 18 and React 17 above.

Additional Resources

If you encounter any issues with React compatibility, please:

1. Check that all required dependencies are installed
2. Ensure your component modifications are correctly implemented
3. Join our Discord community for direct support