> ## Documentation Index
> Fetch the complete documentation index at: https://docs.aris247.com/llms.txt
> Use this file to discover all available pages before exploring further.
# React / Next.js
> Embed the ARIS widget in a React or Next.js application.
## React component
```tsx theme={null}
import { useEffect } from 'react';
function ArisWidget({ brokerageId }: { brokerageId: string }) {
useEffect(() => {
const script = document.createElement('script');
script.src = 'https://aris247.com/widget.js';
script.setAttribute('data-brokerage-id', brokerageId);
script.async = true;
document.body.appendChild(script);
return () => {
document.body.removeChild(script);
};
}, [brokerageId]);
return null;
}
export default ArisWidget;
```
## Usage
```tsx app/layout.tsx theme={null}
import ArisWidget from '@/components/ArisWidget';
export default function RootLayout({ children }) {
return (
{children}
);
}
```
```tsx pages/_app.tsx theme={null}
import ArisWidget from '@/components/ArisWidget';
export default function App({ Component, pageProps }) {
return (
<>
);
}
```
## Environment variable
```bash .env.local theme={null}
NEXT_PUBLIC_ARIS_BROKERAGE_ID=550e8400-e29b-41d4-a716-446655440000
```
```tsx theme={null}
```
## Using the CLI
The fastest way to set this up:
```bash theme={null}
export ARIS_API_KEY=aris_yourkey
npx @aris/cli init
```
The CLI detects Next.js/React automatically and generates the correct component code.