> ## Documentation Index
> Fetch the complete documentation index at: https://paperlinkai.com/docs/llms.txt
> Use this file to discover all available pages before exploring further.
# React, Next.js, Vue and others
> Add the Paperlink AI widget to React, Next.js, Vue and plain HTML sites.
Every framework uses the same script tag. Pick the tab for your framework. For a floating widget on every page, add the tag with `data-api-key` to your root layout.
**Next.js (App Router)**
Use `next/script` with the data attributes. Add the component to your root layout. The widget then shows on every page.
```tsx app/layout.tsx theme={"dark"}
import Script from 'next/script';
export default function RootLayout({ children }: { children: React.ReactNode }) {
return (
{children}
);
}
```
To start the widget from a component, remove `data-api-key` from the `Script` element. Then use the component from the React tab. Add `'use client'` at the top of the component file, because `init` runs only in the browser.
**React**
Add the script tag without `data-api-key` to `index.html`.
```html index.html theme={"dark"}
```
Start the widget in `useEffect`. Call `destroy()` in the cleanup function.
```tsx PaperlinkWidget.tsx theme={"dark"}
import { useEffect } from 'react';
export function PaperlinkWidget() {
useEffect(() => {
let chat: PaperlinkAI.ChatInstance | undefined;
let unmounted = false;
window.PaperlinkAIChatQueue = window.PaperlinkAIChatQueue || [];
window.PaperlinkAIChatQueue.push((PaperlinkAIChat) => {
if (!unmounted) chat = PaperlinkAIChat.init({ apiKey: 'pl_live_...' });
});
return () => {
unmounted = true;
chat?.destroy();
};
}, []);
return null;
}
```
Render `` once, near the root of your app. The `unmounted` flag stops a late `init` after the component is gone.
**Vue 3**
Add the script tag without `data-api-key` to `index.html`.
```html index.html theme={"dark"}
```
Start the widget in `onMounted`. Call `destroy()` in `onUnmounted`.
```vue PaperlinkWidget.vue theme={"dark"}
```
Use `` once, in your root component.
**Plain HTML**
Paste the script tag before ``.
```html Paste before theme={"dark"}