{"_id":"@agent-ui.net/react","name":"@agent-ui.net/react","dist-tags":{"latest":"1.0.0"},"versions":{"1.0.0":{"name":"@agent-ui.net/react","version":"1.0.0","description":"Official React & Next.js client widget and hooks for Agent-UI autonomous AI chatbots.","author":"Agent-UI <support@agent-ui.net>","license":"MIT","homepage":"https://agent-ui.net","bugs":{"url":"https://github.com/ArmanGrigorian/v-assistant/issues"},"repository":{"type":"git","url":"https://github.com/ArmanGrigorian/v-assistant.git","directory":"packages/react"},"keywords":["agent-ui","ai","chatbot","widget","react","nextjs","support","live-chat","rag"],"main":"./dist/index.js","module":"./dist/index.mjs","types":"./dist/index.d.ts","exports":{".":{"types":{"import":"./dist/index.d.mts","require":"./dist/index.d.ts"},"import":"./dist/index.mjs","require":"./dist/index.js"}},"publishConfig":{"access":"public"},"peerDependencies":{"react":">=18.0.0","react-dom":">=18.0.0"},"devDependencies":{"@types/react":"^19.0.0","@types/react-dom":"^19.0.0","tsup":"^8.3.6","typescript":"^5.7.3"},"scripts":{"build":"tsup","dev":"tsup --watch","typecheck":"tsc --noEmit","clean":"rimraf dist"},"_id":"@agent-ui.net/react@1.0.0","dist":{"integrity":"sha512-KyeztXsAE8WlNbnpZYEl81NYn/1NLggVtRWuuZVuKGOAFcQoVP3gwlVOyFCmsXG0WFA4e6oj3tErhrQvm1Bo6Q==","shasum":"053d991eb63846ccca844e13d0346775a1ac2e73","tarball":"https://registry.npmjs.org/@agent-ui.net/react/-/react-1.0.0.tgz","fileCount":9,"unpackedSize":252310,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIQCwrV/cE2lnEZ9hZK0/uwQCTIpe60dc09lHiKGzMECrjwIgeRHk5HGLfuZqS2T3vTG06Zv5tVt7TVhcxjHW4gJnxlw="}]},"_npmUser":{"name":"arm00555","email":"armangrigorian.work@gmail.com"},"directories":{},"maintainers":[{"name":"arm00555","email":"armangrigorian.work@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/react_1.0.0_1788983795963_0.711001867197407"},"_hasShrinkwrap":false}},"time":{"created":"2026-09-09T19:56:35.734Z","1.0.0":"2026-09-09T19:56:36.103Z","modified":"2026-09-09T19:56:36.429Z"},"maintainers":[{"name":"arm00555","email":"armangrigorian.work@gmail.com"}],"description":"Official React & Next.js client widget and hooks for Agent-UI autonomous AI chatbots.","homepage":"https://agent-ui.net","keywords":["agent-ui","ai","chatbot","widget","react","nextjs","support","live-chat","rag"],"repository":{"type":"git","url":"https://github.com/ArmanGrigorian/v-assistant.git","directory":"packages/react"},"author":"Agent-UI <support@agent-ui.net>","bugs":{"url":"https://github.com/ArmanGrigorian/v-assistant/issues"},"license":"MIT","readme":"# @agent-ui.net/react\n\nOfficial React & Next.js client package for [Agent-UI](https://agent-ui.net) autonomous AI chatbots.\n\n[![npm version](https://img.shields.io/npm/v/@agent-ui.net/react.svg?style=flat-square)](https://www.npmjs.com/package/@agent-ui.net/react)\n[![license](https://img.shields.io/npm/l/@agent-ui.net/react.svg?style=flat-square)](LICENSE)\n\n---\n\n## Features\n\n- **Zero-Config Cloud Sync**: Automatically loads your chatbot's live Widget Studio settings (colors, starter prompts, sound themes, avatars).\n- **100% SSR & Next.js 15 App Router Safe**: Built-in isomorphic hydration barrier preventing any `window is not defined` or hydration mismatch errors.\n- **Frosted Glass (Glassmorphism)**: Translucent backdrop blur and dynamic adaptive contrast.\n- **Built-in Web Audio Synthesizer**: Subtle chime and bubble audio feedback without external asset loading.\n- **Two Rendering Modes**: Floating launcher (`<AgentUIWidget />`) and inline container (`<AgentUIInline />`).\n- **Headless React Hook (`useAgentUI`)**: Full programmatic control to open, close, and send messages from custom buttons.\n- **Authenticated Lead Capture**: Pass runtime user data (`name`, `email`, `metadata`) directly from NextAuth, Clerk, or Supabase.\n\n---\n\n## Installation\n\n```bash\nnpm install @agent-ui.net/react\n# or\npnpm add @agent-ui.net/react\n# or\nyarn add @agent-ui.net/react\n```\n\n---\n\n## Quick Start\n\n### 1. Floating Chat Widget\n\nAdd the widget to your root layout (`app/layout.tsx` in Next.js or `App.tsx` in Vite/CRA):\n\n```tsx\nimport { AgentUIWidget } from \"@agent-ui.net/react\";\n\nexport default function RootLayout({ children }: { children: React.ReactNode }) {\n  return (\n    <html lang=\"en\">\n      <body>\n        {children}\n\n        <AgentUIWidget chatbotId=\"YOUR_CHATBOT_ID\" />\n      </body>\n    </html>\n  );\n}\n```\n\n---\n\n### 2. Passing User Identity (Authenticated Sessions)\n\nAutomatically link conversations with logged-in user profiles:\n\n```tsx\n<AgentUIWidget\n  chatbotId=\"YOUR_CHATBOT_ID\"\n  user={{\n    name: session.user.name,\n    email: session.user.email,\n    metadata: {\n      plan: \"Pro\",\n      organizationId: \"org_12345\",\n    },\n  }}\n  onLeadCaptured={(user) => console.log(\"Lead captured:\", user)}\n/>\n```\n\n---\n\n### 3. Inline Container Embed (`<AgentUIInline />`)\n\nEmbed the assistant directly inside a dedicated `/support` page, modal, or split-screen dashboard:\n\n```tsx\nimport { AgentUIInline } from \"@agent-ui.net/react\";\n\nexport default function SupportPage() {\n  return (\n    <main className=\"max-w-4xl mx-auto py-12\">\n      <h1 className=\"text-2xl font-bold mb-6\">AI Help Center</h1>\n\n      <AgentUIInline\n        chatbotId=\"YOUR_CHATBOT_ID\"\n        height=\"600px\"\n        glassmorphism={true}\n        primaryColor=\"#4f46e5\"\n      />\n    </main>\n  );\n}\n```\n\n---\n\n### 4. Headless Hook (`useAgentUI`)\n\nBuild custom trigger buttons, search palettes, floating badges, or entirely custom chat interfaces:\n\n```tsx\nimport { useAgentUI } from \"@agent-ui.net/react\";\n\nexport function HeaderSupportButton() {\n  const {\n    isOpen,\n    isLoading,\n    error,\n    messages,\n    unreadCount,\n    open,\n    close,\n    toggle,\n    sendMessage,\n    stop,\n    resetConversation,\n  } = useAgentUI({\n    chatbotId: \"YOUR_CHATBOT_ID\",\n    persistSession: true, // stores conversationId and visitorId in localStorage\n  });\n\n  return (\n    <button onClick={open} className=\"relative btn-primary\">\n      Talk to Support\n      {unreadCount > 0 && !isOpen && (\n        <span className=\"badge-count\">{unreadCount}</span>\n      )}\n    </button>\n  );\n}\n```\n\n---\n\n## Props Reference\n\n### `<AgentUIWidget />`\n\n| Prop | Type | Default | Description |\n| :--- | :--- | :--- | :--- |\n| `chatbotId` **(Required)** | `string` | — | Your unique chatbot ID from Agent-UI |\n| `apiUrl` | `string` | `\"https://agent-ui.net\"` | Custom API URL (useful for self-hosted instances) |\n| `theme` | `\"light\" \\| \"dark\" \\| \"auto\"` | Cloud config | Color scheme mode |\n| `primaryColor` | `string (HEX)` | Cloud config | Brand accent color for launcher & buttons |\n| `glassmorphism` | `boolean` | Cloud config | Enables frosted glass backdrop blur |\n| `borderRadius` | `number` | Cloud config | Window corner radius in pixels |\n| `position` | `\"bottom-right\" \\| \"bottom-left\"` | Cloud config | Floating anchor position |\n| `soundEnabled` | `boolean` | `true` | Enable or mute audio chimes |\n| `soundTheme` | `\"chime\" \\| \"bubble\" \\| \"pop\" \\| \"ping\" \\| \"none\"` | `\"chime\"` | Synthesized audio theme |\n| `removeBranding` | `boolean` | Cloud config | Hide 'Powered by Agent-UI' branding (Pro/Business) |\n| `user` | `AgentUIUser` | — | Authenticated user details |\n| `persistSession` | `boolean` | `true` | Persist conversationId and visitorId in localStorage |\n| `trigger` | `ReactNode \\| (state) => ReactNode` | — | Custom floating trigger button slot |\n| `onOpen` | `() => void` | — | Called when the chat window opens |\n| `onClose` | `() => void` | — | Called when the chat window closes |\n| `onMessage` | `(msg: AgentUIMessage) => void` | — | Called on message send and receive |\n| `onError` | `(error: Error) => void` | — | Called on network or streaming failure |\n\n---\n\n## License\n\nMIT © [Agent-UI](https://agent-ui.net)\n\n","readmeFilename":"","_rev":"1-1a1cf290fafcbf232f8fc7801896f54e"}