{"_id":"@agentic-dashboard/web-chatbot","name":"@agentic-dashboard/web-chatbot","dist-tags":{"latest":"0.0.1"},"versions":{"0.0.1":{"name":"@agentic-dashboard/web-chatbot","version":"0.0.1","private":false,"description":"Embeddable website chatbot with a custom element and React wrapper for Agentic Dashboard published agents.","license":"UNLICENSED","type":"module","main":"./dist/index.cjs","module":"./dist/index.js","types":"./dist/index.d.ts","repository":{"type":"git","url":"git+https://github.com/smartshiphubpte/agentic-dashboard.git","directory":"packages/web-chatbot"},"bugs":{"url":"https://github.com/smartshiphubpte/agentic-dashboard/issues"},"homepage":"https://github.com/smartshiphubpte/agentic-dashboard/tree/main/packages/web-chatbot","keywords":["agentic-dashboard","chatbot","widget","web-component","react"],"publishConfig":{"access":"public"},"exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js","require":"./dist/index.cjs"},"./web-component":{"types":"./dist/web-component.d.ts","import":"./dist/web-component.js","require":"./dist/web-component.cjs"}},"scripts":{"build":"npm run build:types && vite build","build:types":"tsc -p tsconfig.build.json","typecheck":"tsc -p tsconfig.build.json --noEmit"},"peerDependencies":{"react":">=18"},"_id":"@agentic-dashboard/web-chatbot@0.0.1","gitHead":"317ac7f8092c63d3f666e03293698c38c6a9ddaa","_nodeVersion":"22.15.1","_npmVersion":"10.9.2","dist":{"integrity":"sha512-BHcLdHhJ17j+NgepjlnXJxZIP3OGML8QnkssTxry7zoMyb3Q0mXzBbFFySMEHdWLSceqaLBgBHDTx6DcrPmozw==","shasum":"424d0f84382943b168ef39c70088e030c6eb5e21","tarball":"https://registry.npmjs.org/@agentic-dashboard/web-chatbot/-/web-chatbot-0.0.1.tgz","fileCount":6,"unpackedSize":50460,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIQCEe/28emCLcHvaYSndj5QDuk22c0PaNiKJ4WTIFYJ/5gIgJ2qbT9S8XuXy63gibpv4rvzp2tzp+AjeE4c+TSQZLz8="}]},"_npmUser":{"name":"amolmagardev","email":"amolmagar.dev@gmail.com"},"directories":{},"maintainers":[{"name":"amolmagardev","email":"amolmagar.dev@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/web-chatbot_0.0.1_1777538182725_0.3620753531753431"},"_hasShrinkwrap":false}},"time":{"created":"2026-04-30T08:36:22.568Z","0.0.1":"2026-04-30T08:36:22.877Z","modified":"2026-04-30T08:36:23.132Z"},"maintainers":[{"name":"amolmagardev","email":"amolmagar.dev@gmail.com"}],"description":"Embeddable website chatbot with a custom element and React wrapper for Agentic Dashboard published agents.","homepage":"https://github.com/smartshiphubpte/agentic-dashboard/tree/main/packages/web-chatbot","keywords":["agentic-dashboard","chatbot","widget","web-component","react"],"repository":{"type":"git","url":"git+https://github.com/smartshiphubpte/agentic-dashboard.git","directory":"packages/web-chatbot"},"bugs":{"url":"https://github.com/smartshiphubpte/agentic-dashboard/issues"},"license":"UNLICENSED","readme":"# `@agentic-dashboard/web-chatbot`\n\nEmbeddable website chatbot for published Agentic Dashboard agents.\n\nThe package ships with:\n\n- a React wrapper: `@agentic-dashboard/web-chatbot`\n- a framework-agnostic custom element: `@agentic-dashboard/web-chatbot/web-component`\n\n## Install\n\n```bash\nnpm install @agentic-dashboard/web-chatbot\n```\n\n## How It Works\n\n1. Publish your agent in Agentic Dashboard.\n2. Keep your workspace API key on your server.\n3. From your backend, call `POST /web/widget-tokens` to mint a short-lived widget token.\n4. Render the widget in your frontend with `tokenEndpoint` or `getToken`.\n\nThe browser should never receive your long-lived workspace API key directly.\n\n## React Usage\n\n```tsx\nimport { AgenticChatbot } from \"@agentic-dashboard/web-chatbot\";\n\nexport function SupportWidget() {\n  return (\n    <AgenticChatbot\n      baseUrl=\"https://your-agentic-api.example.com\"\n      agent=\"acme.support-bot\"\n      tokenEndpoint=\"/api/agentic-widget-token\"\n      title=\"Acme support\"\n      subtitle=\"Answers from your published agent\"\n      welcomeMessage=\"Hi there. Ask about pricing, onboarding, or setup.\"\n      theme={{ accentColor: \"#0f766e\", radius: \"lg\" }}\n    />\n  );\n}\n```\n\n## Web Component Usage\n\n```ts\nimport { registerAgenticChatbot } from \"@agentic-dashboard/web-chatbot/web-component\";\n\nregisterAgenticChatbot();\n\nconst widget = document.querySelector(\"agentic-chatbot\");\n\nif (widget) {\n  widget.config = {\n    baseUrl: \"https://your-agentic-api.example.com\",\n    agent: \"acme.support-bot\",\n    tokenEndpoint: \"/api/agentic-widget-token\",\n    title: \"Acme support\",\n    subtitle: \"Answers from your published agent\",\n    welcomeMessage: \"Hi there. Ask about pricing, onboarding, or setup.\",\n    theme: {\n      accentColor: \"#0f766e\",\n      radius: \"lg\",\n    },\n  };\n}\n```\n\n```html\n<agentic-chatbot></agentic-chatbot>\n```\n\n## Backend Token Route Example\n\n```ts\nexport async function POST() {\n  const response = await fetch(\"https://your-agentic-api.example.com/web/widget-tokens\", {\n    method: \"POST\",\n    headers: {\n      \"Content-Type\": \"application/json\",\n      Authorization: `Bearer ${process.env.AGENTIC_API_KEY}`,\n    },\n    body: JSON.stringify({\n      agent: \"acme.support-bot\",\n      allowedOrigin: \"https://www.acme.com\",\n    }),\n  });\n\n  const payload = await response.json();\n  return Response.json(payload, { status: response.status });\n}\n```\n\n## API\n\n### `AgenticChatbot`\n\nReact component wrapper for the custom element.\n\n### `registerAgenticChatbot()`\n\nRegisters the `<agentic-chatbot>` custom element.\n\n### `AgenticChatbotConfig`\n\n```ts\ntype AgenticChatbotConfig = {\n  baseUrl: string;\n  agent: string;\n  tokenEndpoint?: string;\n  getToken?: () => Promise<{ token: string; expiresAt?: string }>;\n  title?: string;\n  subtitle?: string;\n  welcomeMessage?: string;\n  placeholder?: string;\n  metadata?: Record<string, unknown>;\n  visitorId?: string;\n  historyLimit?: number;\n  position?: \"bottom-right\" | \"bottom-left\";\n  theme?: {\n    accentColor?: string;\n    radius?: \"sm\" | \"md\" | \"lg\";\n  };\n};\n```\n\n## Notes\n\n- The widget stores chat history in `sessionStorage`.\n- The widget uses short-lived bearer tokens for browser requests.\n- Tool traces and file uploads are intentionally not exposed in v1.\n","readmeFilename":"README.md","_rev":"1-560b41f43d2ce1bd5510c989ca7990cf"}