jarvin-widget
v1.0.1
Published
Jarvin chat widget — drop-in AI chat bubble for any website
Maintainers
intromatic.aiReadme
Jarvin Chat Widget
Drop-in AI chat bubble for any website. One script tag or one React component — that's it.
Option 1: Script Tag (any website)
Paste this before </body>:
<script
src="https://jarvin-widget-api.intromatic.ai/widget/v1/jarvin-widget.js"
data-api-key="YOUR_API_KEY"
></script>Done. The widget handles everything — renders the chat bubble, manages sessions, streams responses.
Option 2: React
npm install jarvin-widget @jarvinbyintromatic/reactimport { JarvinChatWidget } from '@jarvinbyintromatic/react';
function App() {
return <JarvinChatWidget apiKey="YOUR_API_KEY" />;
}Show only for logged-in users
import { JarvinChatWidget } from '@jarvinbyintromatic/react';
function App() {
const { user } = useAuth(); // your auth hook
return (
<>
{user && <JarvinChatWidget apiKey="YOUR_API_KEY" />}
{/* rest of your app */}
</>
);
}The widget cleans up automatically when unmounted — no manual DOM cleanup needed.
Option 3: Next.js
npm install jarvin-widget @jarvinbyintromatic/react @jarvinbyintromatic/nextjsimport { JarvinChatWidget } from '@jarvinbyintromatic/nextjs';
export default function RootLayout({ children }) {
return (
<html>
<body>
{children}
<JarvinChatWidget apiKey="YOUR_API_KEY" />
</body>
</html>
);
}SSR-safe out of the box — the component loads client-side only.
Props
| Prop | Type | Required | Description |
|------|------|----------|-------------|
| apiKey | string | Yes | Your Jarvin public API key (jvn_pub_...) |
| apiUrl | string | No | Custom API URL (defaults to Jarvin cloud) |
| defaultOpen | boolean | No | Open the chat panel on load |
Programmatic Access (script tag only)
When using the script tag, the widget exposes window.__jarvinWidget:
window.__jarvinWidget.open();
window.__jarvinWidget.close();
window.__jarvinWidget.toggle();How It Works
- Shadow DOM — the widget renders inside a closed Shadow DOM so it never conflicts with your site's styles
- Session persistence — conversations persist in localStorage across page loads
- SSE streaming — responses stream in real-time, token by token
- Auto-cleanup — unmounting the React/Next.js component removes all widget DOM elements automatically