React

React v19 required

Use this package with react@19 and react-dom@19. For React 18 or earlier, use @neurodyn/ai-try-on.

Install

Add the React package to your application with your preferred package manager.

pnpm add @neurodyn/react-ai-try-on

npm install @neurodyn/react-ai-try-on

yarn add @neurodyn/react-ai-try-on

bun add @neurodyn/react-ai-try-on

Render the Dialog

AiTryOnDialog is a controlled component. Render it from a client component and pass the product data that should open in the viewer.

'use client'

import { useState } from 'react'
import { AiTryOnDialog } from '@neurodyn/react-ai-try-on'

export function App() {
  const [open, setOpen] = useState(false)

  return (
    <>
      <button type="button" onClick={() => setOpen(true)}>
        Try on
      </button>

      <AiTryOnDialog
        open={open}
        onOpenChange={setOpen}
        apiKey="..."
        productType="eyewear"
        productName="Sample Glasses"
        productImageSrc="https://example.com/products/glasses.jpg"
      />
    </>
  )
}

Next steps

Read the React API reference.

React

Install

Render the Dialog

Next steps

On this page