{"kind":"markdown","meta":{"entryType":"library","name":"Klunq Widget","slug":"klunqlabs-klunq-widget","shortDescription":"Embeddable Preact AI chat widget with Shadow DOM styling and browser automation tools.","category":"developer-tools","compatibilityStatus":"experimental","maintenanceStatus":"active","typescriptSupport":"native","ssrSupport":"unsupported","packageName":"@klunqlabs/klunq-widget","repositoryUrl":"https://github.com/klunqlabs/klunq-widget","documentationUrl":"https://github.com/klunqlabs/klunq-widget#readme","homepageUrl":"https://github.com/klunqlabs/klunq-widget","npmUrl":"https://www.npmjs.com/package/@klunqlabs/klunq-widget","license":"MIT","installCommand":"npm install @klunqlabs/klunq-widget","featured":false,"islands":true,"esm":true,"tags":["ai","chat-widget","browser-automation"],"limitations":["The documented embed attributes expose the model API key to every visitor; production deployments need a restricted disposable key or a controlled server proxy.","The agent can read page markup, click controls, fill fields, and navigate links, so it must not be embedded on sensitive pages without a threat model and strict provider controls.","Ships as a roughly 250 KB gzipped standalone bundle with its own Preact and LangChain runtime rather than integrating into the host Preact tree."],"qualityBadges":[],"alternatives":["vercel-ai-sdk","deepgram-agents-widget"],"library":{"name":"Klunq Widget","slug":"klunqlabs-klunq-widget","shortDescription":"Embeddable Preact AI chat widget with Shadow DOM styling and browser automation tools.","category":"developer-tools","categories":["developer-tools"],"packageName":"@klunqlabs/klunq-widget","repositoryUrl":"https://github.com/klunqlabs/klunq-widget","npmUrl":"https://www.npmjs.com/package/@klunqlabs/klunq-widget","documentationUrl":"https://github.com/klunqlabs/klunq-widget#readme","homepageUrl":"https://github.com/klunqlabs/klunq-widget","license":"MIT","compatibilityStatus":"experimental","testedPreactVersions":[],"typescriptSupport":"native","ssrSupport":"unsupported","maintenanceStatus":"active","installCommand":"npm install @klunqlabs/klunq-widget","limitations":["The documented embed attributes expose the model API key to every visitor; production deployments need a restricted disposable key or a controlled server proxy.","The agent can read page markup, click controls, fill fields, and navigate links, so it must not be embedded on sensitive pages without a threat model and strict provider controls.","Ships as a roughly 250 KB gzipped standalone bundle with its own Preact and LangChain runtime rather than integrating into the host Preact tree."],"alternatives":["vercel-ai-sdk","deepgram-agents-widget"],"tags":["ai","chat-widget","browser-automation"],"featured":false,"islands":true,"esm":true,"qualityBadges":[],"catalogDomain":"preact","route":"/libraries/klunqlabs-klunq-widget","file":"entries/klunqlabs-klunq-widget.md","description":"Embeddable Preact AI chat widget with Shadow DOM styling and browser automation tools.","compatibility":"partial","status":"experimental","typescript":true,"ssr":false,"repository":"https://github.com/klunqlabs/klunq-widget","documentation":"https://github.com/klunqlabs/klunq-widget#readme","homepage":"https://github.com/klunqlabs/klunq-widget"},"libraryAlternatives":[{"slug":"vercel-ai-sdk","name":"Vercel AI SDK","route":"/libraries/vercel-ai-sdk"},{"slug":"deepgram-agents-widget","name":"Deepgram Agents Widget","route":"/libraries/deepgram-agents-widget"}],"relatedProjects":[{"name":"Deepgram Agents Widget","slug":"deepgram-agents-widget","shortDescription":"Self-contained Deepgram Voice Agent widget with bundled Preact runtime.","category":"developer-tools","categories":["developer-tools"],"packageName":"@deepgram/agents-widget","repositoryUrl":"https://github.com/deepgram/agent/tree/main/packages/widget","npmUrl":"https://www.npmjs.com/package/@deepgram/agents-widget","documentationUrl":"https://github.com/deepgram/agent/tree/main/packages/widget#readme","homepageUrl":"https://github.com/deepgram/agent/tree/main/packages/widget#readme","license":"MIT","compatibilityStatus":"experimental","testedPreactVersions":[],"typescriptSupport":"native","ssrSupport":"unsupported","maintenanceStatus":"active","installCommand":"npm install @deepgram/agents-widget","limitations":["Never expose Deepgram API keys in browser code; use `tokenFactory` that fetches short-lived tokens from your server.","Bundles Preact internally and aliases `@deepgram/ui` React components through `preact/compat`, so it is not a native Preact component library.","Tightly coupled to the Deepgram Agent API and widget layouts."],"alternatives":["deepgram-api"],"tags":["voice","ai","deepgram"],"featured":false,"islands":true,"esm":true,"qualityBadges":[],"catalogDomain":"preact","route":"/libraries/deepgram-agents-widget","file":"entries/deepgram-agents-widget.md","description":"Self-contained Deepgram Voice Agent widget with bundled Preact runtime.","compatibility":"partial","status":"experimental","typescript":true,"ssr":false,"repository":"https://github.com/deepgram/agent/tree/main/packages/widget","documentation":"https://github.com/deepgram/agent/tree/main/packages/widget#readme","homepage":"https://github.com/deepgram/agent/tree/main/packages/widget#readme"},{"name":"Kamod AI Audit","slug":"kamod-ai-audit","shortDescription":"Open-source audit engine for AI-agent readiness, semantic HTML, SEO, accessibility and structured data.","category":"developer-tools","categories":["developer-tools"],"packageName":"kamod-ai-audit","repositoryUrl":"https://github.com/kamod-ch/kamod-ai-audit","npmUrl":"https://www.npmjs.com/package/kamod-ai-audit","documentationUrl":"https://github.com/kamod-ch/kamod-ai-audit#readme","homepageUrl":"https://github.com/kamod-ch/kamod-ai-audit","license":"MIT","compatibilityStatus":"experimental","testedPreactVersions":[],"typescriptSupport":"native","ssrSupport":"unsupported","maintenanceStatus":"active","installCommand":"npm install kamod-ai-audit","alternatives":["preacthub"],"tags":["audit","seo","accessibility","ai","cli"],"islands":false,"esm":true,"qualityBadges":["docs-complete"],"catalogDomain":"preact","route":"/libraries/kamod-ai-audit","file":"entries/kamod-ai-audit.md","description":"Open-source audit engine for AI-agent readiness, semantic HTML, SEO, accessibility and structured data.","compatibility":"partial","status":"experimental","typescript":true,"ssr":false,"repository":"https://github.com/kamod-ch/kamod-ai-audit","documentation":"https://github.com/kamod-ch/kamod-ai-audit#readme","homepage":"https://github.com/kamod-ch/kamod-ai-audit"},{"name":"@preact/preset-vite","slug":"preact-preset-vite","shortDescription":"Official Vite preset for Preact projects.","category":"developer-tools","categories":["developer-tools"],"packageName":"@preact/preset-vite","npmUrl":"https://www.npmjs.com/package/%40preact%2Fpreset-vite","compatibilityStatus":"native","testedPreactVersions":[],"typescriptSupport":"native","ssrSupport":"supported","maintenanceStatus":"active","installCommand":"npm install @preact/preset-vite","tags":["vite","tooling","build"],"islands":true,"esm":true,"qualityBadges":[],"catalogDomain":"preact","route":"/libraries/preact-preset-vite","file":"entries/preact-preset-vite.md","description":"Official Vite preset for Preact projects.","compatibility":"native","status":"recommended","typescript":true,"ssr":true},{"name":"Clean JSDoc Theme Rang","slug":"clean-jsdoc-theme-rang","shortDescription":"Preact component library, MDX map and island registry for Clean JSDoc Theme v5.","category":"developer-tools","categories":["developer-tools"],"packageName":"@clean-jsdoc-theme/rang","repositoryUrl":"https://github.com/ankitskvmdam/clean-jsdoc-theme","npmUrl":"https://www.npmjs.com/package/@clean-jsdoc-theme/rang","documentationUrl":"https://github.com/ankitskvmdam/clean-jsdoc-theme/blob/master/docs/ARCHITECTURE.md","license":"MIT","compatibilityStatus":"native","testedPreactVersions":[],"typescriptSupport":"native","ssrSupport":"supported","maintenanceStatus":"active","installCommand":"npm install @clean-jsdoc-theme/rang","limitations":["Designed for Clean JSDoc Theme v5 page shells rather than general-purpose app UI.","Reuse outside the dwar/rang architecture requires reviewing island registry contracts."],"tags":["documentation","islands","mdx"],"featured":false,"islands":true,"esm":true,"qualityBadges":[],"catalogDomain":"preact","route":"/libraries/clean-jsdoc-theme-rang","file":"entries/clean-jsdoc-theme-rang.md","description":"Preact component library, MDX map and island registry for Clean JSDoc Theme v5.","compatibility":"native","status":"recommended","typescript":true,"ssr":true,"repository":"https://github.com/ankitskvmdam/clean-jsdoc-theme","documentation":"https://github.com/ankitskvmdam/clean-jsdoc-theme/blob/master/docs/ARCHITECTURE.md"},{"name":"CSS Hooks Preact","slug":"css-hooks-preact","shortDescription":"CSS-in-JS hooks for conditional inline styles in Preact components.","category":"developer-tools","categories":["developer-tools"],"packageName":"@css-hooks/preact","repositoryUrl":"https://github.com/css-hooks/css-hooks","npmUrl":"https://www.npmjs.com/package/@css-hooks/preact","documentationUrl":"https://css-hooks.com","license":"MIT","compatibilityStatus":"native","testedPreactVersions":[],"typescriptSupport":"native","ssrSupport":"supported","maintenanceStatus":"active","installCommand":"npm install @css-hooks/preact","limitations":["Relies on modern CSS variable features; verify browser support for your audience.","SSR and hydration behavior should be validated when styles depend on client-only measurements."],"tags":["styling","css-in-js","inline-styles"],"featured":false,"islands":true,"esm":true,"qualityBadges":[],"catalogDomain":"preact","route":"/libraries/css-hooks-preact","file":"entries/css-hooks-preact.md","description":"CSS-in-JS hooks for conditional inline styles in Preact components.","compatibility":"native","status":"recommended","typescript":true,"ssr":true,"repository":"https://github.com/css-hooks/css-hooks","documentation":"https://css-hooks.com"},{"name":"Extension.js","slug":"extension-js","shortDescription":"Cross-browser extension framework with first-class Preact support and HMR.","category":"developer-tools","categories":["developer-tools"],"packageName":"extension","repositoryUrl":"https://github.com/extension-js/extension.js","npmUrl":"https://www.npmjs.com/package/extension","documentationUrl":"https://extension.js.org/","homepageUrl":"https://extension.js.org/","license":"MIT","compatibilityStatus":"native","testedPreactVersions":[],"typescriptSupport":"native","ssrSupport":"unsupported","maintenanceStatus":"active","installCommand":"npm install -D extension","limitations":["Targets browser extension runtimes rather than conventional web applications.","Preact is one supported frontend option alongside React, Vue and Svelte templates."],"tags":["browser-extension","manifest-v3","hmr"],"featured":false,"islands":false,"esm":true,"qualityBadges":[],"catalogDomain":"preact","route":"/libraries/extension-js","file":"entries/extension-js.md","description":"Cross-browser extension framework with first-class Preact support and HMR.","compatibility":"native","status":"recommended","typescript":true,"ssr":false,"repository":"https://github.com/extension-js/extension.js","documentation":"https://extension.js.org/","homepage":"https://extension.js.org/"}],"libraryEditorial":{"example":{"language":"html","code":"\u003cscript\n src=\"https://cdn.jsdelivr.net/npm/@klunqlabs/klunq-widget@1.0.3/dist/klunq-widget.js\"\n data-model=\"local-model\"\n data-api-key=\"ollama\"\n data-base-url=\"http://localhost:11434/v1\"\n data-scope=\"page\"\n>\u003c/script>"},"limitations":["The documented embed attributes expose the model API key to every visitor; production deployments need a restricted disposable key or a controlled server proxy.","The agent can read page markup, click controls, fill fields, and navigate links, so it must not be embedded on sensitive pages without a threat model and strict provider controls.","Ships as a roughly 250 KB gzipped standalone bundle with its own Preact and LangChain runtime rather than integrating into the host Preact tree."],"supplementalSections":[{"title":"Introduction","body":"`@klunqlabs/klunq-widget` is a self-contained AI chat and browser-agent widget built with Preact, LangChain, and Tailwind CSS. Its IIFE bundle creates a floating interface in a closed Shadow DOM and talks to OpenAI-compatible endpoints such as OpenAI, Ollama, or a proxy."},{"title":"Preact configuration","body":"No host Preact setup is required because the widget bundles and mounts its own Preact application. Configure it with `data-model`, `data-api-key`, and `data-base-url` attributes on the script tag. Do not place a long-lived production secret in those attributes."},{"title":"SSR notes","body":"The entry reads its script attributes, creates a Shadow DOM, monitors the API, and mounts into `document.body`; it is browser-only and should be loaded after server rendering."},{"title":"Islands notes","body":"The entire widget behaves as an independent island with isolated styles and its own Preact runtime. It does not share context, Signals, or component state with the host application."}]},"libraryCategory":{"slug":"developer-tools","name":"Developer Tools","description":"Build tools, integrations and development utilities.","icon":"⌘","section":"preact"}},"html":"\u003ch2 id=\"introduction\" class=\"pp-heading\">Introduction\u003ca class=\"pp-heading-anchor\" href=\"#introduction\" aria-label=\"Link to this section\">#\u003c/a>\u003c/h2>\n\u003cp>\u003ccode>@klunqlabs/klunq-widget\u003c/code> is a self-contained AI chat and browser-agent widget built with Preact, LangChain, and Tailwind CSS. Its IIFE bundle creates a floating interface in a closed Shadow DOM and talks to OpenAI-compatible endpoints such as OpenAI, Ollama, or a proxy.\u003c/p>\n\u003ch2 id=\"installation\" class=\"pp-heading\">Installation\u003ca class=\"pp-heading-anchor\" href=\"#installation\" aria-label=\"Link to this section\">#\u003c/a>\u003c/h2>\n\u003cdiv class=\"pp-code-block\" data-language=\"bash\">\u003cdiv class=\"pp-code-lang\" aria-hidden=\"true\">bash\u003c/div>\u003cbutton class=\"pp-code-copy\" type=\"button\" aria-label=\"Copy code\" data-copied-label=\"Copied\" data-copy-icon=\"<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M8 7a3 3 0 0 1 3-3h6a3 3 0 0 1 3 3v6a3 3 0 0 1-3 3h-1v1a3 3 0 0 1-3 3H7a3 3 0 0 1-3-3v-6a3 3 0 0 1 3-3h1V7Zm2 1h3a3 3 0 0 1 3 3v3h1a1 1 0 0 0 1-1V7a1 1 0 0 0-1-1h-6a1 1 0 0 0-1 1v1Zm-3 2a1 1 0 0 0-1 1v6a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1v-6a1 1 0 0 0-1-1H7Z"/></svg>\" data-check-icon=\"<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M9.55 16.2 5.8 12.45a1 1 0 0 0-1.42 1.42l4.46 4.46a1 1 0 0 0 1.42 0L20.03 8.56a1 1 0 1 0-1.42-1.42L9.55 16.2Z"/></svg>\">\u003cspan class=\"pp-code-copy-icon\" aria-hidden=\"true\">\u003csvg viewBox=\"0 0 24 24\" aria-hidden=\"true\">\u003cpath d=\"M8 7a3 3 0 0 1 3-3h6a3 3 0 0 1 3 3v6a3 3 0 0 1-3 3h-1v1a3 3 0 0 1-3 3H7a3 3 0 0 1-3-3v-6a3 3 0 0 1 3-3h1V7Zm2 1h3a3 3 0 0 1 3 3v3h1a1 1 0 0 0 1-1V7a1 1 0 0 0-1-1h-6a1 1 0 0 0-1 1v1Zm-3 2a1 1 0 0 0-1 1v6a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1v-6a1 1 0 0 0-1-1H7Z\"/>\u003c/svg>\u003c/span>\u003c/button>\u003cpre class=\"shiki shiki-themes vitesse-light vitesse-dark\" style=\"background-color:#ffffff;--shiki-dark-bg:#121212;color:#393a34;--shiki-dark:#dbd7caee\" tabindex=\"0\">\u003ccode>\u003cspan class=\"line\">\u003cspan style=\"color:#59873A;--shiki-dark:#80A665\">npm\u003c/span>\u003cspan style=\"color:#B56959;--shiki-dark:#C98A7D\"> install\u003c/span>\u003cspan style=\"color:#B56959;--shiki-dark:#C98A7D\"> @klunqlabs/klunq-widget\u003c/span>\u003c/span>\n\u003cspan class=\"line\">\u003c/span>\u003c/code>\u003c/pre>\u003c/div>\u003cp>The intended deployment is the package’s prebuilt \u003ccode>dist/klunq-widget.js\u003c/code>, often pinned through jsDelivr rather than imported as reusable Preact components.\u003c/p>\n\u003ch2 id=\"preact-configuration\" class=\"pp-heading\">Preact configuration\u003ca class=\"pp-heading-anchor\" href=\"#preact-configuration\" aria-label=\"Link to this section\">#\u003c/a>\u003c/h2>\n\u003cp>No host Preact setup is required because the widget bundles and mounts its own Preact application. Configure it with \u003ccode>data-model\u003c/code>, \u003ccode>data-api-key\u003c/code>, and \u003ccode>data-base-url\u003c/code> attributes on the script tag. Do not place a long-lived production secret in those attributes.\u003c/p>\n\u003ch2 id=\"example\" class=\"pp-heading\">Example\u003ca class=\"pp-heading-anchor\" href=\"#example\" aria-label=\"Link to this section\">#\u003c/a>\u003c/h2>\n\u003cdiv class=\"pp-code-block\" data-language=\"html\">\u003cdiv class=\"pp-code-lang\" aria-hidden=\"true\">html\u003c/div>\u003cbutton class=\"pp-code-copy\" type=\"button\" aria-label=\"Copy code\" data-copied-label=\"Copied\" data-copy-icon=\"<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M8 7a3 3 0 0 1 3-3h6a3 3 0 0 1 3 3v6a3 3 0 0 1-3 3h-1v1a3 3 0 0 1-3 3H7a3 3 0 0 1-3-3v-6a3 3 0 0 1 3-3h1V7Zm2 1h3a3 3 0 0 1 3 3v3h1a1 1 0 0 0 1-1V7a1 1 0 0 0-1-1h-6a1 1 0 0 0-1 1v1Zm-3 2a1 1 0 0 0-1 1v6a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1v-6a1 1 0 0 0-1-1H7Z"/></svg>\" data-check-icon=\"<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M9.55 16.2 5.8 12.45a1 1 0 0 0-1.42 1.42l4.46 4.46a1 1 0 0 0 1.42 0L20.03 8.56a1 1 0 1 0-1.42-1.42L9.55 16.2Z"/></svg>\">\u003cspan class=\"pp-code-copy-icon\" aria-hidden=\"true\">\u003csvg viewBox=\"0 0 24 24\" aria-hidden=\"true\">\u003cpath d=\"M8 7a3 3 0 0 1 3-3h6a3 3 0 0 1 3 3v6a3 3 0 0 1-3 3h-1v1a3 3 0 0 1-3 3H7a3 3 0 0 1-3-3v-6a3 3 0 0 1 3-3h1V7Zm2 1h3a3 3 0 0 1 3 3v3h1a1 1 0 0 0 1-1V7a1 1 0 0 0-1-1h-6a1 1 0 0 0-1 1v1Zm-3 2a1 1 0 0 0-1 1v6a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1v-6a1 1 0 0 0-1-1H7Z\"/>\u003c/svg>\u003c/span>\u003c/button>\u003cpre class=\"shiki shiki-themes vitesse-light vitesse-dark\" style=\"background-color:#ffffff;--shiki-dark-bg:#121212;color:#393a34;--shiki-dark:#dbd7caee\" tabindex=\"0\">\u003ccode>\u003cspan class=\"line\">\u003cspan style=\"color:#999999;--shiki-dark:#666666\"><\u003c/span>\u003cspan style=\"color:#1E754F;--shiki-dark:#4D9375\">script\u003c/span>\u003c/span>\n\u003cspan class=\"line\">\u003cspan style=\"color:#B07D48;--shiki-dark:#BD976A\"> src\u003c/span>\u003cspan style=\"color:#999999;--shiki-dark:#666666\">=\u003c/span>\u003cspan style=\"color:#B5695977;--shiki-dark:#C98A7D77\">\"\u003c/span>\u003cspan style=\"color:#B56959;--shiki-dark:#C98A7D\">https://cdn.jsdelivr.net/npm/@klunqlabs/klunq-widget@1.0.3/dist/klunq-widget.js\u003c/span>\u003cspan style=\"color:#B5695977;--shiki-dark:#C98A7D77\">\"\u003c/span>\u003c/span>\n\u003cspan class=\"line\">\u003cspan style=\"color:#B07D48;--shiki-dark:#BD976A\"> data-model\u003c/span>\u003cspan style=\"color:#999999;--shiki-dark:#666666\">=\u003c/span>\u003cspan style=\"color:#B5695977;--shiki-dark:#C98A7D77\">\"\u003c/span>\u003cspan style=\"color:#B56959;--shiki-dark:#C98A7D\">local-model\u003c/span>\u003cspan style=\"color:#B5695977;--shiki-dark:#C98A7D77\">\"\u003c/span>\u003c/span>\n\u003cspan class=\"line\">\u003cspan style=\"color:#B07D48;--shiki-dark:#BD976A\"> data-api-key\u003c/span>\u003cspan style=\"color:#999999;--shiki-dark:#666666\">=\u003c/span>\u003cspan style=\"color:#B5695977;--shiki-dark:#C98A7D77\">\"\u003c/span>\u003cspan style=\"color:#B56959;--shiki-dark:#C98A7D\">ollama\u003c/span>\u003cspan style=\"color:#B5695977;--shiki-dark:#C98A7D77\">\"\u003c/span>\u003c/span>\n\u003cspan class=\"line\">\u003cspan style=\"color:#B07D48;--shiki-dark:#BD976A\"> data-base-url\u003c/span>\u003cspan style=\"color:#999999;--shiki-dark:#666666\">=\u003c/span>\u003cspan style=\"color:#B5695977;--shiki-dark:#C98A7D77\">\"\u003c/span>\u003cspan style=\"color:#B56959;--shiki-dark:#C98A7D\">http://localhost:11434/v1\u003c/span>\u003cspan style=\"color:#B5695977;--shiki-dark:#C98A7D77\">\"\u003c/span>\u003c/span>\n\u003cspan class=\"line\">\u003cspan style=\"color:#B07D48;--shiki-dark:#BD976A\"> data-scope\u003c/span>\u003cspan style=\"color:#999999;--shiki-dark:#666666\">=\u003c/span>\u003cspan style=\"color:#B5695977;--shiki-dark:#C98A7D77\">\"\u003c/span>\u003cspan style=\"color:#B56959;--shiki-dark:#C98A7D\">page\u003c/span>\u003cspan style=\"color:#B5695977;--shiki-dark:#C98A7D77\">\"\u003c/span>\u003c/span>\n\u003cspan class=\"line\">\u003cspan style=\"color:#999999;--shiki-dark:#666666\">></\u003c/span>\u003cspan style=\"color:#1E754F;--shiki-dark:#4D9375\">script\u003c/span>\u003cspan style=\"color:#999999;--shiki-dark:#666666\">>\u003c/span>\u003c/span>\n\u003cspan class=\"line\">\u003c/span>\u003c/code>\u003c/pre>\u003c/div>\u003cp>For public deployments, route requests through a server-side proxy with narrowly scoped credentials instead.\u003c/p>\n\u003ch2 id=\"ssr-notes\" class=\"pp-heading\">SSR notes\u003ca class=\"pp-heading-anchor\" href=\"#ssr-notes\" aria-label=\"Link to this section\">#\u003c/a>\u003c/h2>\n\u003cp>The entry reads its script attributes, creates a Shadow DOM, monitors the API, and mounts into \u003ccode>document.body\u003c/code>; it is browser-only and should be loaded after server rendering.\u003c/p>\n\u003ch2 id=\"islands-notes\" class=\"pp-heading\">Islands notes\u003ca class=\"pp-heading-anchor\" href=\"#islands-notes\" aria-label=\"Link to this section\">#\u003c/a>\u003c/h2>\n\u003cp>The entire widget behaves as an independent island with isolated styles and its own Preact runtime. It does not share context, Signals, or component state with the host application.\u003c/p>\n\u003ch2 id=\"known-limitations\" class=\"pp-heading\">Known limitations\u003ca class=\"pp-heading-anchor\" href=\"#known-limitations\" aria-label=\"Link to this section\">#\u003c/a>\u003c/h2>\n\u003cp>Client-visible credentials are the primary security risk. Browser tools can operate on the host document, while the closed Shadow DOM and bundled runtime make customization and host-level integration limited.\u003c/p>\n\u003ch2 id=\"alternatives\" class=\"pp-heading\">Alternatives\u003ca class=\"pp-heading-anchor\" href=\"#alternatives\" aria-label=\"Link to this section\">#\u003c/a>\u003c/h2>\n\u003cp>Build a controlled custom chat UI with \u003ca href=\"/libraries/vercel-ai-sdk\">Vercel AI SDK\u003c/a>, or use \u003ca href=\"/libraries/deepgram-agents-widget\">Deepgram Agents Widget\u003c/a> for voice-agent interfaces with server-issued tokens.\u003c/p>\n","tags":["ai","chat-widget","browser-automation"],"pageType":"website","headings":[{"id":"introduction","text":"Introduction","level":2},{"id":"installation","text":"Installation","level":2},{"id":"preact-configuration","text":"Preact configuration","level":2},{"id":"example","text":"Example","level":2},{"id":"ssr-notes","text":"SSR notes","level":2},{"id":"islands-notes","text":"Islands notes","level":2},{"id":"known-limitations","text":"Known limitations","level":2},{"id":"alternatives","text":"Alternatives","level":2}],"relativePath":"libraries/entries/klunqlabs-klunq-widget.md","lastUpdated":"2026-09-11T09:41:28.220Z","title":"Klunq Widget for Preact – Compatibility, Setup and Alternatives","description":"Embeddable Preact AI chat widget with Shadow DOM styling and browser automation tools. Review Klunq Widget compatibility with Preact, TypeScript and SSR support on PreactHub."}
Compatibility is possible but still being validated for production Preact use.
Known limitations
The documented embed attributes expose the model API key to every visitor; production deployments need a restricted disposable key or a controlled server proxy.
The agent can read page markup, click controls, fill fields, and navigate links, so it must not be embedded on sensitive pages without a threat model and strict provider controls.
Ships as a roughly 250 KB gzipped standalone bundle with its own Preact and LangChain runtime rather than integrating into the host Preact tree.